如何讓 map function 返回一個大於第一個的數組？

Question

從Array.prototype.map 文檔中，它提到應該可以從 map 回調中對調用 map 的數組進行變異，它采用三個參數，#1 值，#2 索引，#3原始數組，除此之外：

thisArgOptional 執行回調時用作 this 的值。 ... 詳細參數

callback 被三個 arguments 調用：元素的值，元素的索引，和被映射的數組 object。

如果提供了 thisArg 參數，它將用作回調的 this 值。 否則，值 undefined 將用作它的 this 值。 回調最終可觀察到的 this 值是根據確定 function 所見 this 的通常規則確定的。

map 不會改變調用它的數組（盡管回調，如果被調用，可能會這樣做）。

map 處理的元素范圍是在第一次調用回調之前設置的。 在調用 map 開始后附加到數組的元素將不會被回調訪問。

所以這似乎是說雖然“添加到原始數組”的值不會被 map 遍歷，但這意味着確實可以從 map 到原始數組 append。但是，我不確定如何這樣做，因為簡單地使用第三個數組參數並附加到它似乎什么都不做（如果我將它存儲到一個數組中，我不能只使用原始數組變量名，因為 map 返回一個全新的數組）：

 var myArr = [ 1, 2, 3, 4, 5 ].map(function(x, i, arr) { this.push(i); //references old array so does nothing arr.push(i); //seemingly it should adjust return x; }, myArr /* attempting to use "this" arg to see if it will work, although seemingly its not recognized */ ); console.log(myArr); //only returns original value

Answer 1

更新

要回答您的評論， .map()不是將值附加到數組的正確工具。 當您需要修改輸入數組的每個元素時，您應該使用它，例如將每個值加倍：

var input = [1,2,3,4,5];
var myArr = input.map(function (x) {
  return x * 2;
});

myArr.push(6,7); // Append your values in a separate statement.

console.log(myArr); // [2,4,6,8,10,6,7]

然后你 append 在 map 之前或之后的單獨步驟中的新值，這取決於你想要實現什么。

解釋

您的代碼未按您預期的方式運行。 console.log(myArr)看起來像是在打印原始數組，但實際上不是。 例如，如果您刪除所有其他代碼，您將剩下：

var myArr = [1,2,3,4,5].map(function (x) {
  return x;
});

console.log(myArr); // [1,2,3,4,5]

您可以看到我們只是返回x而不做任何更改。 x將依次解析為1 、 2等。 因此， .map()的 output 將是[1,2,3,4,5] ，它包含與輸入數組相同的值，但不是完全相同的數組，它是一個副本。

您可以通過將輸入數組移動到一個新變量中然后在末尾比較myArr === input來證明這一點：

var input = [1,2,3,4,5];
var myArr = input.map(function (x) {
  return x;
});

console.log(input); // [1,2,3,4,5]
console.log(myArr); // [1,2,3,4,5]
console.log(myArr === input); // false

為了更進一步，如果我們采用.map()的第三個參數並將每個元素替換為其值的兩倍，我們將看到原始input數組確實被修改，並且.map()的返回值， myArr保持不變。

var input = [1,2,3,4,5];
var myArr = input.map(function (x, i, arr) {
  arr[i] = x * 2;
  return x;
});

console.log(input); // [2,4,6,8,10]
console.log(myArr); // [1,2,3,4,5]
console.log(myArr === input); // false

獎勵積分

僅僅因為您可以使用.map()的第三個參數修改原始數組並不意味着您應該這樣做。 這樣做可能會引入意外行為，並使未來的開發人員更難推斷代碼在做什么。

函數返回一個新變量比改變輸入參數要好得多。