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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了你可以在javascript中使用模板文字创建对象属性名称吗?相关的知识,希望对你有一定的参考价值。

我正在尝试编写一个以字符串数组作为输入的函数。该函数应返回一个具有(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 变量名?