如何编写一个JavaScript Array.from()Map函数？

Question

我正在使用vanilla JS和HTMLCSS在浏览器中构建一个俄罗斯方块游戏。我所遵循的教程将网格视为一个2D矩阵，并使用下面的代码片段将其初始化为充满零的开始。

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

我希望能得到一个解释 这个代码片断是如何实现这个目标的 我理解第二个参数是一个箭头函数，它用0填充一个数组，但我并不真正理解第一部分。这段代码本质上是否和for-loop做了同样的工作，如果是，是否可以替换掉？

如果这个问题不合适，请原谅，我找不到确切的重复问题，而且由于我的不理解，我也不知道具体怎么google这个问题。

Answer 1

Array.from 是一个静态方法，它允许你创建一个新的、浅层复制的 Array 从一个类似数组的OR可迭代对象中取出一个实例。

参见这里的文档

在你的例子中，第一个参数只是一个对象本身。什么是 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
  }
}

他们的方法只是更简明扼要，更干净。

Answer 2

我认为你的代码段缺少了一些部分。Array.from() 是一个可以从可迭代对象生成数组的函数，然后你可以通过数组进行映射。我想它应该是这样的

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

你可以在这里阅读更多关于Array.from()的内容。https:/developer.mozilla.orgen-USdocsWebJavaScriptReferenceGlobal_ObjectsArrayfrom。

和Array.map()。https:/developer.mozilla.orgen-USdocsWebJavaScriptReferenceGlobal_ObjectsTypedArraymap。

Answer 3

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

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

ArrayLike

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

• readonly length: number;
• readonly [n: number]: T;

可以输入两种不同的参数到 from 作为第一个参数。

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

mapfn

这是一个内置的map函数。你可以用它来改变你的第一个param的值。

const multiplyByTwo = (entry) => entry * 2

console.log('without: ', Array.from([1,2]))
console.log(Array.from('with multiply: ', [1,2], multiplyByTwo))
console.log(Array.from('with multiply anonymus: ', [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();