JS对象中key和value加不加引号问题

这片文章主要解决下面的问题

声明对象key和value到底加不加引号？两种有什么区别？
.点语法和[]访问对象的属性有什么区别？
JS对象中不合法的key值.点语法和[]访问都可以吗？
.点语法和[]访问对象的方法怎么访问？
数据字典中如何声明？
给后台传递参数JS对象如何写，key和value到底加不加引号？

声明JS对象key和value

第一种key和value都加引号

// 这种方式是最常见的方式，key和value都加引号
let obj1 = {
  \'name\': \'akangwu\',
  \'age\': \'18\',
  \'say1\': function () { // 这里是方法，就不加引号了。加引号就是字符串了，没有意义
    console.log(\'obj1第一种key和value都加引号\')
  },
}
let name = \'name\'
let age = \'age\'
// 访问方式
// . 方式可以直接跟名字；但是[]方式需要加引号，没有引号不能访问对象的属性，需要提前声明变量。
console.log(obj1.name) // akangwu
console.log(obj1.age) // 18
console.log(obj1.say1()) // obj1第一种key和value都加引号，访问对象方法需要加括号调用
console.log(obj1.say1) // [Function: say1]，不加括号调用就是这种
// 使用变量方式访问
console.log(obj1[name]) // akangwu
console.log(obj1[age]) // 18
// 使用[]访问
console.log(obj1[\'name\']) // akangwu
console.log(obj1[\'age\']) // 18
console.log(obj1[\'say1\']()) // obj1第一种key和value都加引号，访问对象方法需要加括号调用
console.log(obj1[\'say1\']) // [Function: say1]，不加括号调用就是这种

第二种key没有引号，value有引号

// 这种方式是最常见的方式，key和value都加引号
let obj2 = {
  name: \'akangwu\',
  age: \'18\',
  say1: function () { // 这里是方法，就不加引号了。加引号就是字符串了，没有意义
    console.log(\'obj2第二种key没有引号，value有引号\')
  },
}
let name = \'name\'
let age = \'age\'
// 访问方式
// . 方式可以直接跟名字；但是[]方式需要加引号，没有引号不能访问对象的属性，需要提前声明变量。
console.log(obj2.name) // akangwu
console.log(obj2.age) // 18
console.log(obj2.say1()) // obj2第二种key没有引号，value有引号，访问对象方法需要加括号调用
console.log(obj2.say1) // [Function: say1]，不加括号调用就是这种
// 使用变量方式访问
console.log(obj2[name]) // akangwu
console.log(obj2[age]) // 18
// 使用[]访问
console.log(obj2[\'name\']) // akangwu
console.log(obj2[\'age\']) // 18
console.log(obj2[\'say1\']()) // obj2第二种key没有引号，value有引号，访问对象方法需要加括号调用
console.log(obj2[\'say1\']) // [Function: say1]，不加括号调用就是这种

第三种key有引号，value没有引号

// 这种方式是最常见的方式，key和value都加引号
let obj3 = {
  \'name\': akangwu, // 这里只要不是数字，就必须要加引号。不加引号会默认成变量，但是全局没有声明变量，就会报错
  \'age\': 18,
  \'say1\': function () { // 这里是方法，就不加引号了。加引号就是字符串了，没有意义
    console.log(\'obj3第三种key有引号，value没有引号\')
  },
}
let name = \'name\'
let age = \'age\'
// 访问方式
// . 方式可以直接跟名字；但是[]方式需要加引号，没有引号不能访问对象的属性，需要提前声明变量。
console.log(obj3.name) // akangwu
console.log(obj3.age) // 18
console.log(obj3.say1()) // obj3第三种key有引号，value没有引号，访问对象方法需要加括号调用
console.log(obj3.say1) // [Function: say1]，不加括号调用就是这种
// 使用变量方式访问
console.log(obj3[name]) // akangwu
console.log(obj3[age]) // 18
// 使用[]访问
console.log(obj3[\'name\']) // akangwu
console.log(obj3[\'age\']) // 18
console.log(obj3[\'say1\']()) // obj3第三种key有引号，value没有引号，访问对象方法需要加括号调用
console.log(obj3[\'say1\']) // [Function: say1]，不加括号调用就是这种

JS对象中不合法的key

// 这种方式是最常见的方式，key和value都加引号
let obj4 = {
  \'11name\': \'身份证\', // 这里只要不是数字，就必须要加引号。不加引号会默认成变量，但是全局没有声明变量，就会报错
  \'AA-age\': \'军官证\',
}
let 11name = \'name\' // 报错，因为变量要合法
let AA-age = \'age\' // 报错，因为变量要合法
// 访问方式
// . 方式可以直接跟名字；但是[]方式需要加引号，没有引号不能访问对象的属性，需要提前声明变量。
console.log(obj4.11name) // 报错，key值比较特殊，不合法这种方法就不能访问
console.log(obj4.AA-age) // 报错， key值比较特殊，不合法这种方法就不能访问
// 使用变量方式访问
console.log(obj4[11name]) // 报错， 因为声明的变量11name不合法，不合法这种方法就不能访问
console.log(obj4[AA-age]) // 报错， 因为声明的变量AA-age不合法，key值比较特殊，不合法这种方法就不能访问
// 使用[]访问
console.log(obj4[\'11name\']) // 身份证
console.log(obj4[\'AA-age\']) // 军官证

数据字典中如何声明

// 两种数据字典都是设置可以的。但是这种数据字典里面的key容易有非法的key，所以还是建议数据字典加上引号
let obj5 = {
  \'0001\':\'中国工商银行\',
  \'0002\':\'中国建设银行\',
  \'0003\':\'中国交通银行\',
  \'0004\':\'中国民生银行\',
  \'0005\':\'中国农业银行\',
}
let obj6 = {
  0001:\'中国工商银行\',
  0002:\'中国建设银行\',
  0003:\'中国交通银行\',
  0004:\'中国民生银行\',
  0005:\'中国农业银行\',
}

给后台传递参数JS对象如何写，key和value到底加不加引号

// 传递给后台的数据key可以不加，也可以不加，但是建议不加。但是value只要不是变量，就必须加。涉及到数字的时候需要和后台沟通是字符串还是数字
var postData1 = {
          accnum: me.globalVars.detailsInfo.accnum,
          certinum: me.globalVars.detailsInfo.certinum,
          drawreason: \'101\',//提取原因：离退休提取
        }

总结

声明对象，传递给后台数据的时候key值不需要加引号；因为你声明对象肯定不会声明非法变量，同时传递给后台的字段也不会是非法变量，因为后台也是有变量命名要求的；
声明数据字典的时候，建议key和value都加引号，单引号双引号都可以。因为后台返回的代码会是数字，可能存在非法命名，非法代码；
访问对象的属性的时候：
- 如果是对象本来的属性，也就是静态属性，建议使用.来访问
- 如果是后续自己给对象加上的，也就是动态属性，建议使用[]来访问

作者：豆沙小饼干
链接：https://juejin.cn/post/6883829643133059080
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。