js 符号 - 技术栈

1、??

```javascript

const result = left ?? right

// 只有当 left 为 undefined 或者 null 时，返回 right，其它状态返回 left

```

例子

```javascript

left = undefined, right = 1 // result = 1

left = null, right = 2 // result = 2

left = false, right = true // result = false

```

2、?.

javascript 复制代码

const result = user?.username
// 当 user 对象存在 username 返回 user.username ,其它状态返回 undefined

例子

javascript 复制代码

user = { username: 'admin' } // result = admin
user = {} // result = undefined

3、&&

javascript 复制代码

const result = left && right
// 只有当 left 为 true，且 right 也为 true 时，result 才为 true，其它状态返回false

left	right	result
false	false	false
false	true	false
true	false	false
true	true	true

例子

javascript 复制代码

left = false, right = false // result = false
left = true, right = false // result = false
left = false, right = true // result = false
left = true, right = true // result = true

4、||

javascript 复制代码

const result = left || right
// 只有当 left 为 false，且 right 也为 false 时，result 才为 false，其它状态返回 true

例子

javascript 复制代码

left = false, right = false // result = false
left = true, right = false // result = true
left = false, right = true // result = true
left = true, right = true // result = true

5、...

ES6 (ECMAScript 6) 扩展运算符

javascript 复制代码

const user = {
    username: 'admin',
    sex: 'male',
    age: 120
}
const list = [1,2,3]

拷贝

javascript 复制代码

const user2 = {...user} // user2 = { username: 'admin', sex: 'male', age: 120 }
const list2 = [...list] // list2 = [1,2,3]

扩展运算符的拷贝为深拷贝

简述深拷贝和浅拷贝，深拷贝即只复制对象属性和值，而浅拷贝复制引用。

区分方法，修改复制对象属性，被复制对象属性随着改变，即为浅拷贝，反之则为深拷贝

以上边为例子，当 user2 = user 为浅拷贝，user2 = { ...user } 为深拷贝。

扩展

javascript 复制代码

const user3 = { job: 'laborer', ...user } // user3 = { job: 'laborer', username: 'admin', sex: 'male', age: 120 }
const list3 = [4,5,6,...list] // list3 = [4,5,6,1,2,3]

合并

javascript 复制代码

const new_user = { job: 'laborer', age: 80 }
const user4 = { ...user, ...new_user } // user4 = { job: 'laborer', username: 'admin', sex: 'male', age: 80 }

const new_list = [3,4,5]
const list4 = [...list, ...new_list] // list4 = [1,2,3,3,4,5]

对象合并出现相同属性，后者覆盖前者
数组合并出现相同值，拼接成新数组

解析

javascript 复制代码

const { age, ...user5 } = user // user5 = { username: 'admin', sex: 'male' }
const [ first, ...list5 ] = list // list5 = [2,3]

6、&

二进制计算(运算规则与&&有相同之处)

javascript 复制代码

const result = 9 & 5
// 9 = 1001
// 5 = 0101
// result = 0001 = 1

| 位数 | 1 | 2 | 3 | 4 |
| 9 | 1 | 0 | 0 | 1 |
| 5 | 0 | 1 | 0 | 1 |

result	0	0	0	1

相同位数做逻辑运算，运算公式与 && 相似，当两者皆为1则返回1，其它皆为0，逐个做 & 操作后最终得出 result

7、|

二进制计算(运算规则与 || 有相同之处)

javascript 复制代码

const result = 9 | 5
// 9 = 1001
// 5 = 0101
// result = 1101 = 13

相同位数做逻辑运算，运算公式与 || 相似，当两者皆为0则返回0，其它皆为1，逐个做 | 操作后最终得出 result

8、^

二进制计算

javascript 复制代码

const result = 9 ^ 5
// 9 = 1001
// 5 = 0101
// result = 1100 = 12

| 位数 | 1 | 2 | 3 | 4 |
| 9 | 1 | 0 | 0 | 1 |
| 5 | 0 | 1 | 0 | 1 |

result	1	1	0	0

存在位数做异或操作两者不同则为1，相同则为0，逐个做 ^ 操作最终得出 result

9、~

二进制计算

javascript 复制代码

const result = ~ 9
// 9 = 1001
// result = 0110 = 6

位数	1	2	3	4
9	1	0	0	1
result	0	1	1	0

存在位数做取反操作，即1取反为0，0取反为1，逐个做 ~ 操作后最终得出result

10、`${} `

javascript 复制代码

const a = '1', b = '2', c = '3', d = '4'
const result = `a = ${a}-
b = ${b}*
c = ${c}+
d = ${d}#`

模板字符串用于简化拼接字符串，且支持换行。

javascript 复制代码

a = 1-
b = 2*
c = 3+
d = 4#

11、！

javascript 复制代码

const result = !boolean
// 当 boolean 为 true 时，result 为 false；当 boolean 为 false 时，result 为 true

例子

javascript 复制代码

boolean = true // result = false
boolean = false // result = true
boolean = 0 // result = true
boolean = 1 // result = false
boolean = '' // result = true
boolean = '0' // result = false
boolean = {} // result = false
boolean = [] // result = false
boolean = null // result = true
boolean = undefined // result = true

值	result
false，0，' '，null，undefined	true
true，1，'0'，{}，\[\]，...	false

12、\\

注释，不参与编译运行

javascript 复制代码

// 这是注释
const result = true // 这是注释
// 这是注释

13、/** */

多行注释，不参与编译运行

javascript 复制代码

/**
 * 这是方法注释
 * @param str
 * @returns
 */
 function func (str) {
    return str
 }