JavaScript 对象拯救计划:从"对象恐惧症"到"对象操纵大师"!

​欢迎来到JavaScript对象宇宙!​

你是否有过这样的经历?

  • 写代码时,变量散落一地,像家里没收拾的袜子,东一只西一只 🧦
  • 想给数据"打包",结果搞出一堆混乱的数组和独立变量,自己都看不懂 🤯
  • 看到别人优雅的代码,对象嵌套对象,像俄罗斯套娃一样工整,而你的代码却像乐高积木散落一地 🧩 别担心!

​JavaScript对象就是你的数据收纳神器!​​ 🧳✨

为什么你需要对象?​

想象一下:

  • ​没有对象​ → 你的代码就像单身公寓,所有东西都挤在一起,毫无隐私可言 🏠🚪
  • ​有了对象​ → 你的代码秒变豪华别墅,数据分层管理,各司其职 🏡✨

​学完对象,你能做什么?​

  • ​组织数据​:让代码像衣柜一样整齐,T恤归T恤,裤子归裤子 👕👖
  • ​封装功能​:把函数和方法打包进对象,像瑞士军刀一样多功能 🔪✨
  • ​玩转API​:轻松处理JSON数据,不再被复杂结构吓到 😎
  • ​进阶OOP​:面向对象编程,让你的代码像乐高一样可拼装 🧱

🤹 ​​对象其实很有趣!​

  • 它们可以​动态添加属性​,像魔法口袋一样想装什么装什么 🎩
  • 它们能​嵌套​,像俄罗斯套娃,对象里面还能藏对象 🪆
  • 它们甚至能​借用方法​,像邻居之间借个酱油一样方便 🏠

创建对象的方法

1、对象字面量

js 复制代码
# var obj = {
    name : 'ZHT'
    age : 18
    console.log(obj['age'])  // 注意如果直接age   age会看成变量   必须加引号
}

2. new Object()

js 复制代码
let obj = new Object()
obj.key1 = value1
obj.key2 = value2

3. 自定义函数构造函数

js 复制代码
//构造函数
var  Person = function (name, age) {
  this.name = name
  this.age = age
}
//调用
var p1 = new Person('ZHT',18)
//输出
console.log(p1)    // person { name: 'ZHT', age: 18 }

用途

  • 当需要批量化生产对象时,使用构造函数

  • 当一个函数被new调用时,这个函数就是构造函数

构造函数命名约定​​:

  • 通常以大写字母开头

  • 这有助于区分普通函数和构造函数

new 关键字的作用​​:

  • 创建一个新对象

  • 将新对象的 __proto__ 指向构造函数的 prototype

  • this 绑定到新对象

  • 如果构造函数没有显式返回对象,则返回 this

对象的一些方法

1、增加属性 : 对象名.属性名 = 属性值

js 复制代码
obj.sex = '男'  //向obj里面增加了一个sex属性,属性值为男。

2、删除属性 : delete 对象名.属性名

js 复制代码
delete obj.age  //删除了obj里面的年龄属性。

3、修改属性 : 对象名.属性名 = 属性值

js 复制代码
obj.name = '小王'  //将obj里面的name属性值修改为'小王'了。

4、查找对象的属性与属性值 : for in 方法

js 复制代码
for (let key in obj) {
  console.log(key)   //输出的是对象的key值即属性
  console.log(obj[key])   //输出的是对象的value值即属性值
}

注意

  • 增加属性和修改属性的方式是一样的,如果对象中有该属性,那么就是修改,反之则是增加

包装类

  • 用户定义的字面量,会包装成对象

  • 所有的包装类对象参与运算,在参与运算时,会被自动拆箱成原始类型

  • 因为js是弱类型语音,所以只有在赋值语句执行时才会判断值的类型, 当值被判定为原始类型时,就会自动将包装对象上的属性移除

js 复制代码
var num = 123  //   V8会执行为:  var num = new Number(123)这样
num.a = 'aaa'
// V8下一步会将num.a去除掉(delate num.a),因为num是一个原始类型,不能有属性。
// 这是为什么打印num.a不报错的原因
console.log(num.a); //undefined

易错点

js 复制代码
var A = 'hello'
console.log(A.length);  //5  这里的length是属于继承了父类的方法

var arr = [1,2,3,4,5]
arr.length = 2
console.log(arr);  //[1,2]

var str = 'abcd'
str.length = 2  //因为是原始数据类型,其没有这个方法,
                // 是继承父类的的方法,这样就看成添加属性,不能添加属性
console.log(str);  //'abcd'

判断数据类型

1.typeof 可以准确的除了null以外的所有原始类型(null会被判断为Object)

js 复制代码
console.log(typeof 42); // "number" 
console.log(typeof "hello"); // "string" 
console.log(typeof true); // "boolean" 
console.log(typeof undefined); // "undefined" 
console.log(typeof null); // "object" (历史遗留问题)
console.log(typeof function(){}); // "function"
console.log(typeof {}); // "object" 
console.log(typeof []); // "object" 
console.log(typeof new Date()); // "object"

typeof不适用于引用数据类型

原因

为什么 typeof 对引用类型不准确

  1. ​历史原因​​:

    • JavaScript 早期设计时,null 被错误地标记为 object(这个 bug 无法修复,因为会破坏现有代码)
    • 所有引用类型(除函数外)都被归为 "object"
  2. ​技术实现​​:

    • JavaScript 引擎内部使用类型标签(type tags)系统
    • 对象类型(包括数组、日期等)共享相同的类型标签 0
  3. ​语言设计哲学​​:

    • JavaScript 是动态类型语言,强调"鸭子类型"而非严格的类型检查
    • 区分具体引用类型不是 typeof 的设计目的
相关推荐
come1123410 分钟前
Vue 响应式数据传递:ref、reactive 与 Provide/Inject 完全指南
前端·javascript·vue.js
musk12121 小时前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
万少2 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL2 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl022 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang2 小时前
前端如何实现电子签名
前端·javascript·html5
今天又在摸鱼2 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿2 小时前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再2 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling5552 小时前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架