简介

任何事物都可以看作一个对象，用属性描述它的特征，用方法描述它的行为，如下方代码所示：

let obj = {
  name: "朝阳",
  sayHi: function () {
    console.log("你好！");
  },
};
typeOf obj  // object
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

变量 obj 被赋值了一个对象，它有属性 name，属性值为 朝阳，方法为 sayHi，具有在控制台打印 你好！ 的行为。

JS 内部还定义了很多特殊的对象，如 Function 函数、Array 数组、Date日期、RegExp 正则表达式、Error 报错、Math 数学计算等。

对象的储存原理

对象的值保存在堆内存中，变量 obj 内存储的是对象的引用（对象在堆内存中存储的地址）

常用的对象操作

创建对象

// 创建空对象：自身无任何属性和方法的对象 （因空对象继承自 Object ，所以还具有一些继承来的方法和属性）
let obj1 = {};

// 创建自带属性和方法的对象
let obj2 = {
  // 属性
  name: "朝阳",
  //   方法
  sayHi: function () {
    console.log("你好！");
  },
};
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.

ES6 的简写方式

  • 对象名和属性名相同时，name:name 可简写为 name
  • 方法的 :function 可省略不写
let name = "朝阳";
let obj2 = {
  name,
  sayHi() {
    console.log("你好！");
  },
};
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

ES6 开始支持动态属性和方法
即用变量作为对象的属性和方法名

let type = "book";
let obj = {
  [type + "Name"]: "《朝阳传》",
  [type + "Sale"]: function () {
    console.log("免费领取啦！");
  },
};
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

访问属性

// 属性为字符串时，用 . 
obj.name // 得到属性值 '朝阳'

let type = 'hobby'
// 属性为变量时，用 []
obj[type]
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 访问对象中不存在的属性，返回 undefined

在对象的方法内部访问该对象的属性，可以使用this，此时 this 就是当前对象。

let me = {
  name: '朝阳',
  sayName: function() {
    return this.name;
  }
};
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
获取对象所有的属性 Object.keys()
let obj = {
    a: 1,
    b: 2
}；
let keys = Object.keys(obj) // ['a', 'b']
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
获取对象所有的属性值 Object.values()
let obj = {
    a: 1,
    b: 2
}；
let values = Object.values(obj) // [1, 2]
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

添加属性

// 属性为字符串时，用 . 
obj.age = 35

let type = 'hobby'
// 属性为变量时，用 []
obj[type] = '编程'
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.

删除属性

// 属性为字符串时，用 . 
delete obj.age

let type = 'hobby'
// 属性为变量时，用 []
delete obj[type]
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.

遍历对象 for in

for (let key in obj) {
    console.log("属性名:" + key );
    console.log("属性值:" + obj[key ]);
}
  • 1.
  • 2.
  • 3.
  • 4.

合并对象 Object.assign

let a = { gender: "male"}
Object.assign(a, { age: 25 })
console.log(a)  // {"age":25, "gender":"male"}
  • 1.
  • 2.
  • 3.
  • 第一个参数是发起合并的对象
  • 之后的参数是被合并的对象
  • 可以一次合并多个对象
let obj = { a: 1 };
Object.assign(obj, { b: 2 }, { c: 3 });
console.log(obj); // { a: 1, b: 2, c: 3 }
  • 1.
  • 2.
  • 3.
  • Object.assign() 的返回值为合并后的对象
  • Object.assign() 有副作用（会改变原对象）

拷贝对象

浅拷贝

let obj1 = {num:1}
let obj2 = obj1
  • 1.
  • 2.

此时变量 obj2 内存的是对象 {num:1} 的地址，变量 obj1 内存的也是对象 {num:1} 的地址，当变量改变时，obj1 和 obj2 都会改变。

深拷贝
为了避免变量后期改变时，对拷贝后的对象产生影响，经常需要进行深拷贝。

// 简易深拷贝 -- 存在缺陷，但对大部分简单的对象适用
let obj2 = JSON.parse(JSON.stringify(obj1));
  • 1.
  • 2.

更多深拷贝的方法见

【实战】判断变量是否为空对象

if(JSON.stringify(obj)==="{}"){
  // 是空对象
}
  • 1.
  • 2.
  • 3.