Array数组之变异和非变异方法 - javascript基础系列

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

增加元素

变异方法： .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'];