这个 Javascript 对象语法是什么意思？它有一个键（字符串）和一个值（对象）答案

【问题标题】：What does this Javascript object syntax means? It has a key (a string) and a value (object)这个 Javascript 对象语法是什么意思？它有一个键（字符串）和一个值（对象）
【发布时间】：2020-05-17 06:38:28
【问题描述】：

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

如果您查看下面的代码，在 const data 对象处，有两个键，即列表和 listIds。有两部分没看懂。

为什么键 "list-1" 是字符串，而值 {id: "list-1",title: "Todo",cards,} 是普通物体吗？我无法弄清楚这种语法。如果是 JSON 格式，则两个 key-value 都应该是带引号的。
listIds: ["list-1"] 只是一个以数组为值的普通键值对吗？如果是这样，为什么它与初始列表键中的名称相同？这是 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;

【问题讨论】：

标签： javascript object ecmascript-6

【解决方案1】：

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

listIds : ["list-1"] 是一个普通的 JS 键值表达式，: 左边是一个键，右边是一个带有单个字符串值的数组。

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

还有一点：在 JSON 字符串中，: 左侧的键必须用双引号括起来，但这是一个 Javascript 对象，只要每个键的格式为一个常规的 Javascript 变量，以及 : 右侧的值，这些值很多时候无法在 JSON 字符串中表示，例如函数。

【讨论】：

感谢您的澄清。我现在了解双引号的用法。但是，我们真的可以将密钥list-1 传递到数组中吗？它不只是一个list-1 字符串（没有任何值）吗？我知道我们是否可以传递 const 或和函数，但传递 list-1 的键值仍然让我难以想象，除非有我不知道的特殊规则。
如果我正确理解了您的问题，这个表达式：data.list[ data.listIds[0] ] 将访问数组data.listIds 的第一个元素引用的data.list 下的子对象。字符串本身就是一个值。还请看下面添加的非常好的分析@jfriend00。

【解决方案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

【讨论】：