?? 個(gè)人主頁歡迎訪問 ??
大家好梨树,本人名叫蘇日儷格,大家叫我 (格格) 就好苦酱,在上一章節(jié)中我們學(xué)到了擴(kuò)展運(yùn)算符的用法酥泞,下面我們一起來繼續(xù)學(xué)習(xí)數(shù)組的循環(huán):
這里我們先說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} "bbb" 1 ["aaa", "bbb", "ccc"]
// {111} "ccc" 2 ["aaa", "bbb", "ccc"]
},111);
上面的這個(gè)例子中輸出的111就是改變this之后的值,如果沒有做任何修改的話當(dāng)然是window关贵,用箭頭函數(shù)寫的話是這樣的:
let arr = ['aaa','bbb','ccc'];
arr.forEach((val,index,arr)=>{
console.log(this,val,index,arr);
// window "aaa" 0 ["aaa", "bbb", "ccc"]
// window "bbb" 1 ["aaa", "bbb", "ccc"]
// window "ccc" 2 ["aaa", "bbb", "ccc"]
},111);
你會(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 ["bbb", "bbb", "ccc"]
// "ccc" 2 ["ccc", "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 ["bbb", "bbb", "ccc"]
// "ccc" 2 ["ccc", "bbb", "ccc"]
// [1, 1, 1]
});
console.log(newArr);
小白:說了半天這個(gè)東西到底有什么用呢粱坤?
格格:別著急哈,下面就來介紹一下:
map方法一般會(huì)用在整理數(shù)據(jù)結(jié)構(gòu)上瓷产,在數(shù)據(jù)交互的時(shí)候站玄,根據(jù)需求我們需要改一些前端部分需要的數(shù)據(jù)形式:
let aNews = [
{aaa: '為排行暴走萬步', bbb: 404512},
{aaa: '李榮浩慶生楊丞琳', bbb: 444512},
];
let newArr = aNews.map((val,index,arr) => {
let json = {};
json.title = `標(biāo)題:${val.aaa}`;
json.read = `閱覽量:${val.bbb}`;
return json;
});
console.log(newArr);
執(zhí)行效果:
3. filter()
用來過濾一些不合格的元素,如果回調(diào)函數(shù)返回的是true濒旦,那么自然會(huì)被留下來株旷,為false的就會(huì)被過濾掉,看一個(gè)例子就懂了哈:
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);
執(zhí)行結(jié)果:
4. some()
這個(gè)方法類似于查找一個(gè)字符串存在不存在尔邓,舉個(gè)例子說明:
let aNews = ['aaa','bbb','ccc'];
let newArr = aNews.some((item,index,arr) => {
return item=='aaa';
});
console.log(newArr); // true
5. every()
和some一樣晾剖,只不過是查找數(shù)組中的每一項(xiàng),所有元素都要符合條件梯嗽,才返回true:
let arr = [1,3,5,7,9];
let newArr = arr.every((val,index,arr)=>{
return val%2==1; // 判斷是不是奇數(shù)
});
console.log(newArr); // true
6. reduce()
從左往右運(yùn)算→
7. reduceRight()
從右往左運(yùn)算←
上面這兩種方法可以用來求數(shù)組的和齿尽、階乘、冪運(yùn)算灯节;接受4個(gè)函數(shù)參數(shù)循头,舉個(gè)例子:
let arr = [2,3,3];
let newArr = arr.reduce((prev,curr,index,arr)=>{
return prev-curr; // 運(yùn)算的方式
});
console.log(newArr); // -4
let arr = [2,3,3];
let newArr = arr.reduceRight((prev,curr,index,arr)=>{
return prev-curr; // 運(yùn)算的方式
});
console.log(newArr); // -2
相信大家已經(jīng)看出其中的端倪了。
下面說一個(gè)ES2017新增的冪運(yùn)算符(**)炎疆,它的用法及其優(yōu)點(diǎn)呢卡骂,還是要通過例子來看:
let arr = [2,3,2];
let newArr = arr.reduce((prev,curr,index,arr)=>{
return Math.pow(prev,curr);
//return prev**curr;
});
console.log(newArr); // 64
例子中的兩種寫法都可以,結(jié)果是一樣的形入,ES5的語法到此為止全跨。
下面來說一下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"]
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"
}
for...of循環(huán)你可以大膽放心的用,絕對(duì)沒有任何隱患亿遂,也不用擔(dān)心把它玩壞(? ??_??)? (*?????)?
關(guān)于數(shù)組的循環(huán)我們都已經(jīng)了然于心浓若,預(yù)知數(shù)組新增方法如何渺杉,請(qǐng)聽下回分解 (^?^)/~~~
本文的所有內(nèi)容均是一字一句敲上去的,希望大家閱讀完本文可以有所收獲七嫌,因?yàn)槟芰τ邢奚侔欤莆盏闹R(shí)也是不夠全面,歡迎大家提出來一起分享诵原!謝謝O(∩_∩)O~
歡迎訪問我的GitHub英妓,喜歡的可以star,項(xiàng)目隨意fork绍赛,支持轉(zhuǎn)載但要下標(biāo)注蔓纠;
歡迎光臨個(gè)人主頁