JavaScript中有哪些魔法运算符 - 行业资讯 - 肥雀云

JavaScript中有哪些魔法运算符?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

JavaScript是一种什么语言

JavaScript是一种动态类型,弱类型的语言,基于对象和事件驱动并具有相对安全性并广泛用于客户端网页开发的脚本语言,同时也是一种广泛用于客户端网络开发的脚本语言。它主要用来给HTML网页添加动态功能,现在JavaScript也可被用于网络服务器,如node . js .

1。可选链运算符

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

const student =, { 　　,,分数:{ 　　数学:,,,,98 　　,,}, 　　};

我们想要获取最内层的数学属性的值时:

if (student ,,, student.score), { 　　console.log才能(student.score.math); 　　}

<强> 1.1获取深层次的属性

不过当我们使用可选链运算符后,判断就简单很多了,可选链运算符会在链路上遇到零或者未定义时,直接返回未定义,而不会抛出错误异常:

console.log(学生吗? .score ? .math);

<强> 1.2执行一个可选的方法

同时在执行一个可能存在的函数时,也可以用例到。如一个反应组件中,传入的方法是可选的:

//, getScore 是一个可选参数,要么是,定义,要么是一个函数　　const Student =, ({, getScore }: {, getScore ?:,(),=祝辞,void }),=祝辞,{ 　　useEffect才能((),=祝辞,{ 　　,,,//,当,getScore 存在时,正常执行,getScore()方法　　,,,getScore ?。(); 　　,,},[]); 　　　　return 才能;& lt; div> & lt;/div>; 　　};

或者我们执行一个dom元素的方法时,也可以使用。

文档。querySelector会返回两种类型,当dom元素真实存在时会返回该元素,否则返回零。写过打印稿的都知道,当我们要调用某个方法时,总是要先确定该dom元素是存在的:

const dom =, document.querySelector (& # 39; .score& # 39;); 　　if (dom), { 　　dom.getBoundingClientRect才能();,//,当,dom 元素存在时,才执行该方法　　}

使用可选链操作符时,就直接调用即可:

document.querySelector (& # 39; .score& # 39;) ? .getBoundingClientRect ();

<强> 1.3获取数组中的值

若数组存在,则获取某个下标的值,我们现在也不用再判断数组是否存在的了,可以直接使用:

arr ?。[1];,//,若,arr 存在时,则正常获取,arr[1]中的值

上面的3种情况也是可以组合使用的。若一个结构比较复杂时,各种类型都有,这里我们要执行数数学组下标2的方法:

const student =, { 　　,,分数:{ 　　数学:,,,,( 　　,,,,,,98 　　,,,,,,67 　　,,,,,(),=祝辞,{ 　　,,,,,,,return 99; 　　,,,,,}, 　　,,,, 　　,,}, 　　};

执行:

学生? .score ? .math ?。[2] ?。();//99

还有这种操作?

<强> 1.4无法进行赋值操作

可选链运算符只能执行获取操作,是无法进行赋值操作的。

例如给一个可能的数组或者dom元素赋值时,会直接抛出语法异常:
arr ?。[1],=, 2,,//x 　　document.querySelector (& # 39; .score& # 39;) ? .innerHTML =,,//, 98; x
当我们执行上面的语句时,会抛出如下的提示:

未捕获SyntaxError:无效的作业左边

即不能给左侧的可选链进行赋值操作。

2。双问号运算符

双问号运算符? ?,我理解是为了解决或运算符| |而设计出来的。

我们先来回顾下或运算符的操作,当左侧的数据为假值(数字0,布尔类型的假,空字符串,没有定义,null)时,则执行右侧的语句。
false | |, 123; 　　0,| |,123; 　　& # 39;& # 39;,| |,& # 39;123 & # 39;; 　　undefined | |, 123; 　　null | |, 123;
可是在有些情况下,虚假和0都是正常的值,但若使用或运算符时,会导致出错。

比如下面的这个例子,当分数为空时,则默认值为1。当输入正常值0时应当返回0(但实际上返回了1):
const getSCore =,(分数:编号),=祝辞,{ 　　return 才能;score | |, 1; 　　}; 　　　　getScore (0);,//, 1
JavaScript中有哪些魔法运算符