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

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

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`

实际例子:

过滤偶数:

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

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

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

对数组元素求和:

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

展平嵌套数组:

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

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2648582.html

(0)
上一篇 2025年3月7日 08:14:56
下一篇 2025年3月4日 21:05:41

AD推荐 黄金广告位招租... 更多推荐

相关推荐

发表回复

登录后才能评论