本文能学到什么?

  1. 让老项目(依据vue-cli)支撑ES新语法(处于试验阶段), 比方”可选链”.
  2. 了解其他现在在试验阶段的ES新语法.

可选链

近期看到多个群中都在聊”可选链”, 所以就把单位的老项目也开Y C g W –启了”可选链”功用, 运用了1个月后的感触便是: 再t v ( A 5也不用写那么6 9 ` ! $ ? 6 R长的”undefined”判断了h [ { # n, 可选链”真香”.

const obj = {
foo: {
bar: {
baz: 42,
},
},
};
const a = obj?.a; // undefined,8 5 A { D j 假设没有"?"可就报错喽
// 等价于
// const a = (null === obj || undefined === obj) ? undefined : obj.a;
const baz = obj?.foo?.bar?.baz; // 42= h v h (
const baz = obj?.['foo']?.bar?.baz // 42

留意:

  1. 近期发布的vue-cli3现已默认支撑”可选链”, 咱们可以先试下是否支撑再设备.
  2. 运用ts的小伙伴, 假设运用的是3.7以后的版别[ & | _ – u W ~ Z, 那么默认也支撑”可选链”.

设备”ES新特性”F h b . k, 需求vue-cli3

第一步

yarn add -D @babel/plugin-proposal-optional-chaining

第二$ g !步

项目根目录下找到”babel.config.js”文件, 修改”presets”字段1 w F k J { k 6:

module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins:[
// 可选链插件, 其他babel插件也是相同的设备办法
"@babel/plugin-proposal-optip Z g g j 8onal-chaining"
]
}

其他可玩的ES新特性(试验阶段)

经过babel的官网, 咱们可以看到babeO 1 G W # V v D rl支撑的”ES新特性”
参看: babeljs.io/docs/en/plu…

挑几个有意思的说明下, 其他的咱们可以自行看下官网说明:

@babel/plugin-proposal-nullish-coalescing-operator

“非undefined且非null”判断

var object1 = {}
var foo = oa f } + X q S q _bjectN | L ^ / %1.foo ?? "default"; // "default"
var nl = null;
vk t 7 : # , 3ar res = nl ?? 1 // 2

@babel/plugin-proposal-logical-assignment-operators

短路符判断后赋值的简写.

let a = false;
a ||= 1; // 1

编译后的代码是这样的:

var a = false, I K;
a |d I m ? 9 M | N H| (a = 1);

@babel/plugin-proposal-function-bind

用”::”+ x w 8 9符号来替代”C 7 ~ Fbind”, “call”语法.

obj::func
// 等价 func.bind(obj)
::obj.fu0 J s T , n~ 7 sc
//C w z W 等价 obj.func.bind(obj)
obj::func(val)
// 等价 func.call(obj, val)
::obj.func(val)
// 等价 obj.func.call(obj, val)
$('.some-link').on('click', ::view.rem j : @ 7 Z -set);
/! Z N/ 等价A n N 4 Z ?  $('.sop e { X ? z Z Ume-link').G n P ` e Q Bon('click', view.res| h .et.bind(view));

复杂点的比如7 l 3 9 T ? | :

const { map, filter } = Array.prototype;
let sslUrls = document.querySele= 9 7 ? g * : VctorAll('a] + W')
:b H ! X $ N k J V:map(node => non 3 } sde.href)
::filter(href => href.substring(0, 5) === 'https');

@babel/plugI N A x Kin-proposal-partial-application

函数科里化

function add(x, y) { return x + y; }
const addOne = add(1, ?); // 回来函数addOne
addOne(2); // 3

@babel/plugin-proposb W # { ual-privr 4 e ,ate-methodsn t B D

私有特色关键词”#”

class Counter extends HTMLElement {
#xValue = 0;
get #x() { return this.#xValue; }
set #x(value) {
this.#xValue = value;
windoA q + Z @ M ww.rm $ R ] GequestAni~ D q K ) h N } LmationFrame(
this.#render. 0 0 5 A 4 ^bind(this));
}
#clicked() {
this.#x++;
}
}

其他特性

其他特性可能在事务代码中不常用s 3 l h X L x &(大神们可能常用, 可是大神也不用看我写文章学这些)就不在此介绍Z A I了, 有兴趣咱们可以看下bebal试验特性` ; l o.

总结

其实就这儿最有用的便是”可选链”功用, 咱们快快初步用| T 7起来吧, 让老项目的代码更高雅, 加油.

typescript系列课程

根底教程从这儿初步

第一课, 体会typescript

第二课, 根底类型[ z [ C o和入门高级类型

第三课, 泛型

第四课, 解读高级类型

第五课, 命名空间(namespace)是什么

特别篇, 在vue3源码中学会typescript – “is”

第六课, 什么是声明文件(de3 D y O Z & zclarer } ) g ! { *)? – 大局声明篇

新手前端学typescript – 实战篇, 实现浏览器全屏(59行)

往期抢手文章

常用正则大全2020

新手前端不要慌! 给你✊10根救命稻草

真.1px边框, 支撑任意数量边和圆角, 1 个万金油的办法

揭秘vue/react组件库中5个”作者不造的y ] S轮子”

vue / react的UI库都在用的几个DOM API

微博

刚玩微博, 咱们可以相互关注, 嘿嘿

微信群

感谢咱们的阅览, 如有疑问可以加我微信, 我拉你进入微信群(由于腾讯0 k Q C f A对微信群的100人约束, 逾越100人后必须由群成员拉入)