图解 JavaScript 对象(下)

简介: 图解 JavaScript 对象(下)

"for..in" 循环


为了遍历一个对象的所有键(key),可以使用一个特殊形式的循环:for..in。这跟我们在前面学到的 for(;;) 循环是完全不一样的东西。

语法:


for (key in object) {
  // 对此对象属性中的每个键执行的代码
}


例如,让我们列出 user 所有的属性:


let user = {
  name: "John",
  age: 30,
  isAdmin: true
};
for (let key in user) {
  // keys
  alert( key );  // name, age, isAdmin
  // 属性键的值
  alert( user[key] ); // John, 30, true
}


注意,所有的 "for" 结构体都允许我们在循环中定义变量,像这里的 let key

同样,我们可以用其他属性名来替代 key。例如 "for(let prop in obj)" 也很常用。


像对象一样排序


对象有顺序吗?换句话说,如果我们遍历一个对象,我们获取属性的顺序是和属性添加时的顺序相同吗?这靠谱吗?


简短的回答是:“有特别的顺序”:整数属性会被进行排序,其他属性则按照创建的顺序显示。详情如下:


例如,让我们考虑一个带有电话号码的对象:


let codes = {
  "49": "Germany",
  "41": "Switzerland",
  "44": "Great Britain",
  // ..,
  "1": "USA"
};
for(let code in codes) {
  alert(code); // 1, 41, 44, 49
}


对象可用于面向用户的建议选项列表。如果我们的网站主要面向德国观众,那么我们可能希望 49 排在第一。


但如果我们执行代码,会看到完全不同的景象:


  • USA (1) 排在了最前面
  • 然后是 Switzerland (41) 及其它。

因为这些电话号码是整数,所以它们以升序排列。所以我们看到的是 1, 41, 44, 49


整数属性?那是什么?


这里的“整数属性”指的是一个可以在不作任何更改的情况下转换为整数的字符串(包括整数到整数)。


所以,"49" 是一个整数属性名,因为我们把它转换成整数,再转换回来,它还是一样。但是 "+49" 和 "1.2" 就不行了:


// Math.trunc 是内置的去除小数部分的方法。
alert( String(Math.trunc(Number("49"))) ); // "49",相同,整数属性
alert( String(Math.trunc(Number("+49"))) ); // "49",不同于 "+49" ⇒ 不是整数属性
alert( String(Math.trunc(Number("1.2"))) ); // "1",不同于 "1.2" ⇒ 不是整数属性


……此外,如果属性名不是整数,那它们就按照创建时候的顺序来排序,例如:


let user = {
  name: "John",
  surname: "Smith"
};
user.age = 25; // 增加一个
// 非整数属性是按照创建的顺序来排列的
for (let prop in user) {
  alert( prop ); // name, surname, age
}


所以,为了解决电话号码的问题,我们可以使用非整数属性名来 欺骗 程序。只需要给每个键名加一个加号 "+" 前缀就行了。


像这样:


let codes = {
  "+49": "Germany",
  "+41": "Switzerland",
  "+44": "Great Britain",
  // ..,
  "+1": "USA"
};
for (let code in codes) {
  alert( +code ); // 49, 41, 44, 1
}


现在跟预想的一样了。


引用复制


对象和其他原始类型的一个根本的区别是,对象都是“通过引用”存储和复制的。

原始类型:字符串,数字,布尔类型 — 作为整体值被赋值或复制。


例如:


let message = "Hello!";
let phrase = message;


结果是我们得到了两个独立变量,每个变量存的都是 "Hello!"

640.png

对象跟这个不一样。


变量存储的不是对象本身,而是“内存中的地址”,换句话说就是对象的“引用”。

下面是这个对象的存储结构图:


let user = {
  name: "John"
};

640.png

在这里,对象被存储在内存中的某个位置。变量 user 有一个对它的引用。


当对象被复制的时候 — 引用被复制了一份, 对象并没有被复制。


如果我们将对象想象成是一个抽屉,那么变量就是一把钥匙。拷贝对象是复制了钥匙,但是并没有复制抽屉本身。


例如:


let user = { name: "John" };
let admin = user; // 复制引用


现在我们有了两个变量,但是都指向同一个对象:

640.png

我们可以通过其中任意一个变量访问抽屉并改变其中的内容:


let user = { name: 'John' };
let admin = user;
admin.name = 'Pete'; //  被通过名为 "admin" 的引用修改了
alert(user.name); // 'Pete',通过名为 "user" 的引用查看修改


上面的例子证实了只存在一个对象。就像我们的一个抽屉带有两把钥匙,如果使用其中一把钥匙(admin)打开抽屉并改变抽屉里放的东西,稍后使用另外一把钥匙(user)打开抽屉的时候,就会看到变化。


比较引用


等号 == 和严格相等 === 操作符对于对象来说没差别。


两个对象只有在它们其实是一个对象时才会相等。

例如,如果两个变量引用指向同一个对象,那么它们相等:


let a = {};
let b = a; // 复制引用
alert( a == b ); // true,两个变量指向同一个对象
alert( a === b ); // true


如果是两个独立的对象,则它们不相等,即使它们都是空的:


let a = {};
let b = {}; // 两个独立的对象
alert( a == b ); // false


对于像 obj1 > obj2 这样两个对象的比较,或对象与原始值的比较 obj == 5,对象会被转换成原始值。我们很快就会学习到对象的转化是如何实现的,但是事实上,这种比较真的极少用到,这种比较的出现经常是代码的 BUG 导致的。


常量对象


一个被 const 修饰的对象是 可以 被修改。

例如:


const user = {
  name: "John"
};
user.age = 25; // (*)
alert(user.age); // 25


看起来好像 (*) 这行代码会导致错误,但并没有,这里完全没问题。这是因为 const 修饰的只是 user 本身存储的值。在这里 user 始终存储的都是对同一个对象的引用。(*) 这行代码修改的是对象内部的内容,并没有改变 user 存储的对象的引用。

如果你想把其他内容赋值给 user,那就会报错了,例如:


const user = {
  name: "John"
};
// 错误(不能再给 user 赋值)
user = {
  name: "Pete"
};


……那么如果我们想要创建不可变的对象属性,应该怎么做呢?想让 user.age = 25 这样的赋值报错,这也是可以的。我们会在 属性的标志和描述符[4] 这章学习这部分内容。


复制和合并,Object.assign


复制一个对象变量会创建指向此对象的另一个引用。

那如果我们需要复制一个对象呢?创建一份独立的拷贝,一份克隆?


这也是可行的,但是有一点麻烦,因为 JavaScript 中没有支持这种操作的内置函数。实际上,我们很少这么做。在大多数时候,复制引用都很好用。


但如果我们真想这么做,就需要创建一个新的对象,然后遍历现有对象的属性,在原始级别的状态下复制给新的对象。


像这样:


let user = {
  name: "John",
  age: 30
};
let clone = {}; // 新的空对象
// 复制所有的属性值
for (let key in user) {
  clone[key] = user[key];
}
// 现在的复制是独立的了
clone.name = "Pete"; // 改变它的值
alert( user.name ); // 原对象属性值不变


我们也可以用 Object.assign[5] 来实现。

语法是:


Object.assign(dest,[ src1, src2, src3...])


  • 参数 destsrc1, ..., srcN(你需要多少就可以设置多少,没有限制)是对象。
  • 这个方法将 src1, ..., srcN 这些所有的对象复制到 dest。换句话说,从第二个参数开始,所有对象的属性都复制给了第一个参数对象,然后返回 dest

例如,我们可以用这个方法来把几个对象合并成一个:


let user = { name: "John" };
let permissions1 = { canView: true };
let permissions2 = { canEdit: true };
// 把 permissions1 和 permissions2 的所有属性都拷贝给 user
Object.assign(user, permissions1, permissions2);
// 现在 user = { name: "John", canView: true, canEdit: true }


如果用于接收的对象(user)已经有了同样属性名的属性,已有的则会被覆盖:


let user = { name: "John" };
// 覆盖 name,增加 isAdmin
Object.assign(user, { name: "Pete", isAdmin: true });
// 现在 user = { name: "Pete", isAdmin: true }


我们可以用 Object.assign 来替代循环赋值进行简单的克隆操作:


let user = {
  name: "John",
  age: 30
};
let clone = Object.assign({}, user);


它将对象 user 的所有的属性复制给了一个空对象并返回。实际上和循环赋值没什么区别,只是更短了。


直到现在,我们都是假设 user 的所有属性都是原始值。但是属性也可以是其他对象的引用。这种我们应该怎么操作呢?


例如:


let user = {
  name: "John",
  sizes: {
    height: 182,
    width: 50
  }
};
alert( user.sizes.height ); // 182


现在,仅仅进行 clone.sizes = user.sizes 复制是不够的,因为 user.sizes 是一个对象,这个操作只能复制这个对象的引用。所以 cloneuser 共享了一个对象。


像这样:


let user = {
  name: "John",
  sizes: {
    height: 182,
    width: 50
  }
};
let clone = Object.assign({}, user);
alert( user.sizes === clone.sizes ); // true,同一个对象
// user 和 clone 共享 sizes 对象
user.sizes.width++;       // 在这里改变一个属性的值
alert(clone.sizes.width); // 51,在这里查看属性的值


为了解决这个问题,我们在复制的时候应该检查 user[key] 的每一个值,如果它是一个对象,那么把它也复制一遍,这叫做深拷贝(deep cloning)。


有一个标准的深拷贝算法,用于解决上面这种和一些更复杂的情况,叫做 结构化克隆算法(Structured cloning algorithm)[6]。为了不重复造轮子,我们可以使用它的一个 JavaScript 实现的库 lodash[7],方法名叫做 _.cloneDeep(obj)[8]


总结


对象是具有一些特殊特性的关联数组。


它们存储属性(键值对),其中:

  • 属性的键必须是字符串或者 symbol(通常是字符串)。
  • 值可以是任何类型。

我们可以用下面的方法访问属性:

  • 点符号: obj.property
  • 方括号 obj["property"],方括号允许从变量中获取键,例如 obj[varWithKey]

其他操作:

  • 删除属性:delete obj.prop
  • 检查是否存在给定键的属性:"key" in obj
  • 遍历对象:for(let key in obj) 循环。

对象是通过引用被赋值或复制的。换句话说,变量存储的不是“对象的值”,而是值的“引用”(内存地址)。所以复制这样的变量或者将其作为函数参数进行传递时,复制的是引用,而不是对象。基于复制的引用(例如添加/删除属性)执行的所有的操作,都是在同一个对象上执行的。

我们可以使用 Object.assign 或者 _.cloneDeep(obj) 进行“真正的复制”(一个克隆)。

我们在这一章学习的叫做“基本对象”,或者就叫对象。

JavaScript 中还有很多其他类型的对象:

  • Array 用于存储有序数据集合,
  • Date 用于存储时间日期,
  • Error 用于存储错误信息。
  • ……等等。

它们有着各自特别的特性,我们将在后面学习到。有时候大家会说“数组类型”或“日期类型”,但其实它们并不是自身所属的类型,而是属于一个对象类型即 "object"。它们以不同的方式对 "object" 做了一些扩展。

JavaScript 中的对象非常强大。这里我们只接触了冰山一角。在后面的章节中,我们将频繁使用对象进行编程,并学习更多关于对象的知识。


作业题


先自己做题目再看答案。


1. 你好,对象

重要程度:⭐️⭐️⭐️⭐️⭐️


按下面的要求写代码,一条对应一行代码:

  1. 创建一个空的对象 user
  2. 为这个对象增加一个属性,键是 name,值是 John
  3. 再增加一个属性,键是 surname,值是 Smith
  4. 把键为 name 的属性的值改成 Pete
  5. 删除这个对象中键为 name 的属性。


2. 检查空对象


重要程度:⭐️⭐️⭐️⭐️⭐️


写一个 isEmpty(obj) 函数,当对象没有属性的时候返回 true,否则返回 false

应该像这样:


let schedule = {};
alert( isEmpty(schedule) ); // true
schedule["8:30"] = "get up";
alert( isEmpty(schedule) ); // false


3. 不可变对象


重要程度:⭐️⭐️⭐️⭐️⭐️

有可能改变用 const 声明的对象吗?你怎么看?


const user = {
  name: "John"
};
// 这样有效吗?
user.name = "Pete";


4. 对象属性求和


重要程度:⭐️⭐️⭐️⭐️⭐️

我们有一个保存着团队成员工资的对象:


let salaries = {
  John: 100,
  Ann: 160,
  Pete: 130
}


写一段代码求出我们的工资总和,将计算结果保存到变量 sum。从所给的信息来看,结果应该是 390


如果 salaries 是一个空对象,那结果就为 0


5. 数值属性都乘以 2


重要程度:⭐️⭐️⭐️

创建一个 multiplyNumeric(obj) 函数,把 obj 所有的数值属性都乘以 2

例如:


// 在调用之前
let menu = {
  width: 200,
  height: 300,
  title: "My menu"
};
multiplyNumeric(menu);
// 调用函数之后
menu = {
  width: 400,
  height: 600,
  title: "My menu"
};


注意 multiplyNumeric 函数不需要返回任何值,它应该就地修改对象。

P.S. 用 typeof 检查值类型。

目录
相关文章
|
2天前
|
JSON 前端开发 JavaScript
前端 JS 经典:JSON 对象
前端 JS 经典:JSON 对象
8 0
|
2天前
|
前端开发 JavaScript
前端 js 经典:原型对象和原型链
前端 js 经典:原型对象和原型链
11 1
|
2天前
|
JavaScript 前端开发 流计算
使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理
使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理
|
2天前
|
JSON JavaScript 前端开发
js将json字符串还原为json对象
【5月更文挑战第14天】js将json字符串还原为json对象
13 1
|
3天前
|
设计模式 存储 消息中间件
JavaScript观察者模式:实现对象间的事件通信!
JavaScript观察者模式:实现对象间的事件通信!
|
3天前
|
设计模式 JavaScript 前端开发
JavaScript原型模式:实现对象共享属性和方法!
JavaScript原型模式:实现对象共享属性和方法!
|
3天前
|
JavaScript 前端开发 开发者
深入理解JavaScript对象创建
深入理解JavaScript对象创建
|
4天前
|
JavaScript 前端开发
js用Date对象处理时间
以上就是JavaScript中Date对象处理时间的一些基本方法。
14 6
|
4天前
|
JavaScript 前端开发
在JavaScript中,函数原型(Function Prototype)是一个特殊的对象
【5月更文挑战第11天】JavaScript中的函数原型是一个特殊对象,它为所有函数实例提供共享的方法和属性。每个函数在创建时都有一个`prototype`属性,指向原型对象。利用原型,我们可以向所有实例添加方法和属性,实现继承。例如,我们定义一个`Person`函数,向其原型添加`greet`方法,然后创建实例`john`和`jane`,它们都能调用这个方法。尽管可以直接在原型上添加方法,但推荐在构造函数内部定义以封装数据和逻辑。
18 2
|
4天前
|
JavaScript 前端开发
JavaScript 提供了多种方法来操作 DOM(文档对象模型)
【5月更文挑战第11天】JavaScript 用于DOM操作的方法包括获取元素(getElementById, getElementsByClassName等)、修改内容(innerHTML, innerText, textContent)、改变属性、添加/删除元素(appendChild, removeChild)和调整样式。此外,addEventListener用于监听事件。注意要考虑兼容性和性能当使用这些技术。
10 2