集团主站
欢迎来到成都达内官方网站!达内—美国上市公司 亿元级外企IT培训企业!
成都it培训哪家好
成都it培训哪家好
全国服务监督电话:15023458194  |   联系客服   |
当前位置:主页 > 培训课程 > web前端 >

成都web培训班:三个值得期待的JavaScript新特性!

发布者: 成都达内     浏览次数:     发布时间:2019-02-26 10:33:08

一起来来看看JavaScript中一些新特性,本文将介绍它们的语法和相关链接,帮助读者及时了解它们的进度,我们将通过编写一个小型测试项目...

  成都web培训班:三个值得期待的JavaScript新特性!

  一起来来看看JavaScript中一些新特性,本文将介绍它们的语法和相关链接,帮助读者及时了解它们的进度,我们将通过编写一个小型测试项目,展示如何快速上手使用这些新特性!

  创建测试项目

  新建一个目录并运行运行以下命令:

  npm init -fnpm i ava@1.0.0-beta.3 @babel/preset-env@7.0.0-beta.42 @babel/preset-stage-0@7.0.0-beta.42 @babel/register@7.0.0-beta.42 @babel/polyfill@7.0.0-beta.42 @babel/plugin-transform-runtime@7.0.0-beta.42 @babel/runtime@7.0.0-beta.42 --save-dev`

  然后将以下内容添加到package.json文件中:

  { "scripts": { "test": "ava" }, "ava": { "require": [ "@babel/register", "@babel/polyfill" ] }}

  最后创建一个.babelrc文件:

  { "presets": [ [ "@babel/preset-env", { "targets": { "node": "current" } } ], "@babel/preset-stage-0" ], "plugins": [ "@babel/plugin-transform-runtime" ]}

  现在可以开始写一些测试用例了!

  成都web培训班:三个值得期待的JavaScript新特性!

  1、可选运算符

  在JavaScript中,我们一直在使用对象,但有时候对象里并不是我们期望的数据结构。假设下面是我们期望得到的数据,可能是通过调用API查询数据库得到的。

  const data = { user: { address: { street: "Pennsylvania Avenue" } }}

  如果该用户没有完成注册,可能得到下面的数据:

  const data = { user: {}};

  当尝试按下面的方式访问street时,会得到报错:

  console.log(data.user.address.street);// Uncaught TypeError: Cannot read property 'street' of undefined

  为避免这种情况,需要按如下方式访问“street”属性:

  const street = data && data.user && data.user.address && data.user.address.street;console.log(street); // undefined`

  在我看来,这种方法:

  不美观

  繁重

  啰嗦

  如果使用可选运算符,可以这样编码:

  console.log(data.user?.address?.street);// undefined

  这样看起来更简单了,现在我们已经看到了这个功能的用处,现在来写一个测试!

  import test from 'ava';const valid = { user: { address: { street: 'main street', }, },};function getAddress(data) { return data?.user?.address?.street;}test('Optional Chaining returns real values', (t) => { const result = getAddress(valid); t.is(result, 'main street');});

  我们看到了可选符号的正常使用,接下来是一些不规范数据的测试用例:

  test('Optional chaining returns undefined for nullish properties.', (t) => { t.is(getAddress(), undefined); t.is(getAddress(null), undefined); t.is(getAddress({}), undefined);});

  用于访问数组元素的用例:

  const valid = { user: { address: { street: 'main street', neighbors: [ 'john doe', 'jane doe', ], }, },};function getNeighbor(data, number) { return data?.user?.address?.neighbors?.[number];}test('Optional chaining works for array properties', (t) => { t.is(getNeighbor(valid, 0), 'john doe');});test('Optional chaining returns undefined for invalid array properties', (t) => { t.is(getNeighbor({}, 0), undefined);});

  有时我们不知道某个函数是否在对象中实现,一个常见的场景是,某些旧版浏览器可能没有某些功能,我们可以使用可选运算符接来检测函数是否已实现。看如下代码:

  const data = { user: { address: { street: 'main street', neighbors: [ 'john doe', 'jane doe', ], }, getNeighbors() { return data.user.address.neighbors; } },};function getNeighbors(data) { return data?.user?.getNeighbors?.();}test('Optional chaining also works with functions', (t) => { const neighbors = getNeighbors(data); t.is(neighbors.length, 2); t.is(neighbors[0], 'john doe');});test('Optional chaining returns undefined if a function does not exist', (t) => { const neighbors = getNeighbors({}); t.is(neighbors, undefined);});

  如果调用链不完整,函数将不会执行,它背后的逻辑应该是这样的:

  value == null ? value[some expression here]: undefined;

  如果在可选链操作符之后是 undefined 或者 null则什么都不会执行,我们可以在以下测试中看到该规则的实际应用:

  let neighborCount = 0;function getNextNeighbor(neighbors) { return neighbors?.[++neighborCount];}test('It short circuits expressions', (t) => { const neighbors = getNeighbors(data); t.is(getNextNeighbor(neighbors), 'jane doe'); t.is(getNextNeighbor(undefined), undefined); t.is(neighborCount, 1);});

  有了可选运运算符,我们的代码中可以减少if语句、lodash等库以及&&进行链式调用的使用。

  成都web培训班:三个值得期待的JavaScript新特性!

  2、空值合并

  以下是我们在JavaScript中看到的一些常见操作:

  检查 null 或 undefined

  给变量设置默认值

  确保0,false和''不设置默认值

  像这样:

  value != null ? value : 'default value';

  或者这样:

  value || 'default value'

  问题是,对于第二个实现,在值为0、false和''时都被视为false,所以我们必须明确检查null和undefined。

  value != null

  和上面相同:

  value !== null && value !== undefined

  这就是新提案的用武之地,现在我们可以这样做:

  value ?? 'default value';

  这可以保护我们不会为0、false和''设置默认值,在不使用三元运算符和!= null检查的情况下捕获null和undefined。

  接下来编写一个简单的测试来验证它是如何工作的:

  import test from 'ava';test('Nullish coalescing defaults null', (t) => { t.is(null ?? 'default', 'default');});test('Nullish coalescing defaults undefined', (t) => { t.is(undefined ?? 'default', 'default');});test('Nullish coalescing defaults void 0', (t) => { t.is(void 0 ?? 'default', 'default');});test('Nullish coalescing does not default 0', (t) => { t.is(0 ?? 'default', 0);});test('Nullish coalescing does not default empty strings', (t) => { t.is('' ?? 'default', '');});test('Nullish coalescing does not default false', (t) => { t.is(false ?? 'default', false);});

  在测试中看到,??为null,undefined和void 0设置了默认值,没有为0,''和false设置默认值。

  3、管道运算符

  在函数式编程中,我们有一个概念叫compose,它多个函数调用合并在一起,调用时从右到左执行每个函数,函数接收前一个函数的输出作为其输入,以下是我们在纯JavaScript中讨论的一个示例:

  function doubleSay (str) { return str + ", " + str;}function capitalize (str) { return str[0].toUpperCase() + str.substring(1);}function exclaim (str) { return str + '!';}let result = exclaim(capitalize(doubleSay("hello")));result //=> "Hello, hello!"

  这种合并使用函数的方式很常见常见,以至于在于大多数功能库中,如lodash和ramda都有实现。

  使用新的管道运算符,可以不使用第三方库并按如下所示编写上述内容:

  let result = "hello" |> doubleSay |> capitalize |> exclaim;result //=> "Hello, hello!"`

  这个提案目的是使链式调用函数更具可读性,在未来结合函数部分应用也可以很好的工作,类似下面这种使用方式:

  let result = 1 |> (_ => Math.max(0, _));result //=> 1

  let result = -5 |> (_ => Math.max(0, _));result //=> 0

  编写如下测试用例:

  import test from 'ava';function doubleSay (str) { return str + ", " + str;}function capitalize (str) { return str[0].toUpperCase() + str.substring(1);}function exclaim (str) { return str + '!';}test('Simple pipeline usage', (t) => { let result = "hello" |> doubleSay |> capitalize |> exclaim; t.is(result, 'Hello, hello!');});test('Partial application pipeline', (t) => { let result = -5 |> (_ => Math.max(0, _)); t.is(result, 0);});test('Async pipeline', async (t) => { const asyncAdd = (number) => Promise.resolve(number + 5); const subtractOne = (num1) => num1 - 1; const result = 10 |> asyncAdd |> (async (num) => subtractOne(await num)); t.is(await result, 14);});

  需要注意,一旦将async函数添加到管道,必须await该返回值,因为此时返回值是promise。有一提案开始支持|> await asyncFunction,但尚未实现。

  最后,既然你已经看到了这些提案的实际应用,我希望你能够尝试一下这些提案!

(责任编辑:范老师)
最新开班
  • 成都Java培训班
    免费试听名额发放中...
  • 成都C++培训班
    免费试听名额发放中...
  • 成都PHP培训班
    免费试听名额发放中...
  • 成都网络工程培训班
    免费试听名额发放中...
  • 成都Unity3D培训班
    免费试听名额发放中...
  • 成都大数据培训班
    免费试听名额发放中...
  • 成都uid培训班
    免费试听名额发放中...
  • 成都会计培训班
    免费试听名额发放中...
  • 成都Python培训班
    免费试听名额发放中...
  • 成都嵌入式培训班
    免费试听名额发放中...
  • 成都web培训班
    免费试听名额发放中...
  • 成都软件测试培训班
    免费试听名额发放中...
在线留言
提交

校区地址:绵阳市涪城区临园路东段68号富临大都会7栋3单元9层12号

联系电话:15023458194

公交路线:富乐路口凯德广场(10路;29路;3路;15路;11路;15a路;71路)

校区地址:成都市锦江区东大街紫东楼端35号明宇金融广场19楼1906室

联系电话:15023458194

公交路线:芷泉街(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:成都市高新区奥克斯广场蜀锦路209号一楼商铺

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

校区地址:成都锦江区东大街芷泉街229号东方广场C座3楼303

联系电话:15023458194

公交路线:芷泉街(188路;115路;515路;236路;505路;501路;84路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:成都市武侯区佳灵路3号红牌楼广场2号写字楼11楼1115号

联系电话:15023458194

公交路线:红牌楼东(11路;92路;100路;111路;139路;g28路;快速公交K1/K2) 地铁路线:红牌楼站(地铁3号线)

校区地址:成都市锦江区红星路二段70号四川日报大厦502-2

联系电话:15023458194

公交路线:市二医院站(6路;49路;102路;5路;37路;g92路;) 地铁路线:地铁市二医院(地铁3号线)

校区地址:成都市锦江区东大街芷泉段229号东方广场C座16层

联系电话:15023458194

公交路线:芷泉街(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:四川省成都市武侯区高新科技孵化园9号园区E座7楼

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

校区地址:成都市人民南路一段86号“城市之心”大厦26楼

联系电话:15023458194

公交路线:成都市人民南路(6路;14路;42路;72路;76路;1010路;)

校区地址:成都市高新区奥克斯广场B座1708

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

了解达内动态
关注成都达内教育公众号

首页 | 关于达内 | 课程中心 | 专家师资 | 视频教程 | 学员空间 | 校企合作 | 新闻资讯 | 就业指导 | 网站地图

2016-2025 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56