如何编写 JavaScript Array.from() 映射函数？

Question

我正在使用普通 JS 和 HTML/CSS 在浏览器中构建俄罗斯方块游戏。我遵循的教程将网格视为二维矩阵，并使用以下代码片段将其初始化为全零开始：

   return Array.from(
       {length : ROWS}, () => Array(COLS).fill(0)
   );

我希望得到有关此代码片段如何实际实现此目的的解释。我理解第二个参数是一个箭头函数，它用 0 填充数组，但我不太理解第一部分。此代码本质上是否与 for 循环执行相同的工作，如果是，是否可以替换它？

抱歉，如果这个问题不合适，我找不到完全相同的副本，并且由于我缺乏理解，我不确定如何 google 这个问题。

Answer 1

我认为您的代码段缺少某些部分 Array.from() 是一个函数，可以从可迭代对象创建数组，然后可以通过数组进行映射。我想它应该看起来像这样

Array.from({length : ROWS}).map((item) => {item.fill(0)))

您可以在此处的 mozzilla 文档上阅读有关 Array.from() 的更多信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from

和 Array.map() 此处：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/map

Answer 2

Array.from 是一种静态方法，它允许您从类数组或可迭代对象创建一个新的浅拷贝 Array 实例。

See the documentation here

在你的例子中，第一个参数只是一个对象本身。 Array.from 实际上在做的是在第一个参数上寻找 .length 属性（如果它是一个数组，这很明显，但否则任何可迭代对象都有 .length 属性.

那个例子有点作弊，你不是传递一个实际有意义的可迭代对象，而是传递一个空对象，但将 .length 属性指定为行数。

由于该对象有一个 .length 属性（即使字面意思就是它包含的所有内容），Array.from 方法知道如何处理它。

如果您想要等效的东西，您可以使用 for 循环，就像您描述的那样：

var newArray = [[]]

for (var i = 0; i < ROWS; i++) {
  for (var j = 0; j < COLS; j++) {
    newArray[i][j] = 0
  }
}

他们的方法更 shorthand 更干净。

Answer 3

Array from 可以接收 3 个参数并为您创建一个新的数组实例。

arrayLike: ArrayLike<T>
mapfn: (v: T, k: number) => U
thisArg?: any

arrayLike

arrayLike 有一个可以接收两个不同参数的构造函数：

只读长度：数字；
只读[n: 数字]: T;

可以输入两个不同类型的 from 作为第一个参数：

console.log('{length: number}: ', Array.from({ length: 2 }));
console.log('[..., ...]: ', Array.from([1, 2]));

mapfn

这是一个内置的地图功能。您可以使用它来更改第一个参数的值：

const multiplyByTwo = (entry) => entry * 2

console.log('without: ', Array.from([1,2]))
console.log('with multiply: ', Array.from([1,2], multiplyByTwo))
console.log('with multiply anonymus: ', Array.from([1,2], (entry) => entry * 2))

thisArg

您可以将上下文绑定到作为第二个参数传递的函数。它类似于 fn.bind(context):

function override (entry) {
  return this.num;
}
class Foo {
  num = 3;

  constructor() {
    console.log('arrayWithThis: ', Array.from([1, 2], override, this))
    console.log('arrayWithoutThis: ', Array.from([1, 2], override))
  }
}

const foo = new Foo();

如何编写 JavaScript Array.from() 映射函数？

How to write a JavaScript Array.from() Map Function?

javascript

arrays

arrow-functions