JS学习笔记（四）对象类型、对象属性的增删改查、对象序列化

JS学习笔记（四）

本系列更多文章，可以查看专栏 JS学习笔记

---

---

一、创建对象

对象类型是引用数据类型之一。

对象Object类型是一种可变值，原始类型（Number、BigInt、String、Boolean、Null、Undefined、Symbol）是不可变值。

方式1：使用Object()创建空对象

let obj = Object()

方式2：使用字面量创建空对象

let obj = {}

方式3：使用字面量创建对象，并添加属性值

语法：  let 对象名 = {属性名:属性值,……};

通常，属性名可以为任何值，属性值如果是字符串需要加引号

let obj = { 姓名: "张三", 年龄: 18, favourite: "榴莲" };

---

二、添加 / 修改对象属性

1. 添加 / 修改对象属性方法

方式1：使用 . 添加属性，并为属性赋值

语法：  对象名.属性名 = 属性值;

obj.name = "张三"

方式2：使用 [] 添加属性，并为属性赋值

语法：  对象名[属性名] = 属性值;

使用方式2，可以将属性名指定为 外部已经声明的变量、符号Symbol对象、特殊名称

obj["name"] = "张三" // 相当于obj.name="张三"

2. 使用“.”和“[]”添加/修改对象属性值的区别

区别1： 使用 [] 时，属性名如果是普通字符串需要带引号，否则会被认为是变量名

obj1.name = "张三";
obj2[name] = "张三"; // 可以使用 let str = "name"; obj2[str] = "张三";来达到obj1和obj3的效果
obj3["name"] = "张三";

如下图所示：

---

区别2： 对象的属性名通常可以不按照标识符的命名方式，但是如果过于特殊，只能使用 [] 的方式

// 因为属性名不规范，以下两行代码会报错
obj1.123#fe&&??? = "随便";
console.log(obj1.123#fe&&???);
// 改用[]后，注意：用[]方式添加属性值后，需要用[]来读取
obj2["123#fe&&???"] = "随便";
console.log(obj2["123#fe&&???"]);
console.log(obj2);

如下图所示：

---

区别3： . 添加的属性，可以直接 对象名.属性名 来使用属性值; [] 添加的属性，则需要 对象名[属性名] 来使用属性值

---

三、获取对象属性值

1. 获取对象属性值方法

（1）使用字面量 {} 、或者 . 添加的属性，可以直接 对象名.属性名 来使用属性值
（2）使用 [] 添加的属性，需要 对象名[属性名] 来使用属性值

2. 对象类型的内存结构

每创建一个新对象时，会为其开辟一个空间，用于存储变量名和值，其值为存储其内部属性值的空间的地址。
对象类型是可变值，属性和属性值可以改变；未用const申明的对象，存储对象属性名和属性值地址的值，如下图0x11也可以发生改变。

3. 对象之间的相等和全等

（1）当两个对象分开创建时，对象的属性名和属性值完全一致，两个对象不会相等，也不会相等

因为无论是 == ，还是 ===，都是用于比较对象存储属性名及属性值的地址，即上图的0x11

let obj1 = { name: "DD" };
let obj2 = { name: "DD" };
console.log(obj1 == obj2); // false
console.log(obj1 === obj2); // false

使用以下方式创建的两个对象，不仅会相等，也会全等

let obj1 = { name: "DD" };
let obj2 = obj1;
console.log(obj1 == obj2); // true
console.log(obj1 === obj2); // true

（2）当同一变量指向多个对象时，通过一个对象修改此变量，所有对象的属性值都会被修改

let obj1 = { name: "DD" };
let obj2 = obj1;
console.log(obj1); // { name: 'DD' }
console.log(obj2); // { name: 'DD' }
obj2.age = 18;
console.log(obj1); // {name: 'DD', age: 18}
console.log(obj2); // {name: 'DD', age: 18}

但是由于对象类型用let或者var申明后，可以继续使用 obj = null 或者 obj = {属性名：属性值} 重新开辟空间。此时防止不确定某一对象重新开辟空间，造成不确定变量指向哪些对象后，而造成代码编写变复杂，常用 const 来申明变量。

注：使用 const 只会保证对象类型不重新开辟地址（即修改上图中的0x11的值），而不会影响我们增加属性、修改属性值等操作。

---

四、删除对象属性

此部分内容参考 MDN delete操作符

1. delete运算符

delete 对象.属性名
delete 对象[属性名]

使用 delete 运算符可以用于删除指定对象的属性，但是本质上为断开对象和属性之间的联系，不会对属性的属性值进行操作。

const person = {
	name: "张三",
	age: 18,
	sex: "male",
};
let temp = person.age;
console.log("person:", person); // person: {name: '张三', age: 18, sex: 'male'}
console.log("temp:", temp); // temp: 18
delete person.age;
console.log("person:", person); // person: {name: '张三', sex: 'male'}
console.log("temp:", temp); // temp: 18

注：JS中有“垃圾回收”的机制，当某一原始数据类型没有被使用或者一个对象没有任何变量对其引用，都会被垃圾回收。

2. delete使用范围

• （1）任何使用 var 声明的属性不能从全局作用域或函数的作用域中删除。
• （2）全局作用域中的任何函数均不可被删除（无论采用函数声明，函数表达式创建的函数）；在对象内部的函数，可以被删除
• （3）任何用 let 或 const 声明的属性不能够从它被声明的作用域中删除。
• （4）不可设置的 (Non-configurable) 属性不能被移除。 这意味着像 Math, Array, Object 内置对象的属性以及使用 Object.defineProperty() 方法设置为不可设置的属性不能被删除。

---

五、对象的序列化

通常将一个对象，转换成字符串，可以将此字符串在不同语言中传递。
用途：

• 用于数据交换的格式
• 用来编写配置文字

1. JSON类(JavaScript Object Notation）

JSON.stringify(对象);	// 将对象转换为JSON字符串（具体特定格式）
JSON.parse字符串);		// 将字符串转换为对象

const person = {
	name: "张三",
	age: 18,
	sex: "male",
};
let str = JSON.stringify(person);	
console.log(str); // {"name":"张三","age":18,"sex":"male"}
const p = JSON.parse(str);
console.log(typeof p, p); // object {name: '张三', age: 18, sex: 'male'}

2. JSON字符串

（1）JSON对象 const str = '{}'
（2）JSON数组 const str = '[]'

• JSON字符串中的属性名，必须使用双引号
• JSON字符串中可以识别的类型，包括Number、String、Boolean、Null、Object（{}）、Array（[]）
• JSON对象的格式与JS对象格式基本一致，注：如果属性为最后一个属性，则末尾不可以加逗号

---

结尾

部分内容参考《ECMAScript 6 入门》《JavaScript权威指南》《JavaScript高级程序设计》，如有错误，欢迎评论区指正。