ES6扩展运算符到普通Javascript
ES6扩展运算符到普通Javascript
提问于 2018-09-17 02:38:31
我已经添加了一个使用ES6扩展操作符的脚本到从url获取参数的项目。在我发现项目不支持ES6后，我不确定如何将其恢复为普通的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];
};回答 2
Stack Overflow用户
发布于 2018-09-17 02:41:50
您可以使用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 }));
顺便说一句，{ ...obj }语法被称为"Object Rest/Spread Properties“，它是ECMAScript 2018的一部分，而不是ECMAScript 6。
Stack Overflow用户
发布于 2018-09-17 03:21:08
由于您需要ES5的语法，因此这里是Object.assing()的polyfill (source: 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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52357278
复制相关文章
相似问题