【JavaScript 06】对象生成键名属性方法链式引用尾部逗号动态创建属性对象引用内存地址表达式语句圆括号里唯表达式 eval语句属性读取赋值删除存在遍历 with

本文链接：https://blog.youkuaiyun.com/m0_62629457/article/details/131890274

对象

0 说在前面

数据类型部分我们已经复习了特殊类型null和undefined以及原始类型数值，字符串和布尔值，现在我们便要进入到合成类型也就是对象的复习，首先我们来看狭义的对象

1 概述

1.1 对象生成

**对象（object）是JS的核心概念，同时是最重要的数据类型
对象是一组键值对（key-value）**的集合

var obj = {
	foo: 'Hello',
	bar: 'World'
};

以上代码，通过大括号定义了一个对象并将之赋值给变量obj（也即变量obj指向一个对象）
对象内部包含两个键值对（成员）
可以看见第一个键值对是 foo: ‘Hello’，其中foo是键名（成员名），字符串’Hello’是键值（成员值）
二者之间使用冒号分隔
而两个键值对之间使用逗号分隔

1.2 键名

对象的所有键名都是字符串（ES6引入Symbol值也可以作为键名），因此加不加引号都ok，也相当于自动转为字符串
上面的代码等价于：

var obj = {
	'foo': 'Hello',
	'bar': 'World'
};

若键名是数值，则会被自动转为字符串

var obj = {
	1: 'a',
	3.2: 'b',
	1e2: true,
	1e-2: true,
	.234: true,
	0xFF: true
};

obj
// Object {
//   1: "a",
//   3.2: "b",
//   100: true,
//   0.01: true,
//   0.234: true,
//   255: true
// }

obj['100'] // true

以上代码对象obj的所有键名看似是数值，实际上都被JS自动转成了字符串

如果键名不是数值，同时不符合不符合标识符的条件（如第一个字符为数字，或者含有空格或运算符），则必须加上引号，否则会报错

// 报错
var obj = {
	1p: 'Hello World'
};

// 不报错
var obj = {
	'1p': 'Hello Zane',
	'h w': 'Hello Zane',
	'p+q': 'Hello Zane'
};

总而言之就是对象的键名若不是数值且不符合标识符的条件则必须加上引号

对象的每个键名（成员名）又可称为属性（property）
其键值可以是任何数据类型
如果一个属性的键值是函数，则通常将此属性称为方法，并且可以像函数一样调用

var obj = {
	p: function (x) {
		return 2 * x;
	}
};

obj.p(1) // 2

以上代码中对象obj的属性p便指向一个函数

若属性的值依旧是一个对象，则形成链式引用

var o1 = {};
var o2 = { bar: 'hello' };

o1.foo = o2;
o1.foo.bar // "hello"

上面代码中，对象o1的属性foo指向对象o2，就可以链式引用o2的属性

对象的属性之间用逗号分隔，最后一个属性后面可以加尾部逗号（trailing comma），也可以不加

var obj = {
	p: 123,
	m: function () {...},
};

同时属性可以动态创建，不需要在对象声明时就指定

var obj = {};
obj.foo = 123;
obj.foo // 123

上面代码中直接对obj对象的foo属性赋值，结果就在运行时创建了foo属性

1.3 对象引用

若不同的变量名指向同一个对象，则都是作为此对象的引用，也即指向同一个内存地址
修改其中的一个变量会影响到其他所有的变量

var o1 = {};
var o2 = o1;

o1.a = 1;
o2.a // 1

o2.b = 2;
o1.b // 2

o1与o2指向同一个对象，因此为其中任意一个变量添加属性，另一个变量都可以读写此属性
而若取消某个变量对原对象的引用则不会影响到另一个变量

var o1 = {};
var o2 = o1;

o1 = 1;
o2 // {}

之前学过引用数据类型的我们知道，这种引用只适用于对象
若两个变量指向同一个原始类型的值，则变量都是值的拷贝

var x = 1;
var y = x;

x = 2;
y // 1

上面的代码中，当x的值发生变化后，y的值并不变，这就表示y和x并不是指向同一个内存地址

1.4 表达式or语句

{ foo: 123 }

JS 引擎读到以上代码，将发现其可能具有两种含义
第一种可能是此为一个包含foo属性的对象，也即一个表达式
第二种可能是此代表一个代码区块，其中有一个标签foo指向表达式123，也即一个语句

为了避免歧义，JS遇到这种情况一律解释为代码块（语句）
如

{ console.log(123) } // 123

上面的语句被解释为代码块，也只有被解释为代码块才能执行

若要解释为对象，则需要再大括号外加上圆括号
因为圆括号里面只能是表达式，可以确保大括号被解释为对象（表达式）

({ foo: 123}) // 正确
({ console.log(123) }) // 报错

此种差异可以通过eval语句（用于对字符串求值）反映

// 没有添加圆括号，被解释为代码块（语句）
eval('{foo: 123}') // 123

// 添加圆括号，被解释为对象
eval('({foo: 123})') // {foo: 123}

2 属性操作

2.1 属性读取

读取对象的属性有两种方法：

使用点运算符
使用方括号运算符

var obj = {
	p: 'Hello World'
};

obj.p // "Hello World"
obj['p'] // "Hello World"

注意若要使用方括号运算符，则键名必须使用引号，否则会被当做变量处理（这实际上也给对象属性操作添加了变量控制形式）

var foo = 'bar';

var obj = {
	foo: 1,
	bar: 2
};

obj.foo // 1
obj[foo] // 2

上面代码中，引用对象obj的foo属性时，如果使用点运算符，foo就是字符串
如果使用方括号运算符，但是不使用引号，那么foo就是一个变量，指向字符串bar

方括号运算符内部还可以使用表达式

obj['hello' + ' world']
obj[3 + 3]

数字键可以不使用引号，其可以自动转为字符串

var obj = {
	0.7: 'Hello World'
};

obj[0.7] // "Hello World"
obj['0.7'] // "Hello World"

上面代码中，对象obj的数字键0.7，加不加引号都可以，因为会被自动转为字符串
但是要注意数值键名（成员名，属性名，方法名）不能使用点运算符（因为会被认为是小数点），只能使用方括号运算符

var obj = {
	123: 'hello'
};

obj.123 // 报错
obj[123] // "hello"

在这里插入图片描述

2.2 属性赋值

点运算符和方括号运算符，不仅可以用来读取值，还可以用来赋值

var obj = {};

obj.foo = 'Hello';
obj['bar'] = 'World';

JS 允许属性的后绑定，也即可以在任意时刻新增属性

2.3 属性查看

查看一个对象本身（也即不包括继承）的所有属性，可以使用Object.keys方法

var obj = {
	key1: 1,
	key2: 2
};

Object.keys(obj);
// ['key1', 'key2']

2.4 属性删除

delete命令用于删除对象的属性，成功后返回true

var obj = { p: 1};
Object.keys(obj) // ['p']

delete obj.p // true
obj.p // undefined
Object.keys(obj) // []

上面代码中，delete命令删除对象obj的p属性
删除后再读取p属性就会返回undefined，且Object.keys方法的返回值也不再包括该属性

注意删除一个不存在的属性，delete不报错，而且返回true

只有一种情况delete命令返回false，也即属性存在且不能删除

var obj = Object.defineProperty({}, 'p', {
	value: 123,
	configurable: false
});

obj.p // 123
delete obj.p // false

另外需要注意的是，delete命令只能删除对象本身的属性，无法删除继承的属性

var obj = {};
delete obj.toString // true
obj.toString // function toString() { [native code] }

上面代码中，toString是对象obj继承的属性，虽然delete命令返回true，但该属性并没有被删除，依然存在
同时也可证明：即使delete返回true，该属性依然可能读取到值

2.5 属性存在

in 运算符可以用于检查对象是否包含某个属性（键名），是则返回true，否则返回false
其左边是字符串表示属性名，右边是对象

var obj = { p: 1 };
'p' in obj // true
'toString' in obj // true

in运算符的一个问题是不能识别哪些属性是对象自身的，哪些属性是继承的
此时可以使用对象的 hasOwnProperty 方法判断是否为自身属性

var obj = {};
if ('toString' in obj) {
	console.log(obj.hasOwnProperty('toString')) // false
}

2.6 属性遍历

for…in循环用于遍历对象的全部属性

var obj = {a: 1, b: 2, c: 3};

for (var i in obj) {
	console.log('键名：', i);
	console.log('键值：', obj[i]);
}
// 键名： a
// 键值： 1
// 键名： b
// 键值： 2
// 键名： c
// 键值： 3

for…in循环的使用需要注意两点：

遍历的是对象所有**可遍历（enumerable）**的属性，将跳过不可遍历的属性
不仅遍历对象自身的属性，而且遍历继承的可遍历属性

如果继承的属性是可遍历的，那么就会被for…in循环遍历到
但是一般情况下都是只想遍历对象自身的属性，所以使用for…in的时候，应该结合使用hasOwnProperty方法，在循环内部判断一下某个属性是否为对象自身的属性

var person = { name: 'zane' };

for (var key in person) {
	if  (person.hasOwnProperty(key)) {
		console.log(key);
	}
}
// name

3 with语句

with语句的格式

with (对象) {
	语句;
}

作用是操作同一个对象的多个属性时，能够提供书写方便

var obj = {
	p1: 1,
	p2: 2,
};
with (obj) {
	p1 = 4;
	p2 = 5;
}
// 等价于
obj.p1 = 4;
obj.p2 = 5;

---

with (document.links[0]) {
	console.log(href);
	console.log(title);
	console.log(style);
}
// 等价于
console.log(document.links[0].href);
console.log(document.links[0].title);
console.log(document.links[0].style);

注意，如果with区块内部有变量的赋值操作，必须是当前对象已经存在的属性
否则会创造一个当前作用域的全局变量

var obj = {};
with (obj) {
	p1 = 4;
	p2 = 5;
}

obj.p1 // undefined
p1 // 4

上面代码中，对象obj并没有p1属性，对p1赋值等于创造了一个全局变量p1
正确的写法应该是，先定义对象obj的属性p1，然后在with区块内操作它
错误的原因便是with区块没有改变作用域，它的内部依然是当前作用域
在这里插入图片描述
这会导致with语句绑定对象不明确的弊病

with (obj) {
	console.log(x);
}

单纯从上面的代码块，根本无法判断x到底是全局变量，还是对象obj的一个属性
这非常不利于代码的模块化以及debug
同时编译器无法对此代码进行优化，只能等到运行时判断，也即减慢了运行速度
因此我们建议不使用with语句，而是考虑使用一个临时变量代替

with (obj1.obj2.obj3) {
	console.log(p1 + p2);
}

// 可以写成
var temp = obj1.obj2.obj3;
console.log(temp.p1 + temp.p2);