ES6的语法糖

语法糖目录，点击跳转：
…[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！
参考来源在这里。


持续更新中。。。