04、javascript 修改对象中原有的属性值、修改对象中原有属性的名字(两种方式)、添加对象中新属性等的操作

news2024/12/30 2:32:27

1、修改对象中原有的属性值

其一、代码为:

// 想将 obj 中的 flag 值,根据不同的值来变化(即:修改对象中原有的属性值);


let obj = {"port": "port_0","desc": "desc_0","flag": 0} 

console.log(obj, 111111111);

for(let i in obj) {  // 给 obj 对象做循环;
  console.log(i, 2222222222)
  obj.flag = obj.flag === 0 ? '0' : '1' // 根据 obj.flag 的值来判断,给 obj.flag 赋值;
}
    
console.log(obj, 33333333333);
// 此时的输出结果为:{port: "port_0", desc: "desc_0", flag: '1'}  33333333333




// 最简洁的方法:
let obj1 = {"port": "port_0","desc": "desc_0","flag": 0} 
obj1.flag = obj1.flag === 0 ? '0' : '1' // 根据 obj.flag 的值来判断,给 obj.flag 赋值;
console.log(obj1,444444444444444)
// 此时的输出结果为:{port: "port_0", desc: "desc_0", flag: '1'}  444444444444444

其二、页面展示为:

在这里插入图片描述

其三、jsfor-in 的用法:

// for-in 是一种特殊的 for 循环 专门用来循环对象;

注意:普通的 for 循环可以单独循环、可以循环数组、可以伪数组、但无法循环对象;
因为本质上 for 循环只能循环数字、循环数组、 本质是在循环数组的索引(索引也是数字) ;
但是对象中没有索引,因此普通的 for 循环不能循环对象;


//语法
for(let 属性名变量 in 要循环的对象){
    循环体代码
}

作用:for-in循环,会自动循环指定的对象,对象有几个属性,就循环几次;
说明:我们声明的属性名变量,会在每次循环的时候, 自动接收到属性的属性名;
注意:之前我们获取属性值的方式为 “对象.属性名”, 但是在 for-in 中,我们不能通过 “对象.属性名变量” 来获取属性值,因为:. 获取方式 无法解析变量;
如果我们想通过属性名变量来获取属性值,需要写作:对象[属性名变量];
因为 [] 可以解析变量,将变量的值作为属性名,来读取对应的属性值;

2、修改对象中原有的属性的名字 (正则匹配替换):

其一、将 obj 转为字符串对象:

A、代码为:


// 注意:定义变量一般使用 let 而不是 var;
let obj = { jobNumber: 6, name: 26, profession: '程序员'}
let objString = JSON.stringify(obj)   //先将 obj 对象转换成字符串对象;
console.log(objString, 111111)  
// 此时的输出结果为:{"jobNumber":6,"name":26,"profession":"程序员"} 111111

B、页面展示为:

在这里插入图片描述

其二、修改字符串对象中 name 属性的名字为 age :

A、代码为:

let obj = { jobNumber: 6, name: 26, profession: '程序员'}
let objString = JSON.stringify(obj)   //先将 obj 对象转换成字符串对象;
console.log(typeof(objString),typeof(objString) === 'string', objString, 22222222)
// 此时的输出结果为:string true {"jobNumber":6,"name":26,"profession":"程序员"} 22222222
let newObj = objString.replace(/name/g, 'age')  
//使用正则匹配将属性名 name 修改为 age;
console.log(newObj,333333333) 
// 此时的输出结果为:{"jobNumber":6,"age":26,"profession":"程序员"} 333333333

B、页面展示为:

在这里插入图片描述

其三、方式二:

A、代码为:


let obj = { jobNumber: 6, name: 26, profession: '程序员'}
obj.age = obj.name // 在 obj 中添加 age 属性,且属性值是 name 属性的值;
console.log(obj, 1111111111)
// 此时的输出结果为:{jobNumber: 6, name: 26, profession: '程序员', age: 26} 1111111111
for(let i in obj) {
  console.log(i, 2222222222)
  if(i === 'name') {
  	delete obj[i] // 此时是选中 name 属性值,并将该 name 属性删除掉;
  }
}
console.log(obj, 2222222222)
// 此时的输出结果为:{jobNumber: 6, profession: '程序员', age: 26} 2222222222 
// 此时也相当于完成了修改对象中原有属性名字的操作;

B、页面展示为:

在这里插入图片描述

其四、可能存在的问题:

A、直接声明字符串对象执行操作会报错:

// 报错的原因:replace 是字符串要使用的 API ,而对象是不能直接使用的 replace API 的;


let objString1 = {"jobNumber":6,"name":26,"profession":"程序员"}
console.log(typeof(objString1),typeof(objString1) === 'string', objString1, 111111111)
// 此时的输出结果为:object false {jobNumber: 6, name: 26, profession: '程序员'} 111111111
let newObj = objString1.replace(/name/g, 'age')  
// 此时页面直接报错:Uncaught TypeError: objString1.replace is not a function    at <anonymous>:3:25
console.log(newObj,4444444444) 

在这里插入图片描述

B、直接将对象转成字符串执行操作结果不显示:

// 不显示的原因:不能直接写成 {}.toString() 是因为:{} 会被当成代码块而不是空对象
// ({}).toString() 的输出结果为: [object Object]


let objString1 = {"jobNumber":6,"name":26,"profession":"程序员"}
let objString2 = objString1.toString() //将字符串对象转化为字符串,但此时打印不出来;
console.log(typeof(objString2),typeof(objString2) === 'string', objString2, 22222222)
// 此时的输出结果为:string true [object Object] 22222222
let newObj = objString2.replace(/name/g, 'age') 
console.log(newObj,4444444444) // 此时的输出结果为:[object Object] 4444444444

在这里插入图片描述

C、将对象 JSON.stringify 处理 执行操作就成功显示:


let objString1 = {"jobNumber":6,"name":26,"profession":"程序员"}
let objString3 = JSON.stringify(objString1)
console.log(typeof(objString3),typeof(objString3) === 'string', objString3, 22222222)
// 此时的输出结果为:string true {"jobNumber":6,"name":26,"profession":"程序员"} 22222222
let newObj = objString3.replace(/name/g, 'age')
console.log(newObj,4444444444) 
// 此时的输出结果为:{"jobNumber":6,"age":26,"profession":"程序员"} 4444444444

在这里插入图片描述

D、其他的 toString() 操作:


(1).toString()      // "1"

console.log( (1).toString(), typeof((1).toString()), 111111111)
// 此时的输出结果为:1 string 111111111


[1,2].toString()    // "1, 2"
 
console.log([1,2].toString(), typeof([1,2].toString()), 2222222)
// 此时的输出结果为:1,2 string 2222222
 



({}).toString()     // [object Object]
// 不能直接写成{}.toString()是因为:{}会被当成代码块而不是空对象
console.log(({}).toString(),  typeof(({}).toString()), 3333333333 )
// 此时的输出结果为:[object Object] string 3333333333



true.toString()     // "true"

console.log(true.toString(), typeof(true.toString()), 4444444444)
// 此时的输出结果为: true string 4444444444




null.toString()     // Uncaught TypeError: Cannot read property 'toString' of null

console.log(null.toString(), 555555555)
// 此时的输出结果为: VM173:5 Uncaught TypeError: Cannot read properties of null (reading 'toString')  at <anonymous>:5:18




undefined.toString()  // Uncaught TypeError: Cannot read property 'toString' of null

console.log(undefined.toString(), 66666666)
// 此时的输出结果为: Uncaught TypeError: Cannot read properties of undefined (reading 'toString')   at <anonymous>:5:23






// 要页面显示的整体代码:
console.log( (1).toString(), typeof((1).toString()), 111111111)
console.log([1,2].toString(), typeof([1,2].toString()), 2222222)
console.log(({}).toString(),  typeof(({}).toString()), 3333333333 )
console.log(true.toString(), typeof(true.toString()), 4444444444)
console.log(null.toString(), 555555555)
console.log(undefined.toString(), 66666666)
 

在这里插入图片描述

在这里插入图片描述

3、给对象中添加新属性:

其一、方式一:

A、代码为:


let obj = { jobNumber: 6, name: "John", profession: '程序员'}
obj.age = 26 // 此时就是:给 obj 对象添加一个 age 属性;
console.log(obj,11111111111111)
// 此时的输出结果为:{jobNumber: 6, name: 'John', profession: '程序员', age: 26} 11111111111

B、页面展示为:

在这里插入图片描述

其二、方式二:

A、代码为:


let obj = { jobNumber: 6, name: "John", profession: '程序员'}
obj['age'] = 26 // 此时就是:给 obj 对象添加一个 age 属性;
// 注意:添加的代码为 obj['age'] = 26,而若代码为 obj[age] = 26,就会报错;
console.log(obj,22222222222)
// 此时的输出结果为:{jobNumber: 6, name: 'John', profession: '程序员', age: 26} 22222222222

B、页面展示为:

在这里插入图片描述

4、小结:

其一、哪里有不对或不合适的地方,还请大佬们多多指点和交流!
其二、若有转发或引用本文章内容,请注明本博客地址(直接点击下面 url 跳转) https://blog.csdn.net/weixin_43405300,创作不易,且行且珍惜!
其三、有兴趣的话,可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏)(直接点击下面 url 跳转):https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/989370.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【LeetCode】一起探究三数之和的奥秘

Problem: 15. 三数之和 文章目录 题目解析算法原理分析排序 暴力枚举 set去重排序 单调性 双指针划分思想 复杂度Code 题目解析 首先我们来分析一下本题的思路 题目说到要我们在一个整数数组中去寻找三元组&#xff0c;而且呢这三个数字所相加的和为0&#xff0c;而且呢这三…

数据复制:构建大规模分布式系统的关键组成部分

数据复制对于构建可靠的大规模分布式系统至关重要。在本期中&#xff0c;我们将探讨常见的复制策略以及选择合适策略的关键因素。 在本期中&#xff0c;我们将以数据库为例进行讨论。请注意&#xff0c;复制不仅适用于数据库&#xff0c;还适用于缓存服务器&#xff08;如Redis…

探索Apache Hive:融合专业性、趣味性和吸引力的数据库操作奇幻之旅

文章目录 版权声明一 数据库操作二 Hive数据表操作2.1 表操作语法和数据类型2.2 Hive表分类2.3 内部表Vs外部表2.4 内部表操作2.4.1 创建内部表2.4.2 其他创建内部表的形式2.4.3 数据分隔符2.4.4 自定义分隔符2.4.5 删除内部表 2.5 外部表操作2.5.1 创建外部表2.5.2 操作演示2.…

BMS电池管理系统——电芯需求数据(三)

BMS电池管理系统 文章目录 BMS电池管理系统前言一、有什么基础数据二、基础数据分析1.充放电的截至电压2.SOC-OCV关系表3.充放电电流限制表4.充放电容量特性5.自放电率 总结 前言 在新能源产业中电芯的开发也占有很大部分&#xff0c;下面我们就来看一下电芯的需求数据有哪些 …

知名农业企业-九三食品选择泛微京桥通构建全程数字化采购管理

九三食品股份有限公司是北大荒集团旗下九三粮油工业集团有限公司的控股子公司&#xff0c;作为九三集团大豆精深加工生产及研发基地&#xff0c;九三食品公司可生产非转基因“九三”牌大豆油等植物油、食品添加剂、胶囊保健品、精油类产品、食用豆粕、豆饼粉和其它产品等七大类…

yo!这里是进程控制

目录 前言 进程创建 fork()函数 写时拷贝 进程终止 退出场景 退出方法 进程等待 等待原因 等待方法 1.wait函数 2.waitpid函数 等待结果&#xff08;status介绍&#xff09; 进程替换 替换原理 替换函数 进程替换例子 shell简易实现 后记 前言 学习完操作…

【更新至2022年】2000-2022年全国31省市以2000年为基期的实际GDP、名义GDP、GDP平减指数数据(含原始数据+计算过程+计算结果)

2000-2022年31省市名义GDP 实际GDP GDP平减指数 1、时间&#xff1a;2000-2022 2、范围&#xff1a;31省市 3、来源&#xff1a;GJ统计J和统计NJ 4、指标&#xff1a;名义GDP、地区生产总值指数&#xff08;上年100&#xff09;、实际GDP&#xff08;以2000年为基期&#x…

【光伏系统】将电流从直流转换为交流电的太阳能逆变器、太阳能跟踪系统来提高系统的整体性能及集成电池解决方案(Simulink仿真)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

(高阶)Redis 7 第10讲 单线程 与 多线程 入门篇

面试题 1.Redis 是单线程还是多线程 最早的版本3.x是单线程。 版本4.x,严格意义不是单线程。负责处理客户端请求的线程是单线程,开始加入异步删除。 6.0.x版本后明确使用全新的多线程来解决问题 2.说说IO多路复用3.Redis 为什么快IO多路复用+epoll函…

基于SSM的乡镇自来水收费系统

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

【leetcode 力扣刷题】回文串相关题目(KMP、动态规划)

回文串相关题目 5. 最长回文子串动态规划中心扩展算法 214. 最短回文串336. 回文对 5. 最长回文子串 题目链接&#xff1a;5. 最长回文子串 题目内容&#xff1a; 题目就是要我们找s中的回文子串&#xff0c;还要是最长的。其实想想&#xff0c;暴力求解也行……就是遍历所有的…

系统移植MakefileREADME文件分析

Makefile # 指定交叉编译工具链前缀变量 CROSS_COMPILE arm-linux-gnueabihf- #指定文件名字变量 NAME interface ## #-g:编译时添加gdb调试信息 -marm: 将程序编译生成arm指令集 -Wall:编译时显示所有警告信息 #-O0:编译时添加优化等级 -O0:不优化 -O1:一级优化 #-f…

zabbix配置钉钉告警、和故障自愈、监控java

文章目录 1.配置钉钉告警server 配置web界面创建媒介给用户添加媒介测试告警 实现故障自愈功能监控Javazabbix server 安装java gateway配置 Zabbix Server 支持 Java gateway使用系统内置模板监控 tomcat 主机 1.配置钉钉告警 server 配置 钉钉告警python脚本 脚本1 cd /…

实相融、云启未来,智慧公厕让城市生活更美好

现代社会&#xff0c;随着科技的不断发展&#xff0c;人们对于城市生活的要求也在不断提升。在这个过程中&#xff0c;智慧公厕作为城市基础设施中的重要组成部分&#xff0c;正在发挥着越来越重要的作用。通过数字化、云管理、人工智能等未来的科技方式&#xff0c;智慧公厕为…

2024字节跳动校招面试真题汇总及其解答(一)

1. 【算法题】重排链表 给定一个单链表 L 的头节点 head ,单链表 L 表示为: L0 → L1 → … → Ln - 1 → Ln请将其重新排列后变为: L0 → Ln → L1 → Ln - 1 → L2 → Ln - 2 → … 不能只是单纯的改变节点内部的值,而是需要实际的进行节点交换。 示例 1: 输入:hea…

嵌入式Linux驱动开发(同步与互斥专题)(二)

一、自旋锁spinlock的实现 自旋锁&#xff0c;顾名思义&#xff1a;自己在原地打转&#xff0c;等待资源可用&#xff0c;一旦可用就上锁霸占它。 ① 原地打转的是CPU x&#xff0c;以后CPU y会解锁&#xff1a;这涉及多个CPU&#xff0c;适用于SMP系统&#xff1b; ② 对于单…

【Vue】Router路由无法跳转问题整理

问题集 整理了部分Vue Router路由无法跳转问题&#xff1a; 顶层router-view只能被顶层路由配置内容使用&#xff1a;此问题异常表现在路由跳转但页面不变子路由跳转必需父路由对应的组件中存在router-view&#xff1a;此问题异常表现在路由跳转但页面不变 子路由配置路径会自…

uniapp项目实践总结(十三)封装文件操作方法

导语&#xff1a;在日常 APP 开发过程中&#xff0c;经常要进行文件的保存、读取列表以及查看和删除文件等操作&#xff0c;接下来就看一下具体的方法。 目录 原理分析方法实现实战演练案例展示 原理分析 主要是以下 API。 uni.saveFile&#xff1a;保存文件到本地缓存列表…

处理流程设计-系统设计-人机界面设计

处理流程设计-系统设计-人机界面设计 流程表示工具&#xff08;重点&#xff09; 流程表示工具&#xff08;重点&#xff09; 数据流图也是一种 IPO 图 NS图和PAD图

为什么说电子元器件采购如果不够专业就容易上当受骗

电子元器件采购如果不够专业就容易上当受骗的原因有多方面&#xff0c;主要包括以下几点&#xff1a; 众多供应商和产品&#xff1a;电子元器件市场涉及众多供应商和各种不同的产品。如果采购人员不具备足够的专业知识和经验&#xff0c;可能会难以识别哪些供应商和产品是可信赖…