海印网
海印网

掌握 JavaScript 的数组强大功能:forEach、map、filter、reduce、spread 和 rest

admin数码00

掌握 JavaScript 的数组强大功能:forEach、map、filter、reduce、spread 和 rest-第1张图片-海印网

forEach:迭代元素

forEach 方法迭代数组中的每个元素,为每个元素执行提供的回调函数。

`const 数字 = [1, 2, 3, 4, 5];

numbers.forEach(num => {
console.log(num);
});
`

地图:变换元素

立即学习“Java免费学习笔记(深入)”;

map 方法通过将提供的函数应用于原始数组的每个元素来创建一个新数组。

`const 数字 = [1, 2, 3, 4, 5];
const doubledNumbers = Numbers.map(num => num * 2);

console.log(doubledNumbers); // 输出:[2,  
4, 6, 8, 10]
`

过滤器:选择元素

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

`const 数字 = [1, 2, 3, 4, 5];
const EvenNumbers = Numbers.filter(num  
=> num % 2 === 0);

console.log(evenNumbers); // 输出:  
[2, 4]`

减少:累积值

reduce 方法通过对累加器和数组中的每个元素应用函数,将数组缩减为单个值。

`const 数字 = [1, 2, 3, 4, 5];
const sum = Numbers.reduce((accumulator, currentValue) => Accumulator currentValue, 0);

console.log(sum); // 输出:15   `

**
扩展运算符 (...):扩展元素**

展开运算符将可迭代对象(数组、字符串、对象)扩展为其各个元素。

`const 数字 = [1, 2, 3];
const newArray = [...数字, 4, 5];

console.log(newArray); // 输出:[1, 2, 3, 4, 5]
谨慎使用代码。`

*休息运算符(...):收集元素
*

剩余运算符将剩余元素收集到数组中。
`
函数 sum(...数字) {
returnnumbers.reduce((total, num) =>total num, 0);
}

console.log(sum(1, 2, 3, 4)); // 输出:10`

实际例子:

  1. 过滤偶数:

const 数字 = [1, 2, 3, 4, 5, 6];
const EvenNumbers = Numbers.filter(num => num % 2 === 0);
console.log(偶数); // 输出:[2, 4, 6]

  1. 用平方数创建一个新数组:

const 数字 = [1, 2, 3, 4, 5];
const squaredNumbers = Numbers.map(num => num * num);
console.log(squaredNumbers); // 输出:[1, 4, 9,  
16, 25]

  1. 对数组元素求和:

const 数字 = [1, 2, 3, 4, 5];
const sum = Numbers.reduce((accumulator, currentValue) => Accumulator currentValue, 0);
控制台.log(总和); // 输出:15

  1. 展平嵌套数组:

constnestedArray = [[1, 2], [3, 4], [5]];
const flattenedArray =nestedArray.flat();
控制台.log(flattenedArray); // 输出:[1, 2, 3, 4, 5]

以上就是掌握 JavaScript 的数组强大功能:forEach、map、filter、reduce、spread 和 rest的详细内容,更多请关注其它相关文章!

Tags: 数组元素

Sorry, comments are temporarily closed!