首页 > web前端 > js教程 > 正文

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

Patricia Arquette
发布: 2024-11-24 14:16:12
原创
852 人浏览过

Mastering JavaScript

forEach:迭代元素

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

const 数字 = [1, 2, 3, 4, 5];
Numbers.forEach(num => {
console.log(num);
});

地图:变换元素

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(偶数); // 输出:  
[2, 4]

减少:累积值

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

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

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

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

const 数字 = [1, 2, 3];
const newArray = [...数字, 4, 5];
控制台.log(newArray); // 输出:[1, 2, 3, 4, 5]

休息运算符(...):收集元素
剩余运算符将剩余元素收集到数组中。

函数 sum(...数字) {
return numbers.reduce((total, num) => 总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) => 累加器
当前值, 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的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板