【JS】数组的新增（插入）、修改、删除

最近欠了太多账了（头秃），趁着周末，总结一波（我实在是太容易混淆了）。

对数组进行增删改的操作，项目中还是比较常见的。奈何脑容量有限，思来想去，还是写写更能加深印象。

先说明一下，方法的定义是参考的MDN上面的。

1、push方法

将一个或多个元素添加到数组的末尾，并返回该数组的新长度。

语法：arr.push(element1, ..., elementN)

• elementN：被添加到数组末尾的元素

let arr = [1,2];
let count = arr.push(3);

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

常见的一种场景是先push，再遍历。

2、pop方法

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

语法：arr.pop()

let arr = [1,2,3,4];
arr.pop();  // 返回的是4,即被删除的元素

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

 3、unshift方法

将一个或多个元素添加到数组的开头，并返回该数组的新长度(该方法修改原有数组)。

语法：arr.unshift(element1, ..., elementN)

let arr = [4,5,6];
arr.unshift(1,2,3); // 返回数组长度6
console.log(arr); // [1, 2, 3, 4, 5, 6]

arr = [4,5,6]; // 重置数组
arr.unshift(1); // 返回数组长度4
arr.unshift(2); // 返回数组长度5
arr.unshift(3); // 返回数组长度6
console.log(arr); // [3, 2, 1, 4, 5, 6]

 4、shift方法

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

语法：arr.shift()

let arr = [1, 2, 3];

arr.shift();  // 返回结果1，arr为[2,3]

5、splice方法

通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

语法：array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

• start：指定修改的开始位置（从0计数）
• deleteCount（可选）：整数，表示要移除的数组元素的个数
• item1, item2, ...（可选）：要添加进数组的元素,从start位置开始。如果不指定，则splice将只删除数组元素

let arr = [1,2,3,4];
arr.splice(0, 1);  
// 从索引0的位置开始删除1个元素，这里返回的结果（被删除元素）是[1],arr为[2,3,4]

arr.splice(3, 0, 5, 6);  
// 从索引3的位置开始删除0个元素并插入两个元素5和6，这里返回的结果是[]，因为没有被删除
// 此时arr为[2,3,4,5,6]

arr.splice(2);
// 从索引2的位置开始删除所有的元素，这里的返回结果是[4,5,6]
// 此时的arr为[2,3]

像表格的列需要差异化、新增行等等都可以用到。 

6、slice方法

返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。 

语法：arr.slice([begin[, end]])

• begin（可选） 提取起始处的索引（从 0 开始），从该索引开始提取原数组元素
• end（可选） 提取终止处的索引（从 0 开始），在该索引处结束提取原数组元素slice 会提取原数组中索引从 begin 到 end 的所有元素（包含 begin，但不包含 end）

let arr = [1,2,3,4];
arr.slice();  // 返回[1,2,3,4]，arr=[1,2,3,4]

arr.slice(0, 1); // 返回[1]，arr=[1,2,3,4]

 7、concat方法

用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。

语法：var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])

• valueN（可选）数组和/或值，将被合并到一个新的数组中

const arr1 = ['a', 'b', 'c'];
const arr2 = ['d', 'e', 'f'];
const arr3 = arr1.concat(arr2);  // ['a','b','c','d','e','f']，arr1和arr2不变

let arr = [1,2,3,4];
arr.concat(5, [6,7]); // 返回的是[1,2,3,4,5,6,7]，原数组arr不受影响

 8、fill方法

用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。返回修改后的数组。

语法：arr.fill(value[, start[, end]])

• value： 用来填充数组元素的值
• start（可选）：起始索引，默认值为0
• end（可选）：终止索引，默认值为 this.length

let arr = [1,2,3,4];

arr.fill(8, 2, 3);  // 从索引2到索引3的位置都填充为8，[1,2,8,4]

arr.fill(6, 2);  // 从索引2往后的位置都填充为6，[1,2,6,6]

arr.fill(9);  // arr里的所有元素都填充为9，[9,9,9,9]

看完上面的几种方法后，总结一下，哪些方法是会改变原数组，哪些方法不会改变原数组？

方法	是否改变原数组
push	是
pop	是
unshift	是
shift	是
splice	是
slice	否
concat	否
fill	是

OK啦，关于数组的基本操作就到这里啦！希望大家可以一起交流，共同进步！