您可以在 javascript 中使用模板文字创建对象属性名称吗？答案

【问题标题】：Can you create object property names using template literals in javascript?您可以在 javascript 中使用模板文字创建对象属性名称吗？
【发布时间】：2018-10-19 00:01:13
【问题描述】：

我正在尝试编写一个将字符串数组作为其输入的函数。该函数应返回一个具有 (1) 键、值对的对象。数组的第一个元素应该是属性名，数组的最后一个元素应该是它的键。

function transformFirstAndLast(array){
    return {`${array[0]}`: array[length-1];}
}

上面给了我一个错误。有人可以详细解释为什么这不起作用吗？我想避免创建单独的变量来存储第一个和最后一个数组索引中的值。

【问题讨论】：

数组的第一个元素应该是属性名，数组的最后一个元素应该是它的key或value？

标签： javascript arrays object

【解决方案1】：

您的问题实际上归结为“我可以使用 表达式 作为对象文字中的键吗？”

答案是肯定的（从 es6 开始）：

function yell(template, ...parts) {
  return parts[0] + '!';
}

function foo() {
    return 'bar';
}

class Person {
    constructor(first, last) {
        this.first = first;
        this.last = last;
    }
    
    toString() {
        return `${this.first} ${this.last}`;
    }
}

let names = ['Abe'];

let my_obj = {
    [3+5]: 'some_value',
    [yell `${foo()}`]: foo(),
    [names[0]]: 64,
    [new Person('Rafael', 'Cepeda')]: 25
};

console.log(my_obj);

只要表达式的计算结果为字符串，一切都是公平的。

【讨论】：

【解决方案2】：

您缺少{ 并且不能使用模板字符串作为键。要将“变量”用作对象中的键，您应该在变量周围使用括号。这是工作代码。

function transformFirstAndLast(array){
    return {[array[0]]: array[array.length-1]};
}

【讨论】：

【解决方案3】：

我猜这里不需要模板文字，只需在修复此行array[length-1] 后尝试这样，因为它的错误，正确的是array[array.length-1]。我添加了更详细的代码，但您也可以在您的 transformFirstAndLast(array) 函数上执行类似 return {[array[0]]: array[array.length-1]}; 的速记版本。

function transformFirstAndLast(array){
    const result = {};
    result[array[0]] = array[array.length-1]; 
    return result;
}

console.log(transformFirstAndLast(['a','b','c','d','e']))

【讨论】：

【解决方案4】：

是的，您可以使用字符串文字作为键。但问题是它们是在运行时计算的。因此，您需要将它们视为表达式。并且要将变量/表达式作为您的键，您需要将它们包装在 []

let a = {
  `key`: value
} // is not allowed

let a = {
  [`key`]: value
} // is allowed since you have wrapp

适合你的情况

return {[`${array[0]}`]: array[array.length-1]};

现在，由于您已将 array[0] 项包装在字符串文字中，因此您将获得第零项的字符串值。如果你的array[0] 是一个对象，这也不会起作用。它必须是字符串或数字。否则你会得到"[object Object]" 作为你的密钥

【讨论】：

【解决方案5】：

var input = ["name", "fname", "lname", "stackOverflow"];

function transformFirstAndLast(array){
    return {[array[0]]: array.pop()}
}

responseObject = transformFirstAndLast(input)
console.log(responseObject)

【讨论】：