ES6 数组循环

A.ES5 中的循环:

1. for

for(let i=0; i<arr.length; i++){

//循环体语句

}

2. while

while(条件为真){

//循环体语句

}

B.数组新增的一些循环

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

第三个参数：数组本身 ar

1.forEach

let arr = ['aaa', 'bbb', 'ccc'];

arr.forEach(function(val, index, arr) {

console.log(this, val, index, arr); //回调函数

}, 123);

let arr = ['aaa','bbb','ccc'];

arr.forEach((val,index,arr)=>{

console.log(this,val,index,arr);

},123);

2.arr.map()

important

正常情况下， 需要配合 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. 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. some()

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

let aNews = ['aaa','bbb','ccc'];

let newArr = aNews.some((item,index,arr) => {

return item=='aaa';

});

console.log(newArr); // true

5. 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. reduce()

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

let arr = [2,3,3];

let newArr = arr.reduce((prev,curr,index,arr)=>{

return prev-curr; // 运算的方式

});

console.log(newArr); // -4

7. 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"

}