JavaScript中将数组解包为单独变量

Question

这是一个简单的问题，我以前做过。我只是不记得怎么做了，或者确切地说它叫什么。

在Python中，我可以这样做：

arr = ['one', 'two']
one, two = arr

我该如何用JavaScript实现这个功能？

- Carson Myers

Answer 1

ES6 允许使用解构赋值:

let [x, y] = ['foo', 'bar'];
console.log(x); // 'foo'
console.log(y); // 'bar'

或者，遵循您最初的示例：

var arr = ['one', 'two'];
var [one, two] = arr;

你也可以创建一个默认值：

const [one = 'one', two = 'two', three = 'three'] = [1, 2];
console.log(one); // 1
console.log(two); // 2
console.log(three); // 'three'

- Mathias Bynens

---

今天起，解构赋值已经得到完整支持。http://kangax.github.io/compat-table/es6/#test-destructuring - grandrew

不是真的，现在可以使用扩展语法来完成： https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax - Liron Achdut

Answer 2

这个问题很老了，但我想发布这个替代方案（2016年）：可以使用“spread”运算符“...”。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator

let xAndY = [42, 1337];
let f = function(x, y) { return x + y; };
f(...xAndY);

- Chris K

Answer 3

那是解构赋值。你可以使用以下语法在某些浏览器中完成它：

[one, two] = arr;

它在一些最新的浏览器和转译器（例如Babel和Traceur）中得到支持。这是一个在ECMAScript 4中引入的特性，后来成为了ECMAScript Harmony，最终演变为ES 2015。

- Andy E

---

看起来这是ES6（2015）的一部分，而不是ES4？http://www.ecma-international.org/ecma-262/6.0/#sec-destructuring-assignment - jab

@jab：谢谢！有时候这些旧的答案被遗忘并变得过时，不过看起来Mathias已经在他的答案中添加了那个信息 :) - Andy E

Answer 4

如果您想将数组项作为函数参数传递，可以使用数组的apply函数。

- serious

---

我不确定 JavaScript 的 Array 是否有 .apply() 函数。我认为你的意思是 some_function.apply(this, my_array)。请参考这个答案。 - Kit

Answer 5

实现serious的想法。

http://jsfiddle.net/RichAyotte/6D2wP/

(function(a, b, c, d) {
    console.log(a, b, c, d);   
}.apply(this, ['a', 'b', 'c', 'd']));

- Richard Ayotte

---

这个让我开心了。通过apply解包列表，干得好先生！ - mike239x

Answer 6

解构赋值是JavaScript表达式的一种语法，它使得从数组中解包（拆分）出值，或者从对象中解包（拆分）出属性，然后将它们赋值到不同的变量上成为可能。

这里有一个例子。你可以尝试着这么写：

 let a, b, rest;
[a, b] = [10, 20];

console.log(a);
// expected output: 10

console.log(b);
// expected output: 20

[a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(rest);
// expected output: Array [30,40,50]

- Abdus Salam Azad

Answer 7

var one = arr[0];
var two = arr[1];

- rob waminal

---

你应该使用 var 来防止变量污染全局作用域。 - Mathias Bynens

我只是假设所有变量都已声明 :) - rob waminal

最好一次在每个作用域中声明所有var，而不是有两个单独的var声明。 - Mathias Bynens

Answer 8

CoffeeScript有它：http://jashkenas.github.com/coffee-script/#pattern_matching 并引用自页面顶部：

"CoffeeScript是一种小语言，可以编译成JavaScript。把它看作JavaScript的不那么张扬的兄弟——基因相同，大致相同的高度，但风格不同。除了一些额外的好处之外，CoffeeScript中的语句与其在JavaScript中的等效语句一一对应，这只是另一种说法。"

- Jakob

---

这并没有回答问题。我很欣赏CoffeeScript的一些好东西，但问题是关于Javascript的。 - Hovis Biddle

链接失效了 :(((( - Paul Draper

Answer 9

我的示例适用于您的示例，但也适用于您不知道数组或数组长度的情况。

arr = ['one', 'two'];
var length = arr.length;
for (var i = 0; i < length; i++)
{
   var val = arr[i];
   eval('var '+arr[i]+'= arr[i];');
}

假设你有两个变量。第一个是名为“one”的变量，其值为“one”，第二个是名为“two”的变量，其值为“two”。 你的问题已经解决了！ 但是对于这段代码片段，我创建了额外的元素来显示这些变量，并将它们记录在日志中。

arr = ['one', 'two'];
var length = arr.length;
for (var i = 0; i < length; i++)
{
   var val = arr[i];
   eval('var '+arr[i]+'= arr[i];');
}
var p = document.createElement("p");
p.innerHTML = one + " " + two;
document.body.appendChild(p);
console.log(one, two);

- Robbe Clevers

Answer 10

arr = ['one', 'two'];
var length = arr.length;
for (var i = 0; i < length; i++)
{
   var val = arr[i];
   eval('var '+arr[i]+'= arr[i];');
}
var p = document.createElement("p");
p.innerHTML = one + " " + two;
document.body.appendChild(p);
console.log(one, two);

- Наима Мухторова

---

感谢您提供这段代码片段，它可能会提供一些有限的、即时的帮助。一个适当的解释将极大地提高其长期价值，因为它可以展示为什么这是一个好的问题解决方案，并使其对未来读者有其他类似问题的人更有用。请[编辑]您的答案以添加一些解释，包括您所做的假设。 - jasie