ES6学习(五)

数组的扩展

扩展运算符

含义 扩展运算符(spread) 是三个点(...),它如同rest参数的逆运算，将一个数组转为用逗号分隔的参数序列。

console.log(...[1,2,3]) // 123
console.log(1,...[2,3,4],5) // 12345
复制代码

扩展运算符的作用

• 复制数组

let a1 = [1,2]
let a2 = [...a1]
//或者 let [...a2] = a1
//这样改变一个数组另外一个就不会跟着改变
复制代码

• 合并数组

let a1 = [1]
let a2 = [2,3]
let a3 = [4,5,6]
// ES5的合并数组
a1.concat(a2,a3)

//ES6合并数组
[...a1,...a2,...a3]
复制代码

• 与解构赋值结合

const[first,...rest] = [1,2,3,4,5]
// first = 1  rest =[2,3,4,5]
const[first,...rest] = []
// first = undefind  rest = []

//如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。
const[...rest,first] = [1,2,3,4,5] //报错
复制代码

• 扩展运算符还可以将字符串转为真正的数组

[...'hello'] // ['h','e','l','l','o']
复制代码

• 替代数组的apply方法（扩展运算符可以展开数组，所以不再需要使用apply方法将数组转为函数的参数）

// ES5
function f(x,y,z){

}
var args = [0,1,2]
f.apply(null,args)

// ES6
function f(x,y,z){

}
var args = [1,2,3]
f(...args)
复制代码

• 实现了iterator接口对象 任何的Iterator接口对象都可以用扩展运算符转为真正的数组。

var nodeList = document.querySelectorAll('div')
var array = [...nodeList] //这个可以转化为数组是因为nodeList 实现了Iterator
复制代码

• Map和Set结构、Generator函数 扩展运算符内部调用的是数据结构的Iterator接口，因此只要具有Iterator接口的对象，都可以使用扩展运算符

例子

let map = new Map([
[1,'one'],[2,'two'],[3,'three']
])
let arr = [...map.key()] //[1,2,3]
复制代码

Generator函数运行后会返回一个人遍历器对象，因此也可以使用扩展运算符。

var go = function *(){
	yield 1;
	yield 2;
	yield 3;
}
[...go()] // [1,2,3]
复制代码

Array.form() 方法

Array.form方法用于将两类对象转为真正的数组：类似数组的对象和可遍历对象（包括ES6新增的数据解构Set和Map）

let arrayLike = {
	'0': 'a',
	'1': 'b',
	'2': 'c'
	length: 3
}
// ES5
var arr1 = [].slice.call(arrayLike) //['a','b','c']
// ES6
let arr2 = Array.form(arrayLike) //['a','b','c']
复制代码

Array.of() 方法

Array.of 方法用于将一组值转换为数组。

Array.of(3,8,11) //[3,8,11]
Array.of(3) //[3]
Array.of(3).length // 1
复制代码

数组实例的copyWithin()

数组实例的copyWithin方法会在当前数组内部制定位置的成员复制到其他位置(会覆盖原有成员）,然后返回当前数组。

Array.prototype.copyWithin(target,start = 0,end = this.length)
// 接受3个参数
// target(必选): 从该位置开始替换数据
// start(可选): 从该位置开始读取数据，默认为0。如果为负值，表示倒数
// end(可选): 到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。
复制代码

数组实例的find()和findIndex()

数组实例的find方法用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员一次执行该回调函数， 知道找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。

[1,4,-5,10].find((n) => n<0) //找出第一个小于0的数
[1,5,10,15].findIndex(function(value,index,arr){
	return value > 9
}// 2 返回符合条件的数组的成员位置，如果所有成员都不符合条件则返回-1
复制代码

数组实例的fill()

fill 方法使用给定值填充一个数组(可以传入三个参数） array.fill（value，start，end) (第一个传入参数，起始位置，结束位置)

['a','b','c'].fill(7,1,2) //['a',7,'c'] 表示从1号开始向原数组填充7，到2号位之前结束
['a','b','c']/fill(7) //[7,7,7] 如果不填入start和end的参数全部替换
复制代码

数组实例的entries(),key()和values()

ES6提供了三个心方法 entries()、keys()和values() 用于遍历数组。 entries() 是对键值对的遍历。 keys() 是对键名的遍历 values() 是对兼职对的遍历

let arr = ['a','b','c']
for(let elem of ['a','b','c'].entries()){
	console.log(elem) 
} // [0,'a'] [1,'b'] [2,'c']
复制代码

数组实例的includes()

Array.prototype.includes方法返回一个布尔值,表示某个数组是否包含给定的值，与字符串的includes方法类似。

[1,2,3].includes(2) //true
[1,2,3].includes(4) //false
[1,2,NAN).includes(NAN) //true
复制代码

该方法的第二个参数表示搜索的起始位置，默认为0.如果为负数，则表示倒数的位置，如果这时它大于数组长度，就 会重置为从0开始。

数组的空位

数组的空位指数组的某一个位置没有任何值。

Array(3) //[,,,]
复制代码

• forEach()、filter()、every()和some（）都会跳过空位
• map() 会跳过空位，但会保留这个值
• join()和toString() 会将空位视为undefined，而undefined和null会被处理成空字符串