解构赋值(常用)

解构赋值语法是JavaScript的一种表达式，可以方便的从数组或者对象中快速提取值赋给定义的变量。

1. 获取数组中的值

• 从数组中获取值并赋值到变量中，变量的顺序与数组中对象顺序对应。

let arr = ['html' , 'css', 'js'];

const [a , b , c ] = arr;

console.log(a);  // html
console.log(b); // css
console.log(c); // js

• 忽略某些值

let arr = ['html' , 'css', 'js'];

const [a ,   , c ] = arr;

console.log(a);  // html
console.log(c); // js

• 赋初始值

// let arr = ['html' , 'css', 'js'];

const [a = 10 , b = 5 , c = 3] = [];  

console.log(a); // 10
console.log(b); // 5
console.log(c); // 3

• 交换值(之前写过，用中间变量或者运算符)

let a = 1;
let b = 2;

[a,b] = [b,a];

console.log(a) // 2
console.log(b) // 1

• 从对象中解构属性(非常好用且常用)

const person = {
    name:"cht" , 
    age:18,
    grand:'一年级'
}

const { name , age , grand } = person;

console.log(name); // cht 
...

// 赋默认值

const { name , age , grand , sex='男' } = person;
console.log(sex); // 男

举例

vuex中的 action 触发 commit

// 使用解构赋值
actions:{
    add ( {commit} ) {
        commit('abc');
    }
}
// 不使用

actions：{
    add (connext) {
        connext.commit('abc');
    }
}