javascript，声明变量和导入时，大括号的特殊用法

作为一个新手，今天看到一段奇怪的代码，定义变量时用大括号把变量名括起来了，还有import时也使用了大括号

import { getToken } from '@/utils/auth'

let { data } = request()

一脸懵，这是啥意思？

 

度娘一番，记录在此

1. 关于导入时的大括号（据说是ES6引入的特性）

我们知道，在javascript中，导出可以有多个，但是只有一个default， 例如

export const A = 42   //命名导出
export const B = 43   //命名导出
export const C = 44   //命名导出
export default Default = "lala"   //默认导出

这时，如果我们要在另一个文件中导入的话，对于非default的export， 我们必须用大括号的方式导入

import { A } from xxxx   //仅导入了A，而且名字必须是A

import { A, B, C } from xxxx //导入了A，B，C， 名字必须与export时的名字相同

 

对于default的导出，不用大括号

import person from xxxx   //person这个名字可以随便定义

import person, { A,B,C }  //同时导入默认的和命名的导出

2. 命名变量时，变量名字在大括号中

简单理解的话，就是同时给多个变量赋值，说起来太复杂，举个例子就明白了

function gimmeAnObject() {
    return {
        foo: "hey",
        bar: "sup"
    };
}

let data = {"foo": "abcd", "name": "unkonwn"}

console.log(gimmeAnObject()); // Object { foo="hey", bar="sup" }

var { foo, bar } = gimmeAnObject();  //foo和bar必须与右侧对象中的属性名相对应
console.log(foo); // hey
console.log(bar); // sup

var { foo } = data ; //foo必须与右侧对象中的属性名相对应

console.log(foo); // abcd

这种赋值方式也可以应用在函数的参数上，你传一个object对象给一个参数，这个object包含大量数据，但是你只对其中部分数据感兴趣，可以这样做

let myobj = {
    "name": "simon",
    "age": 14
}


function xxx({ age }){

    console.log(age)

}

xxx(myobj)

//输出为14