聊一聊数组的map、reduce、foreach等方法

聊聊数组遍历方法

JS 数组的遍历方法有好几个:

  • every
  • some
  • filter
  • foreach
  • map
  • reduce

接下来我们来一个个地交流下。

every()

arr.every(callback[, thisArg])

返回值:true | false

是否改变原数组:不改变原数组

解析:

every() 方法用来测试数组中的每一项是否都通过了callback函数的测试;只有全部通过才返回 true;否则 false。

本文出现的 callback 没有特别声明都是表示包含 element, index, array 三个参数的函数。

例子:

// 检测数组中的所有元素是否都大于或等于100

[].every((ele) => ele >= 100);  // true

[1, 2, 3].every((ele) => ele >= 100);   // false

some()

arr.some(callback[, thisArg])

返回值:true | false

是否改变原数组:不改变

解析:

some() 跟 every() 类似,只是 every 要每一项都通过 callback 才返回 true,而 some 只要有通过 callback 的就返回 true;some 为逻辑或,every 为逻辑与。

例子:

function isBigEnough(element, index, array) {
  return (element >= 10);
}
var passed = [2, 5, 8, 1, 4].some(isBigEnough);
// passed is false
passed = [12, 5, 8, 1, 4].some(isBigEnough);
// passed is true

filter()

var newArr = arr.filter(callback[, thisArg])

返回值:新数组

是否改变原数组:不改变原数组

解析:

filter() 方法会对数组中的每一项(首先这项是有值的)进行调用 callback 函数,并根据调用结果返回的 true 或 false 来组建一个新的数组(该数组是原数组的子集)。

即过滤,只有符合的(调用 callback 返回 true 的)才加入到新数组中。

例子:

const isBigEnough = value => value >= 10;

let [...spread] = [12, 4, 8, 120, 44];

let filtered = spread.filter(isBigEnough);
// filtered: [12, 120, 44]
// spread: [12, 4, 8, 120, 44]

forEach()

array.forEach(callback[, thisArg])

返回值:undefined

是否改变原数组:改不改变要看 callback

解析:

forEach() 方法按升序为数组中含有效值的每一项执行一次 callback 函数,那些已删除(使用delete方法等情况)或者未初始化的项将被跳过(但不包括那些值为 undefined 的项)(例如在稀疏数组上)。反正它就是很死板。

例子:

// three 呢?它被跳过了,原因是到two时,使数组发生了变化,导致所有剩下的项上移一个位置,所以three被跳过了
let words = [‘one‘, ‘two‘, ‘three‘, ‘four‘];

words.forEach((word) => {
    console.log(word);
    if ( word === ‘two‘ ) {
        words.shift();
    }
});
// one
// two
// four

map()

let newArr = arr.map(callback[, thisArg])

返回值:新数组

是否改变原数组:不改变

解析:

map() 方法就是数组中的每一项(有值)按顺序都调用一次 callback 函数,然后每一项的返回结果组成一个新的数组作为整个map方法的返回值。

例子:

let str = ‘12345‘;
Array.prototype.map.call(str, (x) => x).reverse().join(‘‘);
// ‘54321‘

reduce()

arr.reduce(callback[, initialValue])

返回值:callback函数累计处理的结果

是否改变原数组:

解析:

reduce() 方法的 callback 有四个参数,比之前说的多了一个累计的返回值;四个参数:accumulator、currentValue、currentIndex、array;initialValue 是用作第一个调用 callback 的第一个参数的值,默认使用数组中的第一个元素。

reduce() 方法跟 map 有点相似,都是数组中的每一个元素(有效值)一次执行 callback 函数,多就多在它会存上上一次 callback 计算结果作为下一次的参数。

如果没有提供 initialValue, reduce会从索引1的地方开始执行 callback方法,跳过第一个索引。如果提供 initialValue, 从索引0开始

例子:

// 求和
let sum = [0, 1, 2, 3, 4].reduce((prev, curr) => prev + curr, 0);

// 计算数组中每个元素出现的次数
let names = [‘Alice‘, ‘Bob‘, ‘Tiff‘, ‘Bruce‘, ‘Alice‘];

let countedNames = names.reduce((allNames, name) => {
    if ( name in allNames ) {
        allNames[name]++;
    } else {
        allNames[name] = 1;
    }
    return allNames;
}, {});
// countedNames:
// { ‘Alice‘: 2, ‘Bob‘: 1, ‘Tiff‘: 1, ‘Bruce‘: 1 }

// 数组去重
let arr = [1,2,1,2,3,5,4,5,3,4,4,4,4];
let result = arr.sort().reduce((init, current) => {
    // 主要是排了序
    if ( init.length === 0 || init[init.length - 1] !== current ) {
        init.push(current);
    }
    return init;
}, []);
console.log(result);

参考

MDN Array

原文地址:https://www.cnblogs.com/Hao-Killer/p/9105144.html

时间: 2024-07-29 21:27:58

聊一聊数组的map、reduce、foreach等方法的相关文章

js数组的map与forEach方法的区别及兼容性用法

高级浏览器(包括ie9以上)支持map和forEach方法对数组循环遍历,用法基本相同,但有些区别必须知道,才能在项目中正确选择 原理: 高级浏览器支持forEach方法语法:forEach和map都支持2个参数:一个是回调函数(item,index,list)和上下文: forEach:用来遍历数组中的每一项:这个方法执行是没有返回值的,对原来数组也没有影响: 数组中有几项,那么传递进去的匿名回调函数就需要执行几次: 每一次执行匿名函数的时候,还给其传递了三个参数值:数组中的当前项item,当

js map, reduce, forEach, filter的一般实现

map(映射), reduce(规约), forEach(遍历), filter(过滤),它们都是高阶函数,都是以传入不同的函数来以不同的方式操作数组元. 1> map function map(array, func) { var res = []; for (var i = 0, len = array.length; i < len; i++) { res.push(func(array[i])); } return res; } var res = map([1, 2, 3], fun

关于数组的map、reduce、filter

map:map()方法定义在Array中,传入自己的参数,就得到一个新的Array作为结果 var aqiData = [ ["北京", 90], ["上海", 50], ["福州", 10], ["广州", 50], ["成都", 90], ["西安", 100]]; function box(arr){ return arr[1]+'分';}alert(aqiData.map(box

JavaScript学习笔记:数组reduce()和reduceRight()方法

很多时候需要累加数组项的得到一个值(比如说求和).如果你碰到一个类似的问题,你想到的方法是什么呢?会不会和我一样,想到的就是使用for或while循环,对数组进行迭代,依次将他们的值加起来.比如: var arr = [1,2,3,4,5,6]; Array.prototype.sum = function (){ var sumResult = 0; for (var i = 0; i < this.length; i++) { sumResult += parseInt(this[i]);

数组的map方法以及parseInt函数

原题: ['1', '2', '3'].map(parseInt): 第一次分解: ['1', '2', '3'].map((item, index) => { return parseInt(item, index) }) 第二次分解 parseInt('1', 0) // 1 parseInt('2', 1) // NaN parseInt('3', 2) // NaN, 3 不是二进制 结果 ['1', '2', '3'].map(parseInt) // 1, NaN, NaN arra

【前端_js】javascript中数组的map()方法

数组的map()方法用于遍历数组,每遍历一个元素就调用回调方法一次,并将回调函数的返回结果作为新数组的元素,被遍历的数组不会被改变. 语法:let newAarray = arr.map(function callback(currentValue, index, array) { // Return element for newArray } 示例: let numbers = [1, 5, 10, 15]; let doubles = numbers.map((x) => { return

JavaScript中Map和ForEach的区别

译者按: 惯用Haskell的我更爱map. 原文: JavaScript?-?Map vs. ForEach - What's the difference between Map and ForEach in JavaScript? 译者: Fundebug 为了保证可读性,本文采用意译而非直译.另外,本文版权归原作者所有,翻译仅用于学习. 如果你已经有使用JavaScript的经验,你可能已经知道这两个看似相同的方法:Array.prototype.map()和Array.prototyp

map() 和 forEach() 区别 兼容写法

兼容写法: 不管是forEach还是map在IE6-8下都不兼容(不兼容的情况下在Array.prototype上没有这两个方法),那么需要我们自己封装一个都兼容的方法,代码如下: /** * forEach遍历数组 * @param callback [function] 回调函数: * @param context [object] 上下文: */ Array.prototype.myForEach = function myForEach(callback,context){ contex

lodash用法系列(4),使用Map/Reduce转换

Lodash用来操作对象和集合,比Underscore拥有更多的功能和更好的性能. 官网:https://lodash.com/引用:<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>安装:npm install lodash 首先通过npm安装lodash:npm i --save lodash 在js文件中引用lodash:var _ =