一、回顧ES5中的一些迴圈方法
1.forEach()
let arr = ['apple','orange','tomato','banana'];
arr.forEach(function(val,index,arr){
console.log(val,index,arr);
});//依次列印的是該陣列每次迴圈的值，索引號和陣列本身，這是es5裡原本擁有的一個迴圈
複製程式碼forEach()通常有兩個引數，第一個就是每迴圈一次需要執行的回撥函式，該函式有三個引數，分別是每次迴圈的選項，索引和陣列本身；第二個則是當前this指向的物件，預設是window，還可以指定為任意字串、數字、document等等。
arr.forEach((val,index,arr)=>{
console.log(val,index,arr);
});//如上也可以換成箭頭函式表達
複製程式碼但是，當回撥函式用箭頭函式表達時，第二個引數無論怎麼寫，this物件都是當前函式定義所在的物件，一般情況下是window。但如果當前函式被定義在某個json物件裡，那就是該json物件。
2.map()非常有用，做資料互動對映
如下案例，map看起來與forEach的作用一致
let arr1=[
{title:'aaaaa',read:'120',hot:true},
{title:'bbbbb',read:'100',hot:true},
{title:'ccccc',read:'15',hot:true},
{title:'ddddd',read:'10',hot:true},
{title:'eeeee',read:'195',hot:true},
];
arr1.map((item,index,arr)=>{
console.log(item,index,arr);
});//依次列印陣列的每個選項、索引及陣列本身
複製程式碼map正常情況下，需要結合return使用，返回一個新陣列；如果沒有return，就相當於forEach。
如下案例中，如果加了return，則返回陣列[1,1,1,1,1];如果沒加，則返回陣列[undefined,undefined,undefined,undefined,undefined]。
let newArr = arr1.map((item,index,arr)=>{
console.log(item,index,arr);
return 1;
});
console.log(newArr);//arr1在上個案例中定義
複製程式碼注意：map會返回一個陣列，forEach則沒有返回值，上面的map如果改成forEach返回的結果只有一個undefined.
map還可以用於整理資料的表達方式:
let arr2=[
{title:'aaaaa',read:120,hot:true},
{title:'bbbbb',read:100,hot:true},
{title:'ccccc',read:15,hot:true},
{title:'ddddd',read:10,hot:true},
{title:'eeeee',read:195,hot:true},
];
//map還可以用於整理資料的表達方式
let newArr2 = arr2.map((item,index,arr2)=>{
let json2={}
json2.t=`哈哈哈${item.title}-----`;
json2.r=item.read+200;
json2.hot=item.hot==true && '牛逼！';
return json2;
});
console.log(newArr2);
/*
[
0: {t: "哈哈哈aaaaa-----", r: 320, hot: "牛逼！"}
1: {t: "哈哈哈bbbbb-----", r: 300, hot: "牛逼！"}
2: {t: "哈哈哈ccccc-----", r: 215, hot: "牛逼！"}
3: {t: "哈哈哈ddddd-----", r: 210, hot: "牛逼！"}
4: {t: "哈哈哈eeeee-----", r: 395, hot: "牛逼！"}
length: 5
__proto__: Array(0)
]
*/
複製程式碼filter(),過濾一些不合格的“元素”，如果返回值為true，那麼它的值就留下來
let arr3=[
{title:'aaaaa',read:120,hot:true},
{title:'bbbbb',read:100,hot:false},
{title:'ccccc',read:15,hot:true},
{title:'ddddd',read:10,hot:true},
{title:'eeeee',read:195,hot:false},
];
let newArr3 = arr3.filter((item,index,arr3)=>{
// return item.hot==true;
return item.hot;
});
console.log(newArr3);//只有hot為true的被返回
複製程式碼some()類似於查詢，陣列裡面只要有某一個元素符合條件，就返回true
let arr4=['apple','banana','orange'];
let arrr4 = arr4.some((val,index,arr4)=>{
return val=='banana';
});
console.log(arrr4);//true
複製程式碼 let arr5=['apple','banana','orange'];
function findInArray(arr,item){
return arr.some((val,index,arr)=>{
return val==item;
});
}
console.log(findInArray(arr5,'orange'));
複製程式碼every()陣列必須都符合條件，才返回true
let arr6 = [1,3,5,7,9];
var arrr6 = arr6.every((val,index,arr6)=>{
return val%2==1;
});
console.log(arrr6);//true
複製程式碼reduce()回撥函式接受4個引數，第一個是上一個值，第二個是當前值，第三個索引，第四個當前陣列
偶爾會被用來求和：
let arr7=[1,2,3,4,5,6,7,8,9,10];
let res = arr7.reduce((prev,cur,index,arr)=>{
return prev+cur;
});
console.log(res);//55,即陣列的和
複製程式碼 let arr8=[2,2,3];
let res2 = arr8.reduce((prev,cur,index,arr)=>{
return Math.pow(prev,cur);//math.pow(x,y),求x的y次方
});
console.log(res2);//64
複製程式碼ruduceRight()和上面相似，但計算順序是從右往左：
let arr9=[2,2,3];
let res3 = arr9.reduceRight((prev,cur,index,arr)=>{
return Math.pow(prev,cur);
//return prev**cur;
});
console.log(res3);//3的2次方是9，9的2次方是81，結果81
複製程式碼ES6新增的迴圈
for...of...
arr.keys()表示陣列的下標,arr.entries()表示陣列的每一項，其本身也可認為是一個陣列，所以item[0]才是索引
let arr=['apple','banana','orange','tomato'];
for (let val of arr){
console.log(val);
};//列印陣列的值
for(let index of arr.keys()){
console.log(index);
};//列印陣列的索引
for (let item of arr.entries()){
console.log(item);
console.log(item[0]);//列印索引
console.log(item[1]);//列印值
};//同時列印索引和值
for(let [key,val] of arr.entries()){
console.log(key,val);
};
複製程式碼