之前有汇总js中数组的属性和常用方法,链接地址为:https://blog.csdn.net/Freya_yyy/article/details/84780003,同时有对js中Array map()与forEach()的用法进行了对比,链接地址为:https://blog.csdn.net/Freya_yyy/article/details/81637169。
下面详细介绍一下ES6新增的部分其他数组方法:
Array.from(),Array.of(),find/findIndex,fill,includes,copyWithin,entries/keys/values
1.Array.from():
Array.from()方法是用于 将其他对象转换为数组:
- 部署了Iterator接口的对象,如Map、Set、Array
- 类数组的对象(即有length属性的对象)
比如,使用Array.from()方法,可以将JSON对象转为数组。
let json ={
'0':'hello',
'1':'123',
'4':'world',
length:3 //需要有length属性,否则转化出来数组为空[]
}
let arr = Array.from(json);
console.log(arr);
控制台打印结果:(3) ["hello", "123", undefined]
var map = new Map();
map.set(0, "hello");
map.set(1,"world");
map.set(2,"name")
var arr = Array.from(map);
console.log(arr);
控制台打印结果:二维数组
- (3) [Array(2), Array(2), Array(2)]
- 0: (2) [0, "hello"]
- 1: (2) [1, "world"]
- 2: (2) [2, "name"]
- length: 3
2.Array.of():
Array.of()方法是将一组值转变为数组。
let empty = Array.of();
console.log(empty); //[]
let arr = Array.of(3,4,5,6);
console.log(arr); //[3,4,5,6]
3.find()/findIndex():
数组实例的find方法用于找出第一个符合条件的数组成员。参数是个回调函数,所有数组成员依次执行该回调函数,直到找到第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,就返回undefined;
如:回调函数可以接收3个参数,依次为当前的值(value)、当前的位置(index)、原数组(arr)
let arr = [1,2,3,5,7];
console.log(arr.find(function(item,index,arr){
return item> 3;
}))
控制台打印结果:5
数组实例的findIndex方法用于找出第一个符合条件的数组成员的索引。
let arr = [1,2,3,5,7];
console.log(arr.findIndex(function(item,index,arr){
return item> 3;
}))
控制台打印结果:3
4.fill():
使用fill()方法用给定的值来填充数组。可以填充一个空数组(初始化)或者改变已有元素的值 。
fill方法还可以接收第二个和第三个参数,用于指定填充的起始位置和结束位置(不包含):
new Array(3).fill(7);//[7,7,7]
let arr = [0,1,2,3,4,5,6,7];
arr.fill('error',2,4);
console.log(arr);//[0,1,"error","error",4,5,6,7]
5.includes():
includes()方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false。
console.log([1,2,NaN].includes(NaN)) //true(ES6之前NaN不等于自身。includes可包含)
6.copyWithin(target, start, end):
从数组的指定位置拷贝元素到数组的另一个指定位置中。
target必需。复制到指定目标索引位置。
start可选。元素复制的起始位置。
end可选。停止复制的索引位置 (默认为 array.length)。如果为负值,表示倒数。
console.log([1,2,3,4,NaN].copyWithin(1,2,4)) //[1, 3, 4, 4, NaN]
7.遍历数组的方法:entries/keys/values
entries方法返回一个数组的迭代对象,该对象包含数组的键值对 (key/value)。迭代对象中数组的索引值作为 key, 数组元素作为 value。
keys方法用于从数组创建一个包含数组键的可迭代对象。如果对象是数组返回 true,否则返回 false。
values方法用于从数组创建一个包含数组值的可迭代对象。
for(let item of ['a','b'].keys()){
console.log(item);
//0
//1
}
for(let item of ['a','b'].values()){
console.log(item);
//'a'
//'b'
}
let arr = ["a","b"];
for(let item of arr.entries()){
console.log(item);
// [0, "a"]
// [1, "b"]
}
for(let [index,item] of arr.entries()){
console.log(index+':'+item);
//0:"a"
//1:"b"
}
note:由于entries/keys/values 返回的都是一个迭代对象,如果不用for...of
进行遍历,可用使用next()方法手动跳到下一个值。
let arr5 =['a','b','c']
let entries = arr5.entries();
console.log(entries.next().value);//[0, "a"]
console.log(entries.next().value);//[1, "b"]
console.log(entries.next().value);//[2, "c"]
console.log(entries.next().value);//undefined
let values = arr5.values();
console.log(values.next().value);//a
console.log(values.next().value);//b
console.log(values.next().value);//c
console.log(values.next().value);//undefined
let keys= arr5.keys();
console.log(keys.next().value);//0
console.log(keys.next().value);//1
console.log(keys.next().value);//2
console.log(keys.next().value);//undefined