摘要：你將看到它們的語(yǔ)法時(shí)時(shí)關(guān)注它們的進(jìn)展與更新。標(biāo)準(zhǔn)有個(gè)版本，個(gè)發(fā)布第個(gè)版本被放棄了。此建議的目的只是避免在起草建議被放棄或發(fā)生重大帶來(lái)的麻煩。如果使用過(guò)度，將導(dǎo)致性能下降。在這個(gè)場(chǎng)景中，數(shù)字和空字符串都被認(rèn)為是假的。

想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,一年百來(lái)篇優(yōu)質(zhì)文章等著你！

讓我們看看JavaScript中一些有用的即將出現(xiàn)的特性。你將看到它們的語(yǔ)法、時(shí)時(shí)關(guān)注它們的進(jìn)展與更新。在此，我們將編寫(xiě)一個(gè)小測(cè)試案例來(lái)展示如何從今天開(kāi)始使用這些特性!

如果您已經(jīng)熟悉Ecma TC39委員會(huì)如何決定和處理JavaScript語(yǔ)言的更改，請(qǐng)?zhí)^(guò)這一部分。

JavaScript是 ECMAScript 的語(yǔ)言標(biāo)準(zhǔn)的實(shí)現(xiàn)，ECMAScript 是在web瀏覽器的早期發(fā)展過(guò)程中為規(guī)范標(biāo)準(zhǔn)化語(yǔ)言的實(shí)現(xiàn)而誕生的。

ECMAScript標(biāo)準(zhǔn)有8個(gè)版本，7個(gè)發(fā)布(第4個(gè)版本被放棄了)。

JavaScript引擎在每次發(fā)布后開(kāi)始實(shí)行指定的特性升級(jí)。這個(gè)圖表說(shuō)明并不是每個(gè)引擎都能實(shí)現(xiàn)了新出的每個(gè)特性，而且一些引擎實(shí)現(xiàn)這些特性的時(shí)間要比其他引擎長(zhǎng)。這似乎不是最理想的，但我相信這總比沒(méi)有標(biāo)準(zhǔn)要好。

每個(gè)ECMAScript版本都要經(jīng)過(guò)一個(gè)審核起稿的過(guò)程。如果一個(gè)起草建議被認(rèn)為是有用的和向后兼容的，它將被包含在下一版中。

這個(gè)地址 概述了提案的五個(gè)階段。每一個(gè)提案都是從一個(gè)“strawman”或最初提出的 stage-0 開(kāi)始的。在這一級(jí)，它們要么尚未提交給技術(shù)委員會(huì)，要么尚未被拒絕，但仍未達(dá)到進(jìn)入下一階段的標(biāo)準(zhǔn)。

下面所示的草建議沒(méi)有一項(xiàng)處于stage-0。

作為個(gè)人推薦，我建議讀者在生產(chǎn)應(yīng)用程序中避免使用stage-0建議，直到它們處于穩(wěn)定的階段。此建議的目的只是避免在起草建議被放棄或發(fā)生重大帶來(lái)的麻煩。

好了，背景就啰嗦到這里了，需要使用這些新出來(lái)的特性，還需要如下步驟：

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.46 
@babel/plugin-proposal-pipeline-operator
@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 文件，內(nèi)容如下:

 {
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        }
      }
    ],
    [
      "@babel/preset-stage-0",
      {
        "decoratorsLegacy": true,
        "pipelineProposal": "minimal"
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-transform-runtime",
      [
        "@babel/plugin-proposal-optional-chaining",
        {
          "loose": false
        }
      ],
      [
        "@babel/plugin-proposal-decorators",
        {
          "decoratorsBeforeExport": false
        }
      ],
      [
        "@babel/plugin-proposal-class-properties"
      ],
      [
        "@babel/plugin-proposal-pipeline-operator",
        {
          "proposal": "minimal"
        }
      ]
  ]
}

接下，我們寫(xiě)個(gè)粟子把即將出來(lái) JavaSrcipt 特性用起來(lái)吧！

Optional Chaining 能檢查一個(gè)對(duì)象上面是否存在某屬性，我們項(xiàng)目中，如果有一個(gè)用戶(hù)對(duì)象有如下結(jié)構(gòu)：

const data = {
  user: {
    name: "小智",
    address: {
      street: "小智測(cè)試地址",
    }, 
  },
};

但實(shí)際項(xiàng)目中，我們 user 里面數(shù)據(jù)是請(qǐng)求獲取，然后我們?cè)谫x值給 user，所以實(shí)際項(xiàng)目中我們一般會(huì)這么寫(xiě)：

const data = {
  user: {},
};

假設(shè)我們?cè)诔绦蛞x取 user中的 street, 我們會(huì)這樣寫(xiě) data.user.address.street,恩，這時(shí)我們?cè)诳刂婆_(tái)就會(huì)收到來(lái)自谷歌的紅色問(wèn)候：

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

為了避免出錯(cuò)，我們會(huì)這樣寫(xiě)：

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

1）丑陋
2）繁瑣冗長(zhǎng)
3）狗屎

即將出現(xiàn)的特性中，我們可以這樣寫(xiě)：

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

這樣是不是更加簡(jiǎn)潔方便呢？既然我們看到了這個(gè)特性的有用性，我們就可以繼續(xù)深入研究了！

寫(xiě)個(gè)粟子(test.js)：

// test.js
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");
});

npm test

現(xiàn)在我們看到自判斷鏈接維護(hù)了點(diǎn)標(biāo)記的先前功能。接下測(cè)試一下，一連串的 .屬性 操作：

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

下面是自判斷鏈接如何用于數(shù)組屬性訪問(wèn)：

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

有時(shí)我們不知道函數(shù)是否在對(duì)象中實(shí)現(xiàn)，一個(gè)常見(jiàn)的例子是在使用web瀏覽器時(shí)。一些較老的瀏覽器可能沒(méi)有某些功能。幸運(yùn)的是，我們可以使用自判斷鏈接來(lái)檢測(cè)函數(shù)是否實(shí)現(xiàn)了!

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

如果鏈不完整，表達(dá)式將不執(zhí)行。在JavaScript引擎下，表達(dá)式粗略地轉(zhuǎn)換成這個(gè):

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

在“自判斷鏈接” ？之后，如果值未定義或?yàn)榭眨瑒t執(zhí)行。我們可以在下面的測(cè)試中看到該規(guī)則的作用：

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

所以“自判斷鏈接”減少了對(duì)if語(yǔ)句、導(dǎo)入庫(kù)(如lodash)和&&操作符號(hào)的需要。

您可能會(huì)注意到，使用這個(gè)“自判斷鏈接”具有最小的開(kāi)銷(xiāo)。你檢查的每一級(jí)”?“必須隱藏在某種條件邏輯中。如果使用過(guò)度，將導(dǎo)致性能下降。

下面是我們?cè)贘avaScript中看到的一些常見(jiàn)操作：

檢查null或者undefined的值

設(shè)置默認(rèn)值

判斷值是否為 0,null, ""

你可能見(jiàn)過(guò)這樣做的:

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

或者你可能見(jiàn)過(guò)這種不恰當(dāng)?shù)淖龇?

value || "default value"

問(wèn)題是對(duì)于這兩個(gè)實(shí)現(xiàn)，我們的三目運(yùn)算符條件沒(méi)有滿(mǎn)足。在這個(gè)場(chǎng)景中，數(shù)字0、false和空字符串都被認(rèn)為是假的。這就是為什么我們必須檢查null和 undefined。

value != null

與之相同的是：

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

這個(gè)就是 Nullish 合并出現(xiàn)原因，我們可以這樣做：

value ?? "default value";

這就可以防止默認(rèn)那些不可靠的值(null,undefined)，代替三目運(yùn)算和 ！=null 的操作；

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

您可以在測(cè)試中看到，默認(rèn)值為null、undefined和void 0，結(jié)果為undefined。它不會(huì)默認(rèn)false值，如0、"和false.

在函數(shù)式編程中，我們有一個(gè)術(shù)語(yǔ)“組合”，它是將多個(gè)函數(shù)調(diào)用鏈接在一起的行為。每個(gè)函數(shù)接收前一個(gè)函數(shù)的輸出作為輸入。下面是我們用普通JavaScript討論的一個(gè)例子:

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

這種串接非常常見(jiàn)，以至于組合函數(shù)出現(xiàn)在大多數(shù)函數(shù)庫(kù)中，比如lodash和ramda。

使用新的管道操作符，您可以跳過(guò)第三方庫(kù)，像這樣編寫(xiě)上面的代碼：

let result = "hello"
  |> doubleSay
  |> capitalize
  |> exclaim;

result //=> "Hello, hello!"

這樣做的目的是為了提高鏈的可讀性。它也將在未來(lái)與部分應(yīng)用程序很好地工作，或目前它可以實(shí)現(xiàn)如下:

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

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

result //=> 0

現(xiàn)在我們看到了語(yǔ)法，可以開(kāi)始編寫(xiě)測(cè)試了!

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

好了，現(xiàn)在您已經(jīng)看到了這些新特性的實(shí)際應(yīng)用，希望不久的你可以熟練的嘗試它!

你的點(diǎn)贊，是我持續(xù)分享好東西的動(dòng)力，歡迎點(diǎn)贊！