Js：展开运算符/剩余运算符，解构赋值，函数默认参数，逻辑运算符（|| 和&&），空值合并运算符(??)

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 foo(x,y, ...args) {
	console.log(args) // [3,4]
}
foo(1,2,3,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是如何处理的？

1. 从左到右依次计算操作数（a是操作数，b也是操作数，简单理解：就是参与或运算的变量）
2. 处理每一个操作数时，都将其转化为布尔值
3. 如果结果是true，就停止后续计算，返回这个操作数的初始值。
4. 如果所有的操作数都被计算过（也就是：所有转换结果都是false），则返回最后一个操作数的初始值。

（2）逻辑与：const result = a && b

1. 跟上面一致…
2. 一致…
3. 如果结果是false，就停止后续计算，返回这个操作数的初始值。
4. 如果所有转换结果都是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判断时更加清晰和简洁用。