ES6新增的构造函数方法

ES6新增的构造函数方法

Array构造函数有两个ES6新增的用于创建数组的静态方法：from()和of()。

from()用于将类数组结构转换为数组实例，而of()用于将一组参数转换为数组实例。

一、Array.of

Array.of用于将参数依次转化为数组中的一项，然后返回这个新数组，而不管这个参数是数字还是其它。它基本上与Array构造器功能一致，唯一的区别就在单个数字参数的处理上。如下：

Array.of(6.0); 
Array(6.0); 

执行结果：

参数为多个，或单个参数不是数字时，Array.of 与 Array构造器等同。

Array.of(6,5); //[6,5]
Array(6, 5); //[6,5]

Array.of('66'); // ["66"]
Array('66'); // ["66"]

执行结果如下：

因此，若是需要使用数组包裹元素，推荐优先使用Array.of方法。

目前，对Array.of()提供兼容支持。

如果原生不支持的话，在其他代码之前执行以下代码会创建 Array.of() 。

if (!Array.of) {
  Array.of = function() {
    return Array.prototype.slice.call(arguments);
  };
}

二、Array.from

Array.from的设计初衷是快速便捷的基于其他对象创建新数组，准确来说就是从一个类似数组的可迭代对象创建一个新的数组实例，说人话就是，只要一个对象有迭代器，Array.from就能把它变成一个数组（当然，是返回新的数组，不改变原对象）。

from是实现一种浅复制，不改变原来的数组

从语法上看，Array.from拥有3个形参：
第一个为类似数组的对象，必选。
第二个为加工函数，新生成的数组会经过该函数的加工再返回。
第三个为this作用域，表示加工函数执行时this的值。后两个参数都是可选的

简单示例：

1、从 String 生成数组

Array.from('foo');
// [ "f", "o", "o" ]

2、从 Set 生成数组

const set = new Set(['foo', 'bar', 'baz', 'foo']);
Array.from(set);
// [ "foo", "bar", "baz" ]

3、从 Map 生成数组

const map = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(map);
// [[1, 2], [2, 4], [4, 8]]

const mapper = new Map([['1', 'a'], ['2', 'b']]);
Array.from(mapper.values());
// ['a', 'b'];

Array.from(mapper.keys());
// ['1', '2'];

4、从类数组对象（arguments）生成数组

function f() {
  return Array.from(arguments);
}

f(1, 2, 3);

// [ 1, 2, 3 ]

5、在 Array.from 中使用箭头函数

Array.from([1, 2, 3], x => x + x);
// [2, 4, 6]

Array.from({length: 5}, (v, i) => i);
// [0, 1, 2, 3, 4]

6、序列生成器(指定范围)

// Sequence generator function (commonly referred to as "range", e.g. Clojure, PHP etc)
const range = (start, stop, step) => Array.from({ length: (stop - start) / step + 1}, (_, i) => start + (i * step));

// Generate numbers range 0..4
range(0, 4, 1);
// [0, 1, 2, 3, 4]

// Generate numbers range 1..10 with step of 2
range(1, 10, 2);
// [1, 3, 5, 7, 9]

// Generate the alphabet using Array.from making use of it being ordered as a sequence
range('A'.charCodeAt(0), 'Z'.charCodeAt(0), 1).map(x => String.fromCharCode(x));
// ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]

7、数组 去重合并

function combine(){
    let arr = [].concat.apply([], arguments);  //没有去重复的新数组
    return Array.from(new Set(arr));
}

var m = [1, 2, 2], n = [2,3,3];
console.log(combine(m,n));                     // [1, 2, 3]

8、加工函数默认有两个参数

var obj = {0: 'a', 1: 'b', 2:'c', length: 3};
Array.from(obj, function(value, index){
  console.log(value, index, this, arguments.length);
  return value.repeat(3); //必须指定返回值，否则返回undefined
}, obj);

执行结果如下：

可以看到加工函数的this作用域被obj对象取代，也可以看到加工函数默认拥有两个形参，分别为迭代器当前元素的值和其索引。

注意，一旦使用加工函数，必须明确指定返回值，否则将隐式返回undefined，最终生成的数组也会变成一个只包含若干个undefined元素的空数组。

实际上，如果不需要指定this，加工函数完全可以是一个箭头函数。上述代码可以简化如下：

Array.from(obj, (value) => value.repeat(3));

还有一个重要的扩展场景

比如说生成一个从0到指定数字的新数组，Array.from就可以轻易的做到。【类似于keys方法】

Array.from({length: 10}, (v, i) => i);

执行结果如下：

目前支持的浏览器版本：

IE 浏览器不兼容 Array.from 显示对象不支持该属性或方法

if(!Array.from){undefined
        Array.from = function (el) {undefine
            return Array.apply(this, el);
        }
    }