這里我們先說一下ES5中的循環(huán)，一下焦紅循環(huán)的前五種接受的參數(shù)是一樣的，都有兩個(gè)參數(shù):
第一個(gè)參數(shù)：循環(huán)里面執(zhí)行的回調(diào)函數(shù)，循環(huán)調(diào)用執(zhí)行的語句
第二個(gè)參數(shù)：this的指向（可有可無）
循環(huán)中回調(diào)函數(shù)的參數(shù)有三個(gè)：
第一個(gè)參數(shù)：循環(huán)出來的值
第二個(gè)參數(shù)：循環(huán)出來的值得索引
第三個(gè)參數(shù)：數(shù)組本身
1、forEach()
let arr = ['aaa','bbb','ccc'];
arr.forEach(function(val,index,arr){
console.log(this,val,index,arr);
// {111} "aaa" 0 ["aaa", "bbb" , "ccc"]
// {111} "aaa" 1 ["aaa", "bbb" , "ccc"]
// {111} "aaa" 2 ["aaa", "bbb" , "ccc"]
},111);
上線這個(gè)例子終屬楚的111 就是改變this之后的值，如果沒有做任何修改的話當(dāng)然是window，用箭頭函數(shù)寫的話就是這樣的：
let arr = ['aaa','bbb','ccc'];
forEach((val,index,arr)=>{
console.log(this,val,index,arr);
//window "aaa" 0 ["aaa","bbb","ccc"]
//window "aaa" 1 ["aaa","bbb","ccc"]
//window "aaa" 2 ["aaa","bbb","ccc"]
})
你會(huì)發(fā)現(xiàn)this的指向沒有改變，因?yàn)樵谶@個(gè)箭頭函數(shù)的例子里this本身指向的就是window。
2、map()
這個(gè)方法還是挺有用的。一般在和后臺(tái)數(shù)據(jù)交互的時(shí)候，做映射。所為映射就是一一對(duì)應(yīng)的關(guān)系，與forEach不一樣的地方就是有返回值，如果不加return就和forEach一樣。因?yàn)閒orEach沒有返回值，如果加了return，就會(huì)返回一個(gè)新數(shù)組，下面看兩個(gè)例子：
（1）沒給return放入之的時(shí)候，返回的是undefined：
let arr = ['aaa','bbb','ccc'];
let newArr = arr.map((val,index,arr) => {
console.log(val,index,arr);
// "aaa" 0 ['aaa','bbb','ccc']
// "bbb" 1 ['aaa','bbb','ccc']
// "ccc" 2 ['aaa','bbb','ccc']
// [undefined,undefined,undefined]
});
console.log(newArr);
（2）
return一個(gè)值的時(shí)候：
let arr = ['aaa','bbb','ccc'];
let newArr = arr.map((val,index,arr) => {
console.log(val,index,arr);
return 1;
// "aaa" 0 ['aaa','bbb','ccc']
// "bbb" 1 ['aaa','bbb','ccc']
// "ccc" 2 ['aaa','bbb','ccc']
// [1,1,1]
});
console.log(newArr);
map方法一般用在整理數(shù)據(jù)結(jié)構(gòu)上，在數(shù)據(jù)交互的時(shí)候，根據(jù)需求我們需要改一些前端部分需要的數(shù)據(jù)樣式：
let aNews = [
{
aaa: 'I am a teacher!',bbb: 25
},
{
aaa: 'I am your students!',bbb: 10
}
];
let newArr = aNews.map((val,index,arr) => {
let json = {};
json.title = `標(biāo)題${val.aaa}`;
json.read = `內(nèi)容${val.bbb}`;
return json;
});
console.log(newArr);
執(zhí)行效果：
3、filter()
用來顧慮一些不合格的元素，如果回調(diào)函數(shù)返回的是true，name自然會(huì)被留下來，為false的就會(huì)被過濾掉，看一個(gè)例子：
let aNews = [
{
aaa: 'I am a teacher!',bbb: 25,hot:true
},
{
aaa: 'I am your students!',bbb: 10,hot:false
}
];
let newArr = aNews.filter((val,index,arr) => {
return val.hot == true;
});
console.log(newArr);
執(zhí)行結(jié)果:
1528885809(1).jpg
4、some()
這個(gè)方法類似于查找一個(gè)字符串存在不存在，舉個(gè)例子說明
let aNews = ['aaa','bbb','ccc'];
let newArr = aNews.some((item,index,arr) => {
return item == 'cca';
});
console.log(newArr);
5、every();
let aNews = [1,2,3,5,7,9];
let newArr = aNews.every((item,index,arr) => {
return item%2 == 1;
});
console.log(newArr);
6、reduce();
從左向右運(yùn)算
7、reduceRight()
從右向左運(yùn)算，這兩種方法都可以用來求數(shù)組的和，階乘，冪運(yùn)算；接受4個(gè)函數(shù)參數(shù)，例子：
let arr = [2,3,3];
let newArr = arr.reduce((prev,end,index,arr) => {
return prev-end; //運(yùn)算的方式
});
console.log(newArr); //-4
let arr = [2,3,3];
let newArr = arr.reduceRight((prev,end,index,arr) => {
return prev-end; //運(yùn)算的方式
});
console.log(newArr); //-2
ES2017新增的冪運(yùn)算（**），用法及其優(yōu)點(diǎn)：
let arr = [2,3,2];
let newArr = arr.reduce((prev,end,index,arr) => {
return Math.pow(prev,end); //運(yùn)算的方式
//return prev**end
});
console.log(newArr); //64
ES5語法到此結(jié)束，蝦米那來說一下ES6新增的東西
8 、for...of...
let arr = ['aaa','bbb','ccc'];
for(let val of arr){
console.log(val); //輸出每一項(xiàng)
// aaa
// bbb
// ccc
}
for(let index of arr.keys()){
console.log(index);//輸出每一項(xiàng)的索引
// 0
// 1
// 2
}
for(let item of arr.entries()){
console.log(item);//輸出三個(gè)數(shù)組
// [0,'aaa']
// [1,'bbb']
// [2,'ccc']
}
for(let [ke,va] of arr.entries()){
console.log(ke,va);
// 0 'aaa'
// 1 'bbb'
// 2 'ccc'
}
GitHub個(gè)人主頁 ：https://github.com/Cyrildog
有些事情，要等到你漸漸清醒了，才明白它是個(gè)錯(cuò)誤；有些東西，要等到你真正放下了，也許才知道它的沉重。
image
