[JavaScript知识库]Javascript之对象基础知识

1、普通对象

1.1、什么是对象

通过使用带有可选 属性列表 的花括号 {…} 来创建对象。一个属性就是一个键值对（“key: value”），其中键（key）是一个字符串（也叫做属性名），值（value）可以是任何值

let user = new Object(); // “构造函数” 的语法
let user = {};  // “字面量” 的语法

通常，我们用花括号。这种方式我们叫做字面量。

1.2、文本和属性

属性的值可以是任意类型，也可以用多字词语来作为属性名，但必须给它们加上引号：

let user = {
  name: "John",
  age: 30,
  "likes birds": true  // 多词属性名必须加引号
};

使用 const 声明的对象是可以被修改的

const user = {
  name: "John"
};

user.name = "Pete"; // (*)

alert(user.name); // Pete

(*) 行似乎会触发一个错误，但实际并没有。const 声明仅固定了 user 的值，而不是值（该对象）里面的内容。仅当我们尝试将 user=… 作为一个整体进行赋值时，const 会抛出错误。

1.3、方括号

对于多词属性，点操作就不能用了

// 这将提示有语法错误
user.likes birds = true

点符号要求 key 是有效的变量标识符。这意味着：不包含空格，不以数字开头，也不包含特殊字符（允许使用 $ 和 _）。
有另一种方法，就是使用方括号，可用于任何字符串：
方括号中的字符串要放在引号中，单引号或双引号都可以

let user = {};

// 设置
user["likes birds"] = true;

// 读取
alert(user["likes birds"]); // true

// 删除
delete user["likes birds"];

方括号同样提供了一种可以通过任意表达式来获取属性名的方法 —— 跟语义上的字符串不同 —— 比如像类似于下面的变量，给了我们很大的灵活性。

let key = "likes birds";

// 跟 user["likes birds"] = true; 一样
user[key] = true;

计算属性

当创建一个对象时，我们可以在对象字面量中使用方括号。这叫做 计算属性。

let fruit = prompt("Which fruit to buy?", "apple");

let bag = {
  [fruit]: 5, // 属性名是从 fruit 变量中得到的
};

alert( bag.apple ); // 5 如果 fruit="apple"

计算属性的含义很简单：[fruit] 含义是属性名应该从 fruit 变量中获取。所以，如果一个用户输入 “apple”，bag 将变为 {apple: 5}。
相当于

let fruit = prompt("Which fruit to buy?", "apple");
let bag = {};

// 从 fruit 变量中获取值
bag[fruit] = 5;

以在方括号中使用更复杂的表达式

let fruit = 'apple';
let bag = {
  [fruit + 'Computers']: 5 // bag.appleComputers = 5
};

1.4、属性值简写

实际开发中，我们通常用已存在的变量当做属性名。

function makeUser(name, age) {
  return {
    name: name,
    age: age,
    // ……其他的属性
  };
}

let user = makeUser("John", 30);
alert(user.name); // John

属性名跟变量名一样。这种通过变量生成属性的应用场景很常见，在这有一种特殊的属性值缩写方法，使属性名变得更短。
可以用 name 来代替 name:name 像下面那样：

function makeUser(name, age) {
  return {
    name, // 与 name: name 相同
    age,  // 与 age: age 相同
    // ...
  };
}

可以把属性名简写方式和正常方式混用：

let user = {
  name,  // 与 name:name 相同
  age: 30
};

1.5、属性名称限制

属性命名没有限制。属性名可以是任何字符串或者 symbol且关键字也可以，其他类型会被自动地转换为字符串。
例如，当数字 0 被用作对象的属性的键时，会被转换为字符串 “0”：

let obj = {
  0: "test" // 等同于 "0": "test"
};
// 都会输出相同的属性（数字 0 被转为字符串 "0"）
alert( obj["0"] ); // test
alert( obj[0] ); // test (相同的属性)

这里有个小陷阱：一个名为 __proto__ 的属性。我们不能将它设置为一个非对象的值：

let obj = {};
obj.__proto__ = 5; // 分配一个数字
alert(obj.__proto__); // [object Object] — 值为对象，与预期结果不同

1.6、属性存在性测试，“in” 操作符

JavaScript 的对象有一个需要注意的特性：能够被访问任何属性。即使属性不存在也不会报错！
读取不存在的属性只会得到 undefined。所以我们可以很容易地判断一个属性是否存在：

let user = {};
alert( user.noSuchProperty === undefined ); // true 意思是没有这个属性

检查属性是否存在的操作符 “in”
语法是：

"key" in object

let user = { name: "John", age: 30 };
alert( "age" in user ); // true，user.age 存在
alert( "blabla" in user ); // false，user.blabla 不存在。

in 的左边必须是 属性名。通常是一个带引号的字符串。
如果我们省略引号，就意味着左边是一个变量，它应该包含要判断的实际属性名。例如

let user = { age: 30 };
let key = "age";
alert( key in user ); // true，属性 "age" 存在

为何会有 in 运算符呢？与 undefined 进行比较来判断还不够吗？
确实，大部分情况下与 undefined 进行比较来判断就可以了。但有一个例外情况，这种比对方式会有问题，但 in 运算符的判断结果仍是对的。那就是属性存在，但存储的值是 undefined 的时候

let obj = {
  test: undefined
};
alert( obj.test ); // 显示 undefined，所以属性不存在？
alert( "test" in obj ); // true，属性存在！

1.7、“for…in” 循环

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

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

例如，让我们列出 user 所有的属性：

let user = {
  name: "John",
  age: 30,
  isAdmin: true
};
for (let key in user) {
  // 属性键
  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” 是一个整数属性名，因为我们把它转换成整数，再转换回来，它还是一样的。但是 “+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
}

2、对象引用和复制

2.1、对象引用

与原始类型相比，对象的根本区别之一是对象是“通过引用”被存储和复制的，与原始类型值相反：字符串，数字，布尔值等 —— 始终是以“整体值”的形式被复制的。
将 message 复制到 phrase

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

赋值了对象的变量存储的不是对象本身，而是该对象“在内存中的地址”，换句话说就是对该对象的“引用”。

let user = {
  name: "John"
};

当一个对象变量被复制 —— 引用则被复制，而该对象并没有被复制。

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

现在我们有了两个变量，它们保存的都是对同一个对象的引用：

我们可以通过其中任意一个变量来访问该对象并修改它的内容：

let user = { name: 'John' };
let admin = user;
admin.name = 'Pete'; // 通过 "admin" 引用来修改
alert(user.name); // 'Pete'，修改能通过 "user" 引用看到

2.2、通过引用来比较

仅当两个对象为同一对象时，两者才相等。
例如，这里 a 和 b 两个变量都引用同一个对象，所以它们相等：

let a = {};
let b = a; // 复制引用

alert( a == b ); // true，都引用同一对象
alert( a === b ); // true

而这里两个独立的对象则并不相等，即使它们看起来很像（都为空）：

let a = {};
let b = {}; // 两个独立的对象

alert( a == b ); // false

2.3、克隆与合并，Object.assign

如果我们想要复制一个对象，那么就需要创建一个新对象，并通过遍历现有属性的结构，在原始类型值的层面，将其复制到新对象，以复制已有对象的结构。

let user = {
  name: "John",
  age: 30
};
let clone = {}; // 新的空对象
// 将 user 中所有的属性拷贝到其中
for (let key in user) {
  clone[key] = user[key];
}
// 现在 clone 是带有相同内容的完全独立的对象
clone.name = "Pete"; // 改变了其中的数据
alert( user.name ); // 原来的对象中的 name 属性依然是 John

也可以使用 Object.assign 方法来达成同样的效果
语法是：

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

• 第一个参数 dest 是指目标对象。
• 更后面的参数 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 }

如果被拷贝的属性的属性名已经存在，那么它会被覆盖：

let user = { name: "John" };
Object.assign(user, { name: "Pete" });
alert(user.name); // 现在 user = { name: "Pete" }

我们也可以用 Object.assign 代替 for…in 循环来进行简单克隆：

let user = {
  name: "John",
  age: 30
};

let clone = Object.assign({}, user);
//它将 user 中的所有属性拷贝到了一个空对象中，并返回这个新的对象。

2.4、深层克隆

但属性可以是对其他对象的引用。那应该怎样处理它们

let user = {
  name: "John",
  sizes: {
    height: 182,
    width: 50
  }
};

alert( user.sizes.height ); // 182

现在这样拷贝 clone.sizes = user.sizes 已经不足够了，因为 user.sizes 是个对象，它会以引用形式被拷贝。因此 clone 和 user 会共用一个 sizes：

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] 的值的克隆循环，如果值是一个对象，那么也要复制它的结构。这就叫“深拷贝”。
我们可以用递归来实现。或者不自己造轮子，使用现成的实现，例如 JavaScript 库 lodash 中的 _.cloneDeep(obj)。