查看原文
其他

三个值得期待的 JavaScript 新特性!

前端大全 2019-11-11

(给前端大全加星标,提升前端技能


英文:Justin Fuller 作者:川木

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

关于提案

提案有五个阶段,详看介绍文档 https://tc39.github.io/process-document/ 。每个提案最初提出的都是“strawman”或stage 0阶段,在这个阶段,它们要么尚未提交给技术委员会,要么尚未被拒绝,但仍未达到进入下一阶段。

作为个人建议,读者应避免生产环境中使用stage 0提案,它们处于不稳定的阶段。

下文的提案都不属于第0阶段

创建测试项目

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

npm init -f

npm 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"

  ]

}

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

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`

在我看来,这种方法:

  1. 不美观

  2. 繁重

  3. 啰嗦

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

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等库以及&&进行链式调用的使用。

2.空值合并

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

  1. 检查 null undefined

  2. 给变量设置默认值

  3. 确保0false''不设置默认值

像这样:

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

或者这样:

value || 'default value'

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

value != null

和上面相同:

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

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

value ?? 'default value';

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

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

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);

});

在测试中看到,??nullundefinedvoid 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,但尚未实现。

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

相关链接

  • proposal-optional-chaining https://github.com/TC39/proposal-optional-chaining

  • proposal-nullish-coalescing https://github.com/tc39/proposal-nullish-coalescing

  • proposal-partial-application https://github.com/tc39/proposal-partial-application

  • proposal-pipeline-operator https://github.com/tc39/proposal-pipeline-operator

  • 测试代码 https://github.com/JustinDFuller/javascript-proposals-tests



推荐阅读

(点击标题可跳转阅读)

ES6 核心特性

30 分钟精通 React 新特性——React Hooks

Vue高版本中一些新特性的使用



觉得本文对你有帮助?请分享给更多人

关注「前端大全」加星标,提升前端技能

喜欢就点一下「好看」呗~

    您可能也对以下帖子感兴趣

    文章有问题?点此查看未经处理的缓存