前言
最近在开发的过程中使用了很多的Object上面的方法,其中很多其实以前只是了解,并没有真正的使用,但是这些方法熟练掌握之后对于处理数据结构感觉帮助是很大的,因此这里写一篇文章总结一下这些常用方法
Object.keys方法
这个方法我相信大家应该都遇到过,也应该大致有所了解,这里我们讲解一下:
这个方法其实可以遍历可以枚举的属性,这里只包含对象本身包含的属性,并不包含原型链上面的属性。我们可以演示一下使用方式:
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这个方法可以返回对象中的属性名,而如果在数组中(其实数组也是特殊的对象),就会返回数组的索引(字符串形式)。但是我们可以看到不管是数组还是对象,这个方法返回的值都是一个数组,里面包含对应的属性名称。
具体使用场景
其实这个方法的使用场景还是很多的,最简单的我们可以用来判断一个对象是否为空,例如下面这段代码:
function isEmpty(obj) { return Object.keys(obj).length === 0; } const emptyObj = {}; console.log(isEmpty(emptyObj));//true
当然这只是其中的一个小的使用场景,实际上比如后端/前端在处理数据的时候可能会使用这个方法配合其他的数组方法来处理数据,比如下面这段代码:
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方法
这个方法和上面所提到的方法的作用刚好相反,上面我们讲到可以获取对象的属性名,而这个可以获取属性值
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方法
这个方法大家可能见到和使用的并不多,我先来讲解一下这个方法接收的参数:
- 目标对象 (Target) :这是要将源对象的属性复制到的对象。目标对象将被修改,然后返回。
- 源对象 (Source) :一个或多个源对象,这些对象的属性将被复制到目标对象中。你可以传递多个源对象,它们将按顺序依次复制到目标对象。源对象可以是对象字面量、变量引用或表达式。
Object.assign()
方法用于将一个或多个源对象的属性复制到目标对象中,并返回目标对象。这个方法的使用场景非常广泛,下面是一些常见的使用场景:
合并对象:你可以使用 Object.assign()
合并多个对象的属性到一个目标对象中。这对于将多个对象的属性合并成一个新对象非常有用。
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方法
这个方法大家可能更加的不熟悉,但是这个方法我们有时候还是会经常的遇到,我们来简单的介绍一下这个方法的用途:
这个方法主要是来分割对象的,例如:
const obj = { foo: 'bar', baz: 42 }; console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]
它可以将对象中的每个键值对都单独分割成一个数组的形式,这个数组中的值就是所对应的属性名和属性值,值得注意的是,这个方法也是返回一个数组,然后这个数组中包含多个数组,为每个键值对的处理结果
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
使用这个方法我们可以轻松的进行迭代,并且获取对象中的属性名和属性值。来进行进一步的处理。可以提升开发的速度,更加方便我们进行开发以及对于数据的处理。
使用场景
之前在做项目的时候,看到一个比较实用的场景,就是比如我们在前后端交互的时候,如果访问的GET
请求的接口,并且我们要携带query
参数,我们需要使用字符串拼接的方式将参数传递过去,这个时候我们就可以使用这种方式。废话不多说我们来看一下代码:
export function getAllArticles(page: number, args = {}) { let url = `article/findAll?page=${page}&` + Object.entries(args).map(([key, value]) => key + '=' + value).join('&') return http.request<ApiData<ApiPage<ArticleModel>>>({ url, }) }
这里面的泛型什么的不重要,我们重点关注这个url,前端在传递参数的时候,args是一个对象,我们需要在原来的url上面拼接参数,这个时候我们就可以使用Object.entries
这个方法了。
- 首先正如我们上面介绍的那样,
Object.entries
这个方法将对象中的键值对转换为[["键": 值],.......]这种格式,所以我们使用map方法进行遍历。 - 然后解构出数据,进行拼接转化成一个新的数组,大概是这种[" '键'=值 " ,...]这种格式,但是此时还不是我们需要的字符串的形式,因此我们需要使用join方法
- 我们最后使用join方法将数组中的元素拼接成一个字符串就可以了。
总结
我们在这里简单的介绍了这些方法,希望能够给大家带来帮助,如果大家有好的内容欢迎补充,让我们共同的进步和提升!!