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

这篇具有很好参考价值的文章主要介绍了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

其二、页面展示为:

04、javascript 修改对象中原有的属性值、修改对象中原有属性的名字(两种方式)、添加对象中新属性等的操作,#    CSS实例 专栏,javascript,开发语言,前端,经验分享,js语法,对象值,字符串操作

其三、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、页面展示为:

04、javascript 修改对象中原有的属性值、修改对象中原有属性的名字(两种方式)、添加对象中新属性等的操作,#    CSS实例 专栏,javascript,开发语言,前端,经验分享,js语法,对象值,字符串操作

其二、修改字符串对象中 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、页面展示为:

04、javascript 修改对象中原有的属性值、修改对象中原有属性的名字(两种方式)、添加对象中新属性等的操作,#    CSS实例 专栏,javascript,开发语言,前端,经验分享,js语法,对象值,字符串操作

其三、方式二:

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、页面展示为:

04、javascript 修改对象中原有的属性值、修改对象中原有属性的名字(两种方式)、添加对象中新属性等的操作,#    CSS实例 专栏,javascript,开发语言,前端,经验分享,js语法,对象值,字符串操作

其四、可能存在的问题:

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) 

04、javascript 修改对象中原有的属性值、修改对象中原有属性的名字(两种方式)、添加对象中新属性等的操作,#    CSS实例 专栏,javascript,开发语言,前端,经验分享,js语法,对象值,字符串操作

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

04、javascript 修改对象中原有的属性值、修改对象中原有属性的名字(两种方式)、添加对象中新属性等的操作,#    CSS实例 专栏,javascript,开发语言,前端,经验分享,js语法,对象值,字符串操作

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

04、javascript 修改对象中原有的属性值、修改对象中原有属性的名字(两种方式)、添加对象中新属性等的操作,#    CSS实例 专栏,javascript,开发语言,前端,经验分享,js语法,对象值,字符串操作

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)
 

04、javascript 修改对象中原有的属性值、修改对象中原有属性的名字(两种方式)、添加对象中新属性等的操作,#    CSS实例 专栏,javascript,开发语言,前端,经验分享,js语法,对象值,字符串操作

04、javascript 修改对象中原有的属性值、修改对象中原有属性的名字(两种方式)、添加对象中新属性等的操作,#    CSS实例 专栏,javascript,开发语言,前端,经验分享,js语法,对象值,字符串操作

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、页面展示为:

04、javascript 修改对象中原有的属性值、修改对象中原有属性的名字(两种方式)、添加对象中新属性等的操作,#    CSS实例 专栏,javascript,开发语言,前端,经验分享,js语法,对象值,字符串操作

其二、方式二:

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、页面展示为:

04、javascript 修改对象中原有的属性值、修改对象中原有属性的名字(两种方式)、添加对象中新属性等的操作,#    CSS实例 专栏,javascript,开发语言,前端,经验分享,js语法,对象值,字符串操作

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文章来源地址https://www.toymoban.com/news/detail-702988.html

到了这里,关于04、javascript 修改对象中原有的属性值、修改对象中原有属性的名字(两种方式)、添加对象中新属性等的操作的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • javaScript 如何获取对象中非空的属性

    要获取JavaScript对象中所有具有值的属性,您可以使用 Object.entries()方法结合Array.prototype.filter()方法。以下是一个示例代码: 在上述示例中,我们定义了一个带有多个属性的对象 obj 。其中, city 属性的值为空字符串。 使用 Object.entries(obj) 可以将一个对象转换为包含  键值对

    2024年02月15日
    浏览(42)
  • JavaScript Array对象(属性、方法) 留言板案例

    一、创建数组对象的方式 var arrOb=new Array(值,........) var arrOb=Array(值,.......) var arrOb= [ 值,.........] var arrOb=new Array(n); arrOb [ 0]=值1; arrOb [ 1]=值2; 二、数组的属性 length      //数组中元素的数目 三、数组的方法 1、转为字符串 2、 join(\\\'连接符\\\')         将数组元素连接成字符串   

    2024年02月06日
    浏览(45)
  • vue3父子组件传对象,子组件访问修改父组件对象中的属性值

    父组件: 子组件: 在实际运用中不需要这么复杂,父组件不变,子组件如下

    2024年02月07日
    浏览(39)
  • JavaScript string对象(属性,方法)获取图片后缀案例 输入和输出结果转换形式案例

    一、创建string对象 var strOb = new String(\\\"abcefg\\\"); var strOb = String(\\\"abcefg\\\"); var strOb = \\\"abcefg\\\"; 二、属性 length    (字符串长度) 三、方法 1、子字符串位置 indexOf(string, [ index]) string : 查找的字符串的内容,必填项 index:开始查找位置,可有可无 返回值:返回值是查找到的子字符串的位

    2024年02月05日
    浏览(54)
  • day37(事件轮询机制 ajaxGet执行步骤与案例(五个步骤) ajax属性 PHP返回JSON对象(两种))

    一.事件轮询机制 二.ajaxGet执行步骤(五个步骤) 三.ajaxGet案例(三个重要点) 四.ajax属性 五.php返回JSON对象(两种)

    2024年02月08日
    浏览(40)
  • React 状态管理:安全高效地修改对象属性的 3 种方法

    在 React 应用程序中,状态(state)是驱动整个应用程序的核心。当应用程序的状态发生变化时,React 会自动重新渲染相应的组件,以确保用户界面的更新。 与数组状态一样,对象状态在 React 中也需要特别处理。直接修改对象属性是不被允许的,因为 React 的不可变性原则要求我们创建一

    2024年04月10日
    浏览(38)
  • js修改对象数组中其中某一项属性值(转换格式)

    我们对接口渲染数据的时候,经常会遇到后端返给我们数组中某个属性的格式跟我们想要的不一样,比如,我们渲染需要 小桥,中桥,大桥,返回的数组 分别用 1,2,3来表示小 中 大桥的 第一种方法呢就是 对数组进行遍历 第二种方法看如下代码: 

    2024年02月12日
    浏览(42)
  • 如何修改JSON数组中的每个对象的userType属性值

    要修改JSON数组中的每个对象的`userType`属性值,您可以使用JavaScript的`map`函数或`forEach`循环。 以下是使用`map`函数的示例: ```javascript ``` 在上述示例中,我们使用`map`函数遍历原始数据数组,对于每个对象,我们检查是否存在`userType`属性,然后将其值修改为新值(在这里将其

    2024年02月10日
    浏览(52)
  • JavaScript之深度克隆、多种实现方式、列举各种方式的优缺点、对象自有属性、拷贝、复制

    在 JavaScript 中,对象和数组是引用类型,当将一个对象或数组赋值给另一个变量时,它们实际上是共享同一块内存空间。这意味着对一个对象或数组的修改会影响到所有引用它的变量。 为了创建一个独立的副本,可以使用深克隆。 JSON.stringify() 方法将 JavaScript 对象转换为一个

    2024年02月02日
    浏览(43)
  • 【项目实践-04】实验室移动端:对象添加新属性+webview IOS端appendJsFile()方法不生效

    一、vue2对象添加新属性         在做实验室移动端时有这样一个需求,即获取下级页面的数据 (toChooseDevice()),为当前页面中的form表单数据添加新的属性和值,然后表单完成后进行提交(submitForm())操作 遇到问题 :在获取下级页面数据为form赋值时,如果使用 this.form[str] =

    2024年02月22日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包