JS对象中常见的操作方法，太厉害了

Java图灵架构

于 2024-03-17 22:26:42 发布

阅读量1.1k

点赞数 15

分类专栏：前端程序员文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/m0_62673499/article/details/136791949

版权

前端程序员专栏收录该内容

8 篇文章 0 订阅

订阅专栏

参数：obj被返回可枚举属性值的对象。
返回值：一个包含对象自身的所有可枚举属性值的数组。

注意

对象key为number的话，会从升序枚举返回。

const obj3 = { 100: ‘a’, 2: ‘b’, 7: ‘c’ }

console.log(Object.values(obj3)) // [‘b’, ‘c’, ‘a’]

复制代码

4. Object.entries(obj)

Object.entries() 方法返回一个给定对象自身可枚举属性的键值对数组。可使用Object.fromEntries()方法，相当于反转了Object.entries()方法返回的数据结构。接下来也会介绍Object.fromEntries()

const obj1 = {

name: ‘dengke’,

age: 18

};

for (const [key, value] of Object.entries(obj1)) {

console.log(${key}: ${value});

}

// “name: dengke”

// “age: 18”

const obj2 = { foo: ‘bar’, baz: 42 }

console.log(Object.entries(obj2)) // [ [‘foo’, ‘bar’], [‘baz’, 42] ]

const obj3 = { 0: ‘a’, 1: ‘b’, 2: ‘c’ }

console.log(Object.entries(obj3)) // [ [‘0’, ‘a’], [‘1’, ‘b’], [‘2’, ‘c’] ]

复制代码

语法

Object.entries(obj)

复制代码

参数：obj可以返回其可枚举属性的键值对的对象。
返回值：给定对象自身可枚举属性的键值对数组。

补充

将Object转换为Map，new Map()构造函数接受一个可迭代的entries。借助Object.entries方法你可以很容易的将Object转换为Map:

const obj = { foo: “bar”, baz: 42 }

const map = new Map(Object.entries(obj))

console.log(map) // Map { foo: “bar”, baz: 42 }

复制代码

5. Object.fromEntries()

Object.fromEntries() 方法把键值对列表转换为一个对象。与Object.entries()相反。相当于反转了Object.entries()方法返回的数据结构。（下面补充里有具体的演示）

const entries = new Map([

[‘foo’, ‘bar’],

[‘baz’, 42]

]);

const obj = Object.fromEntries(entries);

console.log(obj);

// Object { foo: “bar”, baz: 42 }

复制代码

语法

Object.fromEntries(iterable)

复制代码

参数：iterable类似Array、Map或者其它实现了可迭代协议的可迭代对象。
返回值：一个由该迭代对象条目提供对应属性的新对象。

补充

Map 转化为 Object

通过 Object.fromEntries，可以将Map转换为Object:

const map = new Map([ [‘foo’, ‘bar’], [‘baz’, 42] ])

const obj = Object.fromEntries(map)

console.log(obj)

// { foo: “bar”, baz: 42 }

复制代码

Array 转化为 Object

通过 Object.fromEntries，可以将Array转换为Object:

const arr = [ [‘0’, ‘a’], [‘1’, ‘b’], [‘2’, ‘c’] ]

const obj = Object.fromEntries(arr)

console.log(obj)

// { 0: “a”, 1: “b”, 2: “c” }

复制代码

对象转换

Object.fromEntries 是与 Object.entries()相反的方法，用 数组处理函数 可以像下面这样转换对象：

const object1 = { a: 1, b: 2, c: 3 }

const object2 = Object.fromEntries(

Object.entries(object1)

.map(([ key, val ]) => [ key, val * 2 ])

)

// Object.entries(object1) >>> [[“a”,1],[“b”,2],[“c”,3]]

console.log(object2) // { a: 2, b: 4, c: 6 }

复制代码

6. Object.prototype.hasOwnProperty()

上边枚举对象属性时为了避免for..in遍历继承来的属性，给大家补充了可以借助Object.prototype.hasOwnProperty()方法进行判断，在这里也具体为大家介绍一下它。

hasOwnProperty() 方法会返回一个布尔值，指示对象自身属性中是否具有指定的属性（也就是，是否有指定的键）。

const obj1 = {};

obj1.property1 = 42

console.log(obj1.hasOwnProperty(‘property1’)) // true

console.log(obj1.hasOwnProperty(‘toString’)) // false

console.log(obj1.hasOwnProperty(‘hasOwnProperty’)) // false

复制代码

语法

obj.hasOwnProperty(prop)

复制代码

参数：prop 要检测的属性的String字符串形式表示的名称，或者Symbol。
返回值：用来判断某个对象是否含有指定的属性的布尔值Boolean。

注意

只会对自身属性进行判断，继承来的一律返回false。配合for...in使用，可以避免其遍历继承来的属性。

const o = new Object()

o.prop = ‘exists’

console.log(o.hasOwnProperty(‘prop’)) // true

console.log(o.hasOwnProperty(‘toString’)) // false

console.log(o.hasOwnProperty(‘hasOwnProperty’)) // false

复制代码

即使属性的值是 null 或 undefined，只要属性存在，hasOwnProperty 依旧会返回 true。

const o = new Object();

o.propOne = null

o.propTwo = undefined

console.log(o.hasOwnProperty(‘propOne’)) // true

console.log(o.hasOwnProperty(‘propTwo’)) // true

复制代码

7. Object.getOwnPropertyNames()

上边枚举对象属性时也有用到该方法，在这里也具体为大家介绍一下它。

Object.getOwnPropertyNames() 返回一个数组，该数组对元素是 obj自身拥有的枚举或不可枚举属性名称字符串。数组中枚举属性的顺序与通过for...in循环Object.keys迭代该对象属性时一致。数组中不可枚举属性的顺序未定义。

const arr = [“a”, “b”, “c”];

console.log(Object.getOwnPropertyNames(arr).sort()) // [“0”, “1”, “2”, “length”]

// 类数组对象

const obj = { 0: “a”, 1: “b”, 2: “c”};

console.log(Object.getOwnPropertyNames(obj).sort()) // [“0”, “1”, “2”]

// 使用Array.forEach输出属性名和属性值

Object.getOwnPropertyNames(obj).forEach(function(val, idx, array) {

console.log(val + " -> " + obj[val]);

})

// 0 -> a

// 1 -> b

// 2 -> c

// 不可枚举属性

const my_obj = Object.create({}, {

getFoo: {

value: function() { return this.foo; },

enumerable: false

}

});

my_obj.foo = 1;

console.log(Object.getOwnPropertyNames(my_obj).sort())

// [“foo”, “getFoo”]

复制代码

语法

obj.getOwnPropertyNames(obj)

复制代码

-参数：obj一个对象，其自身的可枚举和不可枚举属性的名称被返回。

返回值：在给定对象上找到的自身属性对应的字符串数组。

补充

Object.getOwnPropertyNames和Object.keys的区别：Object.keys只适用于可枚举的属性，而Object.getOwnPropertyNames返回对象的全部属性名称(包括不可枚举的)。

‘use strict’

(function () {

// 人类的构造函数

const person = function (name, age, sex) {

this.name = name

this.age = age

this.sex = sex

this.sing = () => {

console.log(‘sing’);

}

// new 一个ladygaga

const gaga = new person(‘ladygaga’, 26, ‘girl’)

// 给嘎嘎发放一个不可枚举的身份证

Object.defineProperty(gaga, ‘id’, {

value: ‘1234567890’,

enumerable: false

})

//查看gaga的个人信息

const arr = Object.getOwnPropertyNames(gaga)

console.log(arr) // name, age, sex, sing, id

// 注意和getOwnPropertyNames的区别，不可枚举的id没有输出

const arr1 = Object.keys(gaga)

console.log(arr1) // name, age, sex, sing

})()

复制代码

如果你只要获取到可枚举属性，可以用Object.keys或用for...in循环（for...in会获取到原型链上的可枚举属性，可以使用hasOwnProperty()方法过滤掉）。
- 获取不可枚举的属性，可以使用Array.prototype.filter()方法，从所有的属性名数组（使用Object.getOwnPropertyNames()方法获得）中去除可枚举的属性（使用Object.keys()方法获得），剩余的属性便是不可枚举的属性了：

const target = myObject;

const enum_and_nonenum = Object.getOwnPropertyNames(target);

const enum_only = Object.keys(target);

const nonenum_only = enum_and_nonenum.filter(function(key) {

const indexInEnum = enum_only.indexOf(key);

if (indexInEnum == -1) {

// 没有发现在enum_only健集中意味着这个健是不可枚举的,

// 因此返回true 以便让它保持在过滤结果中

return true;

} else {

return false;

}

});

console.log(nonenum_only);

复制代码

注意

在 ES5 中，如果参数不是一个原始对象类型，将抛出一个 TypeError异常。在 ES2015 中，非对象参数被强制转换为对象。

Object.getOwnPropertyNames(‘foo’) // TypeError: “foo” is not an object (ES5 code)

Object.getOwnPropertyNames(‘foo’) // [‘length’, ‘0’, ‘1’, ‘2’] (ES2015 code)

复制代码

8. Object.freeze()

Object.freeze() 方法可以冻结一个对象。一个被冻结的对象再也不能被修改；冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值。此外，冻结一个对象后该对象的原型也不能被修改。freeze() 返回和传入的参数相同的对象。

const obj = {

prop: 42

}

Object.freeze(obj)

obj.prop = 33

console.log(obj.prop)

// 42

复制代码

语法

obj.freeze(obj)

复制代码

参数：obj要被冻结的对象。
返回值：被冻结的对象。

补充

被冻结的对象是不可变的。但也不总是这样。下例展示了冻结对象不是常量对象（浅冻结）。

const obj1 = {

internal: {}

}

Object.freeze(obj1)

obj1.internal.a = ‘aValue’

console.log(obj1.internal.a) // ‘aValue’

复制代码

要使对象不可变，需要递归冻结每个类型为对象的属性（深冻结）。

// 深冻结函数.

function deepFreeze(obj) {

// 取回定义在obj上的属性名

const propNames = Object.getOwnPropertyNames(obj)

// 在冻结自身之前冻结属性

propNames.forEach(function(name) {

const prop = obj[name]

// 如果prop是个对象，冻结它

if (typeof prop == ‘object’ && prop !== null)

deepFreeze(prop)

})

// 冻结自身

return Object.freeze(obj);

}

const obj2 = {

internal: {}

}

deepFreeze(obj2)

obj2.internal.a = ‘anotherValue’

obj2.internal.a // undefined

复制代码

9. Object.isFrozen()

Object.isFrozen() 方法判断一个对象是否被冻结。

// 一个对象默认是可扩展的, 所以它也是非冻结的。

Object.isFrozen({}) // false

// 一个不可扩展的空对象同时也是一个冻结对象。

var vacuouslyFrozen = Object.preventExtensions({})

Object.isFrozen(vacuouslyFrozen) // true

var frozen = { 1: 81 }

Object.isFrozen(frozen) // false

// 使用Object.freeze是冻结一个对象最方便的方法.

Object.freeze(frozen)

Object.isFrozen(frozen) // true

复制代码

语法

obj.isFrozen(obj)

复制代码

参数：obj被检测的对象。
返回值：表示给定对象是否被冻结的Boolean。

注意

在 ES5 中，如果参数不是一个对象类型，将抛出一个TypeError异常。在 ES2015 中，非对象参数将被视为一个冻结的普通对象，因此会返回true。

Object.isFrozen(1) // (ES5 code)

// TypeError: 1 is not an object

Object.isFrozen(1) // (ES2015 code)

// true

复制代码

结束

–

经过同事的推动、鼓励、支持，自己的反思，趁着周末，写了这篇文章。
以前就觉得自己菜，不配写文章，我会的吧人家都会，写出来的东西人家都知道就觉得没必要去写。总想多看看人家写的，等自己达到某种程度了（然而具体是那种程度我自己也不了解），再去写文章，写一些不常见的，现在想想这是在痴人说梦。有那么多大佬、前辈，人家什么问题、技术人家没见过，人家更是写了那么多的文章了，轮到我写的时候哪有什么不常见的可写呢！
当我真的去写的时候才知道有多香，写的同时也在加深自己对这些知识的认识。而当我我投入到了写文章中，也就忘记了刷抖音，自然而然的也把时间利用起来了，并去做了一些有意义的事情。
送给我自己和那些与我之前有一样顾虑而不写文章的同学们一段话：没有配不配写文章这一说法，自己总结了就是自己的，有人看了并提出建议了，那我们就吸收成长自己，同时也可能会帮助到别人，没人看那我们就把些文章当作自己笔记就好了。掘金又不收费，免费的笔记本、不用白不用。???
第一次写文章，感觉没有写多少东西，却写了很久。发现写一篇文章好难呀！???

关于本文

作者：DK无畏

=======

https://juejin.cn/post/6991335772137734152

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

最后

资料过多，篇幅有限

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。

，有人看了并提出建议了，那我们就吸收成长自己，同时也可能会帮助到别人，没人看那我们就把些文章当作自己笔记就好了。掘金又不收费，免费的笔记本、不用白不用。???

第一次写文章，感觉没有写多少东西，却写了很久。发现写一篇文章好难呀！???

关于本文

作者：DK无畏

=======

https://juejin.cn/post/6991335772137734152

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

[外链图片转存中…(img-q5Fud9Nj-1710685590745)]
[外链图片转存中…(img-TBFhbHrY-1710685590746)]
[外链图片转存中…(img-0YsYWWyf-1710685590747)]
[外链图片转存中…(img-jobhus5h-1710685590747)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
[外链图片转存中…(img-gDHuDca4-1710685590748)]

最后

[外链图片转存中…(img-FEt615V4-1710685590748)]

[外链图片转存中…(img-K4dV2C8O-1710685590748)]

资料过多，篇幅有限

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。

Java图灵架构

关注

15
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
JS对象中常见的操作方法，太厉害了

资料过多，篇幅有限开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。，有人看了并提出建议了，那我们就吸收成长自己，同时也可能会帮助到别人，没人看那我们就把些文章当作自己笔记就好了。掘金又不收费，免费的笔记本、不用白不用。???第一次写文章，感觉没有写多少东西，却写了很久。发现写一篇文章好难呀！???关于本文作者：DK无畏=======
复制链接

扫一扫

专栏目录