时间戳

首页 > 技术文章 > ES6数组新加 Buff

ES6数组新加 Buff

majianwen 2019-04-17 20:00 原文

欢迎关注本人公众号《迈向大前端》，里面有15本前端相关的电子书，送给在前端路上迷茫的同学们！
本章篇幅很长，分开来发，这一小篇主要讲ES6数组的Array.of()和Array.from()与传统写法的对比，下一篇是ES6新增的方法和类数组，

创建数组新方法

先来说说ES6之前创建数组遗留的痛点问题，比如说我想创建一个数组，里面包含一个10，应该怎么写呢？用数组字面量和构造函数试试：

//数组字面量式
var arr = [10];
console.log(arr);		//10
console.log(arr.length);	//1

var arr3 = [];
arr3[0] = 10;
console.log(arr3);   //[10]

//构造函数式
var arr1 = new Array(10);
console.log(arr1);    //(10)[empty*10]
console.log(arr1.length);   //10

var arr2 = new Array(10,20);
console.log(arr2);			//[10,20]
console.log(arr2.length);	//2
console.log(arr2[0]);		//10
console.log(arr2[1]);		//20

看到了吗？构造函数式是没法创建单个包含有数值的数组的，这里的10代表的数组的长度为10，而不是arr[0]是10，所以在ES6之前只能通过数组字面量来创建，针对这个问题ES6 推出了Array.of() ,来规避这种怪异行为

Array.of()

Array.of()与Array构造函数的工作机制类似，它不存在特例，无论有几个参数，参数什么类型，统统不管，统一把参数作为数组的项来处理。来看看如何使用：

var arr = Array.of(10);
console.log(arr);			//[10]
console.log(arr.length);	//1
console.log(arr[0])			//10

var arr1 = Array.of(10,'xiaomage',[1,2,3],{'a':1,'b':2});
console.log(arr1);			//[10, "xiaomage", Array(3), {…}]

这样就很舒服了。

当我们想着给一个函数传入Array构造函数来创建数组时，是无法达到行为统一的，原因就是 new Array(10)

不是我们想要的效果，但是使用Array.of()就可以解决这个问题。

//ES5的Array
function createArray(creator, value){
    let arr = creator(value);
    return arr;
};
var  newArr = createArray(Array,10);
console.log(newArr);	//(10)[empty*10]

//ES6的Array.of
function createArray_1(creator, value){
    let arr = creator(value);
    return arr;
}
var  newArr1 = createArray_1(Array.of,10);
console.log(newArr1);		//(1)[10]

在ES6之前，当我们遇到一个类数组转成数组的时候又得写一堆代码来实现，先简单说说什么是类数组，

什么是类数组，简单记住三点就行,

第一，它是对象，不是数组，只是看着像数组；

第二，一定含有length属性，没有length属性的是对象而不是类数组 ；

第三，其他属性（索引）不能是负数。

比如： var a = {'1':'aa','2':'bb','4':'cc',length:3}; ,我们常见的类数组有函数的参数arguments。

function func(){
    console.log(arguments);
};
func(1,2,3);

那么如何把类数组转换成数组，还是以函数的arguments为例，看看写法：

function func(){
    //第一种写法
    var arr = [];
    for(var i=0;i<arguments.length;i++){
        arr.push(arguments[i]);
    };
    console.log(arr);		//[10, "xiaoma", "javascript"]
    
    //第二种写法
    var arr1= Array.prototype.slice.call(arguments);
    console.log(arr1);		//[10, "xiaoma", "javascript"]
};
func(10,'xiaoma','javascript');

虽然转化还是比较简单的，也得写好几行代码，ES6的Array.from()出来之后可谓是一步到位，简单明了。

Array.from()

Array.from()的语法是Array.from(arrayLike[, mapFn[, thisArg]])。接受三个参数：

第一个：可迭代的对象或者数组；

第二个：映射函数（接受两个参数，数组的每一项和索引），可选；

第三个：执行映射函数时的this对象，可选；

返回值：处理后的数组。

function func(){
    console.log(Array.from(arguments));	//[1, 2, 3, "Array.from", Array(3), {…}]
};
func(1,2,3,"Array.from",[4,5,6],{'a':1});

下面在看看有映射函数的情况，

function func(){
    var arr = Array.from(arguments,(item ,index)=>{
        if(Number.isInteger(item)){
            return item*10+100;
        }else{
            return item;
        }
    });
    console.log(arr);		//[110, 120, 130, "Array.from", Array(3), {…}]
};
func(1,2,3,"Array.from",[4,5,6],{'a':1});

分析一下，拿到数组后再进行了一次map操作，返回想要的值，拆开来看，等价于：Array.from(obj).map(mapFn, thisArg)；

function func(){
    var arr = Array.from(arguments).map((item ,index)=>{
        if(Number.isInteger(item)){
            return item*10+100;
        }else{
            return item;
        }
    });
    console.log(arr);		//[110, 120, 130, "Array.from", Array(3), {…}]
};
func(1,2,3,"Array.from",[4,5,6],{'a':1});

如果映射函数处理对象，那么第三个参数this就派上用场了。

var obj = {
    name:'xiao ma ge',
    sayHello(value){
        return value + this.name;
    }
};
function func(){
    return Array.from(arguments,obj.sayHello,obj)
}
var arr = func('hello ');
console.log(arr);		//["hello xiao ma ge"]

用Array.from()能够将所有含有Symbol.iterator属性的可迭代对象转换为数组：

let obj1 = {
    *[Symbol.iterator](){
        yield 10;
        yield 100;
        yield 1000;
    }  
};

var arr = Array.from(obj1,(item,index)=>{
    return item*10+1;
});
console.log(arr);	//[101, 1001, 10001]

好了，这一部分基本上就说完了，欢迎关注本人公众号《迈向大前端》，里面有15本前端相关的电子书，送给在前端路上迷茫的同学们！，下面是我的公众号，扫码即可领取！

推荐阅读