es6数组新增方法总结

Array.from()

Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。
Array.from(arrayLike[, mapFunction[, thisArg]])
arrayLike:必传参数,想要转换成数组的伪数组对象或可迭代对象。
mapFunction:可选参数,mapFunction(item,index){…} 是在集合中的每个项目上调用的函数。返回的值将插入到新集合中。
thisArg:可选参数,执行回调函数 mapFunction 时 this 对象。这个参数很少使用

1,类数组转换成数组

let arrayLike = {
    
    
	'0': 'a',
	'1': 'b',
	'2': 'c',
	length: 3
};
//es5写法
var arr1 = [].slice.call(arrayLike);//["a", "b", "c"]
//es6写法
let arr2=Array.from(arrayLike);//["a", "b", "c"]

2,克隆一个数组

let arr = [1,2,3]
let copy_arr=Array.from(arr)
console.log(arr===copy_arr)//false

Array.from(arr) 创建了对 arr 数组的浅拷贝,arr===copy_arr 的结果是 false,意味着虽然 arr 和 copy_arr 有着相同的项,但是它们是不同的数组对象。

3,填充数组

Array.from({
    
     length: 5 }, () => 0)	//[0, 0, 0, 0, 0]

4,生成数字范围

let arr=Array.from({
    
    length:4},(item,index)=>{
    
    
	return index+1
})
console.log(arr) //[1, 2, 3, 4]

5,数组去重

let arr=[1,2,2,3,3,4,2]
let unique_arr=Array.from(new Set(arr))
console.log(unique_arr) //[1, 2, 3, 4]

Array.of()

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

Array.of(element0[, element1][, …][,elementN]);
element0,…,elementN可选。要置于数组中的元素。这将创建一个具有 n + 1 个元素且长度为 n + 1 的数组。

Array.of(1, 2, 3, 4) // [1,2,3,4]
Array.of(1) // [1]
Array.of(1).length // 1
Array.of() // []如果没有参数,就返回一个空数组。
Array.of(undefined) // [undefined]

数组实例的fill()

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

Array.fill(value, start, end)
value:填充值。
start:可选,填充起始位置。
end:可选,填充结束位置,实际结束位置是end-1。

let arr = [1, 2, 3, 4, 5, 6]
arr.fill(2)//[2, 2, 2, 2, 2, 2]
arr.fill(8, 3)//[2, 2, 2, 8, 8, 8]
arr.fill(0, 2, 4)// [2, 2, 0, 0, 8, 8]

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

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

find方法的回调函数可以接受三个参数,依次为当前的值、当前的位置和原数组。

数组实例的findIndex方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。

let arr=[1,2,3,4,5,6,NaN]
let a=arr.find((value,index,arr)=>{
    
    
	return value<3
})
console.log(a)  //1
let b=arr.findIndex((value,index,arr)=>{
    
    
	return value<3
})
console.log(b)  //0
        
let c=arr.indexOf(NaN)
console.log(c)  //-1
let d=arr.find((value,index,arr)=>{
    
    
	return Object.is(NaN,value)
})
console.log(d)  //NaN
let e=arr.findIndex((value,index,arr)=>{
    
    
	return Object.is(NaN,value)
})
console.log(e)  //6

indexOf方法无法识别数组的NaN成员,但是findIndex方法可以借助Object.is方法做到。
两个方法都可以发现NaN,弥补了数组的IndexOf方法的不足

数组实例的copyWithin()

数组实例的copyWithin方法,在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。也就是说,使用这个方法,会修改当前数组。

Array.prototype.copyWithin(target, start = 0, end = this.length)
它接受三个参数。

target(必需):从该位置开始替换数据。
start(可选):从该位置开始读取数据,默认为0。如果为负值,表示倒数。
end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示倒数。
这三个参数都应该是数值,如果不是,会自动转为数值。

// 将3号位复制到0号位
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)	// [4, 2, 3, 4, 5]

// -2相当于3号位,-1相当于4号位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)	// [4, 2, 3, 4, 5]

数组实例的includes()

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

该方法的第二个参数表示搜索的起始位置,默认为0。如果第二个参数为负数,则表示倒数的位置,如果这时它大于数组长度(比如第二个参数为-4,但数组长度为3),则会重置为从0开始。

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, NaN].includes(NaN); // true
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true

猜你喜欢

转载自blog.csdn.net/eightNine1102/article/details/106021583
今日推荐