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;i1.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() 替换
第一个参数 : 必传,, 从哪开始替换
第二个参数 : 可选,,从这个位置开始
第三个位置 : 可选,,到哪结束
image.png
3.1.6 fill() 填充
第一个参数 : 拿什么填充
第二个参数 : 开始的位置
第三个参数 : 结束的位置
// 应用1
let arr = new Array(3) // 空数组.,,但是长度为3
let arr = new Array(3).fill(7) // [7,7,7]
// 应用2
let arr = [1,2,3]
arr.fill("xx",1,2)
console.log(arr) //[1, "xx", 3] 从1开始但不包括2
// 应用3
let arr = [1,2,3]
arr.fill(0)
console.log(arr) // [0, 0, 0]
3.1.6
NaN == NaN // false
let arr = [1,2,3,NAN]
console.log(arr.indexOf(NaN)) // -1 找不到
console.log(arr.includes(2)) // true 找到为ture
console.log(arr.includes(NAN)) //true