欢迎您访问 最编程 本站为您分享编程语言代码，编程技术文章！

热门搜索/Hot Search

您现在的位置是： 首页

在JavaScript中：添加、移除和去除重复元素于数组的操作方法

最编程 2024-07-29 21:47:37
...

我正在参加「掘金·启航计划」

本文章是本人从****搬家至掘金（****博客地址：银酱不是酱）

一、往数组中添加元素

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，原理是一样的。

上一篇： 在数组中添加删除元素的功能

下一篇： ArrayList源代码详解合集

推荐阅读