第139篇:JS数组常用方法(map(),reduce(),foreach())

js,数组,常用,方法,map,reduce,foreach · 浏览次数 : 31

小编点评

**Array.prototype.reduce()方法** **1.简介** reduce 方法是一种迭代方法,它用于对数组中的每个元素执行一次给定的函数,并将这些函数的返回值合并为一个新的数组。它适用于各种类型的数组,无论其长度或数据类型。 **2.用法** ```javascript array.reduce(function (acc, value) { // 函数处理每个元素 acc[index] = result; return acc; }, initialValue); ``` 其中: * **array** 是要处理的数组 * **function** 是执行在每个元素上的函数 * **initialValue** 是用于初始化结果的第一个值 **3.示例** ```javascript const array1 = [1, 4, 9, 16]; const array2 = array1.map(Math.sqrt); console.log(array2); // [1, 2, 3, 4] const array1 = [1, 3, 5, 9]; const array2 = array1.map((x) => x * 2); console.log(array2); // [2, 6, 10, 18] const array1 = [1, 4, 9, 16]; let array2 = array1.forEach((x) => console.log(x)); console.log(array2); // [1, 4, 9, 16] ``` **4.比较** | 方法 | map() | forEach() | reduce() | |---|---|---|---| | 循环 | 是 | 是 | 是 | | 返回值 | 新数组 | 原数组 | 累加器 | | 参数 | 函数 |元素 | 闭合函数 | | 效率 | 高 | 低 | 中等 | | 用途 | 创建新数组 | 处理数组中的每个元素 | 求数组中所有元素的累加值 | **5.结论** Array.prototype.reduce 方法是一个功能强大的工具,它可以用于将多个元素组合成一个新的数组。它易于使用,但参数的顺序和顺序对结果有影响。

正文

好家伙,本篇为MDN文档数组方法的学习笔记

Array.prototype.reduce() - JavaScript | MDN (mozilla.org)

数组方法这块的知识缺了,补一下

 

1.map()方法

map() 方法创建一个新数组,这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

const array1 = [1, 4, 9, 16];

const array2 = array1.map(Math.sqrt);

console.log(array2);

 

 

const array1 = [1, 3, 5, 9];

const array2 = array1.map((x) => 
    x * 2
);

console.log(array2);

 

 

 map() 方法是一个迭代方法。它为数组中的每个元素调用一次提供的 callbackFn 函数,并用结果构建一个新数组。

这个必须要注意一下,不同于其他的数组方法,这里返回的是一个新的数组,而不是对原来的数组进行操作

const array1 = [1, 4, 9, 16];

const array2 = array1.map(Math.sqrt);

const array3 = array1.map((x) => 
    x * 2
);
console.log(array1);
console.log(array2);
console.log(array3);

 

 

 

2.foreach()方法

forEach() 方法对数组的每个元素执行一次给定的函数。

 

const array1 = [1, 4, 9,16];

array1.forEach((x) => console.log(x));

 

2.2.区别与于map()方法,forEach方法是对原先的数组的每一项调用方法,不产生新的数组

const array1 = [1, 4, 9, 16];

let array2 = array1.forEach((x) => console.log(x));

console.log(array2);

 

 

2.3.给定函数的参数

 

// element
// 数组中正在处理的当前元素。

// index
// 数组中正在处理的当前元素的索引。

// array
// 调用了 forEach() 的数组本身。

 

 

 

 

2.4.forEach() 期望的是一个同步函数,它不会等待 Promise。

 

 

3.reduce()方法

 reduce() 方法对数组中的每个元素按序执行一个由您提供的 reducer 函数,每一次运行 reducer 会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值。

这个方法唯一比较难记的就是参数了

callbackFn

一个“reducer”函数,包含四个参数:

  • previousValue:上一次调用 callbackFn 时的返回值。在第一次调用时,若指定了初始值 initialValue,其值则为 initialValue,否则为数组索引为 0 的元素 array[0]
  • currentValue:数组中正在处理的元素。在第一次调用时,若指定了初始值 initialValue,其值则为数组索引为 0 的元素 array[0],否则为 array[1]
  • currentIndex:数组中正在处理的元素的索引。若指定了初始值 initialValue,则起始索引号为 0,否则从索引 1 起始。
  • array:用于遍历的数组。

initialValue 可选

作为第一次调用 callback 函数时参数 previousValue 的值。若指定了初始值 initialValue,则 currentValue 则将使用数组第一个元素;

否则 previousValue 将使用数组第一个元素,而 currentValue 将使用数组第二个元素。

 

 (MDN文档真是太贴心了)

 

3.1.用reduce()实现简单的叠加器

let sum = [0, 1, 2, 3].reduce(function (previousValue, currentValue) {
    return previousValue + currentValue
  }, 0)

console.log(sum)

 

与第139篇:JS数组常用方法(map(),reduce(),foreach())相似的内容:

第139篇:JS数组常用方法(map(),reduce(),foreach())

好家伙,本篇为MDN文档数组方法的学习笔记 Array.prototype.reduce() - JavaScript | MDN (mozilla.org) 数组方法这块的知识缺了,补一下 1.map()方法 map() 方法创建一个新数组,这个新数组由原数组中的每个元素都调用一次提供的函数后的返

第一百零六篇:变量的不同声明(var,let和const的不同)

JS关于变量的声明,变量提升,暂时性死区

第一百零五篇:变量的原始值和引用值

好家伙,JS基础接着学, 本篇内容为《JS高级程序设计》第四章学习笔记 1.原始值和引用值 ECMAScript变量可以包含两种不同类型的数据:原始值和引用值。原始值(primitive value)就是最简单的数据,引用值(reference value)则是由多个值构成的对象。 在把一个值赋给变

第一百零七篇:基本数据类型(undefined,null,boolean类型)

好家伙, 本篇内容为《JS高级程序设计》第三章学习笔记 1.数据类型 ECMAScript有6种简单数据类型(称为原始类型): Undefined, Null, Boolean, Number, String和Symbol。 Symbol (符号)是ECMAScript6新增的。还有一种复杂数据类型

第一百零八篇:最常用的基本数据类型(Number类型)

最常用的基本数据类型(Number类型)

第一百一十篇:内存泄漏和垃圾回收(JS)

好家伙,本篇内容为《JS高级程序设计》第四章的学习笔记 1.内存泄露 1.1.什么是内存泄漏? 内存泄漏(Memory Leak)是指程序中已动态分配的堆内存由于某种原因程序未释放或无法释放,造成系统内存的浪费,导致程序运行速度减慢甚至系统崩溃等严重后果。 内存泄漏缺陷具有隐蔽性、积累性的特征,比其

第一百一十一篇:基本引用类型Date

好家伙,本篇为《JS高级程序设计》第五章的学习笔记 1.基本引用类型 引用值(或者对象)是某个特定引用类型的实例,在ECMAScript中,引用类型是把数据和功能组织到一起的结构,(像极了“类”) 经常被人错误的称作“类”。 虽然从技术上讲JavaScript是一门面向对象语言,但是ECMAScri

第一百一十二篇: JS数组Array(一)数组基本用法

好家伙, 1.数组 Array应该就是ECMAScript中最常用的类型了。ECMAScript数组跟其他编程语言的数组有很大区别。 跟其他语言中的数组一样,ECMAScript 数组也是一组有序的数据, 但跟其他语言不同的是,数组中每个槽位可以存储任意类型的数据。 这意味着可以创建一个数组,它的第

第一百一十四篇: JS数组Array(三)数组常用方法

好家伙,本篇为《JS高级程序设计》第六章“集合引用类型”学习笔记 1.数组的复制和填充 批量复制方法 copyWithin(),以及填充数组方法fill()。 这两个方法的函数签名类似,都需要指定既有数组实例上的一个范围,包含开始索引,不包含结束索引。 使用这个方法不会改变数组的大小。 1.1.fi

第一百一十五篇: JS集合引用类型Map

好家伙,本篇为《JS高级程序设计》第六章“集合引用类型”学习笔记 1.Map ECMAScript6以前,在JavaScript中实现“键/值”式存储可以使用object来方便高效地完成,也就是使用对象属性作为键,再使用属性来引用值。 但这种实现并非没有问题,为此TC39委员会专门为“键/值”存储定