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微服务开发）！
直接拨打即可预约申请免费试学！
怕钱不够？
可分期付款学费！
怕没时间？
就业班、业余班两种班型任你选择！
怕学不会？
教学采用全程面授高品质、高体验培养模式，特别重视学员实践能力的培养，根据个人学习计划提供视频、图文、答疑、作业批改等服务，旨在让零基础学员轻松入门。
担心就业？
依托众多合作企业资源，提供就业和薪资服务，让学员毕业就能赢得高薪和名企。
码上未来，成就你更好的未来！
