ES6新增語法—數組新增七種方法介紹
forEach:遍歷數組
foreach只是對數組進行遍歷,并不會改變原來的數組。
示例:打印數組中的每個元素。
- let arr = ['a','b','c'];
- arr.forEach(item=>{
- console.log('當前元素',item)
- })
上述使用了箭頭函數,省略了括號,如果需要數組下標的時候,可以把標加上,改寫成:
- let arr = ['a','b','c'];
- arr.forEach((item,index)=>{
- console.log('當前元素',item)
- console.log('當前元素下標',index)
- })
如果是給同級的幾個元素遍歷設置背景顏色時,運行發現失敗,代碼如下:
- window.onload = function(){
- let aDiv = document.getElementsByTagName('div')
- aDiv.forEach(item=>{
- item.style.background = "red"
- })
- }
運行報錯:Uncaught TypeError: aDiv.forEach is not a function at window.onload
報錯主要是因為 aDiv 并不是一個真正的數組,它是一個類數組。此時我們需要借助from方法。
from:轉換數組
from()方法把類數組轉換成真正的數組。
使用語法:Array.from(類數組)
此時我們只需要借助from方法,把aDiv轉換成真正的數組,就可以使用forEach遍歷,給每個元素設置背景。代碼如下:
- window.onload = function(){
- let aDiv = document.getElementsByTagName('div')
- Array.from(aDiv).forEach(item=>{
- item.style.background = "red"
- })
- }
map:映射
原數組被映射成一個新的數組。返回值是一個新數組,不改變原來的數組。
將一組成績映射成是否及格的布爾值,判斷大于60分就算及格,否則就不及格。代碼如下:
- let grad = [55,66,77,88]
- let arr2 = grad.map(function(item){
- return item>=60
- })
- console.log("arr2",arr2)
filter:過濾
Filter過濾數組,進去一堆出來幾個,返回過濾后的新數組。
比如去掉數組中的偶數,只保留奇數。
- let num = [1,2,3,4,5,6,7,8]
- let odd = num.filter(function(item){
- return item%2
- })
- console.log("odd",odd)
reduce:匯總
進去一堆數據,出來一個。比如求和或者求平均數。
以下是求平均數的一個實例:
- let num = [1,2,3,4,5,6,7,8]
- let evr = num.reduce((tmp,item,index)=>{
- if( index<num.length ){
- return tmp+item
- }else{
- return (tmp+item)/num.length
- }
- })
上述的tmp是中間的一個結果,最開始是第一個值。
find:查找
在數組中找到符合要求的對象,和filter的區別是找到符合要求的對象就停止搜索了,返回的是一個對象。
查找姓名叫王五的這個人,代碼如下:
- let pers = [
- { name:'倩倩',age:18 },
- { name:'張三',age:25 },
- { name:'王五',age:60 }
- ]
- let per = pers.find(function(item){
- return item.name === '王五'
- })
- console.log('per',per)//per {name: "王五", age: 60}
erver()、some()
every目標數組中每一個對象都符合條件則返回true,否則返回false。
some目標數組中有一個或一個以上符合條件就會返回true,否則返回false。
- let pers = [
- { name:'倩倩',age:18 },
- { name:'張三',age:25 },
- { name:'王五',age:60 }
- ]
- //年齡是否都小于30
- let isYoung = pers.every(item=>{
- return item.age < 30
- })
- //年齡有小于30的
- let haveYoung = pers.some(item=>{
- return item.age < 30
- })
- console.log("isYoung",isYoung) // false
- console.log("haveYoung",haveYoung) //true