js/javascript 操作对象【全】(含常用的操作对象的lodash)

简介: js/javascript 操作对象【全】(含常用的操作对象的lodash)

创建对象

通常使用字面量创建

let obj1 = {username: 'smyhvae', age: 26};

遍历对象 for in

var obj = {
    name: "smyhvae",
    age: 26,
    gender: "男",
    address: "shenzhen"
};
 
//枚举对象中的属性
for (var n in obj) {
    console.log("属性名:" + n);
    console.log("属性值:" + obj[n]); // 注意,因为这里的属性名 n 是变量,所以,如果想获取属性值,不能写成 obj.n,而是要写成 obj[n]
}

使用lodash

_.forInRight为反向遍历

function Foo() {
  this.a = 1;
  this.b = 2;
}
 
Foo.prototype.c = 3;
 
_.forIn(new Foo, function(value, key) {
  console.log(key);
});
// => Logs 'a', 'b', then 'c' (无法保证遍历的顺序)。

操作属性

当属性名不能使用.运算符时(如123,变量等),只能使用 [] 操作属性

判断是否存在指定属性

属性名 in 对象名

用 in 检查对象中是否含有某个属性时,如果对象中没有但是原型中有,也会返回true。

使用对象的hasOwnProperty()来检查对象自身中是否含有该属性。

使用lodash

  • _.has判断是否是对象的直接属性
  • _.hasIn 判断是否是对象的直接或继承属性。
var object = { 'a': { 'b': 2 } };
var other = _.create({ 'a': _.create({ 'b': 2 }) });
 
_.has(object, 'a');
// => true
 
_.has(object, 'a.b');
// => true
 
_.has(object, ['a', 'b']);
// => true
 
_.has(other, 'a');
// => false

获取属性

如果获取对象中没有的属性,不会报错而是返回undefined。

 let name = 对象名.属性名
// 或
 let name = 对象名[属性名]

添加属性

对象名.属性名 = 属性值
// 或
对象名[属性名] = 属性值

修改属性

对象名.属性名 = 新的属性值 
// 或
对象名[属性名] = 新的属性值 

删除属性

delete 对象名.属性名
//或
delete 对象名[属性名]

获取属性名构成的数组 keys()【需Lodash】

function Foo() {
  this.a = 1;
  this.b = 2;
}
 
Foo.prototype.c = 3;
 
_.keys(new Foo);
// => ['a', 'b'] (iteration order is not guaranteed)
 
_.keys('hi');
// => ['0', '1']

获取属性值构成的数组 values()【需Lodash】

function Foo() {
  this.a = 1;
  this.b = 2;
}
 
Foo.prototype.c = 3;
 
_.values(new Foo);
// => [1, 2] (无法保证遍历的顺序)
 
_.values('hi');
// => ['h', 'i']

批量修改属性名【需Lodash】

_.mapKeys({ 'a': 1, 'b': 2 }, function(value, key) {
  return key + value;
});
// => { 'a1': 1, 'b2': 2 }

批量修改属性值【需Lodash】

var users = {
  'fred':    { 'user': 'fred',    'age': 40 },
  'pebbles': { 'user': 'pebbles', 'age': 1 }
};
 
_.mapValues(users, function(o) { return o.age; });
// => { 'fred': 40, 'pebbles': 1 } (iteration order is not guaranteed)
 
// The `_.property` iteratee shorthand.
_.mapValues(users, 'age');
// => { 'fred': 40, 'pebbles': 1 } (iteration order is not guaranteed)

获取满足条件的属性名【需Lodash】

_.findLastKey 为反向遍历查找

var users = {
  'barney':  { 'age': 36, 'active': true },
  'fred':    { 'age': 40, 'active': false },
  'pebbles': { 'age': 1,  'active': true }
};
 
_.findKey(users, function(o) { return o.age < 40; });
// => 'barney' (iteration order is not guaranteed)
 
// The `_.matches` iteratee shorthand.
_.findKey(users, { 'age': 1, 'active': true });
// => 'pebbles'
 
// The `_.matchesProperty` iteratee shorthand.
_.findKey(users, ['active', false]);
// => 'fred'
 
// The `_.property` iteratee shorthand.
_.findKey(users, 'active');
// => 'barney'

获取对象属性的个数【需Lodash】

_.size({ 'a': 1, 'b': 2 });
// => 2

对象深拷贝

内含 JSON.parse(JSON.stringify(obj)) 的缺陷

https://blog.csdn.net/weixin_41192489/article/details/119633624

对象合并 assign

Object.assign(目标对象, 源对象1, 源对象2...)

作用: 将多个对象合并为一个新的对象(将源对象的属性追加到目标对象上,如果对象里属性名相同,会被覆盖。)

        let obj1 = { name: 'smyhvae', age: 26 };
        let obj2 = { city: 'shenzhen' };
        let obj3 = {};
 
        Object.assign(obj3, obj1, obj2); // 将obj1和obj2的属性复制给obj3

对象过滤【需Lodash】

选中属性 https://www.lodashjs.com/docs/lodash.pick

var object = { 'a': 1, 'b': '2', 'c': 3 };
 
_.pick(object, ['a', 'c']);
// => { 'a': 1, 'c': 3 }

排除属性 https://www.lodashjs.com/docs/lodash.omit

var object = { 'a': 1, 'b': '2', 'c': 3 };
 
_.omit(object, ['a', 'c']);
// => { 'b': '2' }

对象倒置 invert【需Lodash】

属性值变属性名,属性名变属性值

var object = { 'a': 1, 'b': 2, 'c': 1 };
 
_.invert(object);
// => { '1': 'c', '2': 'b' }

目录
相关文章
|
15天前
|
资源调度 JavaScript 前端开发
Day.js极简轻易快速2kB的JavaScript库-替代Moment.js
dayjs是一个极简快速2kB的JavaScript库,可以为浏览器处理解析、验证、操作和显示日期和时间,它的设计目标是提供一个简单、快速且功能强大的日期处理工具,同时保持极小的体积(仅 2KB 左右)。
91 24
|
23天前
|
编解码 JavaScript 前端开发
【Java进阶】详解JavaScript的BOM(浏览器对象模型)
总的来说,BOM提供了一种方式来与浏览器进行交互。通过BOM,你可以操作窗口、获取URL、操作历史、访问HTML文档、获取浏览器信息和屏幕信息等。虽然BOM并没有正式的标准,但大多数现代浏览器都实现了相似的功能,因此,你可以放心地在你的JavaScript代码中使用BOM。
65 23
|
2月前
|
JavaScript 前端开发 算法
JavaScript 中通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能,JS中排序算法的使用详解(附实际应用代码)
Array.sort() 是一个功能强大的方法,通过自定义的比较函数,可以处理各种复杂的排序逻辑。无论是简单的数字排序,还是多字段、嵌套对象、分组排序等高级应用,Array.sort() 都能胜任。同时,通过性能优化技巧(如映射排序)和结合其他数组方法(如 reduce),Array.sort() 可以用来实现高效的数据处理逻辑。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
3月前
|
JavaScript 前端开发
JavaWeb JavaScript ③ JS的流程控制和函数
通过本文的详细介绍,您可以深入理解JavaScript的流程控制和函数的使用,进而编写出高效、可维护的代码。
95 32
|
2月前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
用array.filter()来实现数据筛选、数据清洗和链式调用,相对于for循环更加清晰,语义化强,能显著提升代码的可读性和可维护性。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
4月前
|
中间件 API
Next.js 实战 (八):使用 Lodash 打包构建产生的“坑”?
这篇文章介绍了作者在使用Nextjs15进行项目开发时遇到的部署问题。在部署过程中,作者遇到了打包构建时的一系列报错,报错内容涉及动态代码评估在Edge运行时不被允许等问题。经过一天的尝试和调整,作者最终删除了lodash-es库,并将radash的部分源码复制到本地,解决了打包报错的问题。文章最后提供了项目的线上预览地址,并欢迎读者留言讨论更好的解决方案。
115 10
|
5月前
|
JavaScript 前端开发
【JavaScript】——JS基础入门常见操作(大量举例)
JS引入方式,JS基础语法,JS增删查改,JS函数,JS对象
|
存储 JavaScript 前端开发
JavaScript与PHP中正则
有个在线调试正则的工具,点击查看工具。下面的所有示例代码,都可以在codepen上查看到。
JavaScript与PHP中正则
|
JavaScript 前端开发 PHP
|
10月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
183 2