Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- ## Array destructuring
- ### Basic variable assignment
- ```js
- const foo = ["one", "two", "three"]
- const [one, two, three] = foo
- console.log(one) // "one"
- console.log(three) // "three"
- ```
- ### Assignment separate from declaraion
- ```js
- let a, b
- [a, b] = [1, 2]
- console.log(b) // 2
- ```
- ### Default values
- ```js
- let a, b
- [a=5, b=7] = [1]
- console.log(a) // 1
- console.log(b) // 7
- ```
- ### Swapping variables
- ```js
- let a = 1
- let b = 3
- [a, b] = [b, a]
- ```
- ### Parsing an array returned by a function
- ```js
- function f() {
- return [1, 2]
- }
- let a, b
- [a, b] = f()
- console.log(a) // 1
- console.log(b) // 2
- ```
- ### Ignoring some returned values
- ```js
- function f() {
- return [1, 2, 3]
- }
- const [a, , b] = f()
- console.log(a) // 1
- console.log(b) // 3
- ```
- ### Assigning the rest of an array to a variable
- ```js
- const [a, ...b] = [1, 2, 3]
- console.log(a) // 1
- console.log(b) // [2, 3]
- ```
- ## Object destructuring
- ### Basic assignment
- ```js
- const o = { p: 42, q: true }
- const { p, q } = o
- console.log(p) // 42
- console.log(q) // true
- ```
- ### Assignment without declaration
- ```js
- let a, b
- ({ a, b } = { a: 1, b: 2 })
- ```
- ### Assigning to new variable names
- ```js
- const o = { p: 42, q: true }
- const { p: foo, q: bar } = o
- console.log(foo) // 42
- console.log(bar) // true
- ```
- ### Default values
- ```js
- let { a=10, b=5 } = {a: 3}
- console.log(a) // 3
- console.log(b) // 5
- ```
- ### Setting a function paramenter's default value
- ```js
- function drawES6Chart({ size = 'big', cords = { x: 0, y: 0 }, radius = 25 } = {}) {
- console.log(size, cords, radius)
- }
- drawES6Chart({
- cords: { x: 18, y: 30 },
- radius: 30
- })
- ```
- ### Nested object and array destructuring
- ```js
- const metadata = {
- title: 'Scratchpad',
- translations: [{
- locale: 'de',
- localization_tags: [],
- last_edit: '2014-04-14T08:43:37',
- url: '/de/docs/Tools/Scratchpad',
- title: 'JavaScript-Umgebung'
- }],
- url: '/en-US/docs/Tools/Scratchpad'
- }
- const { title: englishTitle, translations: [{ title: localeTitle }] } = metadata
- console.log(englishTitle) // "Scratchpad"
- console.log(localeTitle) // "JavaScript-Umgebung"
- ```
- ### For of iteration and destructuring
- ```js
- const people = [{
- name: "Mike Smith",
- family: {
- mother: "Jane Smith",
- father: "Harry Smith",
- sister: "Samantha Smith"
- },
- age: 35
- }, {
- name: "Tom Jones",
- family: {
- mother: "Norah Jones",
- father: "Richard Jones",
- brother: "Howard Jones"
- },
- age: 25
- }]
- for (const { name: n, family: { father: f } } of people) {
- console.log(`Name: ${n}, Father: ${f}`)
- }
- // "Name: Mike Smith, Father: Harry Smith"
- // "Name: Tom Jones, Father: Richard Jones"
- ```
- ### Pulling fields from objects passed as function parameter
- ```js
- function userId({ id }) {
- return id
- }
- function whois({ displayName, fullName: { firstName: name } }) {
- console.log(`${displayName} is ${name}`)
- }
- const user = {
- id: 42,
- displayName: 'jdoe'
- fullName: {
- firstName: 'John',
- lastName: 'Doe'
- }
- }
- console.log(`userId: ${userId(user)}`) // "userId: 42"
- whois(user) // "jdoe is John"
- ```
- ### Computed object property names and destructuring
- ```js
- let key = 'z'
- let { [key]: foo } = { z: 'bar' }
- console.log(foo)
- ```
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement