ES6-11 总结二 (ES5和ES6数组的遍历&扩展)

ES6-11 总结一 (nrm,var,let,const,解构赋值) : https://www.jianshu.com/p/b04fbab076b3
ES6-11 总结二 (ES5和ES6数组的遍历&扩展) : https://www.jianshu.com/p/a775c3311a0b
ES6-11 总结三(深浅拷贝,对象和函数的扩展) : https://www.jianshu.com/p/6dda93b18d9a
ES6-11 总结四 (es5和es6的类与继承,Symbol数据类型) : https://www.jianshu.com/p/e3c24c0db755
ES6-11 总结五 (set,Map,字符串&&正则&&数值的扩展) : https://www.jianshu.com/p/c1ca903f6573
ES6-11 总结六 (代理Proxy 反射Reflect):https://www.jianshu.com/p/4ff19ba5d219

数组的遍历方式

1.1 ES5 数组的遍历方式

声明一个数组 let arr = [1,2,3]

1.1.1 for循环

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

1.1.2 forEach循环

// elem :  当前正在遍历的对象
// index :  当前遍历对象的索引
// array :   当前遍历数组的本身
 arr.forEach(function(elem,index,array){
      console.log(elem,index,array)
})

打印结果 :
1 0 [1, 2, 3]
2 1 [1, 2, 3]
3 2 [1, 2, 3]

for和forEach的区别 :

1 for支持break forEach不支持 break(结束循环)
2 for支持continue forEach不支持 continue(结束当前循环,,开始下一次循环)
3 forEach在循环过程中,,无法跳出循环

1.1.3 map循环

map的返回值是一个新的数组,,但是不会影响原数组

 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循环

filter的返回值是一个新的数组,,但是不会影响原数组,,主要用于过滤出自己想要的数据

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循环

filter的返回值是布尔值,,但是不会影响原数组,找到一个即为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循环

every的返回值是布尔值,,但是不会影响原数组,每一个都符合即为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有两个参数,,第一个是函数, 第二个是计算的初始值,比如我想从第一个开始计算,,就传入0

此函数又有四个参数
第一个 prev:上一次调用回调的返回值, (例如是第一次调用,,传入的0就是0,再下一次就是1)
第二个 cur:当前正在处理的数组元素
第三个 index :当前正在处理的数组元素的下标
第四个 array : 当前的数组

//求数组的和
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会遍历数组,,也会遍历数组的原型下面的方法,,基本不用这个来遍历

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

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

2.1 ES6 数组的遍历方式

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()

返回第一个通过测试的元素的下标如果找不到返回undefined

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

2.1.3 for of()

// 返回内容
for(let item of arr){
  console.log(item) // 123
}
// 返回内容
for(let item of arr.values()){
  console.log(item) // 123
}
// 返回下标
for(let item of arr.keys()){
  console.log(item) // 012
}
// 返回内容和下标
for(let [index,item] of arr.entries()){
  console.log(index,item) //  0,1   1,2   2,3
}

3.1 数组的扩展

3.1.1 类数组和伪数组

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也是一个伪数组

// 查看以上是不是数组
例如  div3 instanceof Array   // false    div3 不是一个数组
以上就是类数组或者伪数组,,

3.1.2 ES5把伪数组转成真数组 slice

let div3 = document.querySelectorAll(".XX")
console.log(div3 )  // NodeList[]   div3就是类数组或者伪数组,,
let arr = Array.prototype.slice.call(divs3)
此时arr就是一个真数组,也可以使用arr.push等方法

3.1.3 ES6把伪数组转成真数组 Array.from(XX)

image.png

3.1.4 Array.of()

let arr = new Array(1,2)   //  [1,2]
let arr = new Array(3)   //  空数组.,,但是长度为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() 替换

第一个参数 : 必传,, 从哪开始替换
第二个参数 : 可选,,从这个位置开始
第三个位置 : 可选,,到哪结束