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

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

其二、页面展示为：

在这里插入图片描述

其三、js 中 for-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 3333333333true.toString()     // "true"console.log(true.toString(), typeof(true.toString()), 4444444444)
// 此时的输出结果为： true string 4444444444null.toString()     // Uncaught TypeError: Cannot read property 'toString' of nullconsole.log(null.toString(), 555555555)
// 此时的输出结果为： VM173:5 Uncaught TypeError: Cannot read properties of null (reading 'toString')  at <anonymous>:5:18undefined.toString()  // Uncaught TypeError: Cannot read property 'toString' of nullconsole.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.rhkb.cn/news/125564.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

IP应用场景查询API：深入了解网络用户行为的利器

IP应用场景查询API：深入了解网络用户行为的利器

前言 随着数字时代的不断发展&#xff0c;互联网已经成为人们生活的重要组成部分。而随着越来越多的业务和社交活动迁移到在线平台上&#xff0c;了解和理解网络用户行为变得至关重要。为了满足这个需求&#xff0c;IP 应用场景查询 API 崭露头角&#xff0c;成为深入了解网络…
阅读更多...
安卓绘制原理概览

安卓绘制原理概览

绘制原理 Android 程序员都知道 Android 的绘制流程分为 Measure、Layout、Draw 三步骤&#xff0c;其中 Measure 负责测量 View 的大小Layout 负责确定 View 的位置Draw 负责将 View 画在屏幕上 由 ViewRootImpl 实现的 performTraversal 方法是 Measure、layout、draw 的真正…
阅读更多...
Linux创建新文件的几种方式

Linux创建新文件的几种方式

第一种是 vi 文件名&#xff0c;然后进入vi编辑&#xff0c;完了之后保存退出&#xff1b;然后ls看一下&#xff0c;文件有了&#xff1b; 在终端输入 cat > 文件名&#xff0c;这没用过&#xff1b;输入以后回车&#xff0c;不会退出命令&#xff1b;输入一行文字&#xff…
阅读更多...
TLA+学习记录1——hello world

TLA+学习记录1——hello world

0x01 TLA是个好工具 编程人员一个好习惯是凡事都想偷懒&#xff0c;当然是指要科学地偷懒&#xff0c;而不是真的偷懒。一直想找到一种能检验写出的代码&#xff0c;做出的设计是否真的完全正确&#xff0c;而不是靠经验检视、代码Review、反复测试去检验。因为上述方法不管怎…
阅读更多...
学习心得07：C#

学习心得07：C#

之前也没有看过C#的书&#xff0c;C#的程序倒是搞了一些。好在项目不大&#xff0c;我又会套路。 C#很象是JAVA。好像就是JAVA出来之后&#xff0c;微软抄的。好东西就要学习&#xff0c;这不丢脸。 我倒是想&#xff0c;有没有办法把JAVA和C#进行映射&#xff0c;然后直接编译…
阅读更多...
Unity入门教程||创建项目（上）

Unity入门教程||创建项目（上）

一、介绍 目的&#xff1a;通过尝试制作一款使用玩家角色把小球弹飞的简单小游戏&#xff0c;熟悉使用Unity进行游戏开发的基本流程。 软件环境&#xff1a;Unity 2017.3.0f3&#xff0c;Visual Studio 2013 二、创建新项目 1&#xff0c;启动Unity后将出现一个并列显示Pro…
阅读更多...
Springboot 实践（14）spring config 配置与运用--手动刷新

Springboot 实践（14）spring config 配置与运用--手动刷新

前文讲解Spring Cloud zuul 实现了SpringbootAction-One和SpringbootAction-two两个项目的路由切换&#xff0c;正确访问到项目中的资源。这两个项目各自拥有一份application.yml项目配置文件&#xff0c;配置文件中有一部分相同的配置参数&#xff0c;如果涉及到修改&#xf…
阅读更多...
【C++】模拟实现二叉搜索树的增删查改功能

【C++】模拟实现二叉搜索树的增删查改功能

个人主页&#xff1a;&#x1f35d;在肯德基吃麻辣烫 我的gitee&#xff1a;C仓库 个人专栏&#xff1a;C专栏 文章目录 一、二叉搜索树的Insert操作&#xff08;非递归&#xff09;分析过程代码求解 二、二叉搜索树的Erase操作&#xff08;非递归&#xff09;分析过程代码求解…
阅读更多...
激光焊接汽车尼龙塑料配件透光率测试仪

激光焊接汽车尼龙塑料配件透光率测试仪

激光塑性成型技术是近年来塑性加工界出现的一种新技术。通常塑料主要是通过加热加压依赖模具成型。这对于单品种、大批量生产是有效的&#xff1b;而对于各种不同形状的塑料制件则需要昂贵的模具‚装置也较庞大。 高度聚焦的激光束垂直照射在待变形的板料上‚由于塑料直接吸收激…
阅读更多...
Zstack 安装 黑群晖未找到硬盘：解决方法

Zstack 安装 黑群晖未找到硬盘：解决方法

错误原因&#xff1a; 发生错误的原因&#xff0c;黑群晖要求硬盘为Sata格式&#xff0c;而默认创建的硬盘格式为Virtio&#xff0c;我们要做的就是修改挂载的虚拟硬盘改为Sata格式 解决方法&#xff1a; 1、进入 ZStack&#xff0c;找到黑群晖的主机&#xff0c;查看 UUID …
阅读更多...
TSINGSEE青犀视频AI算法助力构建城市市容·街面秩序管理解决方案

TSINGSEE青犀视频AI算法助力构建城市市容·街面秩序管理解决方案

随着城市化进程加快&#xff0c;未经合理规划设置自然形成的马路市场越来越多&#xff0c;这不仅存在交通安全隐患&#xff0c;也造成了市容秩序混乱&#xff0c;严重影响城市市容面貌。 TSINGSEE青犀AI智能分析网关V3内部部署了几十种算法&#xff0c;包括人脸、人体、车辆、…
阅读更多...
Jmeter系列-环境部署、详细介绍、安装目录介绍（1）

Jmeter系列-环境部署、详细介绍、安装目录介绍（1）

环境部署 官网下载Jmeter http://jmeter.apache.org/下载最新版本的 JMeter&#xff0c;解压文件到任意目录 安装JDK&#xff0c;配置Java环境 1、下载&#xff08;注意选择操作系统对应的位数32/64&#xff09; 官网 &#xff1a;http://www.oracle.com 2、安装&#xff0…
阅读更多...
实战SpringMVC之CRUD

实战SpringMVC之CRUD

目录 一、前期准备 1.1 编写页面跳转控制类 二、实现CRUD 2.1 相关依赖 2.2 配置文件 2.3 逆向生成 2.4 后台代码完善 2.4.1 编写切面类 2.4.2 编写工具类 2.4.3 编写biz层 2.4.4 配置mapper.xml 2.4.5 编写相应接口类&#xff08;MusicMapper&#xff09; 2.4.6 处…
阅读更多...
JDBC入门到精通-10w总结

JDBC入门到精通-10w总结

JDBC核心技术 笔记是以尚硅谷讲师宋红康JDBC课程为基础&#xff0c;加入自身学习体会&#xff0c;略有修改 第1章&#xff1a;JDBC概述 JDBC是java应用程序和数据库之间的桥梁。JDBC提供一组规范&#xff08;接口&#xff09;。向上是面向应用API&#xff0c;共应用程序使用。向…
阅读更多...
jmeter 计数器Counter

jmeter 计数器Counter

计数器可以用于生成动态的数值或字符串&#xff0c;以模拟不同的用户或数据。 计数器通常与用户线程组结合使用&#xff0c;以生成不同的变量值并在测试中应用。以下是计数器的几个常用属性&#xff1a; 变量前缀&#xff08;Variable Name Prefix&#xff09;&#xff1a;定义…
阅读更多...
合并到pdf怎么合并？这个方法了解一下

合并到pdf怎么合并？这个方法了解一下

在现代数字化时代&#xff0c;PDF(便携式文档格式)已成为最常用的文件格式之一。PDF文件的优点在于其跨平台兼容性和保持文档格式不变的能力。然而&#xff0c;在某些情况下&#xff0c;我们可能需要知道合并到pdf。无论是为了方便管理、共享或者其他目的&#xff0c;本文将介绍…
阅读更多...
GO远程构建并调试

GO远程构建并调试

GO远程调试 之前写C&#xff0c;一直习惯了本地IDERemote CMake/GDB编译调试的模式。 因为6.824课程需要用GO&#xff0c;好像没有特别好的支持。记录一下如何配置调试的。 IDE: Goland 操作系统&#xff1a;Windows 远程服务器&#xff1a;Ubuntu 首先配置SSH,让其可以连接到…
阅读更多...
【Node.js】Node.js安装详细步骤和创建Express项目演示

【Node.js】Node.js安装详细步骤和创建Express项目演示

Node.js是一个开源的、跨平台的JavaScript运行环境&#xff0c;用于在服务器端运行JavaScript代码。它提供了一个简单的API&#xff0c;可以用于开发各种网络和服务器应用程序。 以下是Node.js的安装和使用的详细步骤和代码示例&#xff1a; 1、下载Node.js 访问Node.js官方…
阅读更多...
grpc + springboot + mybatis-plus 动态配置数据源

grpc + springboot + mybatis-plus 动态配置数据源

前言 这是我在这个网站整理的笔记&#xff0c;关注我&#xff0c;接下来还会持续更新。 作者&#xff1a;神的孩子都在歌唱 grpc springboot mybatis-plus 动态配置数据源 一. 源码解析1.1 项目初始化1.2 接口请求时候 二. web应用三. grpc应用程序 一. 源码解析 1.1 项目初…
阅读更多...
Java8中List转Map报错“java.lang.IllegalStateException: Duplicate key”

Java8中List转Map报错“java.lang.IllegalStateException: Duplicate key”

排查思路 从报错的关键字中可以大致判断是是key冲突,Duplicate key在数据库的主键冲突错误中经常遇到&#xff0c;个人的思维惯性就联想到了数据库,从这个方向去排查,无果。抓耳挠腮之下&#xff0c;分析如下错误信息 java.lang.IllegalStateException: Duplicate key image(…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023