ES9 中新增的 Rest/Spread 属性，如何应用并兼容旧有代码？-JavaScript中文网-JavaScript教程资源分享门户

随着前端的不断发展和变化，JavaScript 的语言特性也在不断更新和改进。ES6 和 ES7 时代，JavaScript 语言特性也得到了巨大的提升，而 ES8 中也新增了 Async/Await 和 Object.values/Object.entries 等特性。

在 ES9 中，Rest/Spread 属性被引入了进来。在这篇文章中，我们将会探讨 Rest/Spread 属性的用法、兼容性以及如何兼容旧有代码。

Rest/Spread 属性

在 ES9 中，Rest/Spread 属性即 ... 运算符的出现，是对这些属性的扩展和改进。

Rest 属性用在函数参数列表中，用来将不定数量的参数表示为一个数组。例如：

function foo(...args) {}

这样函数中的 args 就会变成一个数组，不论有多少个参数都能被捕获。这个特性在之前的版本中也已经被引入，直到 ES9 才得到了标准化和修复。

Spread 属性则出现在数组和对象中，可以将数组或者对象打散为单个值或者多个值。例如：

// javascriptcn.com 代码示例
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [...arr1, ...arr2];
console.log(arr3);  // [1, 2, 3, 4, 5, 6]

let obj1 = { a: 1, b: 2 };
let obj2 = { c: 3, d: 4 };
let obj3 = { ...obj1, ...obj2 };
console.log(obj3);  // { a: 1, b: 2, c: 3, d: 4 }

这些特性极大地方便了开发者们的工作，让代码变得更加简洁和易于理解。但是在实际应用中，我们仍然需要考虑到兼容性的问题。

兼容性

虽然 Rest/Spread 属性已经引入了 ES9 中，但是目前并不是所有浏览器都支持这些属性。对于已经支持的浏览器，我们可以直接使用 ES9 的语法来实现相应的功能。

但是对于不支持的浏览器，我们需要使用一些工具来进行转换。

比如说我们可以使用 Babel 来将 ES9 的代码转换成 ES5 的代码，从而兼容目前大部分的浏览器。将上面的代码转换为 ES5 的代码如下：

// javascriptcn.com 代码示例
"use strict";

function _toArray(arr) { return Array.isArray(arr) ? arr : Array.from(arr); }

function _objectSpread(target) {
  for (var i = 1; i < arguments.length; i++) {
    var source = arguments[i] != null ? arguments[i] : {};
    var ownKeys = Object.keys(source);
    if (typeof Object.getOwnPropertySymbols === "function") {
      ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
        return Object.getOwnPropertyDescriptor(source, sym).enumerable;
      }));
    }
    ownKeys.forEach(function (key) {
      _defineProperty(target, key, source[key]);
    });
  }
  return target;
}

function _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }
  return obj;
}

function foo() {
  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
    args[_key] = arguments[_key];
  }
}

var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var arr3 = [].concat(_toArray(arr1), _toArray(arr2));
console.log(arr3); // [1, 2, 3, 4, 5, 6]

var obj1 = { a: 1, b: 2 };
var obj2 = { c: 3, d: 4 };
var obj3 = _objectSpread(_objectSpread({}, obj1), obj2);
console.log(obj3); // { a: 1, b: 2, c: 3, d: 4 }

从上述代码中可以看到，我们将上述的代码通过 Babel 转换为了 ES5 可以支持的代码，其中 Rest 属性通过使用数组的方式转换成了 ES5 可以支持的代码；而 Spread 属性则通过定义 _objectSpread 方法来转换。

总结

在 ES9 中，Rest/Spread 属性的出现极大地方便了前端的开发，并且现在已经逐渐得到了广泛的应用。但是在应用之前，我们需要考虑到浏览器的兼容性问题。通过使用工具如 Babel 等，可以将 ES9 代码转换成 ES5 的代码，使得我们的代码可以在更多的浏览器中运行。

最后，希望这篇文章对您学习 Rest/Spread 属性有所帮助，帮助您更好地开发前端应用！

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6583a908d2f5e1655de7fd12