JS 数组添加元素、删除元素、数组去重

一、往数组中添加元素

1.array.push()

push()方法会在数组尾部添加新元素，该方法会直接修改原数组。

let arr = [1,2]; arr.push(3); // [1,2,3] arr.push(4,5); // [1,2,3,4,5] 

2.array.unshift()

unshift()往数组头部添加新元素，该方法同样也会修改原数组。

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

3.array.splice()

slipce()方法可以在数组指定位置添加元素或者删除元素，它会修改原数组。

let arr = [1,2]; arr.splice(2,0,3); // [1,2,3]  // 第一个参数代表数组索引2，第二个参数是删除元素的数量（0就是删除0个），第三个参数是添加的元素 arr.unshift(4,5); // [4,5,3,1,2] 

4.扩展运算符

扩展运算符不仅能往数组中添加元素，还可以合并数组、将数组转为用逗号分割的参数序列、将类数组或者可遍历对象转为真实数组等。但扩展运算符不会修改原数组，它会将其结合生成一个新数组。

let arr = [1,2]; let brr = [...arr,3,4]; //[1,2,3,4] 添加元素 let crr = [5,6]; brr.push(...crr); //[1,2,3,4,5,6] 合并数组 let a = "ying"; console.log([...a]); // ['y', 'i', 'n', 'g'] 将字符串转为数组 

5.array.concat()

concat()连接两个数组，也可用于数组添加元素，它不会改变原数组。

let arr = [1,2]; arr.concat(3); // [1,2,3] arr.concat(4,5); // [1,2,3,4,5] arr.concat([6,7]); // [1,2,3,4,5,6,7] 

二、删除数组中某个/些元素

1.array.splice()

如果splice()方法删除元素只需前两个参数，第一个参数代表想要删除的元素索引，第二个参数则是需要删除元素的数量，如果没有第二个参数，则会删除元素索引后的所有元素。

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

利用条件循环和splice()方法去删除数组中元素，需要注意：

在需要同时删除多个元素时，会发现splice只删除了第一个。

这是因为：splice()会修改原数组，在删除符合条件的第一个元素后，后面的元素索引就会往前移一个，元素索引都被改变了，之前找出的符合条件的索引无法对应上，所以删除不了。

解决方法就是每次在splice()删除一个元素之后，将循环项的i值减一，对应上删除元素后的数组索引即可。

for (let i = 0; i < data.length; i++) { 
    if (data[i].startTime === null || data[i].endTime === null) { 
    data.splice(i, 1); i--; //在每次splice删除一项元素之后，i减一，对应改变后的数组索引 } } 

2.array.slice()

slice()方法可在数组中截取元素，它返回一个新数组，不会改变原数组。第一个参数是截取开始的数组索引位置（包含此索引的元素），第二个参数是截取结束的位置（不包含此索引的元素）。

let arr = [1,2,3,4,5]; arr.slice(1,3); // [2,3] arr.slice(-4,-1); //[2,3,4] //参数是负数，表示从数组倒数第四个元素（包含）至倒数第一个元素（不包含）截取 

3.array.pop()

pop()方法删除数组最后一个元素，会改变原数组。

let arr = [1,2,3]; arr.pop(); // [1,2] 

4.array.shift()

shift()方法删除数组第一个元素，会改变原数组。

let arr = [1,2,3]; arr.shift(); // [2,3] 

5.filter过滤器

过滤器从数组中筛选出符合条件的元素，不会改变原数组。

let arr = [1,2,3,4,5]; arr = arr.filter(item => item != 2) //[1,3,4,5] 

三、数组去重

数组去重不仅是一道经典面试题，在工作中也能经常遇到，我总结出了几种比较常用的方法。

1.扩展运算符+Set

Set方法的特性就是相同的数据只会保留一个，刚好达到去重的目的，但Set方法返回的不是真实数组，就需要用扩展运算符将其转化为真实数组。

let arr = [1,5,3,2,4,2,4,1,6,7]; function handleArr(arr) { 
    return ([...new Set(arr)]) } console.log(handleArr(arr)); 

2.indexOf

indexOf()检索数组中是否含有某个元素，如果有就返回元素下标（索引），如果没有则返回-1。利用其特性可以新建一个空数组去检索去重数组，如果返回-1，就把元素加进新数组，达到去重。

let arr = [4,5,3,8,4,1,2,5,8]; function handleArr(arr) { 
    let brr = []; for (let i = 0;i<arr.length;i++) { 
    if (brr.indexOf(arr[i]) === -1) { 
    brr.push(arr[i]); }else { 
   } } return brr } console.log(handleArr(arr)); 

3.sort

sort()可以对数组元素进行排序，排序之后通过对比相邻元素来去重。

let arr = [9,2,1,5,3,7,4,2,8,7,4]; function handleArr(arr) { 
    arr.sort(); let brr = []; for (let i = 0;i<arr.length;i++) { 
    if (arr[i] !== arr[i-1]) { 
    brr.push(arr[i]); }else { 
   } } return brr } console.log(handleArr(arr)); 

（强迫症福音* v *）

4.includes

includes() 方法用于判断字符串是否包含指定的子字符串，如果有则返回true，无则返回false。去重原理和indexOf一样。

let arr = [3,1,3,2,5,1,6,5]; function handleArr(arr) { 
    let brr = []; for (let i = 0;i<arr.length;i++) { 
    if (!brr.includes(arr[i])) { 
    brr.push(arr[i]); }else { 
   } } return brr } console.log(handleArr(arr)); 

5.双循环（for、forEach、map）+splice

利用循环比较选出重复元素，splice删除该元素。这个方法也可以用于多个数组比较去重。

let arr = [1,4,2,8,5,2,4,1,7]; function handleArr(arr) { 
    for (let i = 0;i<arr.length;i++) { 
    for (let y = i+1;y<arr.length;y++) { 
    if (arr[i] === arr[y]) { 
    arr.splice(y,1); y--; //对应上文的splice删除元素的注意事项 } } } return arr } console.log(handleArr(arr)); 

这里的循环还可以用到map和forEach，原理是一样的。