JavaScript属性访问：点表示法与括号？

Question

除了显而易见的事实是，第一个形式可以使用变量，而不仅仅是字符串字面的，是否有任何理由使用一个形式，如果是这样，则在哪种情况下使用？

在代码：

// Given:
var foo = {'bar': 'baz'};

// Then
var x = foo['bar'];

// vs. 
var x = foo.bar;

上下文中：我编写了一个代码生成器，该代码生成器产生了这些表达式，我想知道哪个是可取的。

Answer 1

来自在这里。

（ 使用无法与点表示法一起使用的字符：

  var foo = myform.foo []; //错误的语法
var foo = myform [“ foo []”]; //正确的语法
 

包括非ASCII（UTF-8）字符，如myForm [“ダ”]（更多示例< /a>）。

其次，在处理时方括号符号很有用
以可预测方式变化的属性名称：

  for（var i = 0; i＆lt; 10; i ++）{
  某个功能（myform [“ myControlnumber” + i]）;
}
 

综述：

• dot符号的写入速度更快，阅读更清晰。
• 方括号符号允许访问包含的属性
  特殊字符和选择
  使用变量的属性

---

的另一个示例是无法与点表示法一起使用的字符属性名称，其本身包含dot 。

例如，JSON响应可以包含一个称为bar.baz的属性。

var foo = myResponse.bar.Baz; // incorrect syntax
var foo = myResponse["bar.Baz"]; // correct syntax

Answer 2

括号符号允许您通过存储在变量中的名称访问属性：

var obj = { "abc" : "hello" };
var x = "abc";
var y = obj[x];
console.log(y); //output - hello

obj.x在这种情况下无法使用。

Answer 3

在JavaScript中访问属性的两种最常见方法是带有点和方括号。 value.x和value [x]访问Value上的属性，但不一定是同一属性。 区别在于X的解释方式。使用点时，点之后的零件必须是有效的变量名称，并且直接名称属性。使用方括号时，评估括号之间的表达式以获取属性名称。 value.x获取名为“ x”的值的属性，而值[x]试图评估表达式x并将结果用作属性名称。

因此，如果您知道您感兴趣的属性被称为称为“长度”，您说value.length。如果要提取由变量i中持有的值命名的属性，则说value [i]。而且，由于属性名称可以是任何字符串，如果要访问名为“ 2”或“ John Doe”的属性，则必须使用方括号：value value [2]或value [“ John Doe”]。即使您提前知道属性的精确名称，也是如此，因为“ 2” and “ John Doe”都是有效的变量名称，因此不能是通过点表示法访问。

在数组的情况下

阵列中的元素存储在属性中。由于这些属性的名称是数字，我们通常需要从变量中获取它们的名称，因此我们必须使用括号语法访问它们。 阵列的长度属性告诉我们它包含了多少个元素。此属性名称是一个有效的变量名称，我们提前知道其名称，因此要查找数组的长度，您通常会编写array.length.length，因为这比array更易于编写[“长度”]。

Answer 4

class ）。

某些关键字（例如

//app.users is a hash
app.users.new = {
  // some code
}

DOT表示法不适用于Internet Explorer 8中的 在Windows XP上的IE8上，我没有尝试过其他环境）。简单的解决方案是切换到括号符号：

app.users['new'] = {
  // some code
}

Answer 5

foo.bar和foo [“ bar”]访问foo上的属性，但不一定是同一属性。区别在于如何解释bar。使用点时，点之后的单词是属性的字面名称。使用方括号时，评估括号之间的表达式以获取属性名称。而foo.bar获取
值命名“ bar”的属性，foo [“ bar”]试图评估表达式“ bar”并使用结果，转换为字符串，作为属性名称。

如果我们采用此对象，请点表示法的限制

：

const obj = {
  123: 'digit',
  123name: 'start with digit',
  name123: 'does not start with digit',
  $name: '$ sign',
  name-123: 'hyphen',
  NAME: 'upper case',
  name: 'lower case'
};

使用点表示法访问其属性

obj.123;      // ❌ SyntaxError
obj.123name;  // ❌ SyntaxError
obj.name123;  // ✅ 'does not start with digit'
obj.$name;    // ✅  '$ sign'
obj.name-123;  // ❌ SyntaxError
obj.'name-123';// ❌ SyntaxError
obj.NAME; // ✅ 'upper case'
obj.name; // ✅ 'lower case'

，但这些都不是括号符号的问题：

obj['123'];     // ✅ 'digit'
obj['123name']; // ✅ 'start with digit'
obj['name123']; // ✅ 'does not start with digit'
obj['$name'];   // ✅ '$ sign'
obj['name-123']; // ✅ 'does not start with digit'
obj['NAME']; // ✅ 'upper case'
obj['name']; // ✅ 'lower case'

使用变量访问变量：

const variable = 'name';
const obj = {
  name: 'value'
};
// Bracket Notation
obj[variable]; // ✅ 'value'
// Dot Notation
obj.variable; // undefined

Answer 6

一般来说，他们做同样的工作。
然而，括号符号为您提供了使用点符号无法做的事情的机会，例如，

var x = elem["foo[]"]; // can't do elem.foo[];

可以将其扩展到任何包含特殊字符的属性。

Answer 7

如果属性名称具有特殊字符，则需要使用括号：

var foo = {
    "Hello, world!": true,
}
foo["Hello, world!"] = false;

除此之外，我想这只是一个品味问题。恕我直言，点符号较短，它更明显地是属性而不是数组元素（尽管当然JavaScript无论如何都没有关联阵列）。

Answer 8

使用这些符号时要小心：
例如。如果要访问窗口父母中存在的功能。
在IE中：

window['parent']['func']

或

window.['parent.func']

我们可以使用：

window['parent']['func'] 

访问

window.parent.func 

它

Answer 9

时，您必须使用方括号符号

1. 当属性名称为编号 。

     var ob = {
     1：“一个”，
     7：'七'
   }
   OB.7 // Syntaxerror
   OB [7] //“七”
    

2. 属性名称具有特殊字符。

     var ob = {
     “这是一个”：1，
     “这是七个”：7，
   }  
   OB。
   ob ['这是一个'] // 1
    

3. 属性名称分配给变量，您要访问
   属性值通过此变量。

     var ob = {
     “一个”：1，
     “七”：7，
   }
   
   var _seven ='七';
   ob._seven //未定义
   OB [_seven] // 7
    

Answer 10

括号符号可以使用变量，因此在两个点表示法无法正常工作的情况下很有用：

1）当属性名称被动态确定时（当确切的名称在运行时不知道时）。

2）使用for ..在循环中浏览对象的所有属性。

资料来源： https：// /docs/web/javascript/guide/working_with_objects

Answer 11

[]表示法很有帮助：

如果您的对象是动态的，并且在键中可能会有一些随机值，例如number 和 [] 例如 -

var a = {1：3};

现在，如果您尝试访问a.1，它将通过错误，因为它是错误的，因为它是期待那边的弦。

Answer 12

点表示法总是可取的。如果您使用的是一些“智能” IDE或文本编辑器，它将显示该对象的未定义名称。
仅当您的名称具有像破折号或类似的东西无效时，仅使用括号符号。而且，如果名称存储在变量中。

Answer 13

让我添加其他方形符号的用例。如果要在对象中访问x-proxy的属性，则-将被错误解释。它们是其他一些情况，例如空间，点等，点操作对您无济于事。同样，如果您在变量中具有键，则仅访问对象中键值的唯一方法是按括号表示法。希望您获得更多背景。

Answer 14

点符号失败的一个示例

json = {

   "value:":4,

   'help"':2,

   "hello'":32,

   "data+":2,

   "

Answer 15

或者，当您想动态更改元素的类动作时：

// Correct

showModal.forEach(node => {
  node.addEventListener(
    'click',
    () => {
      changeClass(findHidden, 'remove'); // Correct
    },
    true
  );
});

//correct
function changeClass(findHidden, className) {
  for (let item of findHidden) {
    console.log(item.classList[className]('hidden'));// Correct
  }
}

// Incorrect 
function changeClass(findHidden, className) {
  for (let item of findHidden) {
    console.log(item.classList.className('hidden')); // Doesn't work
  }
}

Answer 16

点表示法和括号符号两者都用于访问JavaScript中的对象属性。点符号主要使用，因为它易于阅读和理解。那么，为什么我们应该使用括号符号，那么当时有什么区别？好吧，括号符号[]允许我们使用变量访问对象属性，因为它将方括号内的表达式转换为字符串。

const person = {
  name: 'John',
  age: 30
};

//dot notation
const nameDot = person.name;
console.log(nameDot);
// 'John'

const nameBracket = person['name'];
console.log(nameBracket);
// 'John'

现在，让我们看一个可变示例：

const person = {
  name: 'John',
  age: 30
};

const myName = 'name';
console.log(person[myName]);
// 'John'

另一个优点是点符号仅包含字母数字（和_和$），因此，如果要访问下面的对象（包含' - '，则必须为此使用括号符号））

const person = {
  'my-name' : 'John'
}

console.log(person['my-name']); // 'John'
// console.log(person.my-name); // Error