十个处理 JavaScript 对象的实用技巧!("JavaScript 对象处理:10个实用技巧汇总!")

原创
ithorizon 7个月前 (10-21) 阅读数 30 #后端开发

JavaScript 对象处理:10个实用技巧汇总!

1. 使用 Object.keys() 获取对象的所有键

Object.keys() 方法可以返回一个包含对象所有自身可枚举属性名称的数组。

const obj = {

name: '张三',

age: 25,

job: '工程师'

};

const keys = Object.keys(obj);

console.log(keys); // ['name', 'age', 'job']

2. 使用 Object.values() 获取对象的所有值

Object.values() 方法可以返回一个包含对象所有自身可枚举属性值的数组。

const obj = {

name: '张三',

age: 25,

job: '工程师'

};

const values = Object.values(obj);

console.log(values); // ['张三', 25, '工程师']

3. 使用 Object.entries() 获取对象的键值对数组

Object.entries() 方法可以返回一个包含对象自身所有可枚举属性的键值对数组。

const obj = {

name: '张三',

age: 25,

job: '工程师'

};

const entries = Object.entries(obj);

console.log(entries);

// [['name', '张三'], ['age', 25], ['job', '工程师']]

4. 使用 Object.assign() 合并对象

Object.assign() 方法可以将所有可枚举属性的值从一个或多个源对象复制到目标对象,并返回目标对象。

const obj1 = {

name: '张三',

age: 25

};

const obj2 = {

job: '工程师',

address: '北京'

};

const mergedObj = Object.assign({}, obj1, obj2);

console.log(mergedObj);

// { name: '张三', age: 25, job: '工程师', address: '北京' }

5. 使用扩展运算符(...)合并对象

扩展运算符可以用于合并对象,其效果与 Object.assign() 类似。

const obj1 = {

name: '张三',

age: 25

};

const obj2 = {

job: '工程师',

address: '北京'

};

const mergedObj = { ...obj1, ...obj2 };

console.log(mergedObj);

// { name: '张三', age: 25, job: '工程师', address: '北京' }

6. 使用 Object.create() 创建对象

Object.create() 方法可以创建一个新对象,使用现有的对象来提供新创建的对象的原型。

const prototype = {

sayName() {

return this.name;

}

};

const obj = Object.create(prototype, {

name: {

value: '张三',

enumerable: true

},

age: {

value: 25,

enumerable: true

}

});

console.log(obj.sayName()); // 张三

7. 使用 Object.freeze() 冻结对象

Object.freeze() 方法可以冻结一个对象,阻止其添加新属性或修改现有属性。

const obj = {

name: '张三',

age: 25

};

Object.freeze(obj);

obj.age = 30; // 无效,obj 的属性不会改变

console.log(obj.age); // 25

8. 使用 Object.getOwnPropertyNames() 获取所有自身属性的名称(包括不可枚举的属性)

Object.getOwnPropertyNames() 方法可以返回一个包含对象所有自身属性的名称的数组,包括不可枚举的属性。

const obj = {

name: '张三',

age: 25

};

Object.defineProperty(obj, 'hidden', {

value: 'hidden value',

enumerable: false

});

const propertyNames = Object.getOwnPropertyNames(obj);

console.log(propertyNames); // ['name', 'age', 'hidden']

9. 使用 Object.getOwnPropertyDescriptor() 获取属性的描述

Object.getOwnPropertyDescriptor() 方法可以返回指定对象上一个自有属性对应的属性描述。

const obj = {

name: '张三',

age: 25

};

const descriptor = Object.getOwnPropertyDescriptor(obj, 'name');

console.log(descriptor);

// { value: '张三', writable: true, enumerable: true, configurable: true }

10. 使用 Object.setPrototypeOf() 设置对象的原型

Object.setPrototypeOf() 方法可以设置一个指定的对象的原型(即,内部[[Prototype]]属性)到另一个对象或 null。

const prototype = {

sayHello() {

return 'Hello, ' + this.name;

}

};

const obj = {

name: '张三'

};

Object.setPrototypeOf(obj, prototype);

console.log(obj.sayHello()); // Hello, 张三


本文由IT视界版权所有,禁止未经同意的情况下转发

文章标签: 后端开发


热门