js取数组前10个_小白学JS总结的10个常用的数组操作函数

由于本人最近工作原因，学习时间相对少了一些，今天趁着周末抽空总结了一下这段时间学习的JS数常用的10个函数。

1.push()方法在数组尾部添加一个新的元素，需要注意的是，该方法返回值是得到的新数组的长度。

• 语法

arr.push(element1, element2, element3,...)

console.log(arr.push(1, 2, 3)); // 3console.log(arr); // [1, 2, 3]

2.pop()方法从数组中删除最后一个元素。

• 语法

arr.pop()

console.log(arr.pop()); // 3

3.unshift()方法向数组的头部添加一个或多个元素，并返回新的数组长度。

• 语法

arr.unshift(element1, element2, element3,...)

arr.unshift(1, 2, 3); // 3console.log(arr); // [1, 2, 3]

unshift方法不会创建新的数组，而是改变原来的数组。

4.join()按照指定分隔符将所有数组元素组合成为一个字符串。

• 语法

arr.join(separator)

其中，separator为分隔符，默认是使用逗号作为分隔符的，同时，该方法返回的是一个字符串，通过分隔符把arr中的每个元素连接起来。

arr = ["电脑", "手机", "相册"];let res = arr.join('-');console.log(res); // 电脑-手机-相册

在JS中，字符串也可以当做数组来操作：

let str = "Hello";console.log(str[0], str[1], str[2], str[3], str[4]); // H e l l o

5.concat()通过合并现有数组来创建一个新的数组。

• 语法

arr.concat(array1,array2,...,arrayX)

console.log("hello ".concat("world")); // hello worldconsole.log([1, 2, 3].concat([4, 5], [6, 7])); // [ 1, 2, 3, 4, 5, 6, 7 ]console.log([1, 2, 3].concat(123, ["php", true], { x: 1, y: 2 })); // [ 1, 2, 3, 123, "php", true, {x: 1,y: 2} ] 

6.slice()从已有的数组中选定元素并返回一个新数组。

• 语法

arr.slice(start, end)

• 参数说明：

参数说明start必填参数，规定从什么地方开始取。若是负数，将从数组尾部开始计算，-1表示数组的最后一个元素，-2表示数组的倒数第二个元素，以此类推。end这是一个可选参数，规定了从何处结束取值，并且取得位置不包含该值，如果没有指定该参数，则从start一直取到末尾。

arr = [1, 2, 3, 4, 5];console.log(arr.slice(0, 3)); // [ 1, 2, 3 ]console.log(arr.slice(3)); // [4, 5]console.log(arr.slice(-2)); // [4, 5]

7.splice()方法可以从数组添加/删除指定的元素，并且返回的是一个存储了被删除项目的数组。

• 语法

arr.splice(index, num, item1,item2,...,itemX)

• 参数说明

参数说明index必填参数，规定了从何处添加/删除数组，若是负数，将从数组尾部开始计算，-1表示数组的最后一个元素，-2表示数组的倒数第二个元素，以此类推。num必填参数，规定了要删除的项目数量，如果为0，则表示不删除项目。item1,item2,...,itemX向数组中添加的新项目，该参数为可选参数

splice()方法的返回值是一个数组，里面包含了被删除的元素。

arr = [1, 2, 3, 4, 5];res = arr.splice(2); // [ 3, 4, 5 ]

可以利用该方法更新一个数组里面的元素，例如：

arr = [1, 2, 3, 4, 5];res = arr.splice(1, 2, 88, 99);console.log(res); // [2, 3]

从上面代码可以获取res的值为一个数组，就是被删掉的元素2,3，同时原来的数组arr被修改成了[1, 88, 99, 4, 5]

8.sort()可以对数组元素进行排序。

arr.sort(orderby)

参数说明orderby可选参数，规定了排序方式，注意：该参数必须是一个函数。

• 解释：

sort()方法在参数留空的时候，默认是按照字母表的顺序排序的，如果要说得更准确的话，应该说它是按照元素的字符编码的顺序进行排序的。

如果是按照其他方法排序的话，就需要传一个函数进行比较了，该函数有两个参数a和b，然后我们比较这两个参数的差值即可得到排序：

• 当a - b < 0时，则a应该出现在b的前面，返回一个小于0的值；
• 当a - b = 0时，则返回0；
• 当a - b > 0时，则返回一个大于0的值

arr = ["p", "b", "a"];// 默认按照字符表顺序排序console.log(arr.sort()); // [ "a", "b", "p" ]

现在我们新创建一个数组并对其进行排序：

arr = [10, 9, 22, 4];console.log(arr.sort);

通过测试，可以发现，数组内部的元素并没有按照数值大小从小到大的顺序排列，结果如图：

要实现这个功能，就必须在sort()方法内部传一个函数：

function sortArray(a, b) {    return a - b;}console.log(arr.sort(sortArray));

以上方法可以使用箭头函数直接写在sort()方法内部：

console.log(arr.sort((a, b) => a - b));

这样就实现了排序，结果如图：

9.forEach()方法可以遍历数组。

• 语法

arr.forEach(function (item, index, array), this)

参数说明function (item, index, array)必填参数，每个元素调用的函数。item 当前遍历的元素；index 当前元素的索引；array 当前遍历的数组。thisValue可选参数，传递给函数的值使用this的值。

10.filter()方法可以过滤出符合指定条件的元素，并返回一个新的数组，该方法不会改变原始数组，而是创建一个新的数组。

arr.filter(function (item, index, array), thisValue)

参数说明function (item, index, array)必填参数，每个元素调用的函数。item 当前遍历的元素；index 当前元素的索引；array 当前遍历的数组。thisValue可选参数，传递给函数的值使用this的值。

• 案例：获取数组里面的所有偶数值：

arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];res = arr.filter(item => !(item % 2));console.log(res); // [ 2, 4, 6, 8, 10, 12 ]

以上肯定不是所有Javascript的数组操作方法，我也是总结的我所学习到的常用方法，如果还有其他的方法，欢迎大家在评论区补充，有写的不对的地方，烦请各位大佬批评指正。