码迷,mamicode.com
首页 > 编程语言 > 详细

ES6 数组遍历方法的实战用法总结

时间:2020-04-29 15:03:40      阅读:63      评论:0      收藏:0      [点我收藏+]

标签:aabb   code   使用   include   调用   str   ant   eve   ast   

ES6原生语法中提供了非常多好用的数组‘遍历‘方法给我们(forEach,every,some,map,filter,reduce,reduceRight,indexOf,lastIndexOf),让我们可以实现更多更强大的功能,下面让我们通过这篇文章好好学习下,该如何使用它们。

forEach

对数组的每个元素执行一次提供的函数。用于遍历数组,无返回值,会改变原来数组中的值

语法解析:

arr.forEach((currentValue,index,array)=>{});
// currentValue 数组中正在处理的当前元素
// index 当前索引值
// array 正在处理的数组
// 返回值是undefined

例子:

[1,2,3].forEach((currentValue,index,array)=>{
    console.log(currentValue,index,array);
});

every

回调函数中,所有的都返回真,则返回真,有一个返回假,则返回假。 简而言之:“一假则假”。所有元素都满足条件返回true,只要有一个不满足则返回false

语法解析:

arr.every((currentValue,index,array)=>{
    // currentValue = 当前执行元素
    // index = 当前索引值
    // array = 执行的数组
})
返回值是true或者false

可别小看这个方法,自己平时工作当中两个方面经常使用到

  1. 全选中使用
  2. 多个关系的搜索中使用

例子:

[12, 5, 8, 130, 44].every((item)=>{
    return item >= 10
})
//上面的意思:当数组中所有的元素的值都大于10的时候则返回true,否则返回false

全选伪代码示例:

let allChecked = false;
const arr = [
    {
        id:"a",
        name:"a",
        checked:false
    },
    {
        id:"b",
        name:"b",
        checked:false
    }
]
allChecked = arr.every((item)=>{
    return item.checked === true
})
// 实现起来就是这么简单,当所有的都选中了,allChecked 全选的变量就赋值true
// 这如果硬是用es5的语法去实现的话,还是比较麻烦的

some

回调函数中有一个返回真,则返回真 简言之:“一真则真”。只要有一个满足条件的就返回true,如果所有都不满足则返回false

语法解析:

arr.some((currentValue,index,array)=>{
    // currentValue = 当前执行元素
    // index = 当前索引值
    // array = 执行的数组
})
// 返回值是true或者false

例子:

let bok = [2, 5, 8, 1, 4].some((item)=>{
    return item>5
})
// bok = true
// 只要有一个数组大于5 则整体返回true

map

创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。会返回被处理之后的新数组。

语法解析:

arr.map((currentValue,index,array)=>{
    // currentValue = 当前执行元素
    // index = 当前索引值
    // array = 执行的数组
})

// 返回一个新的数组

例子:

let arr = [1,2,3,4];
const map = arr.map(x=>x*2);
console.log(map);
//返回每一个处理过后的新数组 [2,4,6,8]

filter

返回一个新数组,其结果是改数组中的每个元素符合条件的结果。主要用于筛选,返回筛选后的一个新数组

语法解析:

arr.filter((currentValue,index,array)=>{
    // currentValue = 当前执行元素
    // index = 当前索引值
    // array = 执行的数组
})

// 返回一个新的数组

顾名思义这个应该肯定是各类查询,筛选上面。

例子:

let arr = [{name:"abc"},{name:"bcd"},{name:"afc"}];

arr.filter((item)=>{
    return item.name.includes(‘b‘);
});
// 筛选出名字字段中带有b的项

reduce && reduceRight

reduce()方法在数组的每个成员上执行一个reducer函数(您提供的),生成一个输出值。

注意:reduceRight是从右到左的相加(其它的同reduce是一样的,所以这里只讲reduce)

语法解析:

// 无参数
arr.reduce((accumulator, currentValue,currentIndex,array)=>{
    // accumulator第一项的值或者上一次叠加的结果值
    // currentValue 当前项
    // currentIndex 当前项索引
    // array 数组本身
});

//有参数
arr.reduce((accumulator, currentValue,currentIndex,array)=>{},参数);
// 参数 = accumulator 第一次运行时的初始值

例子1:计算数据总和

const arr = [1,2,3];
const num = arr.reduce((acc,cur,index)=>{
    return acc + cur
});
// num = 6

const num1 = arr.reduce((acc,cur,index)=>{
    return acc+cur
},10)
// num = 16

例子2:计算一个字符串中字母出现的次数

const str = ‘aaabbcccdd‘;
str.split(‘‘).reduce((acc,cur)=>{
    acc[cur] ? acc[cur]++ : acc[cur] = 1
},{});
// 解析:初始化的值是一个空对象
// 运行的时候,判断对象里面是不是有当前的字母,
// 如果没有的话则添加到对象中,并赋值为1
// 如果已经存在的话在++,这样就计算出一个字符串中字母出现的次数
// 同样可以利用这点进行数组去重

const arr = [‘a‘,‘a‘,‘b‘,‘c‘];

const obj = arr.reduce((acc,cur)=>{
    return acc[cur] ? acc[cur]++ : acc[cur] = 1
},{})

// 最后通过obj.keys() 的方法获取到的数组就是去重之后的。

indexOf

indexOf()方法返回在数组中可以找到给定元素的第一个索引,如果不存在,则返回-1。

例子:

var beasts = [‘ant‘, ‘bison‘, ‘camel‘, ‘duck‘, ‘bison‘];

console.log(beasts.indexOf(‘bison‘));
// expected output: 1

// start from index 2
console.log(beasts.indexOf(‘bison‘, 2));
// expected output: 4

console.log(beasts.indexOf(‘giraffe‘));
// expected output: -1

lastIndexOf

lastIndexOf()方法返回给定元素在数组中找到的最后一个索引,如果该元素不存在,则返回-1。数组从fromIndex开始向后搜索。

例子:

var animals = [‘Dodo‘, ‘Tiger‘, ‘Penguin‘, ‘Dodo‘];

console.log(animals.lastIndexOf(‘Dodo‘));
// expected output: 3

console.log(animals.lastIndexOf(‘Tiger‘));
// expected output: 1

总结:

本篇文章主要讲述了ES6中数组新增的一些方法,以及如何使用。其实这些方法的实战场景还是非常多的,需要在实战中才能有更加深刻的体会。

 

ES6 数组遍历方法的实战用法总结

标签:aabb   code   使用   include   调用   str   ant   eve   ast   

原文地址:https://www.cnblogs.com/joe235/p/12699046.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!