4 个不常用的 JavaScript 运算符，你会几个？

JavaScript在不断的进化和升级，越来越多的新特性让我们的代码变得更加简洁。因此，今天这篇文章，我将跟大家分享 4 个不常用的 JavaScript 运算符。让我们一起研究它们。

1.可选的链接运算符

这个功能非常好用，它可以防止我的代码出错，甚至可以大大简化它。

例如，我们想打印一个人的名字，我这很容易！没有困难。

const showName = (data) => {console.log(data.user.name)}showName({user: {name: 'fatfish'}})

不幸的是，我太粗心了，没有按照showName的要求传合法的参数，结果出事了。

const showName = (data) => {console.log(data.user.name)}showName('fatfish')

你一定是一个有经验的软件工程师，所以很容易写出像下面这样的代码。

const showName = (data) => {console.log(data && data.user && data.user.name)}showName('fatfish')

有没有更优雅的方式？如果数据层级嵌套太深，就是一段臭代码。

const showName = (data) => {console.log(data && data.user && data.user.person ...)}showName('fatfish')别担心，Optional Chaining Operator 可以帮助我们。下面的代码不再抛出错误，这很棒。const showName = (data) => {console.log(data?.user?.name)}showName('fatfish')

什么是可选链接运算符？

来自 mdn的解释：可选的链接运算符 (?.) 访问对象的属性或调用函数。如果对象是 undefined 或 null，它返回 undefined 而不是抛出错误。

const adventurer = {name: 'Alice',cat: {name: 'Dinah'}}const dogName = adventurer?.dog?.nameconsole.log(dogName)// expected output: undefinedconsole.log(adventurer.someNonExistentMethod?.())// expected output: undefined

2.合并赋值 (??=)

来自mdn的解释：空值合并赋值 (x ??= y) 运算符仅在 x 为空值（null 或未定义）时才赋值。

const obj = {name: 'fatfish'}obj.name ??= 'medium'obj.age ??= 100console.log(obj.name, obj.age)

是的，最后只分配了 age 属性。

小伙伴们，你们觉得哪一行代码更接近??=?的功能呢？1还是2？

// 1.

x ?? (x = y)

// 2.

x = x ?? y

我想你猜对了，是1。

因为2在任何情况下都会赋值x，而1只有在x为真时才会赋值。

它能为我们做什么？

那么，我们可以用它做什么呢？是的，它可以做与默认参数完全相同的事情。

const showName = (name) => {name ??= 'fatfish'console.log(name)}showName('medium') // mediumshowName() // fatfish它几乎等同于以下代码。const showName = (name = 'fatfish') => {console.log(name)}showName('medium') // mediumshowName() // fatfish

好吧，我不得不承认编写默认参数让我更快乐。

3.逻辑或赋值(||=)

来自 mdn的解释：逻辑或赋值 (x ||= y) 运算符仅在 x 为时才赋值。

const obj = {name: '',age: 0}obj.name ||= 'fatfish'obj.age ||= 100console.log(obj.name, obj.age) // fatfish 100

小伙伴们可以看到，当x的值为值时，赋值成功。

它能为我们做什么？

来自mdn：如果“lyrics”元素为空，则显示默认值：

document.getElementById("lyrics").textContent ||= "No lyrics."

短路在这里特别有用，因为元素不会进行不必要的更新，也不会导致不必要的副作用，例如，额外的解析或渲染工作，或失去焦点等。

4.逻辑与赋值(&&=)

来自mdn：逻辑与赋值 (x &&= y) 运算符仅在 x 为真时才赋值。

与逻辑或赋值 (||=) 相反，只有 x 为真时才会正确赋值。

const obj = {name: 'fatfish',age: 100}obj.name &&= 'medium' // mediumobj.age &&= 1000 // 1000console.log(obj.name, obj.age) // medium 1000

码上未来大连校区介绍

码上未来服务于高端IT开发人才的培养，教学大纲紧跟企业实际需求，保证课程内容紧随IT互联网发展步伐，课程包含：H5前端开发、Java微服务开发、互联网全栈开发、Python+人工智能、前端与移动开发、C/C++、全链路UI/UE设计、云计算、智能物联网、Unity游戏开发等全栈开发学习内容、旨在通过立体化的人才培养、为企业输送能够创造价值和带来效益的IT职业精英。

码上未来始终秉承“立足精英时代，培养时代精英”的使命，以技术视角关注IT产业发展，以深度分享推进产业技术成长，致力于引领中国IT人才实践教学模式，努力打造高质量值得信赖的IT人才服务平台。

预约申请免费试学5天互联网全栈开发课程（含H5前端开发、Java微服务开发）！

直接拨打即可预约申请免费试学！

怕钱不够？

可分期付款学费！

怕没时间？

就业班、业余班两种班型任你选择！

怕学不会？

教学采用全程面授高品质、高体验培养模式，特别重视学员实践能力的培养，根据个人学习计划提供视频、图文、答疑、作业批改等服务，旨在让零基础学员轻松入门。

担心就业？

依托众多合作企业资源，提供就业和薪资服务，让学员毕业就能赢得高薪和名企。

码上未来，成就你更好的未来！