投稿 搜索 登录注册
×

热门关键词：Web前端|前端开发|HTML5|CSS3|jQuery|CSS3动画

  • Web前端首页
  • Javascript
  • 收藏一些数组遍历方法：forEach、map、filter、sort、reduce、every、some等等方法

收藏一些数组遍历方法：forEach、map、filter、sort、reduce、every、some等等方法

作者：Terry2023.05.24来源：Web前端之家浏览：1756评论:0
关键词：数组遍历

500.jpg

夜深了，运动完后，静下心来学习下知识。今天收藏一些数组遍历方法：forEach, map, filter, sort, reduce, every等等。供大家参考。

在ES6的语法中，数组新添了好几种新的和遍历有关的方法。虽然这些函数本质上都是语法糖，理论上说，离开他们一样可以写码。但是他们的存在使我们的业务处理方便了太多，所以说熟练掌握他们在实际开发中是非常必要的。对于第一次见到他们的同学来说，他们也许不是特别容易理解，本篇讲用实际案例详解他们的语法和用法。

所有数组方式的共同点：参数都接收一个回调函数

以下所有回调函数内的参数都是形参。也就是说，用forEach举个例子，你并不需要一定把参数写成element，index，和array。你会看到我会用许多自定义的参数名来代表他们，你只需要按顺序传参数即可。

1. forEach

基本语法：

forEach((element, index, array) => { /* … */ }) // return undefined

element指数组中的每一个元素，index指各个元素相对应的索引，array指数组本身。但是如果你通过arr.forEach()的方式来写的话，第三个参数array往往不需要。forEach没有返回值

首先，我认为最容易理解，也最常使用的数组方法: forEach。forEach基本上就是for循环的代替品，最适合用于循环数组，也可以用于循环其他可循环数据(比如nodelist，Map和Set)。本身没有任何返回值，仅根据数据数量做循环操作。

forEach有一个常见的用法，就是遍历一个nodeList(节点集合)，对dom中的多个对象进行统一操作。请看下面这个例子。

const inventors = [
    { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
    { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
    { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
    { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
    { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
    { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 },
    { first: 'Max', last: 'Planck', year: 1858, passed: 1947 },
    { first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 },
    { first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 },
    { first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 },
    { first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 },
    { first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 }
];
// 选择dom元素
const list = document.querySelector('.list')
// 对数组进行遍历，数组中每有一个元素就添加一个dom对象
inventors.forEach(function(inventor, index) {
    const listItem = document.createElement('li')
    listItem.textContent = `${index}: ${inventor.first},
    born ${inventor.year}`
    list.appendChild(listItem)
})
// 箭头函数写法：
inventors.forEach((inventor, index) => {
    const listItem = document.createElement('li')
    listItem.textContent = `${index}: ${inventor.first},
    born ${inventor.year}`
    list.appendChild(listItem)
})         const inventors = [
    { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
    { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
    { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
    { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
    { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
    { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 },
    { first: 'Max', last: 'Planck', year: 1858, passed: 1947 },
    { first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 },
    { first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 },
    { first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 },
    { first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 },
    { first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 }
];
// 选择dom元素
const list = document.querySelector('.list')
// 对数组进行遍历，数组中每有一个元素就添加一个dom对象
inventors.forEach(function(inventor, index) {
    const listItem = document.createElement('li')
    listItem.textContent = `${index}: ${inventor.first},
    born ${inventor.year}`
    list.appendChild(listItem)
})
// 箭头函数写法：
inventors.forEach((inventor, index) => {
    const listItem = document.createElement('li')
    listItem.textContent = `${index}: ${inventor.first},
    born ${inventor.year}`
    list.appendChild(listItem)
})

以下是另外两个forEach的使用场景：

<button class="div">click me</button>
<button class="div">click me</button>
<button class="div">click me</button>
<button class="div">click me</button>
<button class="div">click me</button>        
  <script>
    // 获取所有button，赋予他们新的内容，并且绑定事件
    const buttons = document.querySelectorAll('.div')
    buttons.forEach((button, index) => {
        button.textContent = '我是一个按钮'
        button.addEventListener('click', () => {
            console.log('我是一个按钮, 并且我的缩印是' + index)
        })
    })
 </script>
// 根据刚才的inventors数组，计算所有科学家生命总长度    
let totalYearsLived = 0
inventors.forEach(function(inventor) {
    let yearLived = inventor.passed - inventor.year
    totalYearsLived += yearLived
})
console.log(totalYearsLived) // 861

2. map

基本语法：

let newArr = map((element, index, array) => { /* … */ })
// return new array

map和forEach类似，最大的区别是会返回一个全新的数组。不会改变原数组，element， index，和array的意义于forEach相同。

下面这两个例子将为阐述map的基本用法：

const inventors = [
    { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
    { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
    { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
    { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
    { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
    { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 },
    { first: 'Max', last: 'Planck', year: 1858, passed: 1947 },
    { first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 },
    { first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 },
    { first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 },
    { first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 },
    { first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 }
];
// 得到所有inventor的全名，并将他们组成一个新的数组
let fullnameArr = inventors.map(function(inventor) {
    return inventor.first + ' ' + inventor.last
})
// 箭头函数写法
let fullnameArr = inventors.map(inventor => inventor.first + ' ' +   inventor.last)
const numArr = [1, 4, 98, 170, 35, 87]
// 得到numArr中每一个数字的2倍
let doubleNumArr = numArr.map(num => num*2)
console.log(doubleNumArr) //  [2, 8, 196, 340, 70, 174]

3. filter

基本语法：

filter((element, index, array) => { /* … */ } )
// return shallow copy

filter是另一个语法和map以及forEach很相似的数组方法。filter中文是过滤，特别适用于提取一个数组中符合条件的数组。每轮遍历返回一个布尔值，结果为true的元素会被添加到新数组中，最终filter将返回这个新数组

filter是我认为第二常用，也极其好用的一个数组方式。因为很多时候我们需要根据条件筛选一部分数组元素，而这个时候filter会特别方便。对于新手来说，最大的难点是理解回调函数中的return值是一个布尔值，这个布尔值通常以一个表达式的形式出现。然而filter最终返回的是一个数组的浅拷贝。简而言之，改变浅拷贝的元素值也会影响之前的数组的元素。

const inventors = [
    { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
    { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
    { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
    { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
    { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
    { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 },
    { first: 'Max', last: 'Planck', year: 1858, passed: 1947 },
    { first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 },
    { first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 },
    { first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 },
    { first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 },
    { first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 }
];
// 获取所有出生在1500年和1600年之间的科学家
const fifteen = inventors.filter(function(inventor) {
    return inventor.year >= 1500 && inventor.year < 1600
})
// 箭头函数写法
const fifteen = inventors.filter(inventor => inventor.year >= 1500 && inventor.year < 1600)
console.log(fifteen)
// 例子2：获取所有名字中有字母a的科学家
const nameHasA = inventors.filter(function(inventor) {
   return inventor.last.includes('a')
})
// 箭头函数写法
const nameHasA = inventors.filter(inventor => inventor.last.includes('a'))
console.log(nameHasA)

4. sort

基本语法：

sort()
sort((a, b) => { /* … */ } ) 
// 返回sort后被改变的原数组

sort的语法和前面的方法有所不同，你可以直接调用它，不传任何参数；也可以传一个用于比较的回调函数。sort的用途是给一个数组中的元素排序，a和b在此分别指代第一个用于比较的元素和第二个用于比较的元素。返回值为排序后的原数组

如果没有比较函数，那么sort将会按照元素的Unicode位点进行排序。也就是说：'Banana'会排在'Cat'前，因为b比c要靠前。110也会排在20之前，因为1比2靠前。请看下面两个例子：

const numArr = [1, 4, 98, 170, 35, 87]
// 纯数字排序
const sortNoParams = numArr.sort()
console.log(sortNoParams) // [1, 170, 35, 4, 87, 98]
const nameArr = ['Hanna', 'Meitner', 'Blodgett', 'Nicolaus', 'Einstein']
// 字符串排序
const newNameArr = nameArr.sort()
console.log(newNameArr) // ['Blodgett', 'Einstein', 'Hanna', 'Meitner', 'Nicolaus']

但是，如果你在sort中传入一个比较函数，那么sort将会按照a和b的大小进行排序，基本规则如下：

比较函数(a, b)返回值排序顺序
> 0a在b后
< 0a在b前
=== 0保持a和b的顺序

简而言之，比较函数每次执行需要返回一个数字，如果这个数字大于0，数组按升序排序；如果小于0，则按降序排序。如果等于0，则顺序不变。传统上讲，我们一般返回1和-1来分别代表大于0和小于0的情况。使用方式如下：

function compareFn(a, b) {
  if (在某些排序规则中，a 小于 b) {
    return -1;
  }
  if (在这一排序规则下，a 大于 b) {
    return 1;
  }
  // a 一定等于 b
  return 0;
}
通常我们把返回值写为1和-1来代表返回值是否大于0
但如果是纯数字之间进行比较，那么以上函数可以简写：
function compareFn(a, b){
    return a - b
}

这次，我们再此使用之前的数字数组的例子排序，但是这次使用回调的比较函数。结果将会按照数字实际大小进行排序：

const numArr = [1, 4, 98, 170, 35, 87]
const sortedArr = numArr.sort(function(a, b) {
    return a - b
})
// 箭头函数写法
const sortedArr = numArr.sort((a, b) => a - b)
console.log(sortedArr) // [1, 4, 35, 87, 98, 170]
const nameArr = ['Hanna', 'Meitner', 'Blodgett', 'Nicolaus', 'Einstein']
const sortName = nameArr.sort((a, b) => {
    if(a < b) {
        return -1
    } else if(a > b) {
        return 1
    }
    return 0
})
console.log(sortName) //  ['Blodgett', 'Einstein', 'Hanna', 'Meitner', 'Nicolaus']

5. reduce

基本语法：

reduce((previousValue, currentValue, currentIndex, array) => { /* … */ }
, initialValue)
// 返回一个类型不一定的结果

reduce可以说是数组方法里最难理解，也最特殊的一个函数了。

reduce同样接受一个回调函数和一个初始值作为参数，这个回调函数可以接受4个参数，分别是上一个值(总值)，当前值，当前索引，和数组，reduce有一个可选的第二个参数，为初始值。如果不填写，那遍历将从索引1开始，也就是数组的第二个元素，因为第一个元素的初始值不存在，当前索引的值也将为1。如果填写初始值，那么第一轮遍历的当前索引为0，当前元素为一个数组元素，上一个元素也将成为初始值。返回回调函数遍历整个数组后的结果

reduce不是一个特别常用的数组方式，但在部分情况下，他可以大大减少代码的复杂程度，我们将用多个例子来展现reduce的一些实际用途。

const numArr = [1, 4, 98, 170, 35, 87]
// 得到numArr的元素的和
let sum = numArr.reduce((previous, current) => {
    return previous + current
})
console.log(sum) // 395   
// 如果最初值存在的话
let withInitial = numArr.reduce((previous, current) => {
    return previous + current
}, 100)
console.log(withInitial) // 495

第一眼看到上面这段代码，你可能会有点摸不清头脑，下面这个表格可以帮助你理解

回调次数previousValuecurrentValuecurrentIndex
return value
第一轮遍历141
5
第二轮遍历5982
103
第三轮遍历1031703
273
第四轮遍历273354
308

我们的数组共有六个元素，所以将一共遍历六次。上面的例子是前四轮的过程以及结果。下面有另外一个例子来表明如何用reduce来集合对象数组中的值：

let shoppingCart = [
    {
        product: 'phone',
        qty: 1,
        price: 500,
    },
    {
        product: 'Screen Protector',
        qty: 1,
        price: 10,
    },
    {
        product: 'Memory Card',
        qty: 2,
        price: 20,
    },
];
// 计算购物车内的价格总和
let total = shoppingCart.reduce(function (previousValue, currentValue) {
    return previousValue + currentValue.qty * currentValue.price;
}, 0);
console.log(total) // 550

以上是reduce的两个比较基础的用法，你也可以把它应用在一些更复杂的场景当中。还有一个比较常见的场景就是把一个数组中相同种类的对象归为一类，形成一个新的数组。

const people = [
  { name: 'Kyle', age: 26 },
  { name: 'John', age: 31 },
  { name: 'Sally', age: 42 },
  { name: 'Jill', age: 42 },
]
// 把年龄相同的人分为一组
const peopleGroupedByAge = people.reduce((groupedPeople, person) => {
  const age = person.age
  // 首先给每个存在的年龄段创建一个空数组
  // 然后用push将每个元素放入相应的数组
  if (groupedPeople[age] == null) groupedPeople[age] = []
  groupedPeople[age].push(person)
  return groupedPeople
    }, {}) // 初始值是一个空对象，这样才能使用增加属性
    console.log(peopleGroupedByAge)
/*
  {
    26: [{ name: 'Kyle', age: 26 }],
    31: [{ name: 'John', age: 31 }],
    42: [
      { name: 'Sally', age: 42 },
      { name: 'Jill', age: 42 }
    ]
  }
*/

6. every

基本语法：

every((element, index, array) => { /* … */ } ) // return boolean

最终，我们将以一个比较简单的函数收尾: every()。every方法用于检查一个数组中是否所有元素都满足条件。有任何一个不满足条件，回调函数将返回false。如果所有遍历都返回true，那么every最终将返回true

every自身的概念很好理解，我们用一个例子来阐述他的作用。

const inventors = [
    { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
    { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
    { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
    { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
    { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
    { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 },
    { first: 'Max', last: 'Planck', year: 1858, passed: 1947 },
    { first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 },
    { first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 },
    { first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 },
    { first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 },
    { first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 }
];
// 检查是不是所有发明家的last name都至少4个字母并且出生于1400年以后
let checkInventors = inventors.every(inventor => {
    return inventor.last.length >= 4 && inventor.year>1400
})
console.log(checkInventors) // true

最后只有一个需要额外注意的是，今天所讲的所有的数组方法，不会遍历空的数组元素

console.log([1, , 3].every((x) => x !== undefined)); // true
console.log([2, , 2].every((x) => x === 2)); // true

7. some

some()  遍历数组,返回参数函数里符合条件的元素,只要检测到有一个元素符合条件就return.

参数为一个函数,函数的形参1代表数组元素,形参2代表元素下标

let res = arr.some(function(item, index){
              return item.index >= 2
        });
console.log(res)  ; //   c

应用: 遍历购物车,判断商品id是否在购物车里存在,没有就加入id,有就增加数量。

8. for  of  遍历数组/字符串

//只有是现实iterator 接口的才能用for---of.对象不能
for( let item of arr ){
   console.log(item)
}

9. find()

find()方法，用于查找数组中是否有满足条件的元素，当找到第一个满足条件的元素时，则直接返回该元素。如果都不满足条件，则返回 undefined。不会改变原数组。

let arr = [1,2,3,4]
 // item：当前项，index：当前索引，arr：原数组
 const result = arr.find((item, index, arr) => {
 	return item <3
  })
console.log(result); //1

10. findIndex()

findIndex()：与find 类似，只不过findIndex()查找的是索引，找到符合条件的返回当前项的下标，没找到返回 -1。

let arr = [1,2,3,4]
// item：当前项，index：当前索引，arr：原数组
const result = arr.findIndex((item, index, arr) => {
  return item>3
 })
console.log(result); //3

11. for循环

for循环，也是最常见的。

可以使用临时变量，将长度缓存起来，避免重复获取数组长度，当数组较大时优化效果才会比较明显。 作者：朵宝特工007 https://www.bilibili.com/read/cv16952360 出处：bilibili

// arr 是要遍历的数组
// arr[i] 是遍历的数组的元素
// i 是数组的元素对应的下标(索引号)
for (var i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

let arr = [1, 2, 3, 4];
for (let i = 0; i < arr.length; i++) {
    arr[i] = arr[i] + 1; // 直接通过索引修改原数组的值
}
console.log(arr); // [2,3,4,5]

let list = [{sex: '男'},{sex: '女'},{sex: '男'}];
for (let i = 0; i < list.length; i++) {
   list[i].sex = '女';
}
console.log(list); // [{sex: '女'}, {sex: '女'}, {sex: '女'}]

12. for in遍历

// arr 遍历的数组
// item 遍历的数组的元素
for(var item in arr) {
  console.log(item);
}

let arr = [1, 2, 3, 4];
for(var item in arr) {
  console.log(item);
}

13. 遍历器机制

截止到ES6，JavaScript 已经拥有了数组、对象、Map集合和Set集合这样四种数据结构。

为了统一和简化遍历这四种数据结构的操作，ES6引入了遍历器机制。

ES6 规定，可遍历的对象都具有Symbol.iterator 属性，这个属性指向一个函数，就是当前对象默认的遍历器生成函数。

这个遍历器生成函数大致的模样可以用ES5 语法模拟出来：这个函数返回一个next() 方法，每调用next() 方法，都会返回数据结构的当前成员的信息。

具体来说，就是返回一个包含value和done两个属性的对象。

其中，value属性是当前成员的值，done属性是一个布尔值，表示遍历是否结束。

在ES6 中，已经默认为绝大多数內建的数据结构提供了遍历器，不需要自己去创建。

// keys()方法：默认遍历器，其值为集合中的所有键名。
// values()方法：默认遍历器，其值为集合中的所有值。
// entries()方法：默认遍历器，其值为所有成员的键值对。
const arr = ["A", "B", "C"];
console.log([...arr.keys()]); // [0, 1, 2]
console.log([...arr.values()]); // ["A", "B", "C"]
console.log([...arr.entries()]); // [[0, "A"],[1, "B"],[2, "C"]]

const set = new Set(arr);
console.log([...set.keys()]); // ["A", "B", "C"]
console.log([...set.values()]); // ["A", "B", "C"]
console.log([...set.entries()]); // [["A", "A"],["B", "B"],["C", "C"]]

const map = new Map().set("name", "Tom").set("age", 19);
console.log([...map.keys()]); // ["name", "age"]
console.log([...map.values()]); // ["Tom", 19]
console.log([...map.entries()]); // [["name", "Tom"],["age", 19]]

每个数据结构都有一个默认的遍历器，例如数组的默认遍历器是values()，在没有明确指定遍历器的情况下，这些数据结构都会使用默认的遍历器。

我们可以通过检测对象的Symbol.iterator属性来判断对象是否拥有遍历器。

const arr = ["A", "B", "C"];
console.log(typeof arr[Symbol.iterator] === "function"); // true
console.log(arr[Symbol.iterator]); // function values() { ... }

const set = new Set(arr);
console.log(typeof set[Symbol.iterator] === "function"); // true
console.log(set[Symbol.iterator]); // function values() { ... }

const map = new Map().set("name", "Tom").set("age", 19);
console.log(typeof map[Symbol.iterator] === "function"); // true
console.log(map[Symbol.iterator]); // function entries() { ... }

原生具备遍历器的对象：

数组、Map集合、Set集合、字符串、arguments和 NodeList（节点列表）。

对象（Object）默认是不可遍历的，我们可以通过Object.keys()、Object.values()和Object.entries() 方法把对象变成数组，使其拥有遍历器；或者直接为对象添加Symbol.iterator 属性来自定义遍历器。

const obj = {
  name: "Tom",
  age: 19
}
console.log(typeof Object.entries(obj)[Symbol.iterator] === "function"); // true
console.log([...Object.entries(obj)]); // [["name", "Tom"],["age", 19]]

总结

上面总结了十三种数组遍历方法，供大家参考和学习吧。

赏您的支持是我们创作的动力！
温馨提示：本文作者系Terry ，经Web前端之家编辑修改或补充，转载请注明出处和本文链接：
https://jiangweishan.com/article/arrbianli.html

网友评论文明上网理性发言 已有0人参与

发表评论:

相关文章