本篇文章為大家帶來了關於javascript的相關知識,其中主要介紹了es6數組新增方法的相關問題,包括了迭代方法和歸併方法等等內容,下面一起來看一下,希望對大家有幫助。
【相關推薦:javascript影片教學、web前端】
##迭代方法:一、map方法:對陣列每一項都執行傳入的函數,傳回由每次函數呼叫的結果所構成的陣列
也可以理解為:給數組中的每一個元素進行特殊處理後,傳回一個新的陣列。 例如:價格數組簡化前: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元']
用map方法把xxx替換成www
replace() 方法用於在字串中用一些字符替換另一些字符,或替換一個與正則表達式匹配的子串。
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方法:對陣列每一項都執行傳入的函數,函數傳回true的項會組成陣列之後傳回。
也可以理解為:過濾出數組中符合要求的元素,回傳一個新數組let scores=[80,59,10,55,90,88] let arr=scores.filter(item=>{ if(item>60){ return true } }) console.log(arr)//输出如下图:
let scores=[80,59,10,55,90,88] let arr=scores.filter(item=>item>=60) console.log(arr)//(3) [80, 90, 88]
every方法: 一假即假, 只要其中有一個不符合要求就返回,false
//let一个班的所有学生的成绩 看看是否所有人都及格了 let scores=[80,49,12,50,69] let result=scores.every(item=>item>=60) console.log(result)//返回false 所有并不是都及格了
提交AJAX請求前,通常需要所有的校驗都通過時才能去發送,關於程式碼範例後續文章會單獨出一個前端資料校驗器。
五、reduce方法:ECMAScript為陣列提供了兩個歸併方法:reduce()和reduceRight()。這兩個方法都會迭代數組的所有項,並在此基礎上建立一個最終返回值。 reduce()方法從陣列第一項開始遍歷到最後一項。而reduceRight()從最後一項開始遍歷至第一項。也可以簡單理解為:將陣列中的元素整合,傳回一個新的內容。
這兩個方法都會接收兩個參數:對每一項都會運行的歸併函數,以及可選的以之為歸併起點的初始值。傳給reduce()和reduceRight()的函數接收4個參數:上一個歸併值、目前項目、目前項目的索引和陣列本身。這個函數傳回的任何值都會作為下一次呼叫同一個函數的第一個參數。如果沒有給這兩個方法傳入可選的第二個參數(作為歸併起點值),則第一次迭代將從數組的第二項開始,因此傳給歸併函數的第一個參數是數組的第一項,第二個參數是陣列的第二項。 先透過下程式碼理解概念:下面的程式碼裡4個參數的意思: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("__________________________") })
輸出為:
##
为什么只循环了三次?prev因为可以设置默认值,如果不设置默认值,那么第一个元素就作为第一个prev
为什么第二次循环和第三次循环时prev拿到undefined呢?在第二次循环时 得拿到第一次循环的return值 因为第一次没有设置return 所以拿到undefined 以此类推
如果上面的理解了,那么我们就开始实现数组求和:
let arr=[20,40,50,21] let values=arr.reduce((prev,item,index,array)=>{ console.log("prev"+prev) return prev+item //给个return 循环四次 第一次输出prev是20,第二次40+20是60,第三次是110 最后一次输出131 }) console.log(values) //131
什么时候必须设置prev的默认值呢?
给每一个数组元素添加
let arr=["陈奕迅","杨千嬅","古巨基","李克勤"] //给prev设置默认值:作用1.所有元素参加循环 作用2.确定返回内容 let result=arr.reduce((prev,item)=>{ //console.log(prev) return prev+"<li>"+item+"</li>" },"")//加一个空字符串 console.log(result)//<li>陈奕迅</li><li>杨千嬅</li><li>古巨基</li><li>李克勤</li>
再来个案例:
利用reduce实现数组去重,创建一个空数组,把原有数组依次遍历,空数组没有的就插入进去,有的就不再插入了
let arr=["张三","李四","李四","王二","李四","麻子","张三"] let result=arr.reduce((prev,item)=>{ //includes判断是有具有指定元素 有返回t 没有返回f if(!prev.includes(item)){ prev.push(item) //.push()向数组添加一个新项目 } return prev },[])//设置一个默认空数组 console.log(result)//(4) ['张三', '李四', '王二', '麻子']
再来个案例:(reduce方法可以做很多事情)
统计字符的出现次数:见下码
let arr=["a","b","a","c","b","a","c"] //返回一个对象 统计每一个字符的出现次数 {a:2,w:3} let result=arr.reduce((prev,item)=>{ // //判断对象 是否存在对应的属性 if(item in prev){ //找到对应属性值 ++ prev[item]++ //如果将来要设置或者获取对象属性时,这个属性由变量表示的时候用中括号的形式[]++,如果直接是.属性名称用.的形式 }else{ prev[item]=1 } return prev },{}) console.log(result)//{a: 3, b: 2, c: 2}
【相关推荐:javascript视频教程、web前端】
以上是ES6數組新增方法知識點總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!