综合技术

ES6数组新加 Buff

微信扫一扫,分享到朋友圈

ES6数组新加 Buff
0

欢迎关注本人公众号《迈向大前端》,里面有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本前端相关的电子书,送给在前端路上迷茫的同学们!,下面是我的公众号,扫码即可领取!

阅读原文...

微信扫一扫,分享到朋友圈

ES6数组新加 Buff
0
博客园精华区

Continuous Testing: What, Why, and How?

上一篇

Salesforce debuts Einstein Translation and Einstein Optical Character Recognition

下一篇

评论已经被关闭。

插入图片

热门分类

往期推荐

ES6数组新加 Buff

长按储存图像,分享给朋友