javascript ES6 - 解构

Posted 2021-05-04

const person = {
    first: 'Wes',
    last: 'Bos',
    country: 'Canada',
    city: 'Hamilton',
    twitter: '@wesbos',
};

// Destructure an object as values with the keyname 
const { first, last, twitter } = person;

const arden = {
    first: 'Arden',
    last: 'de Raaij',
    links: {
        social: {
            twitter: 'https://twitter.com/ardennl',
            instagram: 'https://instagram.com/ardennl',
        },
        web: {
            blog: 'https://arden.nl'
        }
    }
};

// Rename value names while destructuring
const { twitter: tweet, instagram: ig } = arden.links.social;

// Example of a settings object; a couple of default values
const settings = { width: 300, color: 'black' }  // height, fontSize
// Adding default values while destructering an object. In this case width and color
// will return what is defined in the settings object, height and fontsize values are
// defined while destructuring
const { width = 100, height = 100, color = 'blue', fontSize = 25} = settings;