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

Posted 2021-04-01

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

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

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

答案

你缺少{，你不能使用模板字符串作为密钥。要使用“变量”作为对象中的键，您应该使用变量周围的方块。这是工作代码。

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

另一答案

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

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

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

另一答案

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

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]"作为你的钥匙

另一答案

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

答案是肯定的（因为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);

另一答案

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

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

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

以上是关于你可以在javascript中使用模板文字创建对象属性名称吗？的主要内容，如果未能解决你的问题，请参考以下文章

我怎样才能用intellij在javascript中更漂亮的模板文字

如果浏览器不支持ES6模板文字，则创建错误消息

使用带有 JavaScript 模板文字函数的 for 循环

js怎么实现动态progress

标记的模板文字如何在JavaScript中工作？

如何在 django 模板中为循环创建唯一的 javascript 变量名？