es6新增的api

时间:2021-08-02 20:30:09

从值的转换到数学计算,ES6给各种内建原生类型和对象增加了许多静态属性和方法来辅助这些常见任务。另外,一些原生类型的实例通过各种新的原型方法获得了新的能力。

注意: 大多数这些特性都可以被忠实地填补。我们不会在这里深入这样的细节,但是关于兼容标准的shim/填补,你可以看一下“ES6 Shim”(https://github.com/paulmillr/es6-shim/)。

Array

在JS中被各种用户库扩展得最多的特性之一就是数组类型。ES6在数组上增加许多静态的和原型(实例)的帮助功能应当并不令人惊讶。

Array.of(..) 静态函数

Array(..)的构造器有一个尽人皆知的坑:如果仅有一个参数值被传递,而且这个参数值是一个数字的话,它并不会制造一个含有一个带有该数值元素的数组,而是构建一个长度等于这个数字的空数组。这种操作造成了不幸的和怪异的“空值槽”行为,而这正是JS数组为人诟病的地方。

Array.of(..)作为数组首选的函数型构造器取代了Array(..),因为Array.of(..)没有那种单数字参数值的情况。考虑如下代码:

var a = Array( 3 ); a.length; // 3 a[0]; // undefined var b = Array.of( 3 ); b.length; // 1 b[0]; // 3 var c = Array.of( 1, 2, 3 ); c.length; // 3 c; // [1,2,3]

在什么样的环境下,你才会想要是使用Array.of(..)来创建一个数组,而不是使用像c = [1,2,3]这样的字面语法呢?有两种可能的情况。

如果你有一个回调,传递给它的参数值本应当被包装在一个数组中时,Array.of(..)就完美地符合条件。这可能不是那么常见,但是它可以为你的痒处挠上一把。

另一种场景是如果你扩展Array构成它的子类,而且希望能够在一个你的子类的实例中创建和初始化元素,比如:

class MyCoolArray extends Array { sum() { return this.reduce( function reducer(acc,curr){ return acc + curr; }, 0 ); } } var x = new MyCoolArray( 3 ); x.length; // 3 -- 噢! x.sum(); // 0 -- 噢! var y = [3]; // Array,不是 MyCoolArray y.length; // 1 y.sum(); // `sum` is not a function var z = MyCoolArray.of( 3 ); z.length; // 1 z.sum(); // 3

你不能(简单地)只创建一个MyCoolArray的构造器,让它覆盖Array父构造器的行为,因为这个父构造器对于实际创建一个规范的数组值(初始化this)是必要的。在MyCoolArray子类上“被继承”的静态of(..)方法提供了一个不错的解决方案。

Array.from(..) 静态函数

在JavaScript中一个“类数组对象”是一个拥有length属性的对象,这个属性明确地带有0或更高的整数值。

在JS中处理这些值出了名地让人沮丧;将它们变形为真正的数组曾经是十分常见的做法,这样各种Array.property方法(map(..),indexOf(..)等等)才能与它一起使用。这种处理通常看起来像:

// 类数组对象 var arrLike = { length: 3, 0: "foo", 1: "bar" }; var arr = Array.prototype.slice.call( arrLike );

另一种slice(..)经常被使用的常见任务是,复制一个真正的数组:

var arr2 = arr.slice();

在这两种情况下,新的ES6Array.from(..)方法是一种更易懂而且更优雅的方式 —— 也不那么冗长:

var arr = Array.from( arrLike ); var arrCopy = Array.from( arr );

Array.from(..)会查看第一个参数值是否是一个可迭代对象(参见第三章的“迭代器”),如果是,它就使用迭代器来产生值,并将这些值“拷贝”到将要被返回的数组中。因为真正的数组拥有一个可以产生这些值的迭代器,所以这个迭代器会被自动地使用。

但是如果你传递一个类数组对象作为Array.from(..)的第一个参数值,它的行为基本上是和slice()(不带参数值的!)或apply()相同的,它简单地循环所有的值,访问从0开始到length值的由数字命名的属性。

考虑如下代码:

var arrLike = { length: 4, 2: "foo" }; Array.from( arrLike ); // [ undefined, undefined, "foo", undefined ]

因为在arrLike上不存在位置0,1,和3,所以对这些值槽中的每一个,结果都是undefined值。