ES6新增的两个工厂方法 Array.from()与Array.of()

结合犀牛书与MDN创作,  非常推荐读者去观看这两个

1.Array.of()

关于Array()构建数组的短板：在使用一个数值参数调用Array创建数组时，这个数值代表着创建数组的长度，而使用一个以上的数值参数创建时，这些数值参数就代表着创建数组中的元素。

// 如
let arr1 = Array(2);
console.log(arr1); // 长度为2的数组

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

 

这样就意味着Array()无法创建只包含一个数值元素的数组

而在ES6中，Array.of()就可以解决这个问题

可以传入数值参数(无论多少个), 来作为新数组的元素并返回新数组

Array.of();       // => []  返回没有参数的空数组
Array.of(10);     // => [10]  可以创建只包含一个数值元素的数组
Array.of(1,2,3);  // => [1,2,3]

2.Array.from()

Array.from() 定义了一种给类数组对象创建数真正的数组副本的机制

Array.from()接收两个参数

• 第一个参数: 可迭代对象 或 类数组对象

Array.from() 会返回包含该对象元素的新数组,

如果传入可迭代对象, Array.from(iterable)的作用就跟扩展运算发[...iterable]一样,

所以Array.from()也是创建数组副本的一种简单方式

• 第二个参数(可选): 一个函数

如果传入了第二个参数, 那么在构建新数组时,

源数组的每一个元素都会传入这个函数, 而这个函数的返回值将会替代原始值加入新数组

该函数仅接收两个参数(element、index）

• 返回值: 新数组

Array.from()的一些运用

1.从字符串构建数组

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.从NodeList构建数组

// 根据 DOM 元素的属性创建一个数组
const images = document.querySelectorAll("img");
const sources = Array.from(images, (image) => image.src);
const insecureSources = sources.filter((link) => link.startsWith("http://"));
// [http://.... , http://....];

5.从类数组对象构建数组

function f() {
  return Array.from(arguments);
}
f(1, 2, 3);
// [ 1, 2, 3 ]

本文章内容是由作者结合犀牛书与MDN以及个人理解自行创作,如有不足还请移步至MDN或犀牛书