ES6-11 總結(jié)二 (ES5和ES6數(shù)組的遍歷&擴(kuò)展)

ES6-11 總結(jié)一 (nrm,var,let,const,解構(gòu)賦值) : http://www.reibang.com/p/b04fbab076b3
ES6-11 總結(jié)二 (ES5和ES6數(shù)組的遍歷&擴(kuò)展) : http://www.reibang.com/p/a775c3311a0b
ES6-11 總結(jié)三(深淺拷貝,對象和函數(shù)的擴(kuò)展) : http://www.reibang.com/p/6dda93b18d9a
ES6-11 總結(jié)四 (es5和es6的類與繼承,Symbol數(shù)據(jù)類型) : http://www.reibang.com/p/e3c24c0db755
ES6-11 總結(jié)五 (set,Map,字符串&&正則&&數(shù)值的擴(kuò)展) : http://www.reibang.com/p/c1ca903f6573
ES6-11 總結(jié)六 (代理Proxy 反射Reflect):http://www.reibang.com/p/4ff19ba5d219

數(shù)組的遍歷方式

1.1 ES5 數(shù)組的遍歷方式

聲明一個數(shù)組 let arr = [1,2,3]

1.1.1 for循環(huán)

for(let i=0;i<arr.length;i++){
  console.log(arr[i])
}

1.1.2 forEach循環(huán)

// elem :  當(dāng)前正在遍歷的對象
// index :  當(dāng)前遍歷對象的索引
// array :   當(dāng)前遍歷數(shù)組的本身
 arr.forEach(function(elem,index,array){
      console.log(elem,index,array)
})

打印結(jié)果 :
1 0 [1, 2, 3]
2 1 [1, 2, 3]
3 2 [1, 2, 3]

for和forEach的區(qū)別 :

1 for支持break forEach不支持 break(結(jié)束循環(huán))
2 for支持continue forEach不支持 continue(結(jié)束當(dāng)前循環(huán),,開始下一次循環(huán))
3 forEach在循環(huán)過程中,,無法跳出循環(huán)

1.1.3 map循環(huán)

map的返回值是一個新的數(shù)組,,但是不會影響原數(shù)組

 arr.map(function(value){
    console.log(value)  // 1,2,3
})
let arr2 =  arr.map(function(value){
     value += 1
    return value
})
console.log(arr,arr2) // [1,2,3] [2,3,4]

1.1.4 filter循環(huán)

filter的返回值是一個新的數(shù)組,,但是不會影響原數(shù)組,,主要用于過濾出自己想要的數(shù)據(jù)

arr.filter(function(value){
    console.log(value)  // 1,2,3
})
let arr2 =arr.filter(function(value){
    return value ===2
})
console.log(arr,arr2) // [1,2,3] [2]

1.1.5 some循環(huán)

filter的返回值是布爾值,,但是不會影響原數(shù)組,找到一個即為true,否則是false,,

arr.some(function(value){
    console.log(value)  // 1,2,3
})
let arr2 =arr.some(function(value){
    return value ===2
})
console.log(arr,arr2) // [1,2,3] true

1.1.6 every循環(huán)

every的返回值是布爾值,,但是不會影響原數(shù)組,每一個都符合即為true,否則是false,, 和some是相反

arr.every(function(value){
    console.log(value)  // 1
})
let arr2 =arr.every(function(value){
    return value ===2
})
console.log(arr,arr2) // [1,2,3] false

1.1.7 reduce()

reduce有兩個參數(shù),,第一個是函數(shù), 第二個是計算的初始值,比如我想從第一個開始計算,,就傳入0

此函數(shù)又有四個參數(shù)
第一個 prev:上一次調(diào)用回調(diào)的返回值, (例如是第一次調(diào)用,,傳入的0就是0,再下一次就是1)
第二個 cur:當(dāng)前正在處理的數(shù)組元素
第三個 index :當(dāng)前正在處理的數(shù)組元素的下標(biāo)
第四個 array : 當(dāng)前的數(shù)組

//求數(shù)組的和
let arr2 = arr.reduce(function(prev,cur,index,array){
    return prev+cur
},0)
console.log(arr2) // 6
// 求最大的值
let arr2 = arr.reduce(function(prev,cur){
    return Math.max(prev,cur)
})
console.log(arr2) // 3
// 去重
arr = [1,2,3,2,4]
let arr2 = arr.reduce(function(prev,cur){
    prev.indexOf(cur)===-1 && prev.push(cur)
    return prev
},[])
console.log(arr2) // [1,2,3,4]

1.1.8 for in

for in會遍歷數(shù)組,,也會遍歷數(shù)組的原型下面的方法,,基本不用這個來遍歷

Array.prototype.foo = function(){
  console.log("foo")
}
for(let index in arr){
  console.log(index,arr[index])
}

打印結(jié)果 : 
0,1
1,2
2,3
foo(){
  console.log("foo")
}

2.1 ES6 數(shù)組的遍歷方式

2.1.1 find()

返回第一個通過測試的元素,,,如果找不到返回undefined

let arr2 = arr.find((value)=>{
    return value ===2
})
console.log(arr,arr2) // [1, 2, 3] 2

2.1.2 findIndex()

返回第一個通過測試的元素的下標(biāo) 如果找不到返回undefined

let arr2 = arr.findIndex((value)=>{
    return value ===2
})
console.log(arr,arr2) // [1, 2, 3] 1

2.1.3 for of()

// 返回內(nèi)容
for(let item of arr){
  console.log(item) // 123
}
// 返回內(nèi)容
for(let item of arr.values()){
  console.log(item) // 123
}
// 返回下標(biāo)
for(let item of arr.keys()){
  console.log(item) // 012
}
// 返回內(nèi)容和下標(biāo)
for(let [index,item] of arr.entries()){
  console.log(index,item) //  0,1   1,2   2,3
}

3.1 數(shù)組的擴(kuò)展

3.1.1 類數(shù)組和偽數(shù)組

let divs = document.getElementsByTagName("div")
console.log(divs)  // HTMLCollection[]

let divs2 = document.getElementsByClassName("XX")
console.log(divs2)  // HTMLCollection[]

let div3 = document.querySelectorAll(".XX")
console.log(div3 )  // NodeList[]

function Foo(){
    console.log(arguments)
}
arguments也是一個偽數(shù)組

// 查看以上是不是數(shù)組
例如  div3 instanceof Array   // false    div3 不是一個數(shù)組
以上就是類數(shù)組或者偽數(shù)組,,

3.1.2 ES5把偽數(shù)組轉(zhuǎn)成真數(shù)組 slice

let div3 = document.querySelectorAll(".XX")
console.log(div3 )  // NodeList[]   div3就是類數(shù)組或者偽數(shù)組,,
let arr = Array.prototype.slice.call(divs3)
此時arr就是一個真數(shù)組,也可以使用arr.push等方法

3.1.3 ES6把偽數(shù)組轉(zhuǎn)成真數(shù)組 Array.from(XX)

image.png

3.1.4 Array.of()

let arr = new Array(1,2)   //  [1,2]
let arr = new Array(3)   //  空數(shù)組.,,但是長度為3

let arr = Array.of(1,2)   //  [1,2]
let arr = Array.of(3)   //  [3]

let arr = Array.of(1,true,"XX",[1,2])   //  [1,true,"XX",[1,2]]

3.1.5 copyWithin() 替換

第一個參數(shù) : 必傳,, 從哪開始替換
第二個參數(shù) : 可選,,從這個位置開始
第三個位置 : 可選,,到哪結(jié)束