当前位置：首页 > 安卓源码 > 技术博客 >

ES6新数组方法ES6不同数组方法的讨论

时间：2020-09-14 15:37 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

ES6不同的Array方法的演练，讨论了它提供的功能。此外，我们将回答：为什么要将这些方法添加到语言中并解决该问题？介绍 ES6发布后，我发现许多开发人员仍然不知道该 Array 对象添加的功能。因此，我决定为我们创建这篇文章以传播信息，许多人将从中受

ES6不同的Array方法的演练，讨论了它提供的功能。此外，我们将回答：“为什么要将这些方法添加到语言中并解决该问题？”

介绍

ES6发布后，我发现许多开发人员仍然不知道该Array对象添加的功能。因此，我决定为我们创建这篇文章以传播信息，许多人将从中受益。

背景

本文不是关于JavaScript数组的介绍，而是更多有关检查JavaScript Array对象中新添加的功能的内容。如果您是初学者，建议您进行Google搜索。而且，在我看来，这些附加功能有一个目标，那就是在使用数组时使我们的生活更轻松并提高生产力。最后，如果您对数组有很好的了解，则可以轻松阅读本文。

ECMAScript 6增强型阵列

如前所述，ECMAScript 6（ES6）已向全局Array对象添加了新方法。因此，我们将讨论以下方法：

Array.from()
Array.of()
copyWithin()
fill()
find()
findIndex()

要指出的另一件事情，我们不打算处理这些方法，如entries()，values()和keys()因为我写关于他们在这里。

因此，让我们开始吧。我希望你很兴奋。

Array.from（）方法

这是一种从可迭代对象static返回新Array实例的方法。但是，您也可以在第一个参数中传递“ 类似数组的对象 ”。如果您还没有听说过，将在本节中进行讨论。

句法

隐藏复制代码

//syntax 
//Array.from(arrayLike[, mapFn[, thisArg]]);

参量

arrayLike –是可迭代对象的引用。
mapFn –是可选的，并充当称为map-function的回调。
thisArg–也是可选的，并且是thismap函数内部的值。

例

隐藏复制代码

let result = 
Array.from('JavaScript', (val, indx) => `[${indx}]` + "=>" + val.toUpperCase());

console.log(result);

输出量

ES6新数组方法ES6不同数组方法的讨论

如您所见，上面的示例很简单（易于理解）。

地图功能

第二个参数（mapFn）（如果提供）是映射回调。调用时，它将每个值从源转换为返回的目标。这类似于Array.prototype.map()方法。现在，为什么不看另一个例子，您不觉得吗？而且，为什么不把它Array.from()放在里面呢Object。为了让我们来看看如何映射回调函数和3 次参数this的行为。

隐藏复制代码

const manager = {
  isBadManager: true,
  doBadStuff: function (items) {
    return Array.from(items, function (val, indx) {

      if (this.isBadManager) {
        console.log(`${indx + 1}. ${val[0].toUpperCase()}${val.substr(1)}`);
      }
    }, this);
  }
}

/**
 * Output:
 *  1. That's my idea
 *  2. Micromanage
 */
manager.doBadStuff(['that\'s my idea','micromanage']);

同样，这是一个简单易懂的示例。现在，让我们提高一个档次。并且，让我们更多地关注的第一个参数，Array.map()它是类似数组的对象（arrayLike）。

什么是类似数组的对象？

通常，您会在JavaScript中遇到一些看起来像数组的对象，通常称为“ 类似数组的对象 ”。困惑？不用了它Object的长度属性为非负整数，并且具有一些索引属性。

让我们看下面的例子：

隐藏复制代码

let arrLike1 = {
  length: 3,
  0: "Jin",
  1: "Vincent",
  2: "Necesario"
};

而已？是! 现在，让我们看一下如何使用将arrLike1变量转换为实数。ArrayArray.from()

隐藏复制代码

let resultArray2 = Array.from(arrLike1);

console.log(resultArray2); 
//output: ["Jin", "Vincent", "Necesario"]

节点列表

A NodeList是类数组对象的另一个示例。甚至我也挣扎着NodeList。我以为是数组，但不是。NodeList和Arrays 完全不同的东西。

好，那是NodeList什么？甲NodeList目的是集合DOM这是从所提取的节点HTML使用浏览器时文件API诸如querySelector()和/或querySelectorAll()。

现在，我们有一个想法，什么NodeList是，让我们尝试将转换NodeList到Array与使用Array.from()。

隐藏复制代码

<!-- this is the html file -->
<body>
    <div>
        <p>Hello World 1</p>
        <p>Hello World 2</p>
        <p>Hello World 3</p>
    </div>
</body>

隐藏收缩

复制代码

/**
 * Start of NodeList
 * In this code sample we will see what a NodeList is. 
 * Here are some facts about NodeList. 
 * 
 * 1. NodeList aren't arrays. 
 * 2. NodeList does have a length property
 * 3. NodeList does have indexed property
 * 4. Therefore, we can conclude that a NodeList does look like
 *    an Array-like object.
 * 5. We can convert NodeList into an array with the use of Array.from()
 */
window.addEventListener("DOMContentLoaded", function (event) { 

  let elements = document.querySelectorAll("div p");

  console.log(elements); //output: NodeList(3) [p, p, p]

  //this proves that NodeList does have a length property
  console.log(elements.length) //output: 3

  console.log(typeof (elements)); //output: object
  
  //this proves that the return of querySelectorAll method is a NodeList
  console.log(elements instanceof NodeList); //output: true

  //this proves that NodeList aren't arrays
  console.log(elements instanceof Array); //output: false

  let arrayParagraphs = Array.from(elements);

  console.log(arrayParagraphs); //output: Array(3)

});
 /**
  * End of NodeList
  */

输出量

ES6新数组方法ES6不同数组方法的讨论

既然我们熟悉了类似数组的对象，并且已经了解了如何将其转换为真实的数组。我们需要了解的下一个概念是如何避免空插槽。

避免空插槽

空插槽？这些是什么？基本上，当您创建一定长度的Array而不指定每个索引的值时，您将拥有一个空索引，也称为一个空slot。

让我们看下面的例子：

隐藏复制代码

const arrWithEmptySlots = [];
arrWithEmptySlots.length = 5;
arrWithEmptySlots[0] = "Jin";

//output ["Jin", empty × 4]
console.log(arrWithEmptySlots);

输出：

ES6新数组方法ES6不同数组方法的讨论

如何检查空插槽？

我们可以使用in运算符来检查数组是否具有键。此外，它返回一个boolean值，false为空时隙，但true用于与值槽，包括undefined值。

让我们看下面的例子：

隐藏复制代码

const arrWithEmptySlots = [];
arrWithEmptySlots.length = 3;
arrWithEmptySlots[0] = undefined;
arrWithEmptySlots[1] = "Jin";

console.log(0 in arrWithEmptySlots);//true
console.log(1 in arrWithEmptySlots);//true
console.log(2 in arrWithEmptySlots);//false
console.log(3 in arrWithEmptySlots);//false

/**
 * output:
 * 0
 * 1
 */
for (let slot in arrWithEmptySlots) {
  console.log(slot);
}

这个空插槽与Array.from()方法有什么关系？如果您想生成一个Array初始化为一定长度而没有空插槽的初始化方法，则Array.from()可以解决该问题。

让我们看下面的例子：

隐藏复制代码

const arrayWithEmptySlots_2 = [];
arrayWithEmptySlots_2.length = 5;

const results = Array.from(arrayWithEmptySlots_2);

//output: [undefined, undefined, undefined, undefined, undefined]
console.log(results);

在我们进入下一部分之前。然后我们可以得出结论，Array.from()不仅Array从可迭代对象创建新实例。它还接受一个“ 类似数组的对象 ”，该对象将被转换为实数，Array并帮助我们（JavaScript程序员）避免出现空槽。

Array.of（）方法

通常，每个人都知道Array构造函数是用来创建Array对象的。此外，Array.of()方法是Array构造方法的替代方法，本节将介绍原因。

句法

隐藏复制代码

//syntax
//Array.of([]);

参量

[] –用于创建数组的元素

让我们看下面的一些例子：

创建一个新的Array构造函数并传递多个参数。

隐藏复制代码

let cars = new Array("Toyota", "Mitsubishi", "Nissan", "Honda");

//output: 4
console.log(cars.length); 
//output: Toyota Mitsubishi Nissan Honda
console.log(...cars); 

let customers = new Array({ name: "Jin" }, { name: "Vincent" }, { name: "Necesario" });

//output: 3
console.log(customers.length); 
//output: {name: "Jin"} {name: "Vincent"} {name: "Necesario"}
console.log(...customers); 

let luckyNumbers = new Array(23, 29, 32);

//output: 3
console.log(luckyNumbers.length);
//output: 23 29 32
console.log(...luckyNumbers);

到目前为止，一切都很好。让我们转到下一个示例。

创建一个新的Array构造函数并传递一个参数。并且，让我们看到故障。

隐藏复制代码

let car = new Array("Toyota");
//still works.
console.log(car); 

let customer = new Array({name: "Jin"})
 //still works.
console.log(customer);

let luckyNumber = new Array(23);
//glitch
//output: 23
//23 in length????
console.log(luckyNumber.length); 

//another glitch
//output:  [empty × 23]
console.log(luckyNumber);

小故障？

你发现差异了吗？让我们以luckyNumber变量为例，与变量car和比较，结果不同customer。请记住，当您传递一个带有数字值的参数时。它正在创建一个空数组，其length属性等于该数字，并根据length属性产生空插槽。这是小故障吗？也许是或否。为了避免出现此问题，我们可以使用该Array.of()方法。

让我们看下面的例子：

隐藏复制代码

let superLuckyNumber = Array.of(23);
console.log(superLuckyNumber); //output: [23]

因此，Array.of()引入了解决该问题的方法。在评论部分让我知道您的想法。提前致谢。

copyWithin（）方法

该copyWithin()方法用于将数组的值序列复制到数组中的其他位置。

句法

隐藏复制代码

//syntax
//[].copyWithin(target, start, end);

参量

target –将元素复制到的索引
start –可选，这是从其开始复制的索引位置
end –可选，这是实际结束复制元素的索引

如果起始索引为负，则将其视为数组长度加上起始索引（[].length + start）。与结束索引（[].length + end）相同。

让我们看下面的例子：

隐藏复制代码

let presidents1 = ["Donald Trump", "Barack Obama", "George Bush", "Bill Clinton"];
let presidents2 =  ["George H. W. Bush", "Ronald Reagan", "Jimmy Carter", "General Ford"];

//let's copy to index 0 from index 1
//let's replace Donald Trump with Barack Obama
//output: ["Barack Obama", "George Bush", "Bill Clinton", "Bill Clinton"]
console.log(presidents1.copyWithin(0, 1));

//let's copy to index 1 from index 2
//, let's replace Ronald Reagan with Jimmy Carter up to 3rd index. 
//Up to 2nd index only excluding 3rd index.
//output: ["George H. W. Bush", "Jimmy Carter", "Jimmy Carter", "General Ford"]
console.log(presidents2.copyWithin(1, 2, 3));

简单明了（易于遵循）不是吗？让我们进入下一部分。

fill（）方法

该fill方法实际上使用给定填充（全部或部分）从start索引到end索引的Array的所有元素value。此外，startand end索引是可选的；因此，如果未提供它们，则整个Array字段将由您传递的值填充。

句法

隐藏复制代码

//syntax
//[].fill(value, start, end);

参量

value –填充数组的值
start –可选，是开始索引
end –可选，是结束索引

如果您已经看到Array构造函数的问题。同样，我们可以使用此方法为数组的所有空插槽设置值。只要目标是初始化具有定义的长度且没有空插槽的数组，就可以执行此操作。

让我们看下面的例子：

隐藏复制代码

let arryLenOf5 = new Array(5).fill(undefined);

//output: (5)[undefined, undefined, undefined, undefined, undefined]
console.log(arryLenOf5);

let arryLenOf3 = new Array(3).fill(0);

//output: (3) [0, 0, 0]
console.log(arryLenOf3);

让我们再次看一些例子：

隐藏复制代码

//fills the entire array
console.log([29, 23, 5, 26, 16, 21].fill(29)); 
//output: [29, 29, 29, 29, 29, 29]

//fills the entire array starting at index 1
console.log([29, 23, 5, 26, 16, 21].fill(30, 1)); 
//output: [29, 30, 30, 30, 30, 30]

//fills the entire array starting at index 1 and ends at 5th position.
console.log([29, 23, 5, 26, 16, 21].fill(31, 2, 5)); 
//output: [29, 23, 31, 31, 31, 21]

如果起始索引为负，则将其视为数组长度加上起始索引（[].length + start）。与结束索引（[].length + end）相同。

隐藏复制代码

//fills the entire array starting at index ([].length -2) = 4th index.
console.log([29, 23, 5, 26, 16, 21].fill(31, -2)); 
//output: [29, 23, 5, 26, 31, 31]

//fills the entire array starting at [1] index ends to ([].length -2) = 4th position.
console.log([29, 23, 5, 26, 16, 21].fill(31, 1, -2)); 
//output: [29, 31, 31, 31, 16, 21]

简单明了（易于遵循）不是吗？让我们进入下一部分。

find（）方法

在深入研究该find()方法之前，我们将先退一步。并回答：“它真正解决了什么？”

句法

隐藏复制代码

//syntax
//[].find(callback(element,index,array), thisArg);

参量

callback –对数组中的每个值执行的回调函数
thisArg–是可选的，Object用作this回调内部

indexOf方法

通常，在中搜索值时首先想到Array的是indexOf() 方法的使用。

让我们看下面的例子：

隐藏复制代码

let nums = [9, 8, 7, 6, 5, 4, 3, 2, 1];

console.log(nums.indexOf(9)); //output: 0;
console.log((nums.indexOf(7) !== -1)); //output: true
console.log((nums.indexOf("9") == 0)); //output: false
console.log((nums.indexOf("Jin Vincent Necesario") !== -1)); //output: false

但是，有时程序员会忘记此方法需要严格的比较。我认为，这就是他们（程序员）使用该some()方法的原因。

some（）方法

此方法通过为每个元素调用一个函数回调来起作用，直到一个返回a true 或truthyvalue，最后停止。

好处是您可以控制值的比较，与indexOf() 方法不同。

让我们看下面的例子：

隐藏复制代码

let nums = [9, 8, 7, 6, 5, 4, 3, 2, 1];
console.log(nums.some((num) => num == "9")); //output: true
console.log(nums.some((num) => num === "9")); //output: false

现在，关于其缺点some()的方法是，你只能得到boolean价值true或者false，如果配合适当的值被发现，但不是实际的值相匹配的内容。

什么find（）方法可以解决？

该find()方法解决了该问题。它的工作原理与some()方法相同，不同之处在于一旦回调返回其值，Array 则返回实际值。因此，find()method返回一个Array元素。仅当满足所提供的条件时，该表达式才会传递给回调函数。否则，返回undefined。

让我们看下面的例子：

隐藏复制代码

let nums = [9, 8, 7, 6, 5, 4, 3, 2, 1];
console.log(nums.find((num) => num == "9")); //output: 9
console.log(nums.find((num) => num === "9"));//output: undefined

为什么没有另一个带有完整参数的示例？

隐藏复制代码

let num = 5;
let nums = [9, 8, 7, 6, 5, 4, 3, 2, 1];
let result = nums.find(function (value, index, array) {

  //just shows the values to the console window.
  console.log(`The num[${index}] is equal to ${value} ${this}`);

  return value === parseInt(this);
}, num);

console.log(result); //output: 5

findIndex（）方法

最后，解决的最后方法。这几乎类似于该find()方法。但是，它返回数组元素的索引，而不是元素本身。

句法

隐藏复制代码

//syntax
//[].findIndex(callback(element,index,array), thisArg);

参量

callback–对数组中的每个值执行直到函数返回的回调函数true。否则，undefined表示未找到该元素。
thisArg –是可选的

回到该indexOf()方法，我们已经看到无法控制其匹配逻辑。这样，findIndex()节省了一天。

让我们看下面的例子：

隐藏复制代码

let num = 5;
let nums = [9, 8, 7, 6, 5, 4, 3, 2, 1];
let result = nums.findIndex(function (value, index, array) {

  //just shows the values to the console window.
  console.log(`The num[${index}] is equal to ${value} ${this}`);

  return value === parseInt(this);
}, num);

console.log(result); //output: 4

似乎是一个简单的例子。而且，因为我们对find()方法有很好的了解，并且显示了它们的相似性。让我们举另一个例子，其中搜索看起来像是自定义搜索。

隐藏复制代码

const houses = [
  { length: 22,  width: 288,  measurement: 'ft' },
  { length: 182, width: 532,  measurement: 'ft' },
  { length: 12,  width: 152,  measurement: 'ft' },
  { length: 20,  width: 30,   measurement: 'ft' },
  { length: 12,  width: 152,  measurement: 'ft' }];

let indexResult = houses.findIndex((house) => (house.length * house.width) === 600);

console.log(indexResult); //output: 3