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 相关文章推荐
Javascript的构造函数和constructor属性
Jan 09 Javascript
jquery validate poshytip 自定义样式
Nov 26 Javascript
jQuery 选择表格(table)里的行和列及改变简单样式
Dec 15 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
Jan 23 Javascript
jquery Deferred 快速解决异步回调的问题
Apr 05 Javascript
浅析JavaScript函数的调用模式
Aug 10 Javascript
JavaScript编写一个简易购物车功能
Sep 17 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
Oct 25 Javascript
移动端基础事件总结与应用
Jan 12 Javascript
vue.js利用Object.defineProperty实现双向绑定
Mar 09 Javascript
es6函数中的作用域实例分析
Apr 18 Javascript
JS轻量级函数式编程实现XDM三
Jun 16 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
PHP学习笔记之字符串编码的转换和判断
2014/05/22 PHP
PHP+Mysql树型结构(无限分类)数据库设计的2种方式实例
2014/07/15 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例
2017/09/15 PHP
PHP数组式访问接口ArrayAccess用法分析
2017/12/28 PHP
Prototype的Class.create函数解析
2011/09/22 Javascript
Javascript中的异步编程规范Promises/A详细介绍
2014/06/06 Javascript
JavaScript中实现单体模式分享
2015/01/29 Javascript
jQuery弹出框代码封装DialogHelper
2015/01/30 Javascript
Javascript进制转换实例分析
2015/05/14 Javascript
jQuery中$(function() {});问题详解
2015/08/10 Javascript
JS创建事件的三种方法(实例代码)
2016/05/12 Javascript
Vue.js父与子组件之间传参示例
2017/02/28 Javascript
BootStrap 动态表单效果
2017/06/02 Javascript
JS实现中文汉字按拼音排序的方法
2017/10/09 Javascript
vue init webpack 建vue项目报错的解决方法
2018/09/29 Javascript
js实现移动端轮播图
2020/12/21 Javascript
浅谈layui 绑定form submit提交表单的注意事项
2019/10/25 Javascript
JavaScript实现像雪花一样的Hexaflake分形
2020/07/07 Javascript
封装 axios+promise通用请求函数操作
2020/08/11 Javascript
[54:51]Ti4 冒泡赛第二轮LGD vs C9 3
2014/07/14 DOTA
python对数组进行反转的方法
2015/05/20 Python
Pyhton中单行和多行注释的使用方法及规范
2016/10/11 Python
python如何使用正则表达式的前向、后向搜索及前向搜索否定模式详解
2017/11/08 Python
python中文编码与json中文输出问题详解
2018/08/24 Python
Python不同目录间进行模块调用的实现方法
2019/01/29 Python
Pycharm远程连接服务器并实现代码同步上传更新功能
2020/02/25 Python
沙特阿拉伯网上购物:Sayidaty Mall
2018/05/06 全球购物
Fox Racing官方网站:越野摩托车和山地自行车装备和服装
2019/12/23 全球购物
用C或者C++语言实现SOCKET通信
2015/02/24 面试题
AJAX的优缺点都有什么
2015/08/18 面试题
保安的辞职报告怎么写
2014/01/20 职场文书
科技节口号
2014/06/19 职场文书
校园文化艺术节开幕词
2016/03/04 职场文书
详解TypeScript的基础类型
2022/02/18 Javascript
Windows server 2003卸载和安装IIS的图文教程
2022/07/15 Servers