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
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。