ES6 数组循环

一、ES6中的数组循环

forEach | map | filter | some() | every() | reduce() | reduceRight() | for...of... 

语法一致

arr.forEach | map | filter | some | every | reduce | reduceRight | for...of... (function(val,index,arr){
 //回调函数
 }this 指向);
 //参数:循环里面执行的回调函数,循环调用执行的语句 (略)
//参数:this 的指向[可选项]
//循环中回调函数的参数有三个:
//第一个参数:循环出来的值 val
//第二个参数:循环出来的值的索引 index
//第三个参数:数组本身 arr

1.arr.forEach()

//普通函数
	let arr=["chinaese","amercan","russian","england"]
	// ES6
	arr.forEach(function(val,index,arr){
		// val值 index索引 arr数组 可有选择或颠倒使用
		console.log(this,val,index,arr)
	},123)
	//箭头函数
	arr.forEach((val,index,arr)=>{
		console.log(this,val,index,arr)//window
	},123) //箭头函数中的this指向当前定义函数所在的对象

2.arr.map()

正常情况下,需要配合 return,返回是一个新的数组
若是没有 return,相当于 forEach
注意:平时只要用 map,一定是要有 return
(1)无返回值

let arr = ['aaa','bbb','ccc'];
let newArr = arr.map((val,index,arr) => {
 console.log(val,index,arr);
});
console.log(newArr);

(2)有返回值

 let arr = ['aaa','bbb','ccc'];
let newArr = arr.map((val,index,arr) => {
 console.log(val,index,arr);
 return 1;
});
console.log(newArr);

map 方法一般会用在整理数据结构上,在数据交互的时候,根据需求我们需要改一些前端部分需要的数据
形式:

 let aNews = [
 {aaa: '为排行暴走万步', bbb: 404512},
 {aaa: '李荣浩庆生杨丞琳', bbb: 444512},
 ];
let newArr = aNews.map((val,index,arr) => {
 let json = {};
 json.title = `标题:${val.aaa}`;
 json.read = `阅览量:${val.bbb}`;
 return json;
});
console.log(newArr);

3. arr.filter()

用来过滤一些不合格的元素,如果回调函数返回的是 true,那么自然会被留下来,为 false 的就会被过滤掉

 let aNews = [
 {title: '为排行暴走万步', read: 404512, hot: false},
 {title: '李荣浩庆生杨丞琳', read: 444512, hot: true},
];
let newArr = aNews.filter((val,index,arr) => {
 return val.hot==true;
});
console.log(newArr);

4.arr. some()

查找一个字符串存在不存在

 let aNews = ['aaa','bbb','ccc'];
let newArr = aNews.some((item,index,arr) => {
 return item=='aaa';
});
console.log(newArr); // true

5. arr.every()

查找数组中的每一项,所有元素都要符合条件,才返回 true

 let arr = [1,3,5,7,9];
let newArr = arr.every((val,index,arr)=>{
 return val%2==1; // 判断是不是奇数
});
 console.log(newArr); // true

6.arr reduce()

从左往右运算→求数组的和、差、积、阶乘

let arr = [2,3,3];
let newArr = arr.reduce((prev,curr,index,arr)=>{
 return prev-curr; // 运算的方式
});
console.log(newArr); // -4

7. arr.reduceRight()

从右往左运算←
上面这两种方法可以用来求数组的和、阶乘、幂运算;接受 4 个函数参数

let arr = [2,3,3];
let newArr = arr.reduceRight((prev,curr,index,arr)=>{
 return prev-curr; // 运算的方式
});
console.log(newArr); // -2

ES2017 新增的幂运算符() 幂**

let arr = [2,3,2];
let newArr = arr.reduce((prev,curr,index,arr)=>{
 return Math.pow(prev,curr);
 return prev**curr;
});
console.log(newArr); // 6
 Math.pow(2,3) //ES5 以往做法求 2 的 3 次方
 2 ** 3 //ES6 写法

8. for…of…

arr.keys() 数组下标
arr.entries() 数组某一项

 let arr = ['aaa','bbb','ccc'];
for (let val of arr) {
 console.log(val); // 输出每一项
 // aaa
 // bbb
 // ccc
}
for (let index of arr.keys()) {
 console.log(index); // 输出每一项的索引
 // 0
 // 1
 // 2
}
for (let item of arr.entries()) {
 console.log(item); // 输出三个数组
 // [0, "aaa"]
 // [1, "bbb"]
 // [2, "ccc"]
 console.log(item[0]); // 0 1 2
 console.log(item[1]); // aaa bbb ccc
}
for (let [key,val] of arr.entries()) {
 console.log(key,val); 
 // 0 "aaa"
 // 1 "bbb"
 // 2 "ccc"
}
  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值