作为一个新手,今天看到一段奇怪的代码,定义变量时用大括号把变量名括起来了,还有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