JavaScript. 如何将数组值分配给多个变量?

106
var a,b,c;
var arr = [1,2,3];
[a,b,c] = arr;

这段代码在Firefox中表现完美,结果为a=1、b=2和c=3,但在Chrome中无法正常工作。这是Chrome的bug还是不合法的JavaScript代码?(我在JavaScript参考资料中未能找到它)

如何修改此代码以使其适用于Chrome,并对其产生最小的影响?(我真的不想一直写"a = arr [0]; b = arr [1]..."或者相同的内容使用"arr.shift()")

P.S. 这只是一个示例代码,在实际代码中,我从我的代码之外的某个地方获取arr数组。


1
在Chrome中发生了什么?你收到了什么错误信息? - Pekka
它给了我以下内容:ReferenceError arguments: Array[0] message: "—" stack: "—" type: "invalid_lhs_in_assignment" proto: Error - tsds
1
值得一提的是,http://www.jslint.com/ 表示这是可以的(在修复一些空格后;虽然我不知道它会评估为什么),但是 http://jshint.com/ 表示这是一个错误的赋值。 - JAAulde
有趣!这是一些奇怪的结构,我很惊讶它在大多数浏览器上能够工作。好奇是否这是有效的JS(显然有效但可能是由于引擎的实现)。 - Mrchief
2
关于您实际提出的关于在Chrome中可以使用哪些代码的问题,这里有一个之前的讨论:https://dev59.com/83VC5IYBdhLWcg3wtzkQ。 - jfriend00
你可以使用像Babel这样的JavaScript编译器。 - Rolf
2个回答

125

这是JavaScript 1.7的新功能,称为解构赋值

解构赋值使得从数组或对象中提取数据成为可能,其语法与数组和对象字面量的构造方式相似。

对象和数组字面量表达式提供了一种轻松创建临时数据包的方法。一旦你创建了这些数据包,你可以按照任何你想要的方式使用它们,甚至可以从函数中返回它们。

其中一个特别有用的操作是使用解构赋值在单个语句中读取整个结构,尽管还有许多其他有趣的用途,如下面展示的例子部分所示。

例如,你可以使用解构赋值来交换值:

var a = 1;
var b = 3;
[a, b] = [b, a];

这项功能类似于Perl和Python等语言中的功能。

不幸的是,根据版本表显示,Chrome没有实现JavaScript 1.7。但在以下浏览器中应该有:

  • FireFox 2.0+
  • IE 9
  • Opera 11.50。

在这个jsfiddle中尝试一下吧。

我在Chrome(失败)、IE 8(失败)和FireFox 5(根据维基表格成功)上进行了测试。


1
那将是很棒的;JavaScript 1.7+ 中有一些令人兴奋的功能...不幸的是,由于浏览器不兼容性,它们目前无法用于“真实世界”的应用程序。 - Justin Ethier
1
可能不会。使用a = arr[0]; b = arr[1];这种方式会比使用a = arr.shift();略微更有效率,因为shift会改变数组。但是两种方式都可以 - 我只是选择你喜欢的风格。 - Justin Ethier
1
Javascript版本表显示这在IE9上可以工作,但是对我来说,它会抛出一个错误:“无效的左侧赋值”。 - Ben Jacobs
@jacouh - 显然,在Edge的预览版中支持它,但在IE 11中不支持。请参见:https://developer.microsoft.com/en-us/microsoft-edge/platform/status/destructuringes6/ - Justin Ethier
1
同时声明和赋值:let [a, b] = [1, 2]; - ceving
显示剩余4条评论

12

正如@Justin所回答的那样,只有在Javascript 1.7中才有可能实现它。这里是一个尝试,在广泛使用的浏览器中模拟实现它:

function assign(arr, vars) {
    var x = {};
    var num = Math.min(arr.length, vars.length);
    for (var i = 0; i < num; ++i) {
        x[vars[i]] = arr[i];
    }
    return x;
}
var arr = [1, 2, 3];
var x = assign(arr, ['a', 'b', 'c']);
var z = x.a + x.b + x.c;  // z == 6

我不知道它有多有用。


这真的非常有帮助,谢谢! - Carlo Nyte

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接