js操作对象的几种方法

来源:程序思维浏览:2181次
操作 JavaScript 对象是日常工作中经常接触的工作,随着 JavaScript 的飞速发展,解决问题的方法越来越多了,本文整理了 6 个比较实用的操作对象的方法。


Object.create()

以参数为原型,创建一个新对象实例。

const user = {
  name: 'kylin',
  age: 18,
  gender: '女',
  work: 'dev',
  say() {
    console.log(`姓名:${this.name} ,年龄:${this.age} ,性别:${this.gender}`);
  }
};
const my = Object.create(user);
my.say(); // 姓名:kylin ,年龄:18 ,性别:女
my.name = 'Tom';
my.year = '2020';
console.log(my.name); // Tom
console.log(my.year); // 2020 

Object.assign()

将所有可枚举的属性从一个或多个对象合并 (复制) 到一个新对象上。

Object.assign() 方法有 2 个参数,第 1 个参数是目标对象,第 2 个参数是源对象。如果有同名属性,后面对象的属性会覆盖前面对象的属性。

const userBasic = {
  name: 'kylin',
  age: 20,
};
const userInfo = {
  age: 18,
  gender: '女',
  work: 'dev',
  say() {
    console.log(`姓名:${this.name} ,年龄:${this.age} ,性别:${this.gender} ,工作:${this.work}`);
  }
};
const user = Object.assign(userInfo, userBasic);
user.say(); // 姓名:kylin ,年龄:20 ,性别:女 ,工作:dev
也可以合并成一个新对象。

const userBasic = {
  name: 'kylin',
  age: 18,
  gender: '女',
  say() {
    console.log(`姓名:${this.name} ,年龄:${this.age} ,性别:${this.gender}`);
  }
};
const user = Object.assign({}, userBasic);
user.say(); // 姓名:kylin ,年龄:18 ,性别:女 

Object.keys()

返回包含对象自身可枚举的所有属性组成的数组。

const user = {
  name: 'kylin',
  age: 18
};
Object.defineProperty(user, 'gerder', {
  value: "女",
  enumerable: false // 不可枚举
});
console.log(Object.keys(user)); // ["name", "age"]
Object.values()

返回包含对象自身所有可枚举属性的值组成的数组,值的顺序与使用 for...in 循环的顺序相同。

const user = {
  name: 'kylin',
  age: 18
};
Object.defineProperty(user, 'gerder', {
  value: "女",
  enumerable: false // 不可枚举
});
console.log(Object.values(user)); // ["kylin", 18]

Object.entries()

将对象的属性和值 (键和值) 用数组的形式表现出来。即返回包含对象自身可枚举属性的键值对组成的数组。

const user = {
  name: 'kylin',
  age: 18
};
const info = Object.entries(user);
console.log(info); // [['name', 'kylin'], ['age', 18]]

Object.fromEntries()

相当于 Object.entries() 方法的逆操作,将键值对形式的数组转换成对象。

const user = Object.fromEntries([
  ['name', 'kylin'],
  ['age', 18]
]);
console.log(user); // {name: "kylin", age: 18} 
精品好课
HTML5视频播放器video开发教程
适用人群1、有html基础2、有css基础3、有javascript基础课程概述手把手教你如何开发属于自己的HTML5视频播放器,利用mp4转成m3u8格式的视频,并在移动端和PC端进行播放支持m3u8直播格式,兼容...
React实战视频教程仿京东移动端电商
React是前端最火的框架之一,就业薪资很高,本课程教您如何快速学会React并应用到实战,对正在工作当中或打算学习React高薪就业的你来说,那么这门课程便是你手中的葵花宝典。
Vue2+Vue3+ES6+TS+Uni-app开发微信小程序从入门到实战视频教程
2021年最新Vue2+Vue3+ES6+TypeScript和uni-app开发微信小程序从入门到实战视频教程,本课程教你如何快速学会VUE和uni-app并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己...
最新完整React+VUE视频教程从入门到精,企业级实战项目
React和VUE是目前最火的前端框架,就业薪资很高,本课程教您如何快速学会React和VUE并应用到实战,教你如何解决内存泄漏,常用库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习Re...
最新完整React视频教程从入门到精通纯干货纯实战
React是目前最火的前端框架,就业薪资很高,本课程教您如何快速学会React并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习React高薪就...
HTML5基础入门视频教程易学必会
HTML5基础入门视频教程,教学思路清晰,简单易学必会。适合人群:创业者,只要会打字,对互联网编程感兴趣都可以学。课程概述:该课程主要讲解HTML(学习HTML5的必备基础语言)、CSS3、Javascript(学习...
VUE2+VUE3视频教程从入门到精通(全网最全的Vue课程)
VUE是目前最火的前端框架之一,就业薪资很高,本课程教您如何快速学会VUE+ES6并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习VUE高薪就...
jQuery视频教程从入门到精通
jquery视频教程从入门到精通,课程主要包含:jquery选择器、jquery事件、jquery文档操作、动画、Ajax、jquery插件的制作、jquery下拉无限加载插件的制作等等......
收藏
扫一扫关注我们