JS對象中key和value加不加引號問題

這片文章主要解決下面的問題

1. 聲明對象key和value到底加不加引號？兩種有什么區別？
2. .點語法和[]訪問對象的屬性有什么區別？
3. JS對象中不合法的key值.點語法和[]訪問都可以嗎？
4. .點語法和[]訪問對象的方法怎么訪問？
5. 數據字典中如何聲明？
6. 給后台傳遞參數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
來源：掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。