04. JavaScript can modify the original attribute values in the object, modify the names of the original attributes in the object (two methods), add new attributes in the object, etc.

1. Modify the original attribute value in the object

First, the code is:

// Want to change the value objin flagaccording to different values ​​(ie: modify the original attribute value in the object);


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

Second, the page is displayed as:

Insert image description here

Third, jsthe for-inusage of:

// for-inIt is a special kind of forloop specially used to loop objects;

Note: Ordinary ones for 循环can cycle alone, can cycle arrays, can cycle pseudo-arrays, but cannot cycle objects;
because essentially for 循环they can only cycle numbers and arrays, and the essence is to cycle the index of the array (the index is also a number);
but there is no index in the object , so ordinary for 循环objects cannot be recycled;


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

Function: The for-in loop will automatically loop through the specified object. If the object has several attributes, it will loop a few times. Note
: The attribute name variable we declare will automatically receive the attribute name of the attribute each time it is looped;
Note: The way we obtained the attribute value before was "object.property name", but in for-in, we cannot obtain the attribute value through "object.property name variable" because:. The acquisition method cannot parse the variable; if
we If you want to get the attribute value through the attribute name variable, you need to write: object [attribute name variable];
because [] can parse the variable and use the value of the variable as the attribute name to read the corresponding attribute value;

2. Modify the name of the original attribute in the object ( 正则匹配替换):

First, convert objinto a string object:

A. The code is:


// 注意:定义变量一般使用 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. The page is displayed as:

Insert image description here

Second, modify namethe name of the attribute in the string object to age:

A. The code is:

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. The page is displayed as:

Insert image description here

Third, method two:

A. The code is:


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. The page is displayed as:

Insert image description here

Fourth, possible problems:

A. An 直接声明字符串对象error will be reported when executing the operation:

//The reason for the error: replacethe string is to be used API, but the object cannot be used directly 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) 

Insert image description here

B. 直接将对象转成字符串The execution result is not displayed:

//The reason for not displaying: it cannot be written directly {}.toString()because: {}it will be regarded as a code block instead of an empty object
// ({}).toString()The output result is:[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

Insert image description here

C. 将对象 JSON.stringify 处理 If the operation is executed successfully, it will be displayed:


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

Insert image description here

D. Other toString()operations:


(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)
 

Insert image description here

Insert image description here

3. Add new attributes to the object:

First, method one:

A. The code is:


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. The page is displayed as:

Insert image description here

Second, method two:

A. The code is:


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. The page is displayed as:

Insert image description here

4. Summary:

First, if there is anything wrong or inappropriate, please give me some pointers and exchanges!
Second, if you forward or quote the content of this article, please indicate the address of this blog ( 直接点击下面 url 跳转) https://blog.csdn.net/weixin_43405300 . Creation is not easy, but it must be done and cherished!
Third, if you are interested, you can pay more attention to this column (Vue (Vue2+Vue3) essential column for interviews) ( 直接点击下面 url 跳转): https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482

Guess you like

Origin blog.csdn.net/weixin_43405300/article/details/132716784