对象的魔法世界:一文说清对象转换技巧和常用方法!

简介: 对象的魔法世界:一文说清对象转换技巧和常用方法!

对象的转换

A 对象转字符串

JavaScript 中,有几种常见的方法可以将对象转换为字符串。下面我将详细介绍这些方法,并提供相应的代码示例。

  1. 使用 JSON.stringify() 方法
    JSON.stringify() 方法可以将一个 JavaScript 对象转换为一个 JSON 字符串。它接受一个参数作为要转换的对象,并返回对应的字符串表示。
let obj = {
  name: 'John',
  age: 30,
  occupation: 'Developer'
};
let jsonString = JSON.stringify(obj);
console.log(jsonString); // 输出:{"name":"John","age":30,"occupation":"Developer"}
  1. 使用 toString() 方法
    toString() 方法是 JavaScript 语言中的一个通用方法,可以将任何数据类型转换为字符串。对于对象来说,默认情况下,toString() 方法返回的是 “[object Object]” 字符串。
let obj = {
  name: 'John',
  age: 30,
  occupation: 'Developer'
};
let str = obj.toString();
console.log(str); // 输出:[object Object]
  1. 自定义转换方法
    您也可以根据对象的特定结构和需求自定义对象转换为字符串的方法。可以通过遍历对象的属性,拼接成所需的字符串格式。
let obj = {
  name: 'John',
  age: 30,
  occupation: 'Developer'
};
let str = '';
for (let key in obj) {
  str += key + ': ' + obj[key] + ', ';
}
str = str.slice(0, -2); // 去除最后的逗号和空格
console.log(str); // 输出:name: John, age: 30, occupation: Developer

在上述代码示例中,我们使用了三种常见的方法将 JavaScript 对象转换为字符串。使用 JSON.stringify() 方法可以得到一个符合 JSON 格式的字符串表示,而使用 toString() 方法则获得了一个默认的 “[object Object]” 字符串。最后,我们还展示了如何自定义转换方法来满足特定的字符串格式要求。

请根据您的具体需求选择适合的方法来将对象转换为字符串。

B 对象转JSON

在 JavaScript 中,可以使用 JSON.stringify() 方法将对象转换为 JSON 字符串。这个方法接受一个对象作为参数,并返回对应的 JSON 字符串表示。

以下是使用 JSON.stringify() 方法将对象转换为 JSON 字符串的示例代码:

let obj = {
  name: 'John',
  age: 30,
  occupation: 'Developer'
};
let jsonString = JSON.stringify(obj);
console.log(jsonString);
// 输出:{"name":"John","age":30,"occupation":"Developer"}

在上面的例子中,我们定义了一个名为 obj 的对象,它具有三个属性:nameageoccupation。然后,我们使用 JSON.stringify() 方法将该对象转换为 JSON 字符串,并将结果赋值给变量 jsonString。最后,我们使用 console.log() 将 JSON 字符串输出到控制台。

需要注意的是,JSON.stringify() 方法还可以接受两个额外的参数:replacerspacereplacer 是一个函数或数组,用于控制 JSON 字符串生成过程中哪些属性可以包含在结果中。space 是一个字符串或数字,用于指定缩进结果中的空格数,从而美化输出。

例如,如果我们想要仅包含 name 属性,而忽略其他属性,可以传递一个 replacer 函数:

let obj = {
  name: 'John',
  age: 30,
  occupation: 'Developer'
};
let jsonString = JSON.stringify(obj, ['name']);
console.log(jsonString);
// 输出:{"name":"John"}

在这个例子中,我们将一个包含 'name' 的数组作为 replacer 参数传递给 JSON.stringify() 方法。这样就只会将 name 属性包含在生成的 JSON 字符串中。

总结起来,使用 JSON.stringify() 方法可以方便地将 JavaScript 对象转换为 JSON 字符串。您可以选择性地使用 replacer 参数来控制要包含的属性,以及使用 space 参数来美化输出。

C 对象的浅拷贝与深拷贝

在 JavaScript 中,对象的拷贝分为浅拷贝和深拷贝。下面我将简要解释这两个概念:

  1. 浅拷贝(Shallow Copy):
    浅拷贝是指创建一个新对象,将原始对象的属性值复制到新对象中。如果属性值是基本类型(如数字、字符串等),则直接复制其值;如果属性值是引用类型(如数组、对象等),则复制的是引用地址,即新对象和原始对象引用同一个引用类型的值。
// 浅拷贝示例
let obj = {
  name: 'John',
  age: 30,
  hobbies: ['reading', 'gaming']
};
let newObj = Object.assign({}, obj);
newObj.name = 'Mary';
newObj.hobbies.push('swimming');
console.log(obj);
// 输出:{ name: 'John', age: 30, hobbies: ['reading', 'gaming', 'swimming'] }
console.log(newObj);
// 输出:{ name: 'Mary', age: 30, hobbies: ['reading', 'gaming', 'swimming'] }

在上述示例中,我们使用 Object.assign() 方法进行浅拷贝。修改了 newObjname 属性后,并没有影响到 objname 属性。但是,当我们修改了 newObjhobbies 属性时,objhobbies 属性也会跟着改变,因为它们引用的是同一个数组。

  1. 深拷贝(Deep Copy):
    深拷贝是指创建一个新对象,将原始对象的所有属性值递归地复制到新对象中。无论属性值是基本类型还是引用类型,都会被复制为新的值和地址,相互独立。
// 深拷贝示例
let obj = {
  name: 'John',
  age: 30,
  hobbies: ['reading', 'gaming']
};
let newObj = JSON.parse(JSON.stringify(obj));
newObj.name = 'Mary';
newObj.hobbies.push('swimming');
console.log(obj);
// 输出:{ name: 'John', age: 30, hobbies: ['reading', 'gaming'] }
console.log(newObj);
// 输出:{ name: 'Mary', age: 30, hobbies: ['reading', 'gaming', 'swimming'] }

在上述示例中,我们使用 JSON.stringify() 将原始对象转换为 JSON 字符串,再使用 JSON.parse() 将 JSON 字符串转换回对象,以实现深拷贝。这样做的好处是避免了引用类型的属性共享的问题。

需要注意的是,使用 JSON.stringify()JSON.parse() 进行深拷贝的方法有一些限制,例如不能处理函数、正则表达式等特殊对象,也无法处理循环引用。在某些情况下,可能需要使用第三方库(如 lodash、jQuery 等)提供的深拷贝方法来处理复杂的对象。

总结起来,浅拷贝和深拷贝是不同的对象拷贝方式。浅拷贝会复制对象的引用地址,而深拷贝则递归地复制对象的值和地址。根据需求选择合适的拷贝方式来处理对象。

常用方法

A Object.assign() 方法

Object.assign() 方法是一个静态方法,用于将一个或多个源对象的所有可枚举属性复制到目标对象中,并返回目标对象。下面是使用 Object.assign() 方法的代码示例:

// Object.assign() 示例
let obj1 = { name: 'John' };
let obj2 = { age: 30, hobbies: ['reading', 'gaming'] };
let newObj = Object.assign(obj1, obj2);
console.log(newObj);
// 输出:{ name: 'John', age: 30, hobbies: ['reading', 'gaming'] }
console.log(obj1);
// 输出:{ name: 'John', age: 30, hobbies: ['reading', 'gaming'] }
console.log(obj2);
// 输出:{ age: 30, hobbies: ['reading', 'gaming'] }

在上述示例中,我们创建了两个对象 obj1obj2。然后,我们使用 Object.assign()obj2 中的属性复制到 obj1 中,并将结果赋值给 newObj。最后,我们分别打印输出了 newObjobj1obj2,可以看到 newObjobj1 的属性已经合并在一起,而 obj2 保持不变。

需要注意的是,Object.assign() 方法会直接修改目标对象(即第一个参数),同时返回修改后的目标对象。如果多个源对象具有相同的属性名,则后面的属性值会覆盖前面的属性值。

此外,Object.assign() 方法只会复制源对象的可枚举属性,不会复制原型链上的属性。如果需要复制原型链上的属性,可以使用其他方法,比如 Object.create() 或者 Object.setPrototypeOf()

总结起来,Object.assign() 方法是用来将一个或多个源对象的属性复制到目标对象中的方法。它对目标对象进行直接修改,并返回修改后的目标对象。

B Object.entries() 方法

Object.entries() 方法是一个静态方法,它返回一个给定对象自身可枚举属性的键值对数组。这些键值对以数组形式返回,其中每个子数组都包含两个元素:属性的键和属性的值。下面是使用 Object.entries() 方法的代码示例:

// Object.entries() 示例
const obj = {
  name: 'John',
  age: 30,
  hobbies: ['reading', 'gaming']
};
const entries = Object.entries(obj);
console.log(entries);
// 输出:[ ['name', 'John'], ['age', 30], ['hobbies', ['reading', 'gaming']] ]

在上述示例中,我们定义了一个名为 obj 的对象。然后,我们使用 Object.entries(obj)obj 对象的属性转换为键值对数组,并将结果赋值给 entries 变量。最后,我们打印输出了 entries 数组。

entries 数组包含了 obj 对象的可枚举属性的键值对。每个子数组的第一个元素是属性的键,第二个元素是属性的值。在示例中,可以看到 entries 数组中有三个子数组,分别对应 nameagehobbies 属性。

需要注意的是,Object.entries() 方法返回的数组中的键值对顺序与对象的属性枚举顺序相同。如果对象的属性顺序是重要的,可以通过其他方式确保属性的顺序,比如使用 Map 数据结构。

此外,Object.entries() 方法只会返回对象自身的可枚举属性,并不包括原型链上的属性。

总结起来,Object.entries() 方法用于将给定对象的可枚举属性转换为键值对数组。这个方法可以方便地遍历对象的属性,并进行进一步的处理和操作。

C Object.values() 方法

Object.values() 方法是一个静态方法,它返回一个给定对象自身可枚举属性的值数组。这些值以数组形式返回,数组的顺序与对象属性的枚举顺序相对应。下面是使用 Object.values() 方法的代码示例:

// Object.values() 示例
const obj = {
  name: 'John',
  age: 30,
  hobbies: ['reading', 'gaming']
};
const values = Object.values(obj);
console.log(values);
// 输出:[ 'John', 30, [ 'reading', 'gaming' ] ]

在上述示例中,我们定义了一个名为 obj 的对象。然后,我们使用 Object.values(obj)obj 对象的可枚举属性的值转换为数组,并将结果赋值给 values 变量。最后,我们打印输出了 values 数组。

values 数组包含了 obj 对象的可枚举属性的值。数组的顺序与对象属性的枚举顺序相对应。在示例中,可以看到 values 数组中有三个元素,分别对应 nameagehobbies 属性的值。

需要注意的是,Object.values() 方法只会返回对象自身的可枚举属性的值,并不包括原型链上的属性。

总结起来,Object.values() 方法用于将给定对象的可枚举属性的值转换为数组。这个方法可以方便地获取对象属性的值,并进行进一步的处理和操作。

D Object.freeze() 方法

Object.freeze() 方法是一个静态方法,它用于冻结一个对象。冻结对象后,无法添加、删除或修改对象的属性。冻结的对象的属性将变为只读,并且不能被修改。下面是使用 Object.freeze() 方法的代码示例:

// Object.freeze() 示例
const obj = {
  name: 'John',
  age: 30
};
Object.freeze(obj);
obj.name = 'Jane'; // 尝试修改属性的值
console.log(obj);
// 输出:{ name: 'John', age: 30 }
delete obj.age; // 尝试删除属性
console.log(obj);
// 输出:{ name: 'John', age: 30 }

在上述示例中,我们定义了一个名为 obj 的对象。然后,我们使用 Object.freeze(obj) 冻结了这个对象。冻结后的对象属性变为只读,并且不能被修改。

在示例中,我们尝试修改 obj 对象的 name 属性的值,但由于对象已被冻结,修改操作没有生效。接着,我们尝试删除 obj 对象的 age 属性,同样由于对象已被冻结,删除操作也没有生效。

需要注意的是,Object.freeze() 方法仅冻结对象自身的属性,而不会冻结原型链上的属性。如果需要冻结整个对象,包括原型链上的属性,可以使用其他方法,比如 Object.seal() 或者 Object.preventExtensions()

总结起来,Object.freeze() 方法用于冻结一个对象,使其属性变为只读且不可修改。冻结后的对象无法添加、删除或修改属性。这个方法在需要确保对象的属性不能被修改时非常有用。

E Object.seal() 方法

Object.seal() 方法是一个静态方法,用于密封一个对象。密封对象后,已有的属性不能被删除,但属性的值可以修改。同时,也不能向该对象添加新的属性。下面是使用 Object.seal() 方法的代码示例:

// Object.seal() 示例
const obj = {
  name: 'John',
  age: 30
};
Object.seal(obj);
obj.name = 'Jane'; // 修改属性的值
console.log(obj);
// 输出:{ name: 'Jane', age: 30 }
delete obj.age; // 尝试删除属性
console.log(obj);
// 输出:{ name: 'Jane' }
obj.city = 'New York'; // 尝试添加新的属性
console.log(obj);
// 输出:{ name: 'Jane' }

在上述示例中,我们定义了一个名为 obj 的对象。然后,我们使用 Object.seal(obj) 密封了这个对象。密封后的对象无法添加新的属性。

在示例中,我们尝试修改 obj 对象的 name 属性的值,成功地将其修改为 'Jane'。接着,我们尝试删除 obj 对象的 age 属性,由于对象已被密封,删除操作没有生效。最后,我们尝试向 obj 对象添加新的 city 属性,同样由于对象已被密封,添加操作没有生效。

需要注意的是,Object.seal() 方法仅密封对象自身的属性,而不会密封原型链上的属性。如果需要密封整个对象,包括原型链上的属性,可以使用其他方法,比如 Object.freeze()

总结起来,Object.seal() 方法用于密封一个对象,使其属性不能被删除,并且属性的值可以修改。密封后的对象无法添加新的属性。这个方法在需要保护对象属性免受意外删除的同时,允许对属性进行修改时非常有用。

F Object.getPrototypeOf() 方法

Object.getPrototypeOf() 方法是一个静态方法,用于获取指定对象的原型(即 [[Prototype]] 属性)。它返回指定对象的原型对象。下面是使用 Object.getPrototypeOf() 方法的代码示例:

// Object.getPrototypeOf() 示例
const obj = {};
const proto = { name: 'John' };
Object.setPrototypeOf(obj, proto);
const prototype = Object.getPrototypeOf(obj);
console.log(prototype === proto); // 输出:true

在上述示例中,我们首先创建了一个空对象 obj,然后创建了一个原型对象 proto。接着,我们使用 Object.setPrototypeOf(obj, proto)obj 的原型设置为 proto。最后,我们使用 Object.getPrototypeOf(obj) 获取 obj 的原型,将其赋值给变量 prototype

通过比较 prototypeproto 是否相等,我们可以验证 Object.getPrototypeOf(obj) 返回了正确的原型对象。

需要注意的是,如果对象没有明确的原型,则 Object.getPrototypeOf() 方法会返回 null。另外,可以使用 __proto__ 属性来直接访问对象的原型,但官方推荐使用 Object.getPrototypeOf() 方法来获取原型对象以提高代码的可读性和可维护性。

总结起来,Object.getPrototypeOf() 方法用于获取指定对象的原型对象。它返回对象的原型,或者在没有明确原型时返回 null。这个方法在需要访问对象的原型信息时非常有用。

G Object.setPrototypeOf() 方法

Object.setPrototypeOf() 方法是一个静态方法,用于设置一个对象的原型(即 [[Prototype]] 属性)。它接受两个参数:要设置原型的对象和要设置的原型对象。下面是使用 Object.setPrototypeOf() 方法的代码示例:

// Object.setPrototypeOf() 示例
const obj = {};
const proto = { name: 'John' };
Object.setPrototypeOf(obj, proto);
console.log(obj.name); // 输出:'John'

在上述示例中,我们创建了一个空对象 obj 和一个原型对象 proto,然后使用 Object.setPrototypeOf(obj, proto)obj 的原型设置为 proto。这样,obj 就继承了 proto 对象的属性和方法。

在示例中,我们可以通过 obj.name 访问原型对象 proto 中的 name 属性,并输出其值 'John'

需要注意的是,使用 Object.setPrototypeOf() 方法来设置原型是一个潜在的性能消耗较大的操作,因为它会触发原型链的重新连接。在实际开发中,最好避免频繁地修改对象的原型。

此外,还可以使用 __proto__ 属性来直接设置对象的原型,但官方推荐使用 Object.setPrototypeOf() 方法来设置原型以提高代码的可读性和可维护性。

总结起来,Object.setPrototypeOf() 方法用于设置一个对象的原型。通过将对象的原型设置为另一个对象,可以实现继承和属性共享的效果。这个方法在需要改变对象的原型时非常有用。

遍历对象的方式

A for...in 循环

for...in 循环是一种迭代对象属性的循环结构。它可以用于遍历对象的可枚举属性,包括自身的属性和继承的属性。每次迭代,循环会将当前属性的键(key)赋值给变量,并执行循环体内的代码。下面是使用 for...in 循环的代码示例:

// for...in 循环示例
const obj = { a: 1, b: 2, c: 3 };
for (let key in obj) {
  console.log(key + ': ' + obj[key]);
}

在上述示例中,我们定义了一个名为 obj 的对象,其中包含三个属性 abc。然后,我们使用 for...in 循环遍历 obj 对象的属性。

在循环体内部,我们首先将当前属性的键赋值给变量 key,然后使用 obj[key] 进行属性的访问,输出属性的键和对应的值。

循环的输出结果如下:

a: 1
b: 2
c: 3

需要注意的是,for...in 循环不仅会迭代对象自身的可枚举属性,还会迭代从原型链继承的属性。为了避免遍历到继承的属性,可以使用 hasOwnProperty() 方法进行过滤,如下所示:

const obj = { a: 1, b: 2, c: 3 };
for (let key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(key + ': ' + obj[key]);
  }
}

在上述代码中,我们在循环体内部添加了一个条件判断,使用 hasOwnProperty() 方法来检查属性是否属于对象自身。这样,只有自身的属性才会被输出。

总结起来,for...in 循环可以用于遍历对象的可枚举属性,并执行相应的操作。它适用于需要迭代对象属性的场景,但需要注意继承的属性和使用 hasOwnProperty() 方法进行过滤。

B Object.keys() 方法结合 forEach()map() 等迭代方法

Object.keys() 方法用于返回一个给定对象自身可枚举属性的数组。结合 forEach()map() 等迭代方法,可以对这个数组进行进一步的操作。下面是使用 Object.keys() 方法结合 forEach()map() 的代码示例:

// Object.keys() 方法结合 forEach() 和 map() 示例
const obj = { a: 1, b: 2, c: 3 };
// 使用 forEach() 迭代
Object.keys(obj).forEach(key => {
  console.log(key + ': ' + obj[key]);
});
// 使用 map() 迭代
const mappedArray = Object.keys(obj).map(key => {
  return obj[key] * 2;
});
console.log(mappedArray); // 输出:[2, 4, 6]

在上述示例中,我们定义了一个名为 obj 的对象,其中包含三个属性 abc

首先,我们使用 Object.keys(obj) 方法获取 obj 对象的可枚举属性,返回一个由属性名组成的数组。然后,我们分别使用 forEach()map() 方法对这个数组进行迭代。

使用 forEach(key => { ... }),我们遍历数组中的每个属性名,并输出属性名和对应的值。

使用 map(key => { ... }),我们遍历数组中的每个属性名,并返回一个新的数组,其中的每个元素都是原对象对应属性值的两倍。

最后,我们通过 console.log() 输出经过 map() 方法处理后的数组 [2, 4, 6]

可以根据实际需求选择使用 forEach()map() 或其他迭代方法来处理 Object.keys() 返回的属性数组,以完成相应的操作。

附录:「简历必备」前后端实战项目(推荐:⭐️⭐️⭐️⭐️⭐️)

Vue.js 和 Egg.js 开发企业级健康管理项目

带你从入门到实战全面掌握 uni-app

相关文章
|
1月前
|
JavaScript 前端开发 索引
往数组添加对象的方法
往数组添加对象的方法
15 0
|
1月前
2020-10-10 数组和对象的区分方法
2020-10-10 数组和对象的区分方法
|
1月前
|
Java
java8中过滤、获取指定属性转换为集合、字符串拼接、移除某个对象的使用
java8中过滤、获取指定属性转换为集合、字符串拼接、移除某个对象的使用
|
1月前
|
Java C语言 索引
String类中常用方法的作用
String类中常用方法的作用
26 0
|
7月前
|
存储 索引
数组和对象有什么区别?
数组和对象有什么区别?
50 0
|
7月前
|
存储 JavaScript 前端开发
什么是数组,什么是对象,他们的区别是什么
什么是数组,什么是对象,他们的区别是什么
36 0
|
8月前
从数组对象格式的数组中删除指定对象
从数组对象格式的数组中删除指定对象
20 0
|
JavaScript 前端开发 索引
ES6——类数组转换为数组的几种方法以及for of、forin、for Each的区别
类数组转换为数组的几种方法以及for of、forin、for Each的区别
106 0
类数组如何转换为数组
类数组如何转换为数组
64 0
|
存储 JSON 数据格式
Map对象和普通对象的7个区别
Map对象和普通对象的7个区别