「这是我参与2022首次更文挑战的第3天，活动详情查看：2022首次更文挑战」。

前言

数组是一种基础的JavaScript对象，随着时间的推进，ES6标准也改进了数组，添加了很多新功能，例如，创建数组的方法和几个实用便捷的方法，那么就通过这篇文章让我们一起认识它们吧~

1.创建数组

ES6 之前，创建数组的方法主要有两种，一种是调用 Array 构造函数，另一种是数组字面量语法，ES6 新增了 Array.of()和 Array.from()两个方法。

Array.of()方法

Array.of()方法之所以出现是因为通过 Array 构造函数创建数组时的怪异行为。事实上，Array 构造函数表现得与传入得参数类型及数量有些不符。传入一个数值类型的值，该值就是数组的长度，传入多个值，这些值就是数组的元素。，你不可能总是注意传入数据的类型，所以存在一定的风险。

Array.of()方法总会创建一个包含所有参数的数组。

let items = Array.of(1, 2);
items = Array.of(2);
items = Array.of("2");

如果需要给一个函数传入 Array 的构造函数，则你可能更希望传入 Array.of()来确保行为一致。

function createArray(ArrayCreator, value) {
  return ArrayCreator(value);
}
let items = createArray(Array.of, "1");

Array.from()方法

JavaScript 不支持直接将非数组对象转换为真实数组。在 ES5 中有两种方法：

手动创建一个数组，再把伪数组中的每一个元素复制到新数组中。
调用原生的 slice()方法可以将非数组对象转换为数组：

function makeArray(arrayLike) {
  return Array.prototype.slice.call(arrayLike);
}

function doSomething() {
  var args = makeArray(arguments);
}

ES6 添加了一个语义清晰、语法简洁的新方法 Array.from()来将对象转换为数组。 Array.from()方法可以接受可迭代对象或类数组对象作为第一个参数，最终返回一个数组。

Array.from()方法也是通过 this 来确定返回数组的类型的。

映射转换

如果想要进一步转化数组，可以提供一个映射函数来作为 Array.from()的第二个参数，这个函数用来将类数组对象中的每一个值转换成其他形式。

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

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()转换可迭代对象

Array.from()方法可以处理类数组对象和可迭代对象，也就是说该方法能够将所有含有 Symbol.iterator 属性的对象转换为数组。

let numbers = {
  *[Symbol.iterator]() {
    yield 1;
    yield 2;
    yield 3;
  },
};

let number2 = Array.from(numbers, values => value + 1);
console.log(number2);

如果一个对象既是类数组又是可迭代的，那么 Array.from()方法会根据迭代器来决定转换哪个值。

2. 为所有数组添加的新方法

find()方法和 findIndex()方法可以协助开发者在数组中查找任意值；fill()方法和 copyWithin()方法的灵感来自于定型数组的使用过程。

find()方法和 findIndex()方法

这两个方法都接受两个参数：一个是回调函数；另一个是可选参数，用于指定回调函数中 this 的值。find()方法返回查找到的值，findIndex()方法返回查找到的值的索引。

let numbers = [25, 30, 35, 40, 45];
console.log(numbers.find(n => n > 33)); // 35
console.log(numbers.findIndex(n => n > 33)); // 2

如果要在数组中根据某个条件查找匹配的元素，那么 find()方法和 findIndex()方法可以很好地完成任务。

fill 方法

fill()方法可以用指定的值填充一至多个数组元素。当传入一个值时，fill()方法会用这个值重写数组中的所有值

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

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

let numbers = [1, 2, 3, 4];
numbers.fill(1, 2);
numbers.fill(0, 1, 3);

如果开始索引和结束索引为负值，那么这些值会与数组的 length 属性相加作为最终位置。

copyWithin()方法

copyWithin()方法从数组中复制元素的值。调用 copyWithin()方法时需要传入两个参数：一个是该方法开始填充值的索引位置，另一个是开始复制值得索引位置。

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

默认情况下，copyWithin()会一直复制直到数组末尾，你可以提供可选的第三个参数来限制被重写元素的数量。

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

最后

⚽本文介绍了ES6中的改进的数组功能，希望对你有所帮助~
🏀该篇博客对应的md文档已更新在Github仓库，欢迎Star~
🏉此外笔者还有其他专栏，欢迎阅读~
🏐玩转CSS之美
🎱Vue从放弃到入门
🎳深入浅出JavaScript

🍉ES6基础-改进的数组功能

前言