创建数组

在ES6之前,创建数组的方式主要有两种:

  • 调用 Array 构造函数
  • 用数组字面量语法

为了简化数组的创建过程,ES6新增了两个方法:

  • Array.of()
  • Array.from()

Array.of() 方法

ES6之所以向JS添加新的数组创建方法,是要帮助开发者们规避通过Array构造函数创建数组时的怪异行为。

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

当传入一个参数时,如果是数值型,那个数组的 length 属性就会设置为该值;如果传入多个值,此时无论这些值是不是数值型的,都会变为数组的元素。这个特性让人感到困惑,你不可能总是注意传入数据的类型。

ES6通过引入 Array.of() 方法来解决这个问题。Array.of() 与 Array 构造函数类似,只是不存在单一数值型参数的特例。无论有多少参数,无论参数是什么类型,Array.of() 方法总会创建一个包含所有参数的数组。

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

Array.from() 方法

将对象转化为数组。

function doSomething() {
var args = Array.from(arguments); console.log(args);
} doSomething(1, 2, 3, 4); // [1, 2, 3, 4]

映射转换

可以提供一个映射函数作为 Array.from() 的第二个参数,这个函数用来将类数组对象中的每一个值转换成其它形式,最后将这些结果储存在结果数组的相应索引中。

function translate() {
return Array.from(arguments, (value) => value + 1);
} let numbers = translate(1, 2, 3);
console.log(numbers); // [2, 3, 4]

如果用映射函数处理对象,也可以给 Array.from() 方法传入第三个参数来表示映射函数的this值。

let helper = {
diff: 1,
add(value) {
return value + this.diff;
}
}; function translate() {
return Array.from(arguments, helper.add, helper);
} let numbers = translate(1, 2, 3);
console.log(numbers); // [2, 3, 4]

用 Array.from() 转换可迭代对象

let numbers = {
*[Symbol.iterator]() {
yield 1;
yield 2;
yield 3;
}
}; let numbers2 = Array.from(numbers, (value) => value + 1);
console.log(numbers2); // [2, 3, 4]

为所有数组添加的新方法

find() 方法和 findIndex() 方法

find() 方法 和 findIndex() 方法都接受两个参数:

  • 回调函数
  • 指定回调函数中的this值,可选参数

执行回调函数时,传入的参数为:

  • 数组中的某个元素
  • 该元素在数组中的索引
  • 数组本身

如果给定的值满足定义的标准,回调函数应返回true,一旦回调函数返回true,find() 方法和 findIndex() 方法都会立即停止搜索数组剩余的部分。

find() 方法返回查找到的值;findeIndex() 方法返回查找到的值的索引。

let numbers = [25, 30, 35, 40, 45];

console.log(numbers.find(n => n > 33)); // 35
console.log(numbers.findIndex(n => n > 33)); // 2

fill() 方法

可以用指定的值填充一至多个数组元素。

let numbers = [1, 2, 3, 4];
numbers.fill(1);
console.log(numbers.toString()); // 1,1,1,1

如果只想改变数组某一部分的值,可以传入开始索引和不包含结束索引(不包含结束索引当前值)这两个可选参数。

let numbers = [1, 2, 3, 4];
numbers.fill(1, 2); // 从索引2开始填充数组
console.log(numbers.toString()); // 1,2,1,1
numbers.fill(0, 1, 3); // 从索引1开始填充到索引2
console.log(numbers.toString()); // 1,0,0,1

Note

如果开始索引或结束索引为负值,name这些值会与数组的length属性相加来作为最终位置。

copyWithin() 方法

从数组复制元素的值。

参数:

  1. 开始填充值的索引位置;
  2. 开始复制值的索引位置;
  3. 指定停止复制值的位置(不包含结束索引)(可选参数)(默认情况下会一直复制到数组末尾的值)
let numbers = [1, 2, 3, 4];

// 从数组的索引2开始粘贴值
// 从数组的索引0开始复制值
numbers.copyWithin(2, 0); console.log(numbers.toString()); // 1,2,1,2
let numbers = [1, 2, 3, 4];

// 从数组的索引2开始粘贴值
// 从数组的索引0开始复制值
// 当位于索引1时停止复制值
numbers.copyWithin(2, 0, 1); console.log(numbers.toString()); // 1,2,1,4

Note

同 fill() 方法一样,copyWithin() 方法的所有参数都接受负数值,并且会自动与数组长度相加来作为最终使用的索引。

定型数组

定型数组时一种用于处理数值类型(不是所有类型)数据的专用数组。

在JavaScript中,数字是以64位浮点格式存储的,并按需转换为32位整数,所以运算非常慢。

在ES6中引入定型数组来解决这个问题,并提供更高性能的算术运算。

定型数组与普通数组最重要的差别是:定型数组不是普通数组。它不继承自Array。

【读书笔记】【深入理解ES6】#10-改进的数组功能的更多相关文章

  1. 深入理解ES6之—增强的数组功能

    创建数组 Array.of()方法 ES6为数组新增创建方法的目的之一,是帮助开发者在使用Array构造器时避开js语言的一个怪异点.Array.of()方法总会创建一个包含所有传入参数的数组,而不管 ...

  2. 20150206读书笔记<深入理解计算机系统>

    ●第一章 C是系统级编程的首选.C++显示支持抽象,属于应用级程序设计语言. 简单例子: 一个典型系统的硬件组成: 存储器的层次结构: 注:存储器层次结构的设计思想是,该层存储器作为下一层存储器的高速 ...

  3. 【读书笔记】2016.12.10 《构建高性能Web站点》

    本文地址 分享提纲: 1. 概述 2. 知识点 3. 待整理点 4. 参考文档 1. 概述 1.1)[该书信息] <构建高性能Web站点>: -- 百度百科 -- 本书目录: 第1章 绪论 ...

  4. Python基础教程【读书笔记】 - 2016/7/10

    希望通过博客园持续的更新,分享和记录Python基础知识到高级应用的点点滴滴! 第五波:第1章  基础知识 [总览]  介绍如何得到所需的软件,然后讲一点点算法及其主要的组成.学习变量variable ...

  5. 《Linux命令行与shell脚本编程大全》- 读书笔记3 - 理解shell

    当用户登录终端的时候,通常会启动一个默认的交互式shell.系统究竟启动哪个shell,这取决于用户配置.一般这个shell都是/bin/shell.默认的系统shell(/bin/sh)用于系统sh ...

  6. python 进阶读书笔记1 -- 理解python一切皆对象

    理解python一切皆对象: 1.所有的类都是由type创建的 2.所有的类的基类都是object 3.type是类,也是实例,type的基类是object,type对象是由type创建的 4.obj ...

  7. 【读书笔记::深入理解linux内核】内存寻址【转】

    转自:http://www.cnblogs.com/likeyiyy/p/3837272.html 我对linux高端内存的错误理解都是从这篇文章得来的,这篇文章里讲的 物理地址 = 逻辑地址 – 0 ...

  8. 【读书笔记::深入理解linux内核】内存寻址

    我对linux高端内存的错误理解都是从这篇文章得来的,这篇文章里讲的 物理地址 = 逻辑地址 – 0xC0000000:这是内核地址空间的地址转换关系. 这句话瞬间让我惊呆了,根据我的CPU的知识,开 ...

  9. 20150207读书笔记<深入理解计算机系统2-1>

    第二章 信息存储 (1)  多数计算机以一个字节作为最小可寻址的存储器单元. 机器级程序将存储器看成一个非常大的字节数组,称为虚拟存储器. 存储器的每个字节都由唯一的数字标识,称为它的地址. 所有可能 ...

  10. 读书笔记 effective c++ Item 10 让赋值运算符返回指向*this的引用

    一个关于赋值的有趣的事情是你可以将它们链在一起: int x, y, z; x = y = z = ; // chain of assignments 同样有趣的是赋值采用右结合律,所以上面的赋值链被 ...

随机推荐

  1. 自学Python2.3-基本数据类型-元组tuple(object) 方法

    Python tuple方法总结 一.元组的简介 1.元组与列表一样,也是一种序列,但是唯一不同的元组是不能修改的 2.元组的元素不可修改,但是元组元素的元素是可以修改的 3.元组通过()括起来表示 ...

  2. idea历史版本下载

    https://confluence.jetbrains.com/display/IntelliJIDEA/Previous+IntelliJ+IDEA+Releases

  3. git更新失败Probably the path to Git executable is not valid

    git更新代码失败 检查setting配置,发现路径配置错误 找对git的安装目录,修改路径后保存即可

  4. Javascript之模拟文字高亮

    在我们平时浏览网页的时候,我们常常会用到Ctrl+F(搜索)功能,被搜索到的文字就是高亮显示.那么,如何在Javascript中模拟文字高亮显示这一功能呢? 以下为笔者写的样例代码: <!DOC ...

  5. JavScript--表单提交

    前台代码 <div > <div id="show">asdasdas</div> <form id="form"&g ...

  6. 33 款主宰 2017 iOS 开发的开源库

    推荐一篇文章 改文章汇聚了现在主流的一些三方框架,很值得一看 https://mp.weixin.qq.com/s/ICodliohtzbmA-eLKRFT-Q

  7. 将自己的域名代理到Gitpages

    相信有很多程序员都有自己的域名,甚至很多人还有自己的服务器.去年我也买了半年的阿里云,在tomcat里面发war包,相当于一个正式的项目.但是很多前端程序员应该要求很简单,就是能将静态的html发布就 ...

  8. python 嵌套字典比较值,取值

    #取值import types allGuests = {'Alice': {'apples': 5, 'pretzels': {'12':{'beijing':456}}}, 'Bob': {'ha ...

  9. prototype为对象添加属性和方法

    可以通过prototype来为已经定义好的的"类"添加属性和方法.这里来了解一下prototype的基础知识.prototype是"构造函数"的属性,不是实例的 ...

  10. VMware_ubuntu设置共享文件夹

    1. 点击安装VMware tools 2.将/media/vmtool的压缩包复制到/home/pc/vm_tool下,应为原路径在root权限下竟然也是只读的,并且无法更改. 3.进入/home/ ...