JS中的括号和点号

迈不过友情╰ 2024-03-31 10:47 50阅读 0赞

使用中括号运算符`[]`可以存取数组元素值，使用点运算符`.`可以存取对象属性值。其语法格式如下：

> 1.  `a.b //点运算符的用法`
> 2.  `c[b] //中括号运算符的用法`

操作数 a 表示对象，操作数 b 表示属性名。如果属性值是函数，应增加小括号，实现方法调用操作。注意，操作数 b 是不能使用字符串或字符串表达式的。

操作数 c 可以是数组，也可以是对象。具体说明如下：

*  如果左侧操作数是数组，则中括号包含的操作数应是一个值为非负整数的表达式，作为下标值，用来指定元素在数组中的位置。
 *  如果左侧操作数是对象，则中括号包含的操作数应是一个值为字符串的表达式，映射对象的属性名。

中括号和点号应该属于运算符范畴，但是新版本 JavaScript 把它们视为语言核心命令来使用。

示例1

使用中括号运算符`[]`不仅可以存取数组元素的值，也可以存取对象属性值。  
1) 存取数组元素的值。

> 1.  `var a = [1,"x",true,{}]; //定义数组a`
> 2.  `console.log(a[1]); //读取第二个元素的值，返回字符串"x"`
> 3.  `a[3] = false; //为第4个元素写入false值`
> 4.  `console.log(a[3]); //第四个元素原来的值被覆盖，返回false`

2) 存取对象属性的值。

> 1.  `var a = { //定义对象a`
> 2.  `x : 1, //定义对象属性x`
> 3.  `y : function() { //定义对象方法y`
> 4.  `return 2; //返回值`
> 5.  `}`
> 6.  `};`
> 7.  `console.log(a["y"] ()); //调用方法y，返回2`
> 8.  `a["x"] = 3; //重置属性x的值`
> 9.  `console.log(a["x"]); //读取属性x的值，返回3`

示例2

使用点运算符`.`可以存取对象属性的值，它比中括号灵活、方便，因为点运算符右侧可以直接指定属性名称，而不是属性名称的字符串。

> 1.  `var a = {x : 1}; //定义对象a`
> 2.  `console.log(a.x); //返回1。读取对象属性a的值`
> 3.  `a.x = 2; //重写对象属性a的值`
> 4.  `console.log(a.x); //返回2。再次读取对象属性a的值`

对于中括号运算符，可以通过变量或字符串表达式来传递特定值。

> 1.  `var b = "x"; //把属性x的标识符名作为字符串存储在变量b中`
> 2.  `var a = {x : 1}; //定义对象a`
> 3.  `console.log(a[b]); //返回1。通过变量间接获取对象a的属性x的值`
> 4.  `console.log(a.b); //返回undefined。点运算符无法识别变量引用`

示例3

下面两种方法都可以读取数组 a 的第二个元素值。虽然说 a\[“1”\] 中参数是一个字符串，但是中括号运算符能够把它转换为数字。

> 1.  `var a = ["x",true,{}]; //定义数组`
> 2.  `console.log(a[1]); //返回true`
> 3.  `console.log(a["1"]); //返回true`

如果中括号运算符的第二个操作数为对象，会调用 toString() 方法把对象转换为字符串表示。如果是布尔值 true 和 false，将被转换为字符串 “true” 和 “false”，而不是 1 和 0。

> 1.  `var a = { //定义对象`
> 2.  `"true" : 1, //定义属性“true”`
> 3.  `"false" : 0 //定义属性“false”`
> 4.  `}`
> 5.  `console.log(a[true]); //返回1。把布尔值true转换为字符串“true”`
> 6.  `console.log(a[false]); //返回0。把布尔值false转换为字符串“false”`

示例4

在不确定对象属性时，使用中括号运算符来遍历对象属性会很方便，但如果使用点运算符则容易引发异常。下面代码使用中括号运算符变量客户端 window 对象的所有属性以及属性值。

> 1.  `for(o in window){`
> 2.  `document.write("window." + o + "=" + window[o] + "<br />");`
> 3.  `}`