ES7 and ES8 新功能

可选链运算符

• 使用可选链运算符，只需要使用 ?. 来访问嵌套对象。
• 而且如果碰到的是 undefined 或 null 属性，那么它只会返回 undefined。

const opt = {
  obj1: {
    obj2: {
      obj3: {
        obj4: {
          obj5: 5
        }
      }
    }
  }
}
console.log(opt?.obj1?.obj2?.obj3?.obj4?.obj5);

当我们的程序执行到 undefined 或 null 属性时，不会崩溃，而只是返回 undefined。不幸的是，这尚未在任何浏览器中实现，所以最新版本的 Babel 来使用此功能。

let nestedProp = obj && obj.first && obj.first.second;

在访问obj.first.second之前，obj和obj.first 的值要被确认非null(且不是undefined)。目的是为了防止错误发生，如果简单直接的访问obj.first.second而不对obj和obj.first 进行校验就有可能产生错误。

let nestedProp = obj?.first?.second;

如果obj或obj.first是null/undefined，表达式将会短路计算直接返回undefined。 

空位合并运算符

我们在开发过程中，经常会遇到这样场景：变量如果是空值，则就使用默认值，我们是这样实现的：

let c = a ? a : b // 方式1
let c = a || b // 方式2

来自 undefined 或 null 值的另一个问题是，如果我们想要的变量为 undefined 或 null 则必须给变量设置默认值。

const y = x || 500;

当使用 || 运算符将 x 设置为 y 时，如果 x 被定义为 undefined，我们必须设置一个默认值。

运算符 || 的问题在于，所有类似于 (0, '', false)之类的值都将被我们不想要的默认值覆盖。

为了解决这个问题，有人提议创建一个“nullish”合并运算符，用 ?? 表示。有了它，我们仅在第一项为 null 或 undefined 时设置默认值。

const y = x ?? 500;

const x = null;
const y = x ?? 500;
console.log(y); // 500
const n = 0
const m = n ?? 9000;
console.log(m) // 0

y 将被分配的值为 500，因为 x 的值为 null。

但是，由于 n 不为 null 或 unfined，因此 m 被赋予值为 0。

如果我们使用 || 而不是 ??，那么由于 0 为假，因此将为 m 赋值 9000。

let c = a ?? b;
// 等价于let c = a !== undefined && a !== null ? a : b;

此功能尚未在任何浏览器或 Node.js 中实现，我们必须使用最新版本的 Babel 才能使用此功能。

 

Array.prototype.includes

Array.prototype.includes用法都容易和简单。它是一个替代indexOf，开发人员用来检查数组中是否存在值，indexOf是一种尴尬的使用，因为它返回一个元素在数组中的位置或者-1当这样的元素不能被找到的情况下。所以它返回一个数字，而不是一个布尔值。开发人员需要实施额外的检查。在ES6，要检查是否存在值你需要做一些如下图所示小技巧，因为他们没有匹配到值，Array.prototype.indexOf返回-1变成了true（转换成true），但是当匹配的元素为0位置时候，该数组包含元素，却变成了false。

console.log([1, 2, 3].includes(2)) // === true)
console.log([1, 2, 3].includes(4)) // === false)
console.log([1, 2, NaN].includes(NaN)) // === true)
console.log([1, 2, -0].includes(+0)) // === true)
console.log([1, 2, +0].includes(-0)) // === true)
console.log(['a', 'b', 'c'].includes('a')) // === true)
console.log(['a', 'b', 'c'].includes('a', 1)) // === false)

参考：Javascript之ES7详解、javaScript中ES6 ES7、ES8、ES9、ES10实用的新特性、ES7 and ES8 特性、Numeral介绍 - 格式化和操作数字的 JavaScript 库