告别无聊的undefined判断, 让老vue-cli3支持??"可选链"等"ES2020"特性
2020/4/29 11:02:49
本文主要是介绍告别无聊的undefined判断, 让老vue-cli3支持??"可选链"等"ES2020"特性,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
本文能学到什么?
- 让老项目(基于vue-cli)支持ES新语法(处于试验阶段), 比如"可选链".
- 了解其他目前在实验阶段的ES新语法.
可选链
近期看到多个群中都在聊"可选链", 所以就把单位的老项目也开启了"可选链"功能, 使用了1个月后的感受就是: 再也不用写那么长的"undefined"判断了, 可选链"真香".
const obj = { foo: { bar: { baz: 42, }, }, }; const a = obj?.a; // undefined, 如果没有"?"可就报错喽 // 等价于 // const a = (null === obj || undefined === obj) ? undefined : obj.a; const baz = obj?.foo?.bar?.baz; // 42 const baz = obj?.['foo']?.bar?.baz // 42 复制代码
注意:
- 近期发布的vue-cli3已经默认支持"可选链", 大家可以先试下是否支持再安装.
- 使用ts的小伙伴, 如果使用的是3.7以后的版本, 那么默认也支持"可选链".
安装"ES新特性", 需要vue-cli3
第一步
yarn add -D @babel/plugin-proposal-optional-chaining 复制代码
第二步
项目根目录下找到"babel.config.js"文件, 修改"presets"字段:
module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ], plugins:[ // 可选链插件, 其他babel插件也是一样的安装方式 "@babel/plugin-proposal-optional-chaining" ] } 复制代码
其他可玩的ES新特性(实验阶段)
通过babel的官网, 我们可以看到babel支持的"ES新特性" 参考: babeljs.io/docs/en/plu…
挑几个有意思的说明下, 其他的大家可以自行看下官网说明:
@babel/plugin-proposal-nullish-coalescing-operator
"非undefined且非null"判断
var object1 = {} var foo = object1.foo ?? "default"; // "default" var nl = null; var res = nl ?? 1 // 2 复制代码
@babel/plugin-proposal-logical-assignment-operators
短路符判断后赋值的简写.
let a = false; a ||= 1; // 1 复制代码
编译后的代码是这样的:
var a = false; a || (a = 1); 复制代码
@babel/plugin-proposal-function-bind
用"::"符号来代替"bind", "call"语法.
obj::func // 等价 func.bind(obj) ::obj.func // 等价 obj.func.bind(obj) obj::func(val) // 等价 func.call(obj, val) ::obj.func(val) // 等价 obj.func.call(obj, val) $('.some-link').on('click', ::view.reset); // 等价 $('.some-link').on('click', view.reset.bind(view)); 复制代码
复杂点的例子:
const { map, filter } = Array.prototype; let sslUrls = document.querySelectorAll('a') ::map(node => node.href) ::filter(href => href.substring(0, 5) === 'https'); 复制代码
@babel/plugin-proposal-partial-application
函数科里化
function add(x, y) { return x + y; } const addOne = add(1, ?); // 返回函数addOne addOne(2); // 3 复制代码
@babel/plugin-proposal-private-methods
私有属性关键词"#"
class Counter extends HTMLElement { #xValue = 0; get #x() { return this.#xValue; } set #x(value) { this.#xValue = value; window.requestAnimationFrame( this.#render.bind(this)); } #clicked() { this.#x++; } } 复制代码
其他特性
其他特性可能在业务代码中不常用(大神们可能常用, 但是大神也不用看我写文章学这些😁)就不在此介绍了, 有兴趣大家可以看下bebal实验特性.
总结
其实就这里最实用的就是"可选链"功能, 大家快快开始用起来吧, 让老项目的代码更优雅, 加油💪.
🔥typescript系列课程
基础教程从这里开始
第一课, 体验typescript
第二课, 基础类型和入门高级类型
第三课, 泛型
第四课, 解读高级类型
第五课, 命名空间(namespace)是什么
特别篇, 在vue3🔥源码中学会typescript🦕 - "is"
第六课, 什么是声明文件(declare)? 🦕 - 全局声明篇
新手前端学🔥typescript - 实战篇, 实现浏览器全屏(59行)
🔥往期热门文章
🔥常用正则大全2020
🚆新手前端不要慌! 给你✊10根救命稻草🍃
真.1px边框, 🚀 支持任意数量边和圆角, 1 个万金油的方法
🚀揭秘vue/react组件库中🤚5个"作者不造的轮子"
vue / react的UI库都在用的几个DOM API🚀
微博
刚玩微博, 咱们可以互相关注, 嘿嘿
微信群
感谢大家的阅读, 如有疑问可以加我微信, 我拉你进入微信群(由于腾讯对微信群的100人限制, 超过100人后必须由群成员拉入)
这篇关于告别无聊的undefined判断, 让老vue-cli3支持??"可选链"等"ES2020"特性的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南