会改变原始数组称为变异方法,不改变原始数组称为非变异方法

增加元素


变异方法: .push() 和 .unshift()

let mutatingAdd = ['a', 'b', 'c', 'd', 'e'];
mutatingAdd.push('f');     // ['a', 'b', 'c', 'd', 'e', 'f']
mutatingAdd.unshift('z');  // ['z', 'a', 'b', 'c', 'd', 'e']
  • array.push() 增加一个元素到数组末尾
  • array.unshift() 增加一个元素到数组开头


非变异方法: array.concat() 和 展开运算符(...)

  • array.concat()
const arr1 = ['a', 'b', 'c', 'd', 'e'];
const arr2 = arr1.concat('f'); // ['a', 'b', 'c', 'd', 'e'. 'f']
console.log(arr1);             // ['a', 'b', 'c', 'd', 'e']
  • 展开运算符
const arr1 = ['a', 'b', 'c', 'd', 'e'];
const arr2 = [...arr1, 'f'];   // ['a', 'b', 'c', 'd', 'e', 'f']
const arr3 = ['z', ...arr1];   // ['z', 'a', 'b', 'c', 'd', 'e']

删除元素


变异方法: .pop() 和 .shift() 和 .splice()

  • array.pop() 删除数组中的最末的元素
  • array.shift() 删除数组中开头的元素
let mutatingRemove = ['a', 'b', 'c', 'd', 'e'];
mutatingRemove.pop();        // ['a', 'b', 'c', 'd']
mutatingRemove.shift();      // ['b', 'c', 'd']

array.pop()array.shift() 方法都返回被删除的元素。所以你可以抓取删除的元素并存到一个变量上。

let mutatingRemove = ['a', 'b', 'c', 'd', 'e'];
// pop
const returnedValue1 = mutatingRemove.pop();
console.log(mutatingRemove); // ['a', 'b', 'c', 'd']
console.log(returnedValue1); // 'e'
// shift
const returnedValue2 = mutatingRemove.shift();
console.log(mutatingRemove); // ['b', 'c', 'd']
console.log(returnedValue2); // 'a'
  • array.splice()

还可以用 array.splice() 来删除数组中的多个元素。

let mutatingRemove = ['a', 'b', 'c', 'd', 'e'];
let returnedItems = mutatingRemove.splice(0, 2);

console.log(mutatingRemove); // ['c', 'd', 'e']
console.log(returnedItems) // ['a', 'b']

非变异方法: array.filter() 和 .slice()

  • array.filter()

filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

const arr1 = ['a', 'b', 'c', 'd', 'e'];
const arr2 = arr1.filter(a => {
  return a !== 'e';
}); 
console.log(arr2);  // ['a', 'b', 'd', 'f']
  • array.slice()

array.slice() 接受两个参数

  • 第一个参数是开始拷贝的起始索引位置。
  • 第二个参数是拷贝结束的索引位置。结束位置的元素并不会包含进去(前开后闭)。
const arr1 = ['a', 'b', 'c', 'd', 'e'];
const arr2 = arr1.slice(1, 4) // ['b', 'c', 'd']
const arr3 = arr1.slice(2) // ['c', 'd', 'e']

上面的第 2 行(const arr2 = arr1.slice(1, 4)),
arr2 是由自 arr1 的索引 1 起,到 4 之前(索引 3)的元素拷贝而来。

3 行(const arr3 = arr1.slice(2))是一种常见的方式。如果使用 array.slice() 没有传入第二个参数,那么该方法会从传入的索引起一直拷贝到数组结束。

替换元素


变异方法: .splice()

  • array.slice(start, deleteCount, item1)
  • 第一个参数是开始替换的索引位置。
  • 第二个参数是想要删除的元素个数。
  • 第三个之后的参数是想要插入到数组中的元素。
let mutatingReplace = ['a', 'b', 'c', 'd', 'e'];
mutatingReplace.splice(2, 1, 30); 
console.log(mutatingReplace);  // ['a', 'b', 30, 'd', 'e']
// OR
mutatingReplace.splice(2, 1, 30, 31);
console.log(mutatingReplace);  // ['a', 'b', 30, 31, 'd', 'e']

非变异方法: .map()

const origArr = ['a', 'b', 'c', 'd', 'e'];
const transformedArr = origArr.map(n => {
  return n + 'qianduan7';
})
console.log(transformedArr);  // ["aqianduan7", "bqianduan7", "cqianduan7", "dqianduan7", "eqianduan7"]
console.log(origArr);         // ['a', 'b', 'c', 'd', 'e'];
版权声明:本文为博主原创文章,转载请添加原文地址
暂无评论