es6新增-运算符的扩展

目录

1. es6的扩展运算符:  ...

1.1 展开数组/字符串/对象 

1.2 复制数组/对象

 1.3 合并数组/对象

 1.4 将为数组转换为真数组

 1.5 函数的剩余参数

2. es6的扩展运算符:  链判断运算符 ?.

链判断运算符 ?. 的三种写法:

3. es6的扩展运算符:  null判断运算符 ??

4. es6的扩展运算符: 指数运算符 ** / **= / ~~

5. es6的扩展运算符: 逻辑赋值运算符 ||= / &&= / ??=

---

1. es6的扩展运算符:  ...

作用:

• 展开数组/字符串/对象
• 复制(拷贝)数组/对象(浅拷贝)
• 合并数组/对象
• 把伪数组转为真数组
• 函数的剩余参数

1.1 展开数组/字符串/对象 

//数组

const arr = [ '貂蝉','王昭君'.'杨玉华' ]

console.log(arr)

//字符串

console.log(..."hello")

字符串的本质是一个字符数组 : ['h','e','l','l','o']

//对象

const obj = { m1:"貂蝉",m2:{name:"西施",age:18}  }

console.log(...obj) //会报错 应为 console.log({...obj})

求数组的最大值和最小值

const arr = [ 17,6,25,38,13 ]

console.log( Math.max(...arr) )

console.log( Min.max(...arr) )

1.2 复制数组/对象

//数组

const arr1 = ["貂蝉","王昭君","杨玉环"]

const arr2 = [ ...arr1 ]

console.log(arr2)

arr2.push("西施")

console.log(arr1)

//arr1 和 arr2 相互独立,互不影响

//对象

const obj1 = { m1:"貂蝉", m2:{ name:"西施",age:18}  }

const obj2 = { ...obj1 }

console.log(obj2)

obj2.m1 = "李沁";

console.log(obj1)

//obj1 和 obj2 相互独立,互不影响

obj2.m2.age = 20

console.log(obj1) // ... 为浅拷贝,只能拷贝第一层对象

 1.3 合并数组/对象

//数组

const arr1 = ['杜兰特',"欧文"]

const arr2 = ["哈登","格里芬"]

const arr = [...arr1,...arr2]

console.log(arr)

 //对象

const obj1 = { name:"篮球",price:199 };

const obj2 = { brand:"斯伯丁",address:"北京" }

const obj = { ...obj1,...obj2 } // 有重复属性时,后面的覆盖前面的

console.log(obj)

 1.4 将为数组转换为真数组

function add(){

console.log(...arguments)

console.log([...arguments]) }

add(1,2,3,4,5)

 1.5 函数的剩余参数

function fn(...args){ console.log(args) }

fn(1,2,3,4)

2. es6的扩展运算符:  链判断运算符 ?.

const obj = { name:"KD",age:33 }

//把obj.name属性值转小写

console.log(obj.name.toLowerCase())  输出:kd

//把obj.nickname属性值转小写

console.log(obj.nickname.toLowerCase())  报错

//正确做法 : 读取对象内部的某个属性,往往需要判断一下,属性的上层对象是否存在

if(obj.nickname){ console.log(obj.nickname.toLowerCase())  }

//三元运算符 ?:  

const  nickname = obj.nickname ? obj.nickname.toLowerCase() : undefined

console.log(nickname)

//使用 ?. 简化上面的写法

console.log( obj.nickname?. toLowerCase()) //链判断运算符,直接在链式调用时判断

输出:undefined

//左侧的对象如果为null或者undefined,就不再往下运算,返回undefined就停止了

链判断运算符 ?. 的三种写法:

1.obj?.prop 对象属性是否存在

2.obj?[ expr ] 对象属性是否存在

3.obj.func?.(...args) 对象方法是否存在

注意事项:

短路机制:  ?. 链判断运算符相当于是一种短路机制,只要不满足条件,就不再往下执行

3. es6的扩展运算符:  null判断运算符 ??

读取对象属性的时候,如果某个属性的值是null或undefined,

有时候需要为他们指定默认值,常见的做法是通过 || 运算符指定默认值

function add(options){

let x = options.x || 12

let y = options.y || 30

return x+y }

上面的代码都是通过 || 运算符指定默认值,但是这样写是错误的,开发者的原意是,只要属性的值为null 或 undefined,默认值就会生效,但是属性的值如果为 空字符串 或 false 或 0 ,默认值也会生效.

console.log({ x:33,y:66 }) 输出:99

console.log({ }) 输出:42

console.log({ x:0,y:0 }) 输出:42

console.log({ x:"",y:"??" }) 输出:12??

为了避免这种情况,es6引入了一个新的null判断运算符 ??,他都行为类似于 ||,但是只有运算符左侧的值为null或undefined时,才会返回右侧的值.

function add(options){

let x = options.x?? 12

let y = options.y?? 30

return x+y   } 

console.log({ x:33,y:66 }) 输出:99

console.log({ }) 输出:42

console.log({ x:0,y:0 }) 输出:0

console.log({ x:"",y:"??" }) 输出:0

上面代码中,默认值只有在左侧属性值为null或undefined时,才会生效.

这个运算符的目的,1. 跟链判断运算符 ?. 配合使用,2. 为null或undefined的值设置默认值

function add(options){

let x = options?.x?? 12

let y = options?.y?? 30

return x+y   } 

console.log({ x:1,y:8 }) 输出:99

console.log({ }) 输出:42

console.log({ x:0,y:0 }) 输出:0

console.log({ x:"hello",y:"2020" }) 输出:hello2020

console.log(add()) 输出:42

注意事项:

优先级:  ! > && > ||  它们三者同时出现是不需要添加括号的 

?? 本质上时逻辑运算,它与其它两个逻辑运算符 && 和 || 有一个优先级的问题.

优先级不同,往往会导致逻辑运算的结果不同,现在的规则是,如果多个逻辑运算符一起使用,必须用括号表明优先级,否则会报错.

const x = null 

const y = 12

不加括号会报错

console.log(x || y ?? x)

console.log(x ?? y && x)

需要添加括号

console.log((x || y) ?? x) 输出:12

console.log((x ?? y) && x) 输出:null

4. es6的扩展运算符: 指数运算符 ** / **= / ~~

指数运算符: ** (中间不能有空格)

指数赋值运算符: **= (写在一起,不能有空格)

~: 按位取反

~~: 按位取反再取反,将小数变为整数

在js中可以将浮点数变为整数,比parsrInt快

1. 指数运算符

计算2的三次幂

es5

console.log(2 * 2 * 2)

console.log(Math.pow(2,3))

es6

console.log(2 ** 3)

2.指数赋值

3的四次幂的结果再赋值其本身 

let x = 3

es5

x = x * x * x * x 

x = Math.pow(3,4)

es6

x **=  4

x = x ** 4

3.两次 ~~ 取反再取整

console.log(~~3.14) 输出:3

console.log(~~-3.14) 输出:-3

console.log(~~0) 输出:0

5. es6的扩展运算符: 逻辑赋值运算符 ||= / &&= / ??=

逻辑赋值运算符,将逻辑运算符与赋值运算符结合

||= : 或赋值运算符

&&= : 且赋值运算符

??= : null赋值运算符

用途: 为变量或属性设置默认值

或赋值运算符

x ||= y 等同于 x || (x=y)

且赋值运算符

x &&= y 等同于 x && (x=y)

null赋值运算符

x ??= y 等同于 x ?? (x=y)

为变量设置默认值:

user.id = uesr.id || 1 等同于=> user.id ||= 1

function ajax (options){

options.method = options.method ?? "get"

options.dataType ??( options.method = "json" ) }

等同于:

function ajax (options){

options.method ??= "get"

options.dataType ??= "json" }