黑马程序员技术交流社区

标题: 【西安校区】令人兴奋的JavaScript新特性 [打印本页]

作者: 逆风TO 时间: 2020-1-6 14:01
标题: 【西安校区】令人兴奋的JavaScript新特性
目录
可选链操作符
双问号操作符 —— nullish coalescing operator
BigInt —— 大数值运算

我们都知道一个新的ECMAScript标准的发布需要经过五个阶段，分别是Stage 0-Stage 4阶段，每个阶段都需要TC39的审批和全体成员的一致同意才能提交至下一个阶段。本文中提到的特性是处于Stage 3 || Stage 4阶段。

所以说以下提到的新特性很快就可以为我们程序员造福了，下面先来了解一下有哪些新特性值得我们兴奋的。(*❦ω❦)
可选链操作符
可选链？啥玩意？……这个名词你可能没听过，但是！使用情形你一定历历在目。且往下看：
你一定碰到这种情形：当需要访问对象内部深层的属性值的时候，你是不是这么写的：

//定义一个对象
let obj={userInfo:{name:'hzq',tel:'1234567778',other:{name:'hzq2',title:'名字'}},title:'哈哈'}
//获取对象内部的other对象的name属性值值
let msg=obj && obj.useInfo && obj.userInfo.other && obj.userInfo.other.name

在访问obj.userInfo.other.name之前，你必须要确保obj和obj.userInfo和obj.userInfo.other的值都是非null且不是undefined。假设其一是null或者undefined的，那么直接访问obj.userInfo.other.name就可能产生错误，报错为Cannot read property 'name' of undefined，这时你就挠头了…
有了可选链式，你只要这么写就可以抛弃上面又长又冗余的代码了：

//定义一个对象
let obj={userInfo:{name:'hzq',tel:'1234567778',other:{name:'hzq2',title:'名字'}},title:'哈哈'}
//可选链获取对象内部的other对象的name属性值值
let msg=obj?.userInfo?.other?.name

看起来是不是简单明了。获取msg表达式会有短路计算，即如果obj或obj.userInfo或obj.userinfo.other其一是null或undefined的话，就不往后执行了，直接返回undefined，当访问链条上可能存在的属性却不存在时，?.操作符将会使表达式更短和更简单，将会返回undefined。
可选链的使用还远远不止获取属性这么简单，它还可以访问数组。
在movie对象中，actors数组可以是空的，甚至是缺失的，因此必须添加额外的条件来判空。

function getLeadingActor(movie) {
  if (movie.actors && movie.actors.length > 0) {
return movie.actors[0].name;
  }
}

if (movie.actors && movies.actors.length > 0) {...}条件主要判断movie包含actors属性，并且此属性至少有一个actor。
使用可选链之后，代码明显简洁得多：

function getLeadingActor(movie) {
  return movie.actors?.[0]?.name;
}

actors?. 确保actors属性存在, [0]?.确保数组中存在第一个actor。
再来！

const arr=[1,2,3]
//  之前的写法
if(arr.length){
      arr.map(res=>{
            //...
      })
}
// 可选链的写法
arr?.map(item=>{
   //...
})

注意：虽然可选链好用，但它还还是提案，浏览器还没有很好的支持，现在想在项目中使用是不可能的。不过大神还是禁不住技术的诱惑，对应的babel插件已经存在！
babel-plugin-proposal-optional-chaining 插件可以帮助我们将可选链式的代码转化，下面我们看看可选链式代码转义后是啥样的?

const babel = require('@babel/core');
const code = 'const obj = {}; const baz = obj?.foo?.foo1';
const output = babel.transformSync(code, {
  plugins: ["@babel/plugin-proposal-optional-chaining"],
});
console.log(output.code);

var _obj$foo;
const obj = {};
const baz = obj === null || obj === void 0 ? void 0 : (_obj$foo = obj.foo) === null || _obj$foo === void 0 ? void 0 : _obj$foo.foo1;
使用：项目中如何使用babel-plugin-proposal-optional-chaining插件来转化可选链代码？

第一步安装

npm install --save-dev @babel/plugin-proposal-optional-chaining
第二步在.babelrc.js文件夹里进行配置

plugins："@babel/plugin-proposal-optional-chaining"，
注：
编辑器是vscode的话，需要在vscode的setting中配置

"javascript.validate.enable": false
这样你就可以肆无忌惮地写可选链式代码了。

双问号操作符 —— nullish coalescing operator
在开发中，我们时常会遇到这样的情形：变量判断为空的时候，我们用三元运算符去给变量设置默认值，是这么写：

let c = a ? a : b // 写法1
let c= a || b // 写法2

这两种写法其实是有一个弊端的，它们都会过滤掉所有的假值，如：（0，' '，false）,这些值或许是正常情况下有效的输入值，平时实际生产环境可能不会遇到，为此忽略了这个问题。
为解决此问题，“nulllish”横空出世，用 ?? 表示，它可以在第一项仅为null或undefined时才设置默认值。

let c = a ?? b
//等价于
let c = a !== undefined  && a !== null ? a : b

再举个栗子：

let a = null
let b = a ?? 500 // 500
let c = 0 // 真实有效的输入值
let d =c ?? 9000  // 0
//如果是传统写法
let x = c ? d  // 9000

BigInt —— 大数值运算
问题：Js在Math上一直很头痛的一个原因就是，无法精确地表示大于2 ^ 53 这样的数值。

1234567890123456789 * 123
// 151851850485185200000 // 计算结果丢失精度
所幸BigInt就是来解决这个问题的，你依旧可以使用+，-，*，/,%这些运算符。创建BigInt类型的值也非常简单，只需要在数字后面加个n即可。如123 变为 123n.也可以使用全局方法BigInt(value)转化为BigInt类型，入参可为数字或数字字符串。

const aNumber = 111;
const aBigInt = BigInt(aNumber);
aBigInt === 111n // true
typeof aBigInt === 'bigint' // true
typeof 111 // "number"
typeof 111n // "bigint

这样，我们计算上面的式子就可以这么写了：

1234567890123456789n * 123n
// 151851850485185185047n

虽然BigInt可以类似数字一样用，但是BigInt与Number是不能混用的，BigInt类型不能与Number直接进行运算符。

2n < 3  // true
2n + 2  // Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversions
2n * 2  // Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversions
2n - 2  // Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversions
2n / 2  // Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversions

如有不对的地方还请各路大神指正！

作者: 逆风TO 时间: 2020-1-6 18:18

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2