JavaScriptES6数组的方法

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/c__dreamer/article/details/81536086

目录

 

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

主页传送门

展开阅读全文

没有更多推荐了,返回首页