ES6 数组循环
ES6 数组循环
一.
1. for(let I = 0; I < arr.length; I++)
while
2. arr.forEach() -->代替普通for循环
三个参数:val当前遍历到的数据,index当前遍历到的数据的序号,arr当前遍历的数组
let arr = ['apple', 'banana', 'orange']; arr.forEach(function(val, index, arr){ console.log(val,index,arr); }); -->输出 apple 0 ['apple', 'banana', 'orange'] banana 1 ['apple', 'banana', 'orange'] orange 2 ['apple', 'banana', 'orange']
3. arr.map()-->做数据交互“映射”
(1)返回的是个新的数组,map()方法不会改变原数组,需要配合return,return的值会将原数组中的对应值替换掉 。
(2)平时只要用map,一定要有return
let arr = [ {title:'aaa', read:100, hot:true}, {title:'bbb', read:100, hot:true}, {title:'ccc', read:100, hot:true}, {title:'ddd', read:100, hot:true} ]; let newArr = arr.map((item,index,arr)=>{ console.log(item,index,arr); return 1; }); console.log(newArr); -->返回四个1的数组
(3)若是没有return,相当于forEach()
let arr = [ {title:'aaa', read:100, hot:true}, {title:'bbb', read:100, hot:true}, {title:'ccc', read:100, hot:true}, {title:'ddd', read:100, hot:true} ]; arr.map((item,index,arr)=>{ console.log(item,index,arr); });
4. arr.filter()-->过滤
(1) filter方法的return只有两种情况,true/false;如果返回true就保留这个数据,如果返回false,就删除这个数据。也是返回新数组,不改变原数组。
(2)过滤一些不合格“元素”,如果回调函数返回true,就留下来
let arr = [ {title:'aaa', read:100, hot:true}, {title:'bbb', read:100, hot:false}, {title:'ccc', read:100, hot:true}, {title:'ddd', read:100, hot:false} ]; let newArr = arr.filter((item,index,arr)=>{ return item.hot == true; }); console.log(newArr);
5. arr.some()-->类似查找,数组里面某一个元素符合条件,返回true
let arr = ['apple', 'banana', 'orange']; let b = arr.some((val, index, arr)=>{ return val == 'banana'; }); console.log(b); -->输出true
- findInArray函数封装
let arr = ['apple', 'banana', 'orange']; function findInArray(arr, item){ return arr.some((val, index, arr)=>{ return val == item; }) } findInArray(arr, 'orange'); -->返回true
6. arr.every()-->数组里面所有的元素都要符合条件,才返回true
eg:判断数组内部是否都为奇数
let arr = [1,3,5,7,10]; let a = arr.every((val, index, arr)=>{ return val % 2 == 1; }); console.log(a); -->false
7. 以上五种循环方法,都可以接收两个参数
arr.forEach/map...(循环回调函数,this指向谁)
let arr = ['apple', 'banana', 'orange']; arr.forEach(function(val, index, arr){ console.log(this,val,index,arr); },window);
二. 内部参数更复杂一些的循环方法
1. arr.reduce()-->从左往右
(1)求数组的和
let arr = [1,2,3,4,5,6,7,8,9,10]; let sum = arr.reduce((prev, cur, item, arr)=>{ return prev + cur; //代表上一次存储的结果+当前值 }); console.log(sum);
(2)求次方
let arr = [2,2,4]; let res = arr.reduce((prev, cur, item, arr)=>{ return Math.pow(prev , cur); }); console.log(res); -->2的2次方,的4次方
2. arr.reduceRight()-->从右往左
let arr = [2,3,4]; let res = arr.reduce((prev, cur, item, arr)=>{ return Math.pow(prev , cur); }); console.log(res); -->4的3次方,的2次方
三.for...of...
let arr = ['apple', 'banana', 'orange']; for(let val of arr){ console.log(val); } --> apple banana orange
- arr.keys() 数组下标
let arr = ['apple', 'banana', 'orange']; for(let index of arr.keys()){ console.log(index); } --> 0 1 2
- arr.entries() 数组某一项
let arr = ['apple', 'banana', 'orange']; for(let item of arr.entries()){ console.log(item); } --> [0,'apple'] [1,'banana'] [2,'orange']
let arr = ['apple', 'banana', 'orange']; for(let [key,val] of arr.entries()){ console.log(key,val); } --> 0 'apple' 1 'banana' 2 'orange'