這篇文章主要介紹“ES6數(shù)組新增方法知識點(diǎn)有哪些”，在日常操作中，相信很多人在ES6數(shù)組新增方法知識點(diǎn)有哪些問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”ES6數(shù)組新增方法知識點(diǎn)有哪些”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

創(chuàng)新互聯(lián)長期為近1000家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為昆都侖企業(yè)提供專業(yè)的網(wǎng)站制作、網(wǎng)站設(shè)計，昆都侖網(wǎng)站改版等技術(shù)服務(wù)。擁有十年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

迭代方法：

ECMAScript為數(shù)組定義了5個迭代方法。每個方法接收兩個參數(shù)：以每一項(xiàng)為參數(shù)運(yùn)行的函數(shù)，以及可選的作為函數(shù)運(yùn)行上下文的作用域?qū)ο螅ㄓ绊懞瘮?shù)中this的值）。傳給每個方法的函數(shù)接收3個參數(shù)：數(shù)組元素、元素索引和數(shù)組本身。因具體方法而異，這個函數(shù)的執(zhí)行結(jié)果可能會也可能不會影響方法的返回值。數(shù)組的5個迭代方法如下。

一、map方法：對數(shù)組每一項(xiàng)都運(yùn)行傳入的函數(shù)，返回由每次函數(shù)調(diào)用的結(jié)果構(gòu)成的數(shù)組

也可以理解為：給數(shù)組中的每一個元素進(jìn)行特殊處理后，返回一個新的數(shù)組。

例如：價格數(shù)組

簡化前：

let prices=[50,80,90]
prices=prices.map((item,index)=>{
     return item+"元"
})
console.log(prices)

簡寫后：

let price=[50,80,120]
//在單價后面添加上"元"
price=price.map(item=>item+"元")
console.log(price)//輸出為['50元', '80元', '90元']

它的應(yīng)用場景例如：微信小程序   豆瓣影評

用map方法把xxx替換成www

replace() 方法用于在字符串中用一些字符替換另一些字符，或替換一個與正則表達(dá)式匹配的子串。

        let movies=[{id:1,name:"肖申克的救贖",imgUrl:"http://xxx.douban.com/1.jpg"},{id:2,name:"肖申克的救贖",imgUrl:"http://xxx.douban.com/2.jpg"},{id:3,name:"肖申克的救贖",imgUrl:"http://xxx.douban.com/1.jpg"}]
        movies=movies.map(item=>{
            item.imgUrl=item.imgUrl.replace("xxx","www")
            return item
        })
        console.log(movies)

二、filter方法：對數(shù)組每一項(xiàng)都運(yùn)行傳入的函數(shù)，函數(shù)返回true的項(xiàng)會組成數(shù)組之后返回。

也可以理解為：過濾出數(shù)組中符合要求的元素，返回一個新數(shù)組

        let scores=[80,59,10,55,90,88]
        let arr=scores.filter(item=>{
			if(item>60){
				return true
			}
		})
		console.log(arr)//輸出如下圖：

輸出如下圖  把小于60的數(shù)組過濾掉

簡寫后：

let scores=[80,59,10,55,90,88]
let arr=scores.filter(item=>item>=60)
console.log(arr)//(3) [80, 90, 88]

它的應(yīng)用場景，可以放置城市名的數(shù)組 然后搜索關(guān)鍵字  ，只針對數(shù)據(jù)較小的時候，關(guān)于例子后面我會出一個 圖書管理系統(tǒng)的應(yīng)用場景  里面會包含關(guān)鍵字搜索   可以參考一下。

三和四、some和every方法

some 英語翻譯為一些,every翻譯為所有,每個，所以some方法 只要其中一個為true 就會返回true的，相反，every（）方法必須所有都返回true才會返回true，哪怕有一個false，就會返回false

在數(shù)組的判斷過程中，判斷整體的每一個元素是否全部都符合一項(xiàng)基本要求

some方法： 一真及真， 只要有一個符合就返回，true
every方法: 一假即假， 只要其中有一個不符合要求就返回，false

//let一個班的所有學(xué)生的成績  看看是否所有人都及格了
         let scores=[80,49,12,50,69]
         let result=scores.every(item=>item>=60)
         console.log(result)//返回false  所有并不是都及格了

使用場景：前端校驗(yàn)器
提交AJAX請求前 ，通常需要所有的校驗(yàn)都通過時才能去發(fā)送，關(guān)于代碼例子后續(xù)文章會單獨(dú)出一個前端數(shù)據(jù)校驗(yàn)器。

歸并方法：

五、reduce方法：ECMAScript為數(shù)組提供了兩個歸并方法：reduce()和reduceRight()。這兩個方法都會迭代數(shù)組的所有項(xiàng)，并在此基礎(chǔ)上構(gòu)建一個最終返回值。reduce()方法從數(shù)組第一項(xiàng)開始遍歷到最后一項(xiàng)。而reduceRight()從最后一項(xiàng)開始遍歷至第一項(xiàng)。也可以簡單理解為：將數(shù)組中的元素整合，返回一個新的內(nèi)容。

這兩個方法都接收兩個參數(shù)：對每一項(xiàng)都會運(yùn)行的歸并函數(shù)，以及可選的以之為歸并起點(diǎn)的初始值。傳給reduce()和reduceRight()的函數(shù)接收4個參數(shù)：上一個歸并值、當(dāng)前項(xiàng)、當(dāng)前項(xiàng)的索引和數(shù)組本身。這個函數(shù)返回的任何值都會作為下一次調(diào)用同一個函數(shù)的第一個參數(shù)。如果沒有給這兩個方法傳入可選的第二個參數(shù)（作為歸并起點(diǎn)值），則第一次迭代將從數(shù)組的第二項(xiàng)開始，因此傳給歸并函數(shù)的第一個參數(shù)是數(shù)組的第一項(xiàng)，第二個參數(shù)是數(shù)組的第二項(xiàng)。

先通過下代碼理解一下概念：

下面的代碼里4個參數(shù)的意思：

• prev：上一次操作返回的結(jié)果

• item: 本次操作的元素

• index:本次操作元素的索引值

• array:當(dāng)前操作的數(shù)組

        let arr=[20,40,50,21]
        let values=arr.reduce((prev,item,index,array)=>{
            console.log("prev"+prev)
            console.log("item"+item)
            console.log("index"+index)
            console.log("array"+array)
            console.log("__________________________")
        })

輸出為：

為什么只循環(huán)了三次？prev因?yàn)榭梢栽O(shè)置默認(rèn)值，如果不設(shè)置默認(rèn)值，那么第一個元素就作為第一個prev
為什么第二次循環(huán)和第三次循環(huán)時prev拿到undefined呢？在第二次循環(huán)時 得拿到第一次循環(huán)的return值  因?yàn)榈谝淮螞]有設(shè)置return 所以拿到undefined 以此類推

如果上面的理解了，那么我們就開始實(shí)現(xiàn)數(shù)組求和：

        let arr=[20,40,50,21]
        let values=arr.reduce((prev,item,index,array)=>{
            console.log("prev"+prev)
            return prev+item
 //給個return 循環(huán)四次 第一次輸出prev是20，第二次40+20是60，第三次是110 最后一次輸出131
        })
        console.log(values)  //131

什么時候必須設(shè)置prev的默認(rèn)值呢？

給每一個數(shù)組元素添加  

let arr=["陳奕迅","楊千嬅","古巨基","李克勤"]
//給prev設(shè)置默認(rèn)值：作用1.所有元素參加循環(huán)  作用2.確定返回內(nèi)容
let result=arr.reduce((prev,item)=>{
      //console.log(prev)
      return prev+"
"+item+"
"
},"")//加一個空字符串
console.log(result)//
陳奕迅
楊千嬅
古巨基
李克勤

再來個案例：

利用reduce實(shí)現(xiàn)數(shù)組去重，創(chuàng)建一個空數(shù)組，把原有數(shù)組依次遍歷，空數(shù)組沒有的就插入進(jìn)去，有的就不再插入了

        let arr=["張三","李四","李四","王二","李四","麻子","張三"]
        let result=arr.reduce((prev,item)=>{
            //includes判斷是有具有指定元素 有返回t 沒有返回f
            if(!prev.includes(item)){
                prev.push(item)  //.push()向數(shù)組添加一個新項(xiàng)目
            }
            return prev
        },[])//設(shè)置一個默認(rèn)空數(shù)組
        console.log(result)//(4) ['張三', '李四', '王二', '麻子']

再來個案例：（reduce方法可以做很多事情）

統(tǒng)計字符的出現(xiàn)次數(shù)：見下碼

        let arr=["a","b","a","c","b","a","c"]
        //返回一個對象 統(tǒng)計每一個字符的出現(xiàn)次數(shù) {a:2,w:3}
        let result=arr.reduce((prev,item)=>{
            //  //判斷對象 是否存在對應(yīng)的屬性 
             if(item in prev){
                 //找到對應(yīng)屬性值 ++  
                 prev[item]++ //如果將來要設(shè)置或者獲取對象屬性時，這個屬性由變量表示的時候用中括號的形式[]++，如果直接是.屬性名稱用.的形式
             }else{
                 prev[item]=1
             }
             return prev
        },{})
        console.log(result)//{a: 3, b: 2, c: 2}

到此，關(guān)于“ES6數(shù)組新增方法知識點(diǎn)有哪些”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！