对象的基本操作
我们先创建一个对象变量,本文档均基于这个对象进行操作
js
var user = {
account:"aaa",
pwd:"123",
isVip:false,
}我们可以先把这个对象输出
js
console.log(user);如果我要输出对象中的某一个属性呢,可以使用 . 这个操作符
js
console.log(user.account);//这里的user.account拿到的就是user对象下的account属性如果我读取一个不存在的属性,并不会报错,而会得到 undefined
js
console.log(user.test);//undefined既然我可以通过 对象名.属性名 拿到某一个属性,从而读取到这个属性的值,那么我直接对这个属性赋值其实也可以修改这个属性
js
user.pwd = "234";//这就完成了属性值的修改当给一个不存在的属性赋值,会添加属性
js
user.age = 18;//这里就添加了一个属性对于 null 或者 undefined 类型的数据,不管是通过
.去访问或设置其属性,都是直接报错,如下:var a = undefined,b = nulla.test = 1;//报错console.log(b.test)//报错
注意,只有原式类型中的 null 和 undefined 不可以增加或读取属性,其他原式类型其实是可以的,例如字符串里本身就自带一个 length 属性用于保存字符串长度,当然,至于为什么数字这种原始类型允许添加属性,这是进阶部分的内容,这里并不涉及。
接下来考虑嵌套对象的访问
js
var user = {
name:"YYY",
address:{
country:"China",
province:"SiChuan",
}
}
console.log(user.address,user.address.country);很显然,对于嵌套的对象,我们只需要多个 . 就可以访问了,此处的 address 就是一个对象,当我们访问 user.address 的时候得到的就是一个对象,我们要再取这个对象里面的 country 只需要 user.address.country 即可。
尾后逗号
JS 对象是支持尾后逗号的,也就是这样
js
var a ={ foo: "bar", baz: "qwerty", age: 42, };
也就是在最后一个属性的末位加上一个逗号,这是一个可选的,所以也可以写成这样 ```js var a =
{ foo: "bar", baz: "qwerty", age: 42 };
这样结尾不加逗号的也可以,这就取决于个人的习惯,并不是强制要求 注:JSON中不允许尾后逗号
接下来看这样一个例子
js
var obj = {
test1:"string",
test2:true,
}
var data = 123;
var obj2 = {
test1:obj.test1,
test2:data,
}在这个例子中,obj2 对象的赋值中,我将其 test2 的值赋为 data 变量,这是可以的,此时 obj2.test2 为 true。同样,obj2.test1 的值为 string。
接下来我们考虑如何删除对象里的一个属性,使用 delete 操作符实现。
js
var test = {
name:"N",
age:12,
}
delete test.name;//删除这个属性
console.log(test);//此时就没有这个属性了一般情况下,我们删除一个属性更常见的做法是将其值设置为
undefined
属性表达式:
在访问属性值或者给属性赋值的时候,我们除了使用 对象名.属性名 以外,还可以使用属性表达式的方式。语法为:对象名["属性名"],这里要注意,属性表达式中中括号内的属性名必须是一个字符串。
有了属性表达式,就可以实现一个比较神奇的功能,如下
js
var obj = {
name:"test",
age:12,
}
var str = "name";
//如果我要访问obj对象内的一个属性,属性名就是str字符串中保存的内容
//obj.str 这样是不行的,这样相当于是访问obj对象中名为str的属性
console.log(obj[str]);//这样就没有问题
str = "age";
console.log(obj[str]);以上做法也是属性表达式最常见的用法,当我们要访问某个对象的属性,但属性名来自于一个字符串变量,那这个时候就只能用属性表达式。
JS 中的属性名
JS 对属性名的要求并不严格,其实从属性表达式也不难发现,属性名本质上其实是一个字符串,哪怕我们写的不是字符串,它也会给我们自动转为字符串,所以其实我们可以把任何字符串都作为属性名,如下所示
js
var obj = {
"?":"test",//特殊字符
"this is a demo":123,//带有空格也可以
"new":true,//关键字也可以
}
console.log(obj["?"],obj["this is a demo"],obj["new"]);从这里我们也不难发现属性表达式的一个新功能,就是对一些带有特殊字符或者比较神奇的属性取值,像上例中如果使用 obj.this is a demo 这玩意儿绝对是取不出来东西的。
这里还有一点需要注意的地方,如果是这种格式,
对象名[属性名]一般是不被允许的,除非这里的属性名本身是一个字符串变量,我们前面提到的要访问属性应该是这种格式对象名["属性名"],但有一种例外情况,就是属性名为数字,假设对象名[0],这种情况下,属性名为数字,它会自动将 0 转变为字符串 0,即"0",相当于访问对象中一个名为"0"的属性。
全局对象
在 JS 大部分宿主环境中,JS 都会提供一个全局对象,这个对象比较特殊,在浏览器环境中,这个对象叫 window,表示当前窗口。
js
console.log(window);//可以输出这个对象这个 window 对象有非常多的属性,保存了非常非常多的属性,这个 window 对象非常神奇,window 对象的所有属性都是可以直接使用的,不需要加上 window,如下所示
js
window.a = 1;
console.log(a);在这个例子中,我给 window 对象添加了一个 a 属性,然后我直接就可以使用 a,不需要像访问对象那样用 window.a,但如果我们用 window.a 其实也可以访问。
其实我们常用的
console.log本质上就是window.console.log
实际上,我们用 var 声明一个变量,实际上就是给 window 对象加上了一个属性
js
var a = 12;
console.log(window.a);如果变量没有被赋初值,那么这个变量并不会覆盖 window 对象上的同名属性
js
var console = 1;//覆盖了 window.console
console.log(window);//此时 console 被覆盖了,不存在 console.log 这个东西,所以报错js
var console;//此处对 console 只声明不赋值,并不会覆盖 window. console
console.log(window);//这里 window. console 还是原来的值,所以没有问题可以这样去理解,如果定义了一个变量,这个变量定义了但是没有赋初值,而这个变量的变量名正好和 window 对象中的属性名重合,那就相当于没有定义这个变量。
js
var name;
console.log(name);上述代码看起来好像会输出 undefined,但实际上输出的应该是一个空字符串,因为 window 对象本身自带了一个名为 name 的属性,值为空字符串,这里定义 name 并没有给 name 赋值,所以并不会覆盖 window 对象原有的 name。
神奇的 name 属性
name 属性比较神奇,看以下代码
js
var name = null;//此时覆盖了window.name,赋值为null
console.log(typeof name);//打印window.name这个属性的数据类型这里输出的结果应该是string,所以这就很神奇了,我命名给name属性赋值了一个null,如果对其使用typeof应该输出object,但实际上输出了字符串,这就是name属性神奇的地方。
不管给name赋值为什么,都会被转换为字符串。这个效果我们自己也可以实现,但需要更多的知识