淺談ES6新增的數(shù)組方法和對(duì)象
es6新增的遍歷數(shù)組的方法,后面都會(huì)用這個(gè)方法來(lái)遍歷數(shù)組,或者對(duì)象,還有set,map
let arr=[1,2,3,4,3,2,1,2];
遍歷數(shù)組最簡(jiǎn)潔直接的方法
for (let value of arr) { console.log(value);//輸出1,2,3,4,3,2,1,2 }
1. 數(shù)組.map()
返回一個(gè)新的數(shù)組,es5要復(fù)制一個(gè)新的數(shù)組我們一般用循環(huán),現(xiàn)在直接用map
let arr=[1,2,3,4,3,2,1,2]; let newArr=arr.map((value,index,arr)=>value) console.log(newArr)//輸出[1,2,3,4],當(dāng)然里面也可以返回下標(biāo)的數(shù)組 console.log(newArr==arr)//輸出false
2. 數(shù)組.filter()
過(guò)濾,返回為真的值,
let arr=[1,2,3,4,3,2,1,2]; let newArr1=arr.filter((value,index,arr)=>value>=3) console.log(newArr1);//輸出[3,4,3]
3. 數(shù)組.reduce()
每個(gè)參數(shù)的意思previousValue上次回調(diào)的返回值或者初始值,currentValue正在處理的數(shù)組值,currentIndex正在處理函數(shù)的下標(biāo)
//以前找最大值,最小值我們是用的2層循環(huán)來(lái)找的,現(xiàn)在直接一行代碼搞定,是不是很爽 let arr=[1,2,3,4,3,2,1,2]; let newArr2=arr.reduce((pre,cur,curIndex,arr)=>pre>cur?pre:cur) //pre=1不大于cur=2,返回2; //pre接收返回值2;pre=2不大于cur=3,返回3 ..... //一直找到4并且返回4; //pre接收4,pre=4大于pre=3然后就一直返回的都是4,這樣就會(huì)找到最大值 console.log(newArr2)//輸出4,找到最大值,如果想找最小值只需要pre<cur?pre:cur
es6提供的一種新的數(shù)據(jù)結(jié)構(gòu),它類(lèi)似于數(shù)組,但是成員的值都是唯一的,沒(méi)有重復(fù)的值(包括NaN),但是set內(nèi)部對(duì)象是不相等的
Set不是數(shù)組,自然就沒(méi)有l(wèi)ength屬性,它有size屬性,set.size,就是返回它的成員數(shù)量;
let set=new Set([1,2,3,4,3,2,1]);//這里必須傳入的是數(shù)組 console.log(set)//輸出set {1,2,3,4} console.log(set.add(2))//依然輸出set {1,2,3,4} console.log(set.add(5))//輸出 set {1,2,3,4,5} console.log(set.delete(1))//輸出true,表示刪除成功 console.log(set.has(2))//輸出true,表示存在這個(gè)值 console.log(set.clear())//輸出undefined,這個(gè)方法知識(shí)刪除所有值,并沒(méi)有返回值 console.log(set)//這時(shí)候set已經(jīng)清空了,所以輸出為 set {}
Array.from()方法從一個(gè)類(lèi)似數(shù)組或可以迭代的對(duì)象中創(chuàng)建一個(gè)新的數(shù)組實(shí)例
let set=new Set([1,2,3,4,3,2,1]); console.log(Array.from(set))//用這個(gè)方法就可以把set對(duì)象轉(zhuǎn)換我數(shù)組,輸出為[1,2,3,4,3,2,1] console.log(Array.from('hello'))//輸出為['h','e','l','l','o']
利用set 和 from達(dá)到數(shù)組去重
let arr1=[1,2,2,1,1,3,5,2] console.log(Array.from(new Set(arr1)))//輸出[1,2,3,5],以后別人問(wèn)你怎么數(shù)組去重,你可以裝下逼了
寫(xiě)到這里突然想到es6的...方法
console.log([...new Set(arr1)])
Set的遍歷方法
for (let value of set.keys()) { console.log(value)//輸出鍵 } for (let value of set.values()) { console.log(value)//輸出值 } for (let value of set.entries()) { console.log(value)//輸出鍵值對(duì) }
es6提供了Map數(shù)據(jù)結(jié)構(gòu),它類(lèi)似于對(duì)象,也是鍵值對(duì)的集合,但是它的強(qiáng)大在于鍵的范圍可以任何類(lèi)型的數(shù)據(jù);
let map=new Map([["name","張三"],[[1,2,3],18],[{},"男"]]) console.log(map) console.log(map.set("name","李四"))//輸出 Map { 'name' => '張三', [ 1, 2, 3 ] => 18, {} => '男' }如果沒(méi)有這個(gè)鍵,就會(huì)添加新的鍵值對(duì)到后面 console.log(map.get("name"))//輸出李四 console.log(map.delete("name"))//輸出true console.log(map.clear())//刪除所有鍵值對(duì)
以上這篇淺談ES6新增的數(shù)組方法和對(duì)象就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Javascript遍歷Html Table示例(包括內(nèi)容和屬性值)
這篇文章主要介紹了Javascript如何遍歷Html Table(包括內(nèi)容和屬性值),需要的朋友可以參考下2014-07-07Bootstrap DateTime Picker日歷控件簡(jiǎn)單應(yīng)用
這篇文章主要介紹了Bootstrap DateTime Picker日歷控件的簡(jiǎn)單應(yīng)用,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03使用js完成節(jié)點(diǎn)的增刪改復(fù)制等的操作
本文為大家詳細(xì)介紹下使用js完成節(jié)點(diǎn)的增刪改復(fù)制等的操作,具體的實(shí)現(xiàn)如下,感興趣的朋友可以參考下2014-01-01javascript 實(shí)現(xiàn)父窗口引用彈出窗口的值的腳本
javascript 實(shí)現(xiàn)父窗口引用彈出窗口的值的腳本...2007-08-08JS中使用media實(shí)現(xiàn)響應(yīng)式布局
本文通過(guò)代碼給大家總結(jié)了常見(jiàn)的響應(yīng)式布局media的使用方法,感興趣的朋友參考下吧2017-08-08js實(shí)現(xiàn)樹(shù)形數(shù)據(jù)轉(zhuǎn)成扁平數(shù)據(jù)的方法示例
這篇文章主要介紹了js實(shí)現(xiàn)樹(shù)形數(shù)據(jù)轉(zhuǎn)成扁平數(shù)據(jù)的方法示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02詳解CocosCreator中幾種計(jì)時(shí)器的使用方法
這篇文章主要介紹了CocosCreator中幾種計(jì)時(shí)器的使用方法,推薦使用schedule,功能多些,銷(xiāo)毀時(shí)還能自動(dòng)移除2021-04-04小程序?qū)崿F(xiàn)Token生成與驗(yàn)證
本文主要介紹了小程序?qū)崿F(xiàn)Token生成與驗(yàn)證,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-12-12JavaScript實(shí)現(xiàn)三種常用網(wǎng)頁(yè)特效(offset、client、scroll系列)
這篇文章主要為大家介紹了三種常用的PC端網(wǎng)頁(yè)特效:元素偏移量offset系列,元素可視區(qū)client系列和元素滾動(dòng)scroll系列,文中示例代碼介紹詳細(xì),需要的可以參考一下2021-12-12