目录
数组的实例 entries(),keys()和values()
Array.from()
Array.from方法用于将两类对象转为真正的数组,类似数组的对象和可遍历的对象,也包括ES6新增的Set和Map对象。
和扩展运算符不同的是,扩展运算符直能把可遍历的对象转为数组,不能把类数组转为数组。
Array.from方法可以将只要是对象中带有length属性都可以转为真正的数组。
let obj = {
"0" : "a",
"1" : "b",
length : 2,
}
console.log(Array.from(obj)) //[a,b]
实际应用中,常见的类似数组的对象都是Dom操作返回的NodeList集合,以及函数内部的arguments对象,Array.from都可以将它们转为真正的数组。
let nodeList = document.querySelectorAll("*");
console.log(Array.from(nodeList));
function fun (){
console.log(Array.from(arguments))
}
fun(1,2,3,4)
如果参数是一个数组,则Array.from会返回一个一模一样的新数组。同样的也是浅拷贝。
let arr = [1,2,3];
let arr2 = Array.from(arr);
console.log(arr2) //[1,2,3]
arr[0] = 2
console.log(arr2) //[2,2,3]
Array.from还可以接受第二个参数,作用类似数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组中。相当于Array.from(arr).map
let obj = {
"0":"1",
"1":"2",
length : 2,
}
console.log(Array.from(obj,(value) => value + 1 )); //[2,3]
如果map函数里面用到了this关键字,还可以传入Array.from的第三个参数来绑定this。
let obj = {
name : "张三",
age : 18,
}
const arr = [1,23,45,19,20,5,11];
console.log(Array.form(arr,(value) => value > this.age,obj)) //[1,5,11]
Array.from的另一个应用是,将字符串改为数组,然后返回字符串的长度,因为它能正确处理各种Unicode字符,可以避免JavaScript将大于\uFFFF的Unicode字符,算成两个字符的bug。
Array.of()
Array.of()用于将一组织,转换为数组,这个方法的主要目的是用来弥补Array()方法的不足,因为参数个数的不同会导致Array()行为有差异。
console.log(Array()); //[]
console.log(Array(3)); //[,,]
console.log(Array(3,11,8)) //[3,11,8]
Array.of方法它的行为就非常同一。
console.log(Array.of()) //[]
console.log(Array.of(undefined)); //[undefined]
console.log(Array.of(1)); //[1]
console.log(Array.of(2)); //[2]
数组实例的copyWithin()
数组实例的copyWithin方法,在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有的成员),然后返回当前数组。也就是说,使用这个方法,会修改当前数组。
Array.prototype.copyWithin(target , start = 0 ,end = this.length)
它接受三个参数
target(必选):从该位置开始替换数据,如果为负值,表示倒数
start(可选):从该位置开始读取数据,默认为0,如果是负值,表示倒数。
end(可选):到该位置停止读取数据,默认等于数组长度,如果是负值,表示倒数。
这三个参数都应该是数值,如果不是,会自动转为数值
//将3号位复制到0号位
console.log([1,2,3,4,5].copyWithin(0,3,4)); //[4,2,3,4,5]
// -2相当于3号位 -1相当于4号位
console.log([1,2,3,4,5].copyWithin(0,-2,-1)); //[4,2,3,4,5]
//将3号位复制到0号位
console.log([].copyWithin.call({length : 5,3 : 1},0,3)); //{ '0' : 1 , 3 : 1 , length : 5}
数组实例的find()和findIndex()
数组实例的find方法,用于找出第一个符合条件的数组成员,它的参数是一个回调函数,所有数组成员一次执行该回调函数,直到找出第一个返回值true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。
find方法可以接受三个参数,依次为当前值,当前值的索引,和原数组。
let num = [1,5,8,9,10,12].find(function(value,index,arr){
return value > 9;
})
console.log(num);
数组实例的findIndex方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合,则返回-1。
let num = [1,4,6,7].findIndex((value) => value > 6);
console.log(num);
这两个方法都可以接受第二个参数,用来绑定回调函数的this对象。
function f(v){
return v > this.age;
}
let person = {
name : "wang",
age : 18,
}
let num = [10,12,16,18,20].find(f,person);
console.log(num); //20
另外,这两个方法都可以借助Object.is方法发现NaN,弥补了数组的indexOf方法的不足。
console.log([NaN].indexOf(NaN)); //-1 未找到
console.log([NaN].findIndex( y => Object.is(NaN, y))); //0
数组实例的fill()
fill方法使用给定值,填充一个数组,如果数组中有其他的值会全部抹去。
console.log(['a','b','c'].fill(1));
console.log(new Array(3).fill(2));
fill方法还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置。
console.log(['a','b','c'].fill(3,1,2)); //[a,3,c]
注意:如果填充的类型为对象,那么被赋值的是同一个内存地址的对象,而不是深拷贝的对象。
let arr = new Array(3).fill({name : "wang",});
console.log(arr);
arr[0].name = "zhou";
console.log(arr);
let arr = new Array(3).fill([]);
console.log(arr);
arr[0].push(5);
console.log(arr);
数组的实例 entries(),keys()和values()
ES6提供了三个新的方法----entries(),keys(),values()---用于遍历数组。他们都返回一个遍历器对象,可以用for...of循环遍历。唯一的区别就是keys()是对键名的遍历,values()是对键值的遍历,entries()是对键值对的遍历。
let arr = [1,2,3,4,5];
for(let index of arr.keys()){
console.log(index);
}
for(let elem of arr.values()){
console.log(elem);
}
for(let [index , elem] of arr.entries()){
console.log(index , elem);
}
如果不适用for...of循环,可以手动调用遍历器对象的next()方法,进行遍历。
const letter = ['a','b','c'];
let entries = letter.entries();
console.log(entries.next().value);
console.log(entries.next().value);
console.log(entries.next().value);
数组实例的includes()
Array.prototype.includes方法返回一个布尔值,表示某个数组是否包含给定的值,与字符串的includes方法类似,ES2016引入了该方法。
console.log([1,2,3].includes(2)); //true;
console.log([1,2,3].includes(4)) ; //false
console.log([1,2,3,NaN].includes(NaN)) //true
该方法的第二个参数表示搜索的起始位置,默认为0.如果第二个参数为负数,则表示倒数的位置,如果这是它大于数组长度(比如第二个参数为-4,但数组长度为3)则会重置从0开始。
let arr = [1,2,3,4];
console.log(arr.includes(3,3));
console.log(arr.includes(4,-5));
没有改方法之前,我们通常使用数组的indexOf方法,检查是否包含某个值。
let arr = [1,2,3,4];
if(arr.indexOf(4) !== -1){
console.log("找到");
} else {
console.log("未找到");
}
indexOf方法有两个缺点,一是不够语义化,它的含义是找到参数值的第一个出现位置,所以要去比较是否不等于-1,表达起来不够直观;二是,它内部使用严格相等运算符(===)进行判断,这会导致对NaN的限制,这会导致对NaN的误判。
console.log([NaN].indexOf(NaN) ); //-1
console.log([NaN].includes(NaN)); //true