js的巧妙利用

101 阅读2分钟

「这是我参与11月更文挑战的第17天,活动详情查看:2021最后一次更文挑战」。

!!运算符

!! 运算符可用于将表达式的结果快速转换为布尔值(truefalse):

const str = 'abc'; 
console.log(!!str) // true 
const str2 = ''; 
console.log(!!str2); // false

||和&&运算符

||&&运算符的巧妙利用,妙就妙在他们的短路操作

||运算符中的短路:

  1. a || b中,若a为true,则直接返回a,不会再计算下去

  2. c || d中,若c为false,则直接返回d

&&运算符中的短路:

  1. a && b中,若a为true,则直接返回b
  2. c && d中, 若c为false,则直接返回c

例子:

  console.log(1 || false) //1 
  console.log(false || 1) //1 
  
  console.log(1 && false) //false 
  console.log(false && 1) //false
  
  if(a > 1){
      console.log("a 大于 1")
  }
  //简写为
  a > 1 && console.log("a 大于 1")
  

??操作符

??(空值合并操作符)是一个逻辑操作符,当左侧或者右侧为null或者undefind时,会返回另外一侧的操作数。其与||不同,||运算符,当左侧为false时,会直接返回右侧操作符。

例子:

console.log(1 ?? null) //1
console.log(null ?? 1) //1

console.log(false ?? null) //false
console.log(false || null) //null

?.运算符

?.链判断运算符是直接在链式调用的时候判断,左侧的对象是否为null或undefined。如果是的,就不再往下运算,而是返回undefined。

例子:

var name = message && message.name || '默认值'

//可写成
var name = message?.name || '默认值'

...拓展运算符

来不及解释了,直接上代码吧

//用法1:拆解
let array = [1,2,3,4];
console.log(...array);//1 2 3 4 
let str = "hello";
console.log(...str);//h e l l o

//用法2
let array = [1,2,3,4,3];
let max2 = Math.max(...array); 

//用法3
let str1 = ['a', 'b']
let str2 = ['c']
let result = [...str1, ...str2]
console.log(result)//['a', 'b', 'c']

rest运算符

rest参数用于获取函数的多余参数。rest参数搭配的变量是一个数组,该变量将多余的参数放入数组中。rest参数的形式为:...变量名

function sum (...args) {
    let total = 0; 
    for(let i of args){
        total += i;
    }
    return total;
}
console.log(sum(1,2,3));//6

//结合解构赋值
var array = [1,2,3,4,5,6];
var [a,b,...c] = array;
console.log(a);//1
console.log(b);//2
console.log(c);//[3, 4, 5, 6]