【重走JavaScript之高级程序设计】对象Object

合集 - 【重走JavaScript之高级程序设计】(17)

1.【重走JavaScript之高级程序设计】 流程语句2022-08-272.【重走JavaScript之高级程序设计】 操作符2022-08-313.【重走JavaScript之高级程序设计】函数Function2022-09-294.【重走JavaScript之高级程序设计】迭代器与生成器2022-09-185.【重走JavaScript之高级程序设计】数组Array2022-09-116.【重走JavaScript之高级程序设计】变量、作用域与内存2022-09-057.【重走JavaScript之高级程序设计】客户端存储2023-12-138.【重走JavaScript之高级程序设计】期约与异步函数2023-12-109.【重走JavaScript之高级程序设计】BOM2023-11-2910.【重走JavaScript之高级程序设计】JSON2023-11-2311.【重走JavaScript之高级程序设计】集合和映射2023-11-2112.【重走JavaScript之高级程序设计】Math2023-11-14

13.【重走JavaScript之高级程序设计】对象Object2023-11-14

14.【重走JavaScript之高级程序设计】字符串String2023-11-1415.【重走JavaScript之高级程序设计】网络请求与远程资源2024-01-1416.【重走JavaScript之高级程序设计】JavaScript Api2024-01-0417.【重走JavaScript之高级程序设计】模块2023-12-17

收起

对象Object的方法api积累

1. Object.assign(目标对象target, 源对象sources)

将所有可枚举属性从一个或多个源对象复制到目标对象中，并返回目标对象。

对象合并方法，如果两个对象含有相同的键值，则源对象的值会覆盖目标对象的值。

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const res = Object.assign(target, source); // { a: 1, b: 4, c: 5 }

2. Object.entries()

对象转换为数组，返回一个原对象可枚举的属性键值对的数组。

// 将对象转换为数组,优雅遍历操作对象的每个属性
const obj = { a: 1, b: 2, c: 3 };
const entries = Object.entries(obj) // [[ 'a', 1 ], [ 'b', 2 ], [ 'c', 3 ]]
// 解构出key和value，以便进行后续遍历操作
const res = entries.map(([key,value])=> { callback })

3. Object.fromEntries()

数组转换为对象，使用数组中的项作为该对象的属性键值对。

// Object.entries() 的逆操作，
const obj = { a: 1, b: 2, c: 3 };
const entries = Object.entries(obj) // [[ 'a', 1 ], [ 'b', 2 ], [ 'c', 3 ]]
const temp = entries.map(([key, value]) => [key.toUpperCase(), value * 2]) // [[ 'A', 2 ], [ 'B', 4 ], [ 'C', 6 ]]
const res = Object.fromEntries(temp); // {A: 2, B: 4, C: 6}

// 将对象转换为Map结构
const obj = { a: 1, b: 2, c: 3 };
const map = new Map(Object.entries(obj)); // Map(3) {'a' => 1, 'b' => 2, 'c' => 3}
// 在使用完map后。同样，你也可以将Map结构反序列化转换为普通对象
const res = Object.fromEntries(entries) // {a: 1, b: 2, c: 3}

// 处理处理 URL 查询参数 为对象结构
const params = Object.fromEntries(new URLSearchParams(window.location.search));
console.log(params);
// 如果 URL 为 https://www.example.com/?key1=value1&key2=value2
// 将输出 { key1: "value1", key2: "value2" }

4. Object.keys()

返回一个原对象所有可枚举属性的key组成的数组。

const obj = { a: 1, b: 2, c: 3 };
const keys = Object.keys(obj) // ['a', 'b', 'c']

5. Object.values()

返回一个原对象所有可枚举属性的value的数组。

const obj = { a: 1, b: 2, c: 3 };
const values = Object.values(obj) // [1, 2, 3]

6. Object.prototype.toString()

方法返回一个表示该对象的字符串。该方法被重写过，用来判断数据类型。

let arr = [1,2,3]
let num = 123
let str = '123'
let obj = {a:123}
// 请注意Object.toString()和Object.prototype.toString() 是完全不同的
// Object.prototype.toString()方法是重写过的
console.log(arr.toString());    //1,2,3
console.log(num.toString());    //123
console.log(str.toString());    //123
console.log(obj.toString());    //[object Object]

console.log(Object.prototype.toString.call(arr));   //[object Array]
console.log(Object.prototype.toString.call(num));   //[object Number]
console.log(Object.prototype.toString.call(str));   //[object String]
console.log(Object.prototype.toString.call(obj));   //[object Object]

7. Object.freeze()

冻结一个对象的属性，不能添加、移除属性，不能更改它们的可枚举性、可配置性、可写性或值，对象的原型也不能被重新指定

freeze() 返回与传入的对象相同的对象。

const obj = {
  name: "Jack",
  age: 20,
  hobby: ["reading", "music"]
};
Object.freeze(obj);

obj.age = 30;   // 不改变原对象。静默但什么都没做，严格模式还会抛出错误
obj.hobby.push("programming"); // 成功添加，浅冻结（只能冻结第一层属性），需深层冻结需递归或借用第三方库
console.log(obj); // { name: "Jack", age: 20, hobby: [ "reading", "music", "programming" ]}

7.1 冻结对象相关的api

为了增强程序的稳定性和可靠性，以下函数都是用于限制对象的可变性

1. Object.freeze(obj)：冻结一个对象，使其不可修改，返回一个被冻结的对象。最严格，函数仅会冻结对象的第一层属性，而不会递归冻结所有嵌套的子对象。

2. Object.isFrozen(obj)：判断一个对象是否被冻结，返回一个布尔值。

3. Object.seal(obj)：将一个对象密封，使其不允许添加新属性，可以修改对象已有的属性，返回密封后的对象。

4. Object.isSealed(obj)：判断一个对象是否被密封，返回一个布尔值。

8. Object.defineProperty(obj, prop, descriptor)

定义一个对象的新属性或修改对象现有属性的特性（例如可枚举性、可写性、可配置性等）。

const object1 = {};

Object.defineProperty(object1, 'property1', {
  value: 42,
  writable: false
});

object1.property1 = 77; // 严格模式抛出错误
console.log(object1.property1); // 42

8.1 Object.defineProperties()

定义一个对象的多个新属性或修改对象现有属性的特性。

const object1 = {};

Object.defineProperties(object1, {
  property1: {
    value: 42,
    writable: true
  },
  property2: {}
});

console.log(object1.property1); // 42

9. Object.is()

比较两个值是否相同，使用和 === 类似的算法。
Object.is()和 === 的区别

• +0 和 -0 不相等。在 === 中 +0 和 -0 是相等的，但 Object.is() 进行比较时，则会返回 false。

• NaN 不等于任何值，包括它自己。在 === 中 NaN 与任何值都不相等，但是 Object.is() 会返回 false。

• === 无法比较对象，因为比较的是它们的引用地址，而 Object.is() 可以进行比较。