这个Javascript对象语法意味着什么？它有一个键(字符串)和一个值(对象)。

Question

我正在关注Youtube上关于将数据导入到React中现有待办事项列表组件的教程。

如果您查看下面的代码，在const data对象中，有两个键，即lists和listIds。有两部分我不明白。

1. 为什么键"list-1"是字符串，而值{id: "list-1",title: "Todo",cards,}是普通对象？我搞不懂这个语法。如果是JSON格式，那么两个键值都应该是引号。
2. 是一个普通的键值对，其中有一个数组作为它的值吗？如果是的话，为什么它的名称与初始列表键中的名称相同？这是来自ES6的析构方法吗？我只是不明白语法。

​

const cards = [
              {
                id: "card-1",
                title: "Learning how to cook",
              },
              {
                id: "card-2",
                title: "Making sandwich",
              },
              {
                id: "card-3",
                title: "Taking the trash out",
              },
            ];
        
        const data = {
          lists: {
            "list-1": {
              id: "list-1",
              title: "Todo",
              cards,
            },
          },
          listIds: ["list-1"],
        };
        
        export default data;

​

Answer 1

因为"list-1“包含一个减号，这将是标识符名称的错误。这就像尝试从“列表”中减去1，并将表达式用作键。

listIds : ["list-1"]是一个普通的JS键值表达式，其键位于:的左侧，数组的右侧只有一个字符串值。

Object data.lists看起来像是包含各种子对象，每个子对象都有一个ID，而listIds只是一个数组，包含lists中的所有键。在您的示例中，listIds中有一个子对象和相应的一个键。

还有一件事:在JSON字符串中，:左侧的键必须是双引号，但是这是一个Javascript对象，只要每个键被格式化为常规Javascript变量，并且:右边的值很多时候不能用JSON字符串表示，例如函数，Javascript对象就可以有没有双引号的键。

Answer 2

我只是想在这里添加一个关于在对象声明中声明键/值对的小摘要。当您声明对象属性时，如下所示：

let obj = {prop: value};

属性声明的左边是属性名称。允许使用三种可能的语法：

纯文本字符串-无引号

// no quotes - this is allowed when the property name 
// doesn't contain any reserved characters
let obj = {prop: value};

引号字符串

// quotes - this is always allowed, but is required when the property name
// does contain reserved characters like a "-" such as your example of "list-1"
let obj = {"prop": value};

变量名的括号

// computed property name.  This is used when the property name you want to use
// is in a variable
let someVar = "prop";
let obj = {[someVar]: value};

上述所有三个选项都在该对象中创建了完全相同的键/值对。

prop: value对的右边可以是任何Javascript表达式，如下所示：

let obj = {prop: 3};                          // a number
let obj = {prop: "foo"};                      // a string
let obj = {prop: value};                      // value from some variable
let obj = {prop: [1,2,3]};                    // an array
let obj = {prop: resultFromCallingFunc()};    // the result from calling some function
let obj = {prop: {greeting: "hello"}};        // another object
let obj = {prop: 3 + 4};                      // any expression