语法糖目录,点击跳转:
…[1, 2, 3]
解构
??
?.
?:
!+name
第一个:...
主要有三个出现情形
function(a, b, ...params){//代码块}
这个会将调用函数的前两个参数分别映射给a和b,后面的参数映射为一个数组给params。- 在函数调用的时候,如
way1: let len = getLen("hello world!", ...[1, 2, 3]);
way2: let len = getLen("hello world!", [1, 2, 3]);
这两个的区别在于way1将分解 第二个参数...[1, 2, 3]
为多个参数;而way2则把[1, 2, 3]
当作是一个数组参数,就是常理解的方法。
function getLen(string, params){
console.log(params);
}
getLen("hello", ...[1,2,3]);
getLen("hello", [1,2,3]);
//1
//[ 1, 2, 3 ]
- 对象解构特性,es7支持,数组同理
如:
let dicA = {
name: "gpw",
age: "18"
};
let dicB = {
...dicA,
local: "yz"
}
//这个dicB等同于
let dicB = {
name: "gpw",
age: "18",
local: "yz"
}
第二个 继前文所述的对象解构特性
...
可以将数组和字典解构后赋值或直接传递给新的对象,利用这种思路可以稍微拓展下,这有点类似于在jsx中结构模块的例子:
const {account, password} = req.body
[s1, s2, s3] = lines.split("/n");
//还可以与nodejs的jQuery统一
let {divv, spann} = $("#app").children();
第三个: ??
是空值合并操作符,按照第一个取值,如果第一个是空的,就取第二个。
注意:只对null
和undefined
敏感。如下:
const def = null ?? 111;
console.log(def); // 111
const def = 0 ?? 111;
console.log(def); // 0
第四个:?.
是可选链操作符,功能等同于.
但是不会在引用为null或undefined时报错。
这个语法糖在实际开发过程中很实用,但是在babel的7.13版本前都是不起作用的!
var obj = {
name: "ycc",
age: "25"
};
cosnole.log(obj.info.major);
// 在可编译版本后结果为
"use strict";
var obj = {
name: "ycc",
age: "25"
};
cosnole.log(obj.info.major);
这时候程序会因无法识别undefined的对象而抛出异常
7.13版本后使用语法糖识别为
var obj = {
name: "ycc",
age: "25"
};
cosnole.log(obj.info?.major);
// 在可编译版本后结果为
"use strict";
var _obj$info;
var obj = {
name: "ycc",
age: "25"
};
cosnole.log((_obj$info = obj.info) === null || _obj$info === void 0 ? void 0 : _obj$info.major);
可以在babel官网上测试下:Babel 中文网
第五个:?:
同上,在字典重定义时使用
let newAccount = {
...lastUser,
isSignedIn?: boolean
}
第六个:!+name
是判断name是否为空的,空为true。具体理解是这样的:
!是逻辑非运算,+前面没有值或者前面的值是空对象且后面有值的时候,它是一个一元运算符,作用是将它后面的操作数转换成数字。
所以后面的对象为“0”或者null、undefined甚至是“”的时候,前置一个+就被转转为0,再加上一个逻辑非则转0为true。
end!
参考来源在这里。
持续更新中。。。