js删除数组的元素_js往数组中添加元素

js删除数组的元素_js往数组中添加元素利用其特性可以新建一个空数组去检索去重数组,如果返回-1,就把元素加进新数组,达到去重。slice()方法可在数组中截取元素,它返回一个新数组,不会改变原数组。如果splice()方法删除元素只需前两个参数,第一个参数代表想要删除的元素索引,第二个参数则是需要删除元素的数量,如果没有第二个参数,则会删除元素索引后的所有元素。Set方法的特性就是相同的数据只会保留一个,刚好达到去重的目的,但Set方法返回的不是真实数组,就需要用扩展运算符将其转化为真实数组。pop()方法删除数组最后一个元素,会改变原数组。

一、往数组中添加元素

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()往数组头部添加新元素,该方法同样也会修改原数组。

此代码由Java架构师必看网-架构君整理
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.扩展运算符

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

此代码由Java架构师必看网-架构君整理
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,原理是一样的。

架构君码字不易,如需转载,请注明出处:https://javajgs.com/archives/166170
0
 

发表评论