Object中常用的方法

前言

最近在开发的过程中使用了很多的Object上面的方法,其中很多其实以前只是了解,并没有真正的使用,但是这些方法熟练掌握之后对于处理数据结构感觉帮助是很大的,因此这里写一篇文章总结一下这些常用方法

Object.keys方法

这个方法我相信大家应该都遇到过,也应该大致有所了解,这里我们讲解一下:

这个方法其实可以遍历可以枚举的属性,这里只包含对象本身包含的属性,并不包含原型链上面的属性。我们可以演示一下使用方式:

css 复制代码
let obj = {
  name: "admin",
  age: 24,
  sex: "男",
};
let arr = ["前端", "后端", "测试"];
console.log(Object.keys(obj));//[ 'name', 'age', 'sex' ]
console.log(Object.keys(arr));//[ '0', '1', '2' ]

这里我们可以看到在定义的对象中,使用Object.keys这个方法可以返回对象中的属性名,而如果在数组中(其实数组也是特殊的对象),就会返回数组的索引(字符串形式)。但是我们可以看到不管是数组还是对象,这个方法返回的值都是一个数组,里面包含对应的属性名称。

具体使用场景

其实这个方法的使用场景还是很多的,最简单的我们可以用来判断一个对象是否为空,例如下面这段代码:

ini 复制代码
function isEmpty(obj) {
  return Object.keys(obj).length === 0;
}
const emptyObj = {};
console.log(isEmpty(emptyObj));//true

当然这只是其中的一个小的使用场景,实际上比如后端/前端在处理数据的时候可能会使用这个方法配合其他的数组方法来处理数据,比如下面这段代码:

yaml 复制代码
let obj = { Bob: 5412, Tim: 4921, Tom: 7513 };
let arr=[]
Object.keys(obj).map((key) => {
  arr.push({
    title: key,
    Salary: obj[key],
  });
});
console.log(arr);
// [
//   { title: 'Bob', Salary: 5412 },
//   { title: 'Tim', Salary: 4921 },
//   { title: 'Tom', Salary: 7513 }
// ]

比如有时候后端可能会出现这种键值对的情况,但是我们前端可能是想要转换为数组的格式,并且重新定义一个属性名,利用原来的属性名作为值,那么这个时候我们就可以使用这个方法并且配合数组中的map方法。重新进行加工,这样处理之后的数据结果就满足我们的需求了。

Object.values方法

这个方法和上面所提到的方法的作用刚好相反,上面我们讲到可以获取对象的属性名,而这个可以获取属性值

css 复制代码
let arr = ["a", "b", "c"];
let obj = { foo: "bar", baz: 42 };
let ArrayLike = { 0 : "a", 1 : "b", 2 : "c"};
 
Object.values(arr)      // ["a", "b", "c"]
Object.values(obj)          // ["bar",42]
Object.values(ArrayLike)    // ["a", "b", "c"]

Object.values() 方法用于返回一个对象中所有可枚举属性的值,这些值以数组的形式返回。

其实具体的使用场景还是和上面讲到的差不多,都是对于数据的处理工作,知道这个方法的作用之后就可以实现。

Object.assign方法

这个方法大家可能见到和使用的并不多,我先来讲解一下这个方法接收的参数:

  1. 目标对象 (Target) :这是要将源对象的属性复制到的对象。目标对象将被修改,然后返回。
  2. 源对象 (Source) :一个或多个源对象,这些对象的属性将被复制到目标对象中。你可以传递多个源对象,它们将按顺序依次复制到目标对象。源对象可以是对象字面量、变量引用或表达式。

Object.assign() 方法用于将一个或多个源对象的属性复制到目标对象中,并返回目标对象。这个方法的使用场景非常广泛,下面是一些常见的使用场景:

合并对象 :你可以使用 Object.assign() 合并多个对象的属性到一个目标对象中。这对于将多个对象的属性合并成一个新对象非常有用。

ini 复制代码
const target = { a: 1, b: 2 };
const source = { b: 3, c: 4 };
const merged = Object.assign({}, target, source);
// merged 现在是 { a: 1, b: 3, c: 4 }

我们发现它可以合并多个对象,遇到重复的属性就会根据顺序进行覆盖,但是我们需要注意的是这里面的"复制"只是一种浅拷贝,如果原来的对象里面存在某种引用类型的数据的话,那么他们还会保持原来的引用关系

Object.entries方法

这个方法大家可能更加的不熟悉,但是这个方法我们有时候还是会经常的遇到,我们来简单的介绍一下这个方法的用途:

这个方法主要是来分割对象的,例如:

css 复制代码
const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]

它可以将对象中的每个键值对都单独分割成一个数组的形式,这个数组中的值就是所对应的属性名和属性值,值得注意的是,这个方法也是返回一个数组,然后这个数组中包含多个数组,为每个键值对的处理结果

javascript 复制代码
const person = {
  name: 'Alice',
  age: 30,
  city: 'New York'
};
for (const [key, value] of Object.entries(person)) {
  console.log(`${key}: ${value}`);
}
// 输出:
// name: Alice
// age: 30
// city: New York

使用这个方法我们可以轻松的进行迭代,并且获取对象中的属性名和属性值。来进行进一步的处理。可以提升开发的速度,更加方便我们进行开发以及对于数据的处理。

总结

我们在这里简单的介绍了这些方法,希望能够给大家带来帮助,如果大家有好的内容欢迎补充,让我们共同的进步和提升!!

相关推荐
.生产的驴7 分钟前
SpringBoot 消息队列RabbitMQ 消息确认机制确保消息发送成功和失败 生产者确认
java·javascript·spring boot·后端·rabbitmq·负载均衡·java-rabbitmq
布瑞泽的童话21 分钟前
无需切换平台?TuneFree如何搜罗所有你爱的音乐
前端·vue.js·后端·开源
白鹭凡33 分钟前
react 甘特图之旅
前端·react.js·甘特图
2401_8628867837 分钟前
蓝禾,汤臣倍健,三七互娱,得物,顺丰,快手,游卡,oppo,康冠科技,途游游戏,埃科光电25秋招内推
前端·c++·python·算法·游戏
书中自有妍如玉1 小时前
layui时间选择器选择周 日月季度年
前端·javascript·layui
Riesenzahn1 小时前
canvas生成图片有没有跨域问题?如果有如何解决?
前端·javascript
f8979070701 小时前
layui 可以使点击图片放大
前端·javascript·layui
小贵子的博客1 小时前
ElementUI 用span-method实现循环el-table组件的合并行功能
javascript·vue.js·elementui
明似水1 小时前
掌握 Flutter 中的 `Overlay` 和 `OverlayEntry`:弹窗管理的艺术
javascript·flutter