Array Methods-CSDN博客

map

Array.prototype.map() 数组在它的元素上面执行一些操作，并返回一个包含已转换元素的数组。

示例代码

const numbers = [0, 1, 2, 3, 4, 5, 6];
const doubledNumbers = numbers.map(n => n * 2); // [0, 2, 4, 6, 8, 10, 12]
复制代码

filter

Array.prototype.filter() 数组根据条件决定是否保留元素，并返回一个只有保留元素的数组。

示例代码

const numbers = [0, 1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(n => n % 2 === 0); // [0, 2, 4, 6]
复制代码

reduce

Array.prototype.reduce() 将数组中的元素聚合成一个值返回。

redce方法有两个参数

callback 在每个迭代步骤中调用的函数。
initialValue 用作第一个调用 callback的第一个参数的值。

callback参数

accumulator 累加器累加回调的返回值; 它是上一次调用回调时返回的累积值，或initialValue。
currentValue 数组中正在处理的元素。
currentIndex 数组中正在处理的当前元素的索引。如果提供了initialValue，则索引号为0，否则为索引为1。
array 调用reduce的数组。

示例代码

const numbers = [0, 1, 2, 3, 4, 5, 6];
const sum = numbers.reduce((prev, next) => prev + next, 0); // 21
复制代码

详解：

第一次迭代步骤 prev = 0 因为我们传入0作为第二个参数 next = 0 取元素中的第一个元素。函数返回 prev + next - > 0 + 0 - > 0

第二个迭代步骤 prev = 0 因为它是在上一次迭代步骤中函数返回的值 next = 1 取元素中的第二个元素函数返回 prev + next - > 0 + 1 - > 1

第三个迭代步骤 prev = 1 因为它是在上一次迭代步骤中函数返回的值 next = 2 取元素中的第三个元素函数返回 prev + next - > 1 + 2 - > 3

第四次迭代步骤 prev = 3 因为它是在上一次迭代步骤中函数返回的值 next = 3 取元素中的第四个元素函数返回 prev + next - > 3 + 3 - > 6

[...]在最后的迭代步骤 prev = 15 因为它是在上一次迭代步骤中函数返回的值 next = 6 所述的最后一个元素数阵列函数返回 prev + next - > 15 + 6 - > 21 由于这是最后一次迭代步骤，.reduce返回21。

copyWithin

Array.prototype.copyWithin() 在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。

参数

target 从该位置开始替换数据。如果为负值，target 将从末尾开始计算。
start 从该位置开始读取数据，默认为 0。如果为负值，start 将从末尾开始计算。
end 到该位置前停止读取数据，默认等于数组长度。如果为负值， end 将从末尾开始计算。

示例代码

let arr=[1, 2, 3, 4, 5];
let numbers=arr.copyWithin(0, 3, 4) // [4, 2, 3, 4, 5]
复制代码

keys

Array.prototype.keys() 方法返回一个新的Array迭代器，它包含数组中每个索引的键。

示例代码

let arr = ["a", "b", "c"];
let iterator = arr.keys();

console.log(iterator.next()); // { value: 0, done: false }
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: undefined, done: true }
复制代码

values

Array.prototype.values() 返回一个新的 Array 迭代器，它包含数组中每个索引的值。

示例代码

let arr = ["a", "b", "c"];
let iterator = arr.values();

console.log(iterator.next()); // { value: "a", done: false }
console.log(iterator.next()); // { value: "b", done: false }
console.log(iterator.next()); // { value: "c", done: false }
console.log(iterator.next()); // { value: undefined, done: true }
复制代码

entries

Array.prototype.entries() 返回一个新的 Array 迭代器，它包含数组中每个索引的键/值对。

示例代码

let arr = ["a", "b", "c"];
let iterator = arr.entries();

console.log(iterator.next()); // { value: [0, "a"], done: false }
console.log(iterator.next()); // { value: [1, "b"], done: false }
console.log(iterator.next()); // { value: [2, "c"], done: false }
console.log(iterator.next()); // { value: undefined, done: true }
复制代码

includes

Array.prototype.includes() 判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。

示例代码

let arr=["a", "b", "c"];
arr.includes("a"); // true
arr.includes("d"); // false
复制代码

扩展运算符

扩展运算符...已与ES6一起引入，用于将迭代元素（如数组）扩展到多个元素可以放置的位置。

示例代码

数组:

const arr1=["a", "b", "c"];
const arr2=[...arr1, "d","e","f"]; // ["a", "b", "c", "d", "e", "f"]
复制代码

对象:

let  obj1={name:"Nick", age:16, sex:"man"};
let {name, ...args}=obj1;
console.log(name); // "Nick"
console.log(args); // {age:16, sex:"man"}
obj1={...obj1, age:20};
console.log(obj1); // {name:"Nick", age:20, sex:"man"}
复制代码

函数:

function myFunc(x, y, ...params) {
    console.log(x);
    console.log(y);
    console.log(params);
}

myFunc("a", "b", "c", "d", "e", "f");
// "a"
// "b"
// [ "c", "d", "e", "f" ]
复制代码