ES6 Spread運算符到vanilla Javascript

Question

我添加了一個腳本，該腳本使用ES6擴展運算符到從url獲取params的項目。 在我發現項目不支持ES6之后，不確定如何將其恢復為正常的vanilla Javascript語法。

使用普通的Javascript數組並使用擴展運算符很​​容易，但在像這樣的更復雜的實例中，我無法使數組在不完全更改腳本的情況下返回結果。

getQueryURLParams("country");

getQueryURLParams = function(pName) {
    var urlObject = location.search
    .slice(1)
    .split('&')
    .map(p => p.split('='))
    .reduce((obj, pair) => {
      const [key, value] = pair.map(decodeURIComponent);

      return ({ ...obj, [key]: value }) //This is the section that needs to be Vanilla Javascript
    }, {});

    return urlObject[pName];
};

感謝大家的回復。 在來回之后，我意識到我將整個腳本轉換為ES5的建議是正確的，因為瀏覽器只抱怨該行，但其他項目不是ES5也是有問題的。

這是我使用ES5后的情況：

getQueryURLParams = function(pName) {


if (typeof Object.assign != 'function') {
    // Must be writable: true, enumerable: false, configurable: true
    Object.defineProperty(Object, "assign", {
      value: function assign(target, varArgs) { // .length of function is 2
        'use strict';
        if (target == null) { // TypeError if undefined or null
          throw new TypeError('Cannot convert undefined or null to object');
        }

        var to = Object(target);

        for (var index = 1; index < arguments.length; index++) {
          var nextSource = arguments[index];

          if (nextSource != null) { // Skip over if undefined or null
            for (var nextKey in nextSource) {
              // Avoid bugs when hasOwnProperty is shadowed
              if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
                to[nextKey] = nextSource[nextKey];
              }
            }
          }
        }
        return to;
      },
      writable: true,
      configurable: true
    });
  }

var urlObject = location.search
.slice(1)
.split('&')
.map(function(element ) { 
    return element.split('='); 
})
.reduce(function(obj, pair) {  

  const key = pair.map(decodeURIComponent)[0];
  const value = pair.map(decodeURIComponent)[1];

  return Object.assign({}, obj, { [key]: value });
}, {});

return urlObject[pName];
};

Answer 1

您可以使用Object.assign() ：

return Object.assign({}, obj, { [key]: value });

演示：

 const obj = { a: 1 }; const key = 'b'; const value = 2; console.log(Object.assign({}, obj, { [key]: value })); 

FWIW， { ...obj }語法稱為“ 對象靜止/傳播屬性 ”，它是ECMAScript 2018的一部分，而不是ECMAScript 6。

Answer 2

既然你想要ES5的語法，那就是Object.assing() （ 來源：MDN ）

 // we first set the Object.assign function to null to show that the polyfill works Object.assign = null; // start polyfill if (typeof Object.assign != 'function') { // Must be writable: true, enumerable: false, configurable: true Object.defineProperty(Object, "assign", { value: function assign(target, varArgs) { // .length of function is 2 'use strict'; if (target == null) { // TypeError if undefined or null throw new TypeError('Cannot convert undefined or null to object'); } var to = Object(target); for (var index = 1; index < arguments.length; index++) { var nextSource = arguments[index]; if (nextSource != null) { // Skip over if undefined or null for (var nextKey in nextSource) { // Avoid bugs when hasOwnProperty is shadowed if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) { to[nextKey] = nextSource[nextKey]; } } } } return to; }, writable: true, configurable: true }); } // end polyfill // example, to test the polyfill: const object1 = { a: 1, b: 2, c: 3 }; const object2 = Object.assign({c: 4, d: 5}, object1); console.log(object2.c, object2.d); // expected output: 3 5