Unpacking array into separate variables in JavaScript - Stack Overflow

admin管理员组

文章数量:1130739

This is a simple problem, and I've done it before. I just can't remember how, or what exactly it was called.

In python I can do this:

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

how do I do that in JavaScript?

This is a simple problem, and I've done it before. I just can't remember how, or what exactly it was called.

In python I can do this:

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

how do I do that in JavaScript?

• javascript
• arrays

Share Improve this question Follow edited Aug 6, 2010 at 9:53 JoseK 31.4k1414 gold badges106106 silver badges133133 bronze badges asked Aug 6, 2010 at 9:20 Carson MyersCarson Myers 38.5k4141 gold badges129129 silver badges183183 bronze badges

Add a comment  | 

10 Answers 10

Sorted by: Reset to default 244

ES6 allows for destructuring assignment:

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

Or, to stick to your initial example:

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

You could also create a default value:

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

The question is rather old but I like to post this alternative (2016) solution: One can also use the spread operator "...".

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);

That's destructuring assignment. You can do it in some browsers with the following syntax:

[one, two] = arr;

It's supported in some of the latest browsers and transpilers like Babel and Traceur. This was a feature introduced with ECMAScript 4 which later became ECMAScript Harmony, which eventually became ES 2015.

You can use array's apply function if you want an array items to be passed as a function arguments.

Implementation of serious's idea.

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

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

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

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

Here is an example. You can try like this.

 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]

CoffeeScript has it: http://jashkenas.github.com/coffee-script/#pattern_matching

And, quoted from the top of the page:

"CoffeeScript is a little language that compiles into JavaScript. Think of it as JavaScript's less ostentatious kid brother — the same genes, roughly the same height, but a different sense of style. Apart from a handful of bonus goodies, statements in CoffeeScript correspond one-to-one with their equivalent in JavaScript, it's just another way of saying it."

My example works for your example but also if you dont know the array or the array length.

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

Know you have 2 variables. The first is 'one' who is "one"and the second is 'two' who is "two". Your problem is solved! But for the code snippet, i created extra elements to display the var's and i logged it.

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);

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);

本文标签： Unpacking array into separate variables in JavaScriptStack Overflow