ES6 数组遍历方法的实战用法总结
2021-02-03 13:14
标签：aabb code 使用 include 调用 str ant eve ast ES6原生语法中提供了非常多好用的数组‘遍历‘方法给我们（forEach，every，some，map，filter，reduce，reduceRight，indexOf，lastIndexOf），让我们可以实现更多更强大的功能，下面让我们通过这篇文章好好学习下，该如何使用它们。 对数组的每个元素执行一次提供的函数。用于遍历数组，无返回值，会改变原来数组中的值 语法解析： 例子： 回调函数中，所有的都返回真，则返回真，有一个返回假，则返回假。 简而言之：“一假则假”。所有元素都满足条件返回true，只要有一个不满足则返回false 语法解析： 可别小看这个方法，自己平时工作当中两个方面经常使用到 例子： 全选伪代码示例： 回调函数中有一个返回真，则返回真 简言之：“一真则真”。只要有一个满足条件的就返回true，如果所有都不满足则返回false 语法解析： 例子： 创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。会返回被处理之后的新数组。 语法解析： 例子： 返回一个新数组，其结果是改数组中的每个元素符合条件的结果。主要用于筛选，返回筛选后的一个新数组 语法解析： 顾名思义这个应该肯定是各类查询，筛选上面。 例子： reduce()方法在数组的每个成员上执行一个reducer函数(您提供的)，生成一个输出值。 注意：reduceRight是从右到左的相加(其它的同reduce是一样的，所以这里只讲reduce) 语法解析： 例子1：计算数据总和 例子2：计算一个字符串中字母出现的次数 indexOf()方法返回在数组中可以找到给定元素的第一个索引，如果不存在，则返回-1。 例子： lastIndexOf()方法返回给定元素在数组中找到的最后一个索引，如果该元素不存在，则返回-1。数组从fromIndex开始向后搜索。 例子： 总结： 本篇文章主要讲述了ES6中数组新增的一些方法，以及如何使用。其实这些方法的实战场景还是非常多的，需要在实战中才能有更加深刻的体会。 ES6 数组遍历方法的实战用法总结 标签：aabb code 使用 include 调用 str ant eve ast 原文地址：https://www.cnblogs.com/joe235/p/12699046.htmlforEach
arr.forEach((currentValue,index,array)=>{});
// currentValue 数组中正在处理的当前元素
// index 当前索引值
// array 正在处理的数组
// 返回值是undefined
[1,2,3].forEach((currentValue,index,array)=>{
console.log(currentValue,index,array);
});
every
arr.every((currentValue,index,array)=>{
// currentValue = 当前执行元素
// index = 当前索引值
// array = 执行的数组
})
返回值是true或者false
[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
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
// 无参数
arr.reduce((accumulator, currentValue,currentIndex,array)=>{
// accumulator第一项的值或者上一次叠加的结果值
// currentValue 当前项
// currentIndex 当前项索引
// array 数组本身
});
//有参数
arr.reduce((accumulator, currentValue,currentIndex,array)=>{},参数);
// 参数 = accumulator 第一次运行时的初始值
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
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
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
var animals = [‘Dodo‘, ‘Tiger‘, ‘Penguin‘, ‘Dodo‘];
console.log(animals.lastIndexOf(‘Dodo‘));
// expected output: 3
console.log(animals.lastIndexOf(‘Tiger‘));
// expected output: 1
下一篇：python常用方法手记