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" ]
复制代码