JS数组的常用10种方法详解

1、arr.push()

作用：将一个或多个元素添加到数组的末尾，并返回该数组的新长度。
参数：被添加到数组末尾的元素。
返回值：新的 length 属性值

var sports = ["soccer", "baseball"];
var total = sports.push("football", "swimming");
console.log(sports);
// ["soccer", "baseball", "football", "swimming"]
console.log(total);
// 4

2、arr.pop()

作用：从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度。
返回值：从数组中删除的元素(当数组为空时返回undefined)。

let myFish = ["angel", "clown", "mandarin", "surgeon"];
let popped = myFish.pop();
console.log(myFish);
// ["angel", "clown", "mandarin"]
console.log(popped);
// surgeon

3、unshift()

作用： 将一个或多个元素添加到数组的开头，并返回该数组的新长度(该方法修改原有数组)。
参数： 要添加到数组开头的元素或多个元素。
返回值：新的 length 属性值

let arr = [4, 5, 6];
let newArr = arr.unshift(1, 2, 3);
console.log(arr); 
// [1, 2, 3, 4, 5, 6]
console.log(newArr);
// 6

4、shift()

作用：从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。
返回值：从数组中删除的元素; 如果数组为空则返回undefined。

let myFish = ['angel', 'clown', 'mandarin', 'surgeon']
let shifted = myFish.shift();
console.log(myFish);
// ['clown', 'mandarin', 'surgeon']
console.log(shifted);
// clown

5、concat()

作用：用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。
参数：数组和/或值，被合并到一个新的数组中。如果省略了所有参数，则 concat 会返回调用
返回值：新的 Array 实例。

连接两个数组

let alpha = ['a', 'b', 'c'];
let numeric = [1, 2, 3];
alpha.concat(numeric);
// ['a', 'b', 'c', 1, 2, 3]

将值连接到数组

let alpha = ['a', 'b', 'c'];
let alphaNumeric = alpha.concat(1, [2, 3]);
console.log(alphaNumeric);
//  ['a', 'b', 'c', 1, 2, 3]

合并嵌套数组

let num1 = [[1]];
let num2 = [2, [3]];
let nums = num1.concat(num2);
console.log(nums);
// [[1], 2, [3]]

6、splice()

作用： 通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回 被修改的内容。此方法会改变原数组
参数：
(1)start：指定修改的开始位置（从0计数）,如果超出了数组的长度，则从数组末尾开始添加内容如果是负值，则表示从数组末位开始的第几位
(2)deleteCount:整数，表示要移除的数组元素的个数,可选
如果 deleteCount 被省略了,那么start之后数组的所有元素都会被删除。
如果 deleteCount 是 0 或者负数，则不移除元素。这种情况下，至少应添加一个新元素。
(3)item1, item2, …:要添加进数组的元素,从start 位置开始。如果不指定，则 splice() 将只删除数组元素,可选
返回值：由被删除的元素组成的一个数组

(1)从索引 2 的位置开始删除 1 个元素，插入“trumpet”

let myFish = ['angel', 'clown', 'drum', 'sturgeon'];
let removed = myFish.splice(2, 1, "trumpet");
console.log(myFish);
// ["angel", "clown", "trumpet", "sturgeon"]
console.log(removed);
// ["drum"]

(2)从索引 -2 的位置开始删除 1 个元素

let myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
let removed = myFish.splice(-2, 1);
console.log(myFish);
// ["angel", "clown", "sturgeon"]
console.log(removed);
// ["mandarin"]

(3)从索引 2 的位置开始删除所有元素

let myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
let removed = myFish.splice(2);
console.log(myFish);
// ["angel", "clown"]
console.log(removed);
// ["mandarin", "sturgeon"]

7、slice()

作用： 返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。
参数：
(1)begin 可选
提取起始处的索引（从 0 开始）
如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取
如果省略 begin，则 slice 从索引 0 开始。
如果 begin 超出原数组的索引范围，则会返回空数组。
(2)end 可选
提取终止处的索引（从 0 开始）
在该索引处结束提取原数组元素
slice 会提取原数组中索引从 begin 到 end 的所有元素（包含 begin，但不包含 end）。
如果该参数为负数， 则它表示在原数组中的倒数第几个元素结束抽取
如果 end 被省略或大于数组的长度，则 slice 会一直提取到原数组末尾。
返回值：一个含有被提取元素的新数组。

let fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
let citrus = fruits.slice(1, 3);
console.log(fruits);
// ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
console.log(citrus);
// ['Orange','Lemon']

8、join()

作用： 将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符。
参数：
separator 可选，用来指定一个字符串来分隔数组的每个元素
如果缺省该值，数组元素用逗号（,）分隔。
如果是空字符串("")，则所有元素之间都没有任何字符。
返回值：一个所有数组元素连接的字符串。如果 arr.length 为0，则返回空字符串。

let a = ['Wind', 'Rain', 'Fire'];
let myVar1 = a.join();      // myVar1的值变为"Wind,Rain,Fire"
let myVar2 = a.join(', ');  // myVar2的值变为"Wind, Rain, Fire"
let myVar3 = a.join(' + '); // myVar3的值变为"Wind + Rain + Fire"
let myVar4 = a.join('');    // myVar4的值变为"WindRainFire"

9、sort()

作用： 对数组的元素进行排序，并返回数组，默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列时构建的。
参数： compareFunction 可选
firstEl 第一个用于比较的元素。
secondEl 第二个用于比较的元素。
返回值：排序后的数组

let numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
  return a - b;
});
console.log(numbers);
// [1, 2, 3, 4, 5]

10、reverse()

作用： 将数组中元素的位置颠倒，并返回该数组，该方法会改变原数组。
返回值：颠倒后的数组。

const a = [1, 2, 3];
console.log(a); 
// [1, 2, 3]
a.reverse();
console.log(a); 
// [3, 2, 1]