一分钟带你上手JS对象的基本用法

前言

相信大家对 JavaScript 中的对象都不陌生，而且我们几乎每天都在使用它，那你对对象的认识有多少呢？本章就带大家一起出浅入深的了解 JavaScript 中的对象。

---

一、什么是对象？

到底什么是对象呢？大多数人可能都会脱口而出，一个大括号{}呗。用官方的话来说，在 js 中对象是一组元素的相关属性和方法的集合，所有的事物都是对象，例如：日期，字符串，数字，数组，布尔，函数等。你可以理解为对象就是属性和方法组成的，是一种无序的数据集合，用来描述某个事物的信息。

---

二、怎么声明对象？

对象的声明其实特别简单，以下为两种常见的声明方式。

1. 直接声明

let obj = {}

2. 通过 new 关键字创建

let obj2 = new Object

当然，声明对象的方式远不止上面两种，还有很多其它的方式，例如通过构造函数、工厂函数、混合模式、原型模式等等，感兴趣的同学可以去了解一下。

---

三、对象是如何访问内部属性的？

对象.属性
对象['属性']

---

四、如何遍历对象？

let obj = {
  id: "001",
  name: "小欧兰",
  age: "18",
  sex: "女",
};
for (let i in obj) {
  console.log(i); //所有属性名
  console.log(obj[i]); //所有属性值
  console.log(`${i}:${obj[i]}`); //所有属性名和属性值
}

---

五、如何合并多个对象？

1. Object.assign(target,sources) 浅拷贝

第一个值是目标对象，第二个值是源对象，返回值为目标对象。需要注意的是对象中有同名属性会被后面的对象属性值覆盖。

let obj = {
  id: "001",
  name: "小欧兰",
  age: "18",
  sex: "女",
};
let obj1 = {
  old: "12",
  cki: "no",
  sex: "男",
};
const objs = Object.assign(obj, obj1);
console.log(objs);

控制台打印

---

2. 扩展运算符（…）es6

扩展运算符(…)是 ES6 的语法，用于取出参数对象的所有可遍历属性，然后拷贝到当前对象之中。需要注意的是对象中有同名属性会被后面的对象属性值覆盖。

let obj = {
  id: "001",
  name: "小欧兰",
  age: "18",
  sex: "女",
};
let obj1 = {
  old: "12",
  cki: "no",
  sex: "男",
};
const objs = { ...obj, ...obj1 };
console.log(objs);

控制台打印

---

除此之外，你还可以使用 lodash 工具实现对象的合并，感兴趣的同学可以去了解一下。

---

六、如何判断对象是否为空？

1. JSON.stringify()

将 javaScript 值转换为 JSON 字符串，再判断该字符串是否为空对象。

// true 为空 false 不为空
let obj = {};
let arr = JSON.stringify(obj) == "{}";
console.log(arr); // true

---

2. Object.keys()

Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致。参数是要返回其枚举自身属性的对象， 返回值是一个表示给定对象的所有可枚举属性的字符串数组。

// true 为空 false 不为空
let obj = {};
let arr = Object.keys(obj);
console.log(arr.length == 0); // true

---

3. for in

for in 可以任意顺序遍历一个对象的除 symbol 以外的可枚举属性。

// true 为空 false 不为空
let obj = {};
let arr = function () {
  for (let key in obj) {
    return false;
  }
  return true;
};
console.log(arr()); // true 为空

---

七、如何将对象所有属性值清空？

Object.keys(this.ruleForm).forEach(
  (key) => (this.ruleForm[key] = "")
);

---

八、对象中的增删改查？

对象的原始状态

let obj = {
  id: "001",
  name: "小欧兰",
  age: "18",
  sex: "女",
};

1. 增

obj.site = "北京";
obj["site"] = "北京";

控制台打印

---

2. 删

delete obj.name;
delete obj["name"];
// es6 
Reflect.deleteProperty(obj, "name");

控制台打印

---

2.1 Reflect.deleteProperty()

Reflect.deleteProperty() 方法允许删除对象上的属性。如果该方法返回 true，则表示删除该属性成功。否则，它返回 false。

---

用法:

Reflect.deleteProperty(target, propertyKey)

---

参数：

• target 要删除其属性的目标对象

• propertyKey 要删除的属性的名称

---

返回值：

布尔值表示该属性是否已成功删除。

---

3. 改

obj.id = "002";
obj["id"] = "002";

控制台打印

---

修改属性名

let a = JSON.parse(JSON.stringify(obj).replace(/id/g, "code")); //将对象中属性名为 id 的修改成 code

控制台打印

有关于 replace 方法的详细用法，可访问 JavaScript replace() 方法 查看。

---

4. 查

查的话直接通过 log 即可。

console.log(obj);

控制台打印

---