JavaScriptES6数组的方法

目录

 

Array.from()

Array.of()

数组实例的copyWithin()

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

数组实例的fill()

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

数组实例的includes()

---

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

主页传送门