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

在看javacript代码的时候，发现在import或者定义变量的时候使用大括号将import的module/function/param或者定义的变量框起来：

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"   //默认导出

如果我们想要在另一个js文件中导入这些变量的时候，对于非default的export，必须用大括号的方式导入：

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

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

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

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

//同时导入默认的和命名的导出
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

————————————————
版权声明：本文为CSDN博主「guothree2003」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/guothree2003/article/details/109076273