ES6 解构赋值

一、对象解构赋值

 1、对象解构

let node = {
            name: 'paul',
            age: 56,
            };
const { name, age } = node;
console.log(name); // paul
console.log(age) // 56

2、对象解构赋值

let node = {
        name: 'paul',
        age: 23,
    },
    name = 'lucy',
    age = 35;
// 使用解构语法为多个变量赋值
// 一定要使用()来进行包裹
({ name, age } = node);
console.log(name); // paul
console.log(age); // 23

3、为非同名局部变量赋值

let node = {
    name: 'paul',
    age: 34,
};
// 相当于拿出node中name属性的值交给newType
let { name: newtype, age: newAge } = node;
console.log(newAge); // paul
console.log(newtype); // 34

二、数组解构赋值

1、数组解构

let fruits = ['banana', 'apple', 'peanut'];
const [first, second, third] = fruits;
console.log(first); // banana
console.log(second); // apple
console.log(third); // peanut
// 也可以跳过前面的直接来赋值后面的
const [, , forth] = fruits;
console.log(forth); // peanut

2、数组赋值

let colors = ['red', 'green', 'blue'],
    firstColor = 'black',
    secondColor = 'white';
[firstColor, secondColor] = colors;
console.log(firstColor); // red
console.log(secondColor); // green

3、利用数组解构赋值来交换变量和复制数组

// 交换变量
let a = 1,
    b = 2;
[b, a] = [a, b];
console.log(a); // 2
console.log(b); // 1
// 复制数组
let fruits = ['apple', 'banana', 'peanut'];
const [...args] = fruits;
console.log(args.length); // 3
console.log(args); // (3) ['apple', 'banana', 'peanut']

你可能感兴趣的:(ES6,javascript,es6,前端)