会改变原始数组称为变异方法
,不改变原始数组称为非变异方法
。
增加元素
变异方法: .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'];
版权声明:本文为博主原创文章,转载请添加原文地址 https://www.qianduan7.com/javascript/javascript-array-mutation-method.html