ES6 新增的创建数组的方法(小结)


Posted in Javascript onAugust 01, 2019

在ES6之前,创建数组的方式有2种:

一: 通过数组字面量

let array = [1,2,3];
console.log(array);//[1,2,3]

二: 通过new Array()创建数组

let array = new Array(1, 2, 3);
console.log(array); //[1,2,3]

在大多数情况下new Array()运行良好:

let array = new Array(1, 2);
console.log(array.length); //2
console.log(array[0]); //1
console.log(array[1]); //2

array = new Array('a');
console.log(array.length); //1
console.log(array[0]);//'a'

array = new Array(1, 'a');
console.log(array.length); // 2
console.log(array[0]);//1
console.log(array[1]);//'a'

但是new Array()有一种诡异的情况:

let array = new Array(2);
console.log(array[0]); // undefined
console.log(array[1]);// undefined
console.log(array.length); // 2

当我们给new Array()传递单个数字参数时,这个数字不是作为数组元素,而是该数组的length属性而存在,而数组本身则是一个空数组。

为了解决上面这个令人类没有安全感的特性,ES6引入了Array.of()来解决这个问题:

三:Array.of()

顾名思义,of()方法就是以它接受到的参数作为元素来创造数组,上面我们说的单个数字参数的情况也同样适用:

let array = Array.of(3);
console.log(array.length); // 1
console.log(array[0]); // 3

array = Array.of(1, 2);
console.log(array.length);// 2
console.log(array[0]); // 1
console.log(array[1]);// 2

array = Array.of('a');
console.log(array.length);// 1
console.log(array[0]);// 'a'

array = Array.of(1, 'a');
console.log(array.length); // 2
console.log(array[0]);// 1
console.log(array[1]);// 'a'

四:Array.from()

ES6还增加了一个Array.from(),也是用了创建一个数组。它主要用在以类数组对象和可迭代对象为蓝本,创建对应的数组。

1: Array.from(类数组对象)

我们最熟悉的类数组对象,应该就是function的arguments对象了。接下来,我们看一个用Array.from()创建包含arguments元素的数组:

function createArrayFrom() {
  console.log(arguments instanceof Array); // false
  return Array.from(arguments);
}

let array = createArrayFrom(1, 2, 3);
console.log(array instanceof Array); // true
console.log(array.length); //3
console.log(array[0]);//1
console.log(array[1]);//2
console.log(array[2]);//3
console.log(array.indexOf(2)); //1

2: Array.from(可迭代对象)

Array.from()也可以把一个可迭代对象转换为数组:

let iteratorObject = {
  *[Symbol.iterator](){
    yield 1;
    yield 2;
    yield 3;
  }
};
let array = Array.from(iteratorObject);
console.log(array instanceof Array); // true
console.log(array.length); // 3
console.log(array[0]); // 1

五:Array.from()的第二个参数

前面的例子,我们看到了一个类数组对象和可迭代对象作为Array.from()的第一个参数,从而创建出包含它们元素的数组。Array.from()的第二个参数是一个函数,这个函数用来将类数组对象和可迭代对象的元素进行某种变换后,再作为生出数组的元素,例如:

let iteratorObject = {
  *[Symbol.iterator](){
    yield 1;
    yield 2;
    yield 3;
  }
};
let array = Array.from(iteratorObject, (item)=>{return item + 1});
console.log(array[0]); //2
console.log(array[1]); //3
console.log(array[2]); //4

这个例子里,我们提供了把每个元素值加一的变换,所以原本的1,2,3,置换到新的数组之后,元素是2,3,4。

六: Array.from()的第三个参数

Array.from()还提供第三个参数可用,第三个参数用来指定this的值,如果在整个方法的调用中有用到this 的话,看一个例子:

let firstHelper = {
  diff: 1,
  add(value){
    return value + this.diff;
  }
};
let secondHelper = {
  diff: 2
};
function createArrayFrom() {
  return Array.from(arguments, firstHelper.add, secondHelper);
}

let array = createArrayFrom(1, 2, 3);
console.log(array); //[3, 4, 5]

上面的例子里面,我们的在add()方法里面使用了this(这行代码:value + this.diff),并且add()定义在firstHelper对象,且firstHelper对象也有diff属性,但是我们的第三个参数传入的是secondHelper,所以在firstHelper.add()方法里的this值是secondHelper。

以上就是ES6新增的Array.of()和Array.from()方法,可以使得开发者用更少的代码应对更多变的创建数组的场景。

Javascript 相关文章推荐
jquery1.5.1中根据元素ID获取元素对象的代码
Apr 02 Javascript
深入理解Javascript中this的作用域
Aug 12 Javascript
javascript 动态创建表格的2种方法总结
Mar 04 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
Apr 12 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
Dec 10 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
May 10 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
May 24 Javascript
jQuery编写设置和获取颜色的插件
Jan 09 Javascript
JS三目运算(三元运算)方法详解
Mar 01 Javascript
js如何找出字符串中的最长回文串
Jun 04 Javascript
vue项目base64字符串转图片的实现代码
Jul 13 Javascript
Vue.js 实现数据展示全部和收起功能
Sep 05 Javascript
详解基于Wepy开发小程序插件(推荐)
Aug 01 #Javascript
深入浅析Vue中mixin和extend的区别和使用场景
Aug 01 #Javascript
在Vue环境下利用worker运行interval计时器的步骤
Aug 01 #Javascript
详解Vue2.5+迁移至Typescript指南
Aug 01 #Javascript
微信小程序组件传值图示过程详解
Jul 31 #Javascript
vue.js实现回到顶部动画效果
Jul 31 #Javascript
vue实现滑动超出指定距离回顶部功能
Jul 31 #Javascript
You might like
多重?l件?合查?(二)
2006/10/09 PHP
探讨Hessian在PHP中的使用分析
2013/06/13 PHP
php生成随机密码自定义函数代码(简单快速)
2014/05/10 PHP
PHP实现通过中文字符比率来判断垃圾评论的方法
2014/10/20 PHP
php打印输出棋盘的实现方法
2014/12/23 PHP
ecshop实现smtp发送邮件
2015/02/03 PHP
laravel-admin 中列表筛选方法
2019/10/03 PHP
一个可拖拽列宽表格实例演示
2012/11/26 Javascript
jquery移动listbox的值原理及代码
2013/05/03 Javascript
js身份证判断方法支持15位和18位
2014/03/18 Javascript
判断字符串的长度(优化版)中文占两个字符
2014/10/30 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
2016/06/03 Javascript
JS实现的RGB网页颜色在线取色器完整实例
2016/12/21 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
2017/01/19 Javascript
vue获取input输入值的问题解决办法
2017/10/17 Javascript
详解适配器在JavaScript中的体现
2018/09/28 Javascript
判断JavaScript中的两个变量是否相等的操作符
2019/12/21 Javascript
[43:41]OG vs Newbee 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
python 文件和路径操作函数小结
2009/11/23 Python
Python学习笔记之常用函数及说明
2014/05/23 Python
Python爬虫代理IP池实现方法
2017/01/05 Python
python实现简单聊天应用 python群聊和点对点均实现
2017/09/14 Python
python实时监控cpu小工具
2018/06/21 Python
python交换两个变量的值方法
2019/01/12 Python
python小项目之五子棋游戏
2019/12/26 Python
意大利独特而优质的家居用品:Fazzini
2018/12/05 全球购物
英国景点门票网站:attractiontix
2019/08/27 全球购物
汽车工程专业应届生求职信
2013/10/19 职场文书
单位实习证明怎么写
2014/01/17 职场文书
北京大学自荐信范文
2014/01/28 职场文书
《有趣的发现》教学反思
2014/04/15 职场文书
学习方法演讲稿
2014/05/10 职场文书
事业单位鉴定材料
2014/05/25 职场文书
新颖的化妆品活动方案
2014/08/21 职场文书
Mysql基础知识点汇总
2021/05/26 MySQL
深入浅析python3 依赖倒置原则(示例代码)
2021/07/09 Python