目录
1、…三个点的应用场景
1.1 展开运算符（数组/对象：定义时使用）
（1）数组：构造时使用
let arr1 = [1, 3, 5, {
age:7}]
console.log(...arr1) // 1 3 5 {age:7} （不是数组）
// 展开语法和 Object.assign() 行为一致, 执行的都是浅拷贝(只遍历一层)。
var arr2 = [...arr1]
arr1[3].age = 11;
console.log(arr2) // [1, 3, 5, {age:11}]
注意：
数组展开语法和 Object.assign() 行为一致, 执行的都是浅拷贝(只遍历一层)
（2）对象：只能在构建对象字面量时使用。
// 展开运算符对于拷贝的对象在第一层是深拷贝
let person = {
name: 'tom', age: 18, obj: {
number: 123 } }
let person2 = {
...person } // 拷贝对象（构建对象字面量）
person.name = 'jerry' // 修改第一层值
person.obj.number = 456 // 修改第二层值
console.log(person) // 控制台：person:{name: 'jerry', age: 18, obj: { number: 456 } }
console.log(person2) // 控制台：person2:{name: 'tom', age:18, obj: { number: 456 }}
注意：
对象展开语法对于拷贝的对象在第一层是深拷贝,嵌套的子层依旧是浅拷贝！
1.2 展开运算符（在函数中的用法）
function hello(a, b, c) {
console.info(a);
console.info(b);
console.info(c);
}
var args = [1, 2, 3];
hello(...args)
// 1
// 2
// 3
1.3 剩余运算符（函数的剩余参数）
function foo(x,y, ...args) {
console.log(args) // [3,4]
}
foo(1,2,3,4)
1.4 函数定义和调用时，区别
- 在
定义函数的时候使用运算符(...)，会将传过来的多余参数聚拢到一起。 - 在
调用函数的时候使用运算符(...)，会把原本聚拢在一起的数据展开传递给各个参数。
2、解构赋值（数组/对象）
2.1 数组
var names = ["abc", "cba", undefined, "nba", "mba"]
// 1.1. 基本使用
var [name1, name2] = names
console.log(name1, name2) // abc cba
// 1.2. 顺序问题: 严格的顺序
var [name1, , , name4] = names
console.log(name1, name4) // abc nba
// 1.3. 解构出数组---很少用
// var [name1, name2, ...newNames] = names
// console.log(name1, name2, newNames)
// 1.4. 解构的默认值
var [name1, name2, name3 = "default"] = names
console.log(name1, name2, name3) // abc cba default
2.2 对象
var obj = {
name: "why", age: 18, height: 1.88 }
// 2.1. 基本使用
var {
name, age, height } = obj
console.log(name, age, height) // why 18 1.88
// 2.2. 顺序问题: 对象的解构是没有顺序, 根据key解构
var {
height, name, age } = obj
console.log(name, age, height) // why 18 1.88
// 2.3. 对变量进行重命名
var {
height: wHeight, name: wName, age: wAge } = obj
console.log(wName, wAge, wHeight) // why 18 1.88
// 2.4. 默认值
var {
height: wHeight,
name: wName,
age: wAge,
address: wAddress = "中国"
} = obj
console.log(wName, wAge, wHeight, wAddress) // why 18 1.88 中国
3、函数的默认参数
function foo (arg1 = '默认值') {
console.log(arg1, '----------->arg1') // 打印null
// 判断undefined 和null
arg1 = (arg1 === undefined || arg1 === null) ? '默认值' : arg1
}
foo(null)
注意：如果参数是
null，默认参数不会打印，只会打印null！`
跟es6——>es5有关系，可以在babeljs.io网站在线转码查看下。
4、逻辑运算符
4.1 在if语句中使用
| 运算符 | 运算规则 | 案例 |
|---|---|---|
&& |
与：同时为真 | false && true—> false |
|| |
或：一个为真 | false && true—> true |
！ |
非：取反 | !false —> true |
4.2 || 和 && 单独使用（在代码里使用）
（1）逻辑或：const result = a || b
上述代码，关于a || b代码，js是如何处理的？
- 从左到右依次计算操作数（a是操作数，b也是操作数，简单理解：就是参与或运算的变量）
- 处理每一个操作数时，都将其转化为布尔值
- 如果结果是
true，就停止后续计算，返回这个操作数的初始值。 - 如果所有的操作数都被计算过（也就是：所有转换结果都是false），则返回最后一个操作数的
初始值。
（2）逻辑与：const result = a && b
- 跟上面一致…
- 一致…
- 如果结果是
false，就停止后续计算，返回这个操作数的初始值。 - 如果所有转换结果都是true，返回最后一个操作数的
初始值。
5、空值合并运算符(??)
5.1 || 和 ?? 的区别
const foo = ''
const res1 = foo || '默认值'
const res2 = foo ?? '默认值'
console.log(res1) // 默认值
console.log(res2) // ''(空字符串)
注意：
||是先转Boolean，之后根据Boolean判断；
??只判断null和undefined。
6、可选链（?.）
注意：可选链
?.是在进行null和undefined判断时更加清晰和简洁用。