ECMAScript6（ES6）标准之数组Array扩展方法

淡淡的烟草味﹌ 2024-04-17 20:25 80阅读 0赞

ES6对于数组又扩展了很多方法  
包括静态方法和原型链上添加的方法  
让我们可以更方便的操作数组

## 静态方法 ##

## Array.from() ##

这个方法可以将  
类数组对象（有length属性的对象）和可遍历对象（ES6新增的Set与Map数据结构）  
转化为真正的数组

在ES6之前，要想让类数组对象变成数组  
通常做法是调用slice

let arrLike = {
        0: 10,
        1: 20,
        2: 30,
        length: 3
    }
    let arr = Array.prototype.slice.call(arrLike);
    console.log(arr); //[10, 20, 30]

现在我们可以这么做

let arr = Array.from(arrLike);
    console.log(arr); //[10, 20, 30]

如果参数是一个数组，那么会返回一个一模一样的新数组（浅拷贝）  
而且这个方法会将数组空位转换为undefined  
换句话说，会忽略空位

let arr = Array.from([10, , 30]);
    console.log(arr); //[10, undefined, 30]

还要注意拷贝的数组是浅拷贝

let arr = [10, ['a', 'b'] , 30];
    let newArr = Array.from(arr);
    console.log(newArr); //[10, ['a', 'b'], 30]
    arr[1].push('c');
    console.log(newArr); //[10, ['a', 'b', 'c'], 30]

这个方法还有一个额外的参数  
用于对元素进行处理  
类似于ES5的数组方法map

let arrLike = {
        0: 10,
        1: 20,
        2: 30,
        length: 3
    }
    let arr = Array.from(arrLike,function(x){
        return x*x;
    });
    console.log(arr); //[100, 400, 900]

## Array.of() ##

这个方法很简单  
用于将一组值转换为数组  
它弥补了使用new Array()构造数组的奇怪行为  
比如说填入一个参数

let arr = new Array(3); //构建了一个稀疏数组

只填写一个参数就会构建一个长度为3的稀疏数组  
这不是我们想要的  
但Array.of()可以很好的解决这个问题

let arr1 = Array.of(3);
    let arr2 = Array.of(1, 2, 3);
    let arr3 = Array.of();
    let arr4 = Array.of(undefined);
    let arr5 = Array.of(null);
    console.log(arr1); //[3]
    console.log(arr2); //[1, 2, 3]
    console.log(arr3); //[]
    console.log(arr4); //[undefined]
    console.log(arr5); //[null]

填什么就构造什么样的数组  
不填就返回什么空数组

## 数组操作 ##

## 内部拷贝copyWithin() ##

这是一个原型方法  
作用是把这个数组的一部分元素复制到其他位置  
这会覆盖原有的元素  
返回当前数组  
换句话说，这个方法会修改原数组

let arr = [1, 2, 3, 4, 5, 6, 7, 8];
    arr.copyWithin(1, 5, 8);
    console.log(arr); //[1, 6, 7, 8, 5, 6, 7, 8]

第一个参数代表从这个位置开始替换  
后两个参数代表要拷贝的起始位置和结束为止  
同样不包含结束元素，左闭右开  
可以使用负值代表倒数

## 查找find()与findIndex() ##

这两个原型方法都有一个回调函数作为参数  
（回调函数的参数依次为元素、索引、数组引用，与ES5数组方法相同）  
find()会返回第一个满足条件的元素  
findIndex()会返回第一个满足条件的索引  
没有找到都会返回-1  
这里满足条件意思就是函数参数返回值为true

let arr = [10, 20, 30, 40, 50];
    console.log(arr.find(function(value, index, arr){
        return value > 25;
    }));// 30
    console.log(arr.findIndex(function(value, index, arr){
        return value > 25;
    }));// 2

## 填充fill() ##

这个方法用于填充数组  
会修改调用它的数组

let arr = [1, 2, 3];
    console.log(arr.fill(100)); //[100, 100, 100]

这里数组所有的元素都被替换为100

let arr = new Array(3);
    console.log(arr.fill(100)); //[100, 100, 100]

此外还可以指定填充的起始位置和终止位置

let arr = [1, 2, 3, 4, 5];
    console.log(arr.fill(100, 1, 4)); //[1, 100, 100, 100, 5]

## 包含includes() ##

这个方法用于检测数组是否含有某个特定值  
返回布尔值

let arr = [1, 'a', true, null, NaN];
    console.log(arr.includes(1));            //true
    console.log(arr.includes('a'));          //true
    console.log(arr.includes(true));         //true
    console.log(arr.includes(null));         //true
    console.log(arr.includes(NaN));          //true
    console.log(arr.includes(undefined));    //false
    console.log(arr.includes());             //false

这个方法甚至连NaN都可以检测到  
但是我们ES5中的indexOf()是不可以的

let arr = [1, 'a', true, null, NaN];
    console.log(arr.indexOf(1));             //0
    console.log(arr.indexOf('a'));           //1
    console.log(arr.indexOf(true));          //2
    console.log(arr.indexOf(null));          //3
    console.log(arr.indexOf(NaN));           //-1

由此可见indexOf()内部是用严格等于判断的

## 数组迭代 ##

## keys()、values()与entries() ##

它们用于迭代数组  
均返回一个迭代器对象  
配合for-of循环可以迭代数组

类比于ES5的Object.keys/Object.values/Object.entries

let person = {
        name: 'payen',
        sex: 'male',
        age: 19
    }
    console.log(Object.keys(person));//["name", "sex", "age"]
    console.log(Object.values(person));//["payen", "male", 19]
    console.log(Object.entries(person));//[ ["name","payen"], ["sex", "male"], ["age", 19] ]