javascript数组里的27个方法总合详解

javascript数组里的27个方法总合详解

目录

1.concat()

2.copyWithin()

3.Object.entries()

4.every()

5.fill()

6.filter()

7.find()和findIndex()

8.forEach()

9.from()

10.includes()

11.indexOf()和lastIndexOf()

12.isArray()

13.join()

14.keys()

15.map()

16.pop()

17.push()

18.reduce()和reduceRight()

19.reverse()

20.shift()

21.slice()

22.some()

23.sort()

24.splice()

25.toString()

26.unshift

27.valueOf()

总结

1.concat()

concat() 方法用于连接两个或多个数组。方法不会更改现有数组,而是返回一个新数组,其中包含已连接数组的值。

var str1 = [1,2,3,4,5,6] var str2 = ['a','b','c','d','e'] console.log(str1.concat(str2));// [1, 2, 3, 4, 5, 6, 'a', 'b', 'c', 'd', 'e'] 2.copyWithin()

copyWithin() 复制数组的一部分数据覆盖到数组的另一个位置。会修改数组,但是不会修改数组的长度。

var str1 = [1,2,3,4,5,6] // 从索引为0开始复制,到索引1结束(不包括结束位置),替换到索引为2的位置, console.log(str1.copyWithin(2,0,1)); //[1, 2, 1, 4, 5, 6] // 因为省略一个参数,所以从索引为3位置后的所有元素,从索引为1开始复制替换 console.log(str1.copyWithin(1,3)); //[1, 4, 5, 6, 5, 6] 3.Object.entries()

返回一个数组,其元素是与直接在object上找到的可枚举属性键值对相对应的数组

var str3 = { 100: 'a', 2: 'b', 7: 'c' }; console.log(Object.entries(str3)); //['2', 'b']['7', 'c']['100', 'a'] 4.every()

every()方法用来判断数组的所有元素是否都满足指定的条件。

var str1 = [1,2,3,4,5,6] // 创造一个函数来作为判断条件 function checkAdult(value,index) { return value > 0; } // every() 方法用来判断数组的所有元素是否都满足指定的条件。 console.log(str1.every(checkAdult)); //true 5.fill()

fill()方法用来把数组所有元素替换成静态元素

var str1 = [1,2,3,4,5,6] console.log(str1.fill(1)); //[1, 1, 1, 1, 1, 1] 6.filter()

它用于把Array的某些元素过滤掉,然后返回剩下的元素。

var str1 = [1,2,3,4,5,6] console.log(str1.filter(function(x){return x > 2})); //[3, 4, 5, 6] 7.find()和findIndex()

find()返回数组中第一个通过测试的元素的值。

findIndex()返回数组中通过测试的第一个元素的索引。

var str1 = [1,2,3,4,5,6] console.log(str1.find(function(x){return x > 2})); //3 console.log(str1.findIndex(function(x){return x > 2})); //2 8.forEach()

forEach()为每个数组元素都调用函数。

var str1 = [1,2,3,4,5,6] str1.forEach(x => console.log(x)); //依次输出123456 9.from()

以对象创建数组。

console.log(Array.from('string')); //['s', 't', 'r', 'i', 'n', 'g'] 10.includes()

includes()检查数组是否包含指定的元素。第二个参数可以指定从哪个位置开始检测

var str1 = [1,2,3,4,5,6] console.log(str1.includes(2,0)); //true 11.indexOf()和lastIndexOf()

indexOf()在数组中搜索元素并返回其索引。第二个参数可以指定从哪个位置开始搜索

lastIndexOf()在数组的末尾开始搜索元素并返回其索引。第二个参数可以指定从哪个位置开始搜索

var str1 = [1,2,3,4,5,6] console.log(str1.indexOf(2,0)); //1 console.log(str1.lastIndexOf(2,5)); //1 12.isArray()

可以用来判断是否为数组对象

var str1 = [1,2,3,4,5,6] console.log(Array.isArray(str1)); //true 13.join()

将数组的所有元素连接成一个字符串。元素将由指定的分隔符分隔。默认分隔符是逗号 (,)。

var str2 = ['a','b','c','d','e'] const a = str2.join() console.log(a); //a,b,c,d,e const a = str2.join('') console.log(a); //abcde 14.keys()

返回一个数组,数组里的属性是数组所对应的键

var str3 = { 100: 'a', 2: 'b', 7: 'c' }; console.log(Object.keys(str3)); //['2', '7', '100'] //字符串则返回索引 console.log(Object.keys("string")); //['0', '1', '2', '3', '4', '5'] 15.map()

为每个数组元素调用函数的结果来创建新数组。

var str1 = [1,2,3,4,5,6] const a = str1.map(item => item * 10) console.log(a); // [10, 20, 30, 40, 50, 60] 16.pop()

删除数组的最后一个元素,并返回该元素。方法会改变数组的长度。

var str1 = [1,2,3,4,5,6] console.log(str1.pop(), str1); // 6 , [1, 2, 3, 4, 5] 17.push()

将新元素添加到数组的末尾,并返回新的长度。方法会改变数组的长度。

var str1 = [1,2,3,4,5,6] console.log(str1.push(7), str1); // 7 , [1, 2, 3, 4, 5, 6, 7] 18.reduce()和reduceRight()

reduce()执行顺序是从左到右                reduceRight()执行顺序是从右到左

为数组中的每一个元素依次执行回调函数,一般用于累加器。

有四个参数,第一个为初始值, 或者计算结束后的返回值。第二个为当前元素。第三个为当前元素的索引。第四个为当前元素所属的数组对象。

initiavalue:当数组为空时,可以设置传递给函数的初始值,放在对象的后面

var str1 = [1,2,3,4,5,6] // 累加器的使用 console.log(str1.reduce(function(total,num,index,add){return total+num}));// 21 //initiavalue的使用 var arr=[] console.log(arr.reduce(function(total){return total},0)); //0 19.reverse()

反转数组中元素的顺序。

var str1 = [1,2,3,4,5,6] console.log(str1.reverse()); // [6, 5, 4, 3, 2, 1] 20.shift()

删除数组的第一个元素,并返回该元素。

var str1 = [1,2,3,4,5,6] console.log(str1.shift(),str1); // 1 , [2, 3, 4, 5, 6] 21.slice()

选择数组的一部分,并返回新数组。

var str1 = [1,2,3,4,5,6] // 两个参数 从索引为1开始到索引为3结束,不包括结束位置,形成新数组 console.log(str1.slice(1,3)); // [2, 3] // 一个参数 表示从索引为1开始的所有元素形成一个新数组 console.log(str1.slice(1)); // [2, 3, 4, 5, 6] 22.some()

检查数组中的任何元素是否通过测试。和every()差不多

some如果遇到 true 就不在执行了。    如果都为 false 返回false。        不会改变原数组

var str1 = [1,2,3,4,5,6] function some(item,index,array){ return item>5 } console.log(str1.some(some)); //true function some(item,index,array){ return item>7 } console.log(str1.some(some)); //false 23.sort()

srot()如果不带参数,是将按字母顺序对数组中的元素进行排序,也就是是按照字符编码的顺序进行排序。

如果为number类型其实也不是按正常的从小到大排序,更像是根据元素的第一位数字的大小排序。

如果想正常进行从大到小  从小到大的排序。可以进行比较值的大小来实现。

从小到大,a-b的含义:a-b大于0,说明a大,则把a放在在后面。a-b小于0,说明b大,则b在后面。如果a-b等于0,则不变。        从大到小就是上面的相反,就不说了(不想写了,程序员的美德就是偷懒)

至于为什么是a - b,b - a可以去看这篇文章https://www.jb51.net/article/238275.htm

var arr1 = ['a', 'd', 'c', 'b']; arr.sort(); //['a', 'b', 'c', 'd'] var arr2 = [10, 5, 40, 25, 100, 1]; arr2.sort(); //[1, 10 ,100, 25, 40, 5] //从小到大的排序 var arr2 = [10, 5, 40, 25, 100, 1]; arr2.sort((a,b) => a-b) console.log(arr2); // [1, 5, 10, 25, 40, 100] //从大到小的排序 var arr2 = [10, 5, 40, 25, 100, 1]; arr2.sort((a,b) => b-a) console.log(arr2); // [100, 40, 25, 10, 5, 1] 24.splice()

从数组中添加/删除元素。

var str1 = [1,2,3,4,5,6] // 删除,从索引为1开始,删除2个 console.log(str1.splice(1,2), str1); // [2, 3] , [1, 4, 5, 6] // 添加,从索引为1开始到索引为2开始替换为'0' console.log(str1.splice(1,2,'0','0'), str1); // [2, 3] , [1, '0', '0', 4, 5, 6] 25.toString()

将数组转换为字符串,并返回结果。

var str1 = [1,2,3,4,5,6] console.log(str1.toString(), str1); // 1,2,3,4,5,6 [1, 2, 3, 4, 5, 6] 26.unshift

将新元素添加到数组的开头,并返回新的数组长度值。

var str1 = [1,2,3,4,5,6] console.log(str1.unshift(0), str1); // 7 , [0, 1, 2, 3, 4, 5, 6] 27.valueOf()

valueOf() 方法返回其自身。

var str1 = [1,2,3,4,5,6] str1.push(7) console.log(str1.valueOf(),str1); // [1, 2, 3, 4, 5, 6, 7] , [1, 2, 3, 4, 5, 6, 7] 总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注易知道(ezd.cc)的更多内容!    

推荐阅读