// ES5
var parts = '2010-11-11'.split('-'),
year = parts[0],
month = parts[1],
day = parts[2];
// ES6
var [year, month, day] = '2010-10-11'.split('-');
console.log(year); // 2010
console.log(month); // 10
console.log(day); // 11
// Only take the month and day
var [, month, day] = '2010-10-11'.split('-');
console.log(month); // 10
console.log(day); // 11
// Only take the year and day
var [year, , day] = '2010-10-11'.split('-');
console.log(year); // 2010
console.log(day); // 11
// Set default values
// Assume that date is going to be optional and if it is not found, we would like to use `1` then
var [year, month, date=1] = '2010-10'.split('-');
console.log(year); // 2010
console.log(month); // 10
console.log(date); // 1
var [year, month, date=1] = '2010-10-11'.split('-');
console.log(year); // 2010
console.log(month); // 10
console.log(date); // 11
// With object
var person = { name: 'John Doe', age: 23, gender: 'male' };
var {name, age, gender} = person;
console.log(name); // John Doe
console.log(age); // 23
console.log(gender); // male
// Aliasing
var person = { name: 'John Doe', age: 23, gender: 'male' };
var {name:tag, age, gender:sex} = person;
console.log(tag); // John Doe
console.log(age); // 23
console.log(sex); // male
// Set default values on object
var person = { name: 'John Doe', age: 23};
var {name, age, gender = 'male'} = person;
console.log(name); // John Doe
console.log(age); // 23
console.log(gender); // male
// Alias and default value at the same time
var person = { name: 'John Doe', age: 23};
var {name, age, gender:sex = 'male'} = person;
console.log(name); // John Doe
console.log(age); // 23
console.log(sex); // male
// Example
// Returning object/multiple values from a function call
function getLocation() {
return {
latitude: 23.4125,
longitude: 45.128
};
}
var {latitude:lat, longitude:long} = getLocation();
console.log(lat); //23.4125
console.log(long); //45.128
// More
// === Arrays
var [a, b] = [1, 2];
console.log(a, b);
//=> 1 2
// Use from functions, only select from pattern
var foo = () = > {
return [1, 2, 3];
};
var [a, b] = foo();
console.log(a, b);
// => 1 2
// Omit certain values
var [a, , b] = [1, 2, 3];
console.log(a, b);
// => 1 3
// Combine with spread/rest operator (accumulates the rest of the values)
var [a, ...b] = [1, 2, 3];
console.log(a, b);
// => 1 [ 2, 3 ]
// Fail-safe.
var [, , , a, b] = [1, 2, 3];
console.log(a, b);
// => undefined undefined
// Swap variables easily without temp
var a = 1,
b = 2;
[b, a] = [a, b];
console.log(a, b);
// => 2 1
// Advance deep arrays
var [a, [b, [c, d]]] = [1, [2, [
[
[3, 4], 5
], 6
]]];
console.log("a:", a, "b:", b, "c:", c, "d:", d);
// => a: 1 b: 2 c: [ [ 3, 4 ], 5 ] d: 6
// === Objects
var {
user: x
} = {
user: 5
};
console.log(x);
// => 5
// Fail-safe
var {
user: x
} = {
user2: 5
};
console.log(x);
// => undefined
// More values
var {
prop: x,
prop2: y
} = {
prop: 5,
prop2: 10
};
console.log(x, y);
// => 5 10
// Short-hand syntax
var {
prop,
prop2
} = {
prop: 5,
prop2: 10
};
console.log(prop, prop2);
// => 5 10
// Equal to:
var {
prop: prop,
prop2: prop2
} = {
prop: 5,
prop2: 10
};
console.log(prop, prop2);
// => 5 10
// Oops: This doesn't work:
var a, b; {
a,
b
} = {
a: 1,
b: 2
};
// But this does work
var a, b;
({
a,
b
} = {
a: 1,
b: 2
});
console.log(a, b);
// => 1 2
// This due to the grammar in JS.
// Starting with { implies a block scope, not an object literal.
// () converts to an expression.
// From Harmony Wiki:
// Note that object literals cannot appear in
// statement positions, so a plain object
// destructuring assignment statement
// { x } = y must be parenthesized either
// as ({ x } = y) or ({ x }) = y.
// Combine objects and arrays
var {
prop: x,
prop2: [, y]
} = {
prop: 5,
prop2: [10, 100]
};
console.log(x, y);
// => 5 100
// Deep objects
var {
prop: x,
prop2: {
prop2: {
nested: [, , b]
}
}
} = {
prop: "Hello",
prop2: {
prop2: {
nested: ["a", "b", "c"]
}
}
};
console.log(x, b);
// => Hello c
// === Combining all to make fun happen
// All well and good, can we do more? Yes!
// Using as method parameters
var foo = function({
prop: x
}) {
console.log(x);
};
foo({
invalid: 1
});
foo({
prop: 1
});
// => undefined
// => 1
// Can also use with the advanced example
var foo = function({
prop: x,
prop2: {
prop2: {
nested: b
}
}
}) {
console.log(x, ...b);
};
foo({
prop: "Hello",
prop2: {
prop2: {
nested: ["a", "b", "c"]
}
}
});
// => Hello a b c
// Combine with other ES6 features.
var ajax = function({
url = "localhost",
port: p = 80
}, ...data) {
console.log("Url:", url, "Port:", p, "Rest:", data);
};
ajax({
url: "someHost"
}, "additional", "data", "hello");
// => Url: someHost Port: 80 Rest: [ 'additional', 'data', 'hello' ]
ajax({}, "additional", "data", "hello");
// => Url: localhost Port: 80 Rest: [ 'additional', 'data', 'hello' ]
// Ooops: Doesn't work (in traceur)
var ajax = ({
url = "localhost",
port: p = 80
}, ...data) = > {
console.log("Url:", url, "Port:", p, "Rest:", data);
};
ajax({}, "additional", "data", "hello");
// probably due to traceur compiler
But this does: var ajax = ({
url: url = "localhost",
port: p = 80
}, ...data) = > {
console.log("Url:", url, "Port:", p, "Rest:", data);
};
ajax({}, "additional", "data", "hello");
// Like _.pluck
var users = [{
user: "Name1"
}, {
user: "Name2"
}, {
user: "Name2"
}, {
user: "Name3"
}];
var names = users.map(({
user
}) = > user);
console.log(names);
// => [ 'Name1', 'Name2', 'Name2', 'Name3' ]
// Advanced usage with Array Comprehension and default values
var users = [{
user: "Name1"
}, {
user: "Name2",
age: 2
}, {
user: "Name2"
}, {
user: "Name3",
age: 4
}];
[
for ({
user,
age = "DEFAULT AGE"
}
of users) console.log(user, age)
];
// => Name1 DEFAULT AGE
// => Name2 2
// => Name2 DEFAULT AGE
// => Name3 4
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.