JS中一些高效运算符

JavaScript 每年都会发一个新版本，里面也会新增一些操作更加便利、高效的运算符。下面是盘点下几个高效的魔法运算符。

链运算符（ ? ）

当使用某个结构比较深的属性，同时又无法确定所有的父级一定存在时，我们需要进行一连串的判断，例如一个数据结构：

const student = {
  score: {
    math: 98,
  }
};

if (student && student.score) {
  console.log(student.score.math);
}

// 
const getStudentDetil = async () => {
    const studentDetilRes = await GetStudentData({});
    setStudentData(studentDetilRes?.detail);
};

可选链运算符会在链路上遇到 null 或者 undefined 时，直接返回 undefined，而不会抛出错误异常

获取深层次的属性

console.log(student?.score?.math);

执行一个可选的方法

同时在执行一个可能存在的函数时，也可以用到

// getScore是一个可选参数，要么是undefined，要么是一个函数
const Student = ({ getScore }: { getScore?: () => void }) => {
  useEffect(() => {
    getScore?.(); // 当getScore存在时，正常执行getScore()方法
  }, []);

  return <div></div>;
};

或者我们执行一个 dom 元素的方法时，也可以使用。
document.querySelector会返回两种类型，当 dom 元素真实存在时会返回该元素，否则返回 null。当我们要调用某个方法时，总是要先确定该 dom 元素是存在的：

const dom = document.querySelector('.score');
if (dom) {
  dom.getBoundingClientRect(); // 当dom元素存在时，才执行该方法
}

// 使用可选链操作符 可以直接调动
document.querySelector('.score')?.getBoundingClientRect();

获取数组中的值

若数组存在，则获取某个下标的值，我们现在也不用再判断数组是否存在了，可以直接使用：arr?.[1]
若一个结构比较复杂时，各种类型都有，这里我们要执行数组 math 下标 2 的方法：

const student = {
  score: {
    math: [98, 67, () => {
        return 99;
      },
    ],
  },
};

// 执行👇
student?.score?.math?.[2]?.(); // 99

无法进行赋值操作

可选链运算符只能执行获取操作，是无法进行赋值操作的。
例如给一个可能是数组或者 dom 元素赋值时，会直接抛出语法异常：

arr?.[1] = 2; // x
document.querySelector('.score')?.innerHTML = 98; // x

当我们执行上面的语句时，会抛出如下的提示：

Uncaught SyntaxError: Invalid left-hand side in assignment
即不能给左侧的可选链进行赋值操作。

或运算（ || ）和与运算（ && ）的赋值操作

score = score || 1;
age = age && 18;

// 可以简写为：
score ||= 1; // 等同于score = score || 1
age &&= 18; // 等同于age = age && 18

双问号运算符（ ?? ）

双问号运算符??，我理解是为了解决或运算符||而设计出来的。
或运算符的操作|| -->当左侧的数据为假值(数字 0, 布尔类型的 false，空字符串，undefined, null)时，则执行右侧的语句
双问号运算符??–>只会在左侧为 undefined 或者 null 时，才会执行右侧的语句

false || 123;
0 || 123;
'' || '123';
undefined || 123;
null || 123;

// 可是在有些情况下，false 和 0 都是正常的值，但若使用或运算符时，会导致出错。

// 当score空时，则默认值为1。当输入正常值0时应当返回 0（但实际上返回了1）：
const getSCore = (score: number) =>{
    return score || 1;
};
getScore(0); // 1

// 双问号运算符??  双问号运算符只会在左侧为 undefined 或者 null 时，才会执行右侧的语句。
const getSCore = (score: number) =>{
    return score ?? 1;
};
getScore(0); // 0

同时，双问号运算符还可以与=结合成为一个赋值操作，当左侧为 null 或者 undefined 时，则将右侧语句的结果赋值给左侧的变量：score ??=1; // 1

空赋值运算符（??=）

与非空运算符相关，仅当值为null或 undefined时，此赋值运算符才会赋值。

let x = null
let y = 5
console.log(x ??= y) // => 5 
console.log(x = (x ?? y)) // => 5

//空赋值运算符 与 函数默认值 的区别：
function getScore1(options) {
    options.math ??= 1;
    options.assess ??= 'easy';
    return options;
}
function getScore2(math=1, assess='easy') {
    return {math, assess};
}
getScore1({math: null, assess: null}) // {speed: 1, diff: 'easy'}
getScore2(undefined, null) // {speed: 1, diff: null}

双星号运算符 ( ** )

双星号运算符**（求幂运算符）相当于 js 中 的 Math.pow() , 他执行的是一个幂运算

1 ** 2； // 1
2 ** 4； // 2 的 4 次幂  ==》  Math.pow(2,4);

其他的一些运算符

JavaScript 算数运算符

+加法
-减法
*乘法
/除法
% 取模（余数）
++递加
-- 递减

JavaScript 类型运算符

• typeof 返回变量的类型。
• instanceof 返回 true，如果对象是对象类型的实例。

逗号运算符

我们赋值操作时，经常用的 , 也是一个运算符 ---- 逗号运算符 😂
常用于变量声明中,可以在一条语句中执行多个运算

var num = 1, num2 = 2, num3 = 3;

我们有 babel 帮助转换的情况下，可以适当的在代码运用这些运算符，能够极大地简化我们的代码

本文借阅 微信公众号， “ 前端小茶馆 ”