javascript - 对 javascript 上的数组感到困惑

Question

我想根据另外两个数组制作下一个数组:

array1 = ['a', 'b']
array2 = [1,2,3]

我要创建下一个数组

newArray = [['a',1], ['a',2], ['a',3], ['b',1], ['b',2], ['b',3]]

这是我的代码:

    var test1 = ['a', 'b'];
    var test2 = [1,2,3], arr1 = [], arr2 = [];

    for(var i = 0; i < test1.length; i++){
       arr1 = [];
       arr1.push(test1[i]);
      for(var x = 0; x < test2.length; x++){
        if(arr1.length > 1)
        	arr1.pop();
        arr1.push(test2[x])
        arr2.push(arr1);
        
      }
    }

console.log("arr1:",JSON.stringify(arr1), "arr2:" ,JSON.stringify(arr2));

但它返回第二个数组的最后一个元素。

[['a',3], ['a',3], ['a',3], ['b',3], ['b',3], ['b',3]]

为什么会这样？

Answer 1

关于数组长度和类似内容的所有其他答案都是不正确的。到处都是 3(或最后一个值/长度是什么)的唯一原因是因为数组是通过引用和 函数，而不是 for-循环 创建词法作用域。这就是您听到“函数是 JavaScript 中的一等公民”的原因之一。这是一个经典的例子，在采访中也经常出现，用来绊倒那些不习惯 javascript 中作用域的真正行为的开发人员。有一些方法可以解决它，包括将循环的内部包装在功能范围内，并传入索引，但我想建议一种更“以 javascript 为中心”的方法，那就是用函数解决问题。

请参阅此示例(顺便说一句，这也是实现您的目标的明确方法。)

var test1 = ['a', 'b'];
var test2 = [1,2,3];
    
// this will iterate over array 1 and return
// [[ [a,1],[a,2],[a,3] ],[ [b,1],[b,2],[b,3] ]]
var merged = test1.map(function(item1){
    return test2.map(function(item2){
        return [item1, item2];
    });	
  });

//this is a slick way to 'flatten' the result set
var answer = [].concat.apply([],merged )
    
console.log(answer) //this is it.

函数 () 生成作用域 - 而不是“方括号”{}。最简单的解决方法通常是使用函数来解决创建词法范围的问题。例如，npm 上最受信任的库 lodash 就是基于此。我认为随着你的进步，你会越来越少地编写日常 js 的循环，并使用更多的功能。

js fiddle 的工作示例: https://jsfiddle.net/3z0hh12y/1/

您可以在此处阅读有关作用域和闭包的更多信息 https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20%26%20closures/ch1.md

还有一件事:当您想在 js 中使用循环时，通常需要 Array.map()，尤其是在重新映射值时。