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