帮你搞清楚对付js里对象的小妙招^_^

JavaScript 对象核心知识学习笔记🔥

一、对象基础概念

在 JavaScript 中，对象是属性与方法的集合，是前端最核心的数据结构，使用{}定义，以key:value键值对的形式存储数据，是我们开发中处理数据、封装逻辑的基础。

二、对象创建与属性操作

1. 创建对象

arduino 复制代码

const ren = {
  name: "公鸡斗士",
  age: 10000,
  sex: "男",
  cultivation: "化神大佬",
  Residence: "哥布林巢穴隔壁的隔壁"
};

2. 访问对象属性

arduino 复制代码

// 点语法（开发最常用）
console.log('姓名：' + ren.name);

// 方括号语法（支持变量/字符串属性名）
console.log('年龄：' + ren['age']);
console.log('居住地：' + ren.Residence);

3. 修改与新增属性

ini 复制代码

// 修改已有属性
ren.cultivation = '练气小垃圾';
console.log('修为：' + ren.cultivation);

// 新增属性（直接赋值即可自动创建）
ren.MaritalStatus = '单身狗一条';
console.log('有无道侣：' + ren.MaritalStatus);

4. 删除属性（推荐写法）

不建议使用delete操作符（会改变对象属性数量），优先将属性值设为undefined：

ini 复制代码

ren.Residence = undefined;
console.log(ren);

三、对象方法与 this 指向

对象中可以定义函数，称为对象方法 ，ES6 支持简洁写法，this关键字指向当前对象本身：

javascript 复制代码

const ren2 = {
  name: "李刚刚",
  age: 1000,
  sex: "男",
  cultivation: "化神大佬",
  Residence: "哥布林巢穴",
  // 传统方法写法
  say: function(){
    console.log('刚刚："咕咕嘎嘎"');
  },
  // ES6方法简写（企业开发主流写法）
  say2(){
    console.log('刚刚："啊~吗~特~拉~斯~"');
  },
  // 使用this访问对象自身属性
  say3(){
    console.log(`刚刚："我是${this.cultivation}"`);
  }
};

// 调用对象方法
ren2.say();
ren2.say2();
ren2.say3();

四、对象遍历（for...in 循环）

使用for...in可以快速遍历对象的所有可枚举属性但是有所缺点可读性差，太机械了采用一下是js es6 新增for循环不需要计数

javascript 复制代码

for (let key in ren2) {
  console.log('属性名：' + key + '，属性值：' + ren2[key]);
}

五、Symbol 属性名：避免属性冲突

Symbol 是 ES6 新增的唯一标识符，作为属性名可以彻底避免属性名冲突，适合团队协作开发场景：

ini 复制代码

// 创建Symbol类型属性名
const weaponType = Symbol('武器类型');
const skillDamage = Symbol('大招伤害');

const ren3 = {
  name: "钟离",
  age: 5000,
  [weaponType]: '长枪',
  [skillDamage]: 9999
};

// 访问Symbol属性
console.log(ren3[weaponType]);
console.log(ren3[skillDamage]);

六、核心难点：对象是引用类型

JavaScript 对象属于引用类型，变量存储的是对象的内存地址，而非对象本身，这是新手最容易踩坑的知识点：

ini 复制代码

const w1 = { name: '甘雨' };
const w2 = w1; // 复制内存地址，指向同一个对象
const w3 = { name: '甘雨' }; // 新建对象，分配新的内存地址

// 对象比较：对比的是内存地址，而非属性值
console.log(w1 === w2); // true
console.log(w1 === w3); // false

// 修改其中一个变量指向的对象，另一个变量的结果也会同步变化
w2.name = '椰羊';
console.log(w1.name); // 椰羊

七、对象类型转换：Symbol.toPrimitive

通过Symbol.toPrimitive方法可以自定义对象转换为原始值的规则，适配特殊业务场景：

javascript 复制代码

const x = {
  name: '甘雨',
  age: 3000
};

// 自定义对象转换为字符串的规则
x[Symbol.toPrimitive] = function () {
  return this.name;
};
console.log(x + '是我老婆');

// 自定义对象转换为数字的规则
x[Symbol.toPrimitive] = function () {
  return this.age;
};
console.log('甘雨今年' + x + '岁');

八、开发必备：可选链操作符？.

可选链操作符?.用于安全访问对象属性、调用方法，避免因属性 / 方法不存在导致代码崩溃，是前端开发的必备语法：

javascript 复制代码

const s1 = {
  name: null,
  age: 90,
  say() {
    console.log(`我是${this.name}`);
  },
  say1: null
};

// 安全访问对象属性
console.log(s1?.name);
console.log(s1?.address);

// 安全调用对象方法
s1?.say?.();
console.log(s1?.say1?.());

九、实战案例：fetch 请求 + DOM 渲染对象数据

结合前后端交互场景，请求对象数组数据并渲染到页面表格，还原真实开发流程：

ini 复制代码

let users = [];

// 请求后端接口数据
fetch("http://localhost:3000/users")
  .then(data => data.json())
  .then(data => {
    users = data;
    // 获取表格tbody节点
    const oBody = document.querySelector('.table tbody');
    let i = 1;
    // 遍历对象数组，拼接HTML渲染表格
    for (let user of users) {
      oBody.innerHTML += `
        <tr>
          <td>${i}</td>
          <td>${user.name}</td>
          <td>${user.hometown}</td>
          <td>${user.nickname}</td>
        </tr>
      `;
      i++;
    }
  });

十、学习总结

对象使用{}定义，由键值对属性和对象方法组成，是 JS 最核心的数据结构；
属性访问支持点语法obj.key和方括号语法obj[key]两种方式；
对象方法推荐使用 ES6 简写形式，this关键字指向当前对象本身；
for...in循环用于遍历对象，Symbol用于创建唯一属性名，避免冲突；
对象是引用类型，赋值与比较均基于内存地址，而非属性值；
可选链操作符?.是开发中防止空值报错的核心语法；
可结合fetch请求与 DOM 操作，完成对象数据的页面渲染，贴近真实开发场景。

吃透 JS 对象的相关知识点，后续学习数组、函数、前端框架都会事半功倍，继续朝着 AI 全栈工程师的目标前进！