ES6知识点--数组

一、ES6中数组方法

1.forEach

let arr=[1,2,3]
arr.forEach(function(value,index,array){
   console.log(value,'--',index);
   //console.log(array[index]);
 })

1.1 forEach&&breake&&continue

break和continue不能像中断for循环一样中断forEach执行

2.some

返回布尔值,只要有一个满足即返回true

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

let result2 = arr.some(function(value){
  return value ==4
})
console.log(arr);
console.log(result2);

3.every

返回布尔值，数组中每一个都需要满足函数条件才可返回true

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

let result2 = arr.every(function(value){
  return value ==4
})
console.log(arr);
console.log(result2);

4.map

返回数组中所有元素满足函数操作的新数组

let arr=[1,2,3]
let result = arr.map(function(value,index,array){
  return value+1
})
console.log(arr);
console.log(result);

5.filter

返回数组中满足条件元素组成的新数组

let arr=[1,2,3]
let result = arr.filter(function(value,index,array){
  return value==2
})
console.log(arr);
console.log(result);

6.reduce

reduce(function(pre,currentValue,currentIndex,array),pre初始值)

6.1 累加

let arr=[1,2,3]
let result0 =  arr.reduce(function(pre,cur,currentIndex,array){
  return pre+cur
},0)
console.log(result0)//6 即(0+1+2+3)
let result1 =  arr.reduce(function(pre,cur,currentIndex,array){
  return pre+cur
},2)
console.log(result1)//6 pre初始值为2,即(2+1+2+3)

6.2 累乘

let arr=[1,2,3]
let result2 =  arr.reduce(function(pre,cur,currentIndex,array){
  return pre*cur
},1)
console.log(result2)//6 即(1*2*3)

6.3 结合Math.max()求最大值

let arr=[1,2,3]
let result3 =  arr.reduce(function(pre,cur,currentIndex,array){
  return Math.max(pre,cur)
},[])
console.log(result3)//3

6.4 去重

let arr1=[1,2,3,4,2,3]
let result4 =  arr1.reduce(function(pre,cur){
  pre.indexOf(cur)!=-1?pre:pre.push(cur)
  //pre.indexOf(cur)==-1&&pre.push(cur)
  return pre
},[])
console.log(result4)//[1,2,3,4]

7.find

返回数组中第一个满足的元素

let arr1=[1,2,3,4,2,3]
let result = arr1.find(function(val){
  return val==2
})
console.log(result)//2

8.findIndex

返回数组中第一个满足的元素的下标

let arr1=[1,2,3,4,2,3]
let result = arr1.findIndex(function(val){
  return val==2
})
console.log(result)//1

9.for in???

能循环遍历自定义在数组原型上的方法

let arr=[1,2,3]
Array.prototype.foo = function(){
  console.log('foo');
}
for(let index in arr){
  console.log(index,'--',arr[index]);
}

10.for of

不会循环遍历自定义在数组原型上的方法

let arr=[1,2,3]
Array.prototype.foo = function(){
  console.log('foo');
}
for(let value of arr){
  console.log(value);
}

10.1 arr.values()&arr.keys()&arr.entries()

let arr=[1,2,3]
for(let value of arr){
  console.log(value);
}
console.log("========");
for(let val of arr.values()){
  console.log(val);
}
console.log("========");
for(let key of arr.keys()){
  console.log(key,'--',arr[key]);
}
console.log("========");
let obj = {
  name:"jae",
  height:"188",
  age:18
}
//需按照[key,value]顺序
 for(let [key1,value1] of Object.entries(obj)){
  console.log(key1,'--',value1);
} 

使用Object.entries(obj)返回的是数组，数组解构赋值需要按照顺序，并不会按对象key赋值

二、数组扩展

2.1 伪数组

特点：有索引，并且有length属性，伪数组不能使用数组方法，如push()，常见的伪数组arguments、NodeList、HTMLCollection、Jquery对象…

2.1.1伪数组举例

2.1.1.1 HTMLCollection

let divs = document.getElementsByTagName('div')
console.log(divs);
console.log(divs instanceof Array);

2.1.1.2 NodeList

let tag = document.querySelectorAll('xx')
console.log(tag);

2.1.2 es5将伪数组转化为数组：slice

let tags = Array.prototype.slice.call(tag)
console.log(tags instanceof Array)
tags.push(123)

2.1.3 es6将伪数组转化为数组：Array.from()

let tags =Array.from(tag)
console.log(tags instanceof Array)
tags.push(123)
console.log(tags);

2.2 数组构造器

2.2.1 new Array

注意：传入1个参数,构建长度为传入参数长度的空数组

//传入多个参数
let arr1 = new Array(1,2,3)
console.log(arr1);
//传入1个参数,构建长度为传入参数长度的空数组
let arr2 = new Array(3)
console.log(arr2);

2.2.2 Array.of()

注意：传入1个参数，结果为含有该元素，长度为1 的数字，与new Array()区别

console.log(Array.of(3))
console.log(Array.of(1,2,3,4))

2.3 Array.copeWithin(开始替换的位置，替换结果开始位置，替换结果结束位置)

arr.copyWithin(target, start = 0, end = this.length)

参数	含义	必选
target	从该位置开始替换数据。如果为负值，表示倒数	Y
start	该位置开始读取数据，默认为 0。如果为负值，表示从末尾开始计算	N
end	到该位置前停止读取数据，默认等于数组长度。如果为负值，表示从末尾开始计算	N

替换不包含下标end元素

let arr3 = [1,2,3,4,5].copyWithin(1,3,5)
console.log(arr3);

2.4 Array.fill(填充字符，开始位置，结束位置)

fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

let arr4 = [1,2,3,4,5].fill(0,1,3)
console.log(arr4);

2.5 Array.includes()

Array.indexOf()不能判断数组是否有NaN
Array.includes()可以判读判断数组是否有NaN

let arr5 = [1,2,3,NaN]
console.log("indexOf",arr5.indexOf(NaN));
console.log("includes",arr5.includes(NaN));