有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

js增删改查(Object对象属性的增、删、改、查与循环遍历)实现方式

javascript 炮渣日记 1周前 (11-22) 13次浏览 已收录 0个评论 扫描二维码

“终于等到你,还好我没放弃”,对象和数组一样是个内容特别多的模块,包括了属性的增、删、改、查与循环遍历原型与原型链字面量、new与create创建对象的区别this指向数据类型检测深浅拷贝等等。

“不忘初心,方得始终”,继续坚持“以少胜多”的学习方针和策略,本篇文章只讲解其中一个模块——属性的增、删、改、查与循环遍历。

let obj = {
 id: '1011',
 name: 'monica',
 age: 18 
}

1、增

obj.sex = "girl";
console.log(obj);
结果:{id: "1011", name: "monica", age: 18, sex: "girl"}

2、删

delete obj.age;
console.log(obj);
结果:{id: "1011", name: "monica"}

3、改

obj.age = 20;
console.log(obj);
结果:{id: "1011", name: "monica", age: 20}

4、查

// 给原型添加name、sex属性
Object.prototype.name = "lily";
Object.prototype.sex = "girl"
上面的写法 == 下面的写法
//obj.__proto__.name = "lily";
// obj.__proto__.sex = "girl";

let name = obj.name;
let sex = obj.sex;
let score = obj.score;
console.log(name, sex, score, obj);
结果:monica girl undefined {id: "1011", name: "monica", age: 18}
js增删改查(Object对象属性的增、删、改、查与循环遍历)实现方式

控制台输出结果

小结:

: 查询过程如下,首先看对象自身有无该属性,若有则直接返回结果;否则去构造函数中查看是否有该属性,若有,则直接返回,若没有,则继续查看其原型有没有该属性,若没有,则再看原型的原型上是否有要查询的该属性,以此顺序在原型链上查询,若一直到原型链顶端后仍没有要查询的该属性,则返回undefined。

实例对象增删: 对原型不会造成影响。

实例对象: 分两种情况: 一种是值类型的,对原型不会造成影响,请看上文属性那部分内容;另一种是引用类型的,会改变原型,它又分为两种情况,对属性直接赋值 VS 对属性添加或去除内容。如下:

// 构造函数
function Person () {
 this.name = 'Monica'
}
Person.prototype = {
 has: [1, 2, 3]
}
var person1 = new Person();
var person2 = new Person();
// 情况一: 对属性直接赋值
person1.has = 666;
console.log(person1.has); // 666
console.log(person2.has); // [1, 2, 3]
// 情况二:对属性添加或去除内容
person1.has.push(4);
// person1 和 person2都改变了,因为person1的修改影响到了原型,进而影响到了另一个实例对象
console.log(person1.has); // [1, 2, 3, 4]
console.log(person2.has); // [1, 2, 3, 4]

5、属性的循环遍历for…in

在JavaScript 数据类型——Array的循环遍历这篇文章中提到过for…in,并提出数组的遍历不要使用for…in;对数组的循环遍历感兴趣的朋友可以去看一下数组的循环遍历专题文章。

for…in的特点:

1) 遍历的是key

2) 遍历的顺序有可能紊乱

3) 会遍历数组内所有可枚举的属性,包括原型上的属性和方法

let object = {
 id: '1011',
 name: 'monica',
 age: 18 
}
Object.prototype.name = "jony";
Object.prototype.sex= "girl";
// 1—包括原型上的属性和方法
for (let key in object) {
 console.log(key,object[key]) 
}
// 2—不包括原型上的属性和方法
for (let key in object) {
 // 判断是否是自身属性
 if(object.hasOwnProperty(key)) {
 console.log(key,object[key]) 
 }
}
js增删改查(Object对象属性的增、删、改、查与循环遍历)实现方式

打印结果1

js增删改查(Object对象属性的增、删、改、查与循环遍历)实现方式

打印结果2

6、Object.keys()

特点: 用来获取对象的属性名,得到是对象自己所有属性名的集合(数组),不会得到原型上的属性

let object = {
 id: '1011',
 name: 'monica',
 age: 18 
}
Object.prototype.sex= "girl";
keys = Object.keys(object);
console.log(keys);
结果: ["id", "name", "age"]

总结:这篇文章涉及到了一点原型方面的知识,也是为了文章内容的完整性;不过,不用担心,接下来会把所涉及原型与原型链的知识点写一篇专题文章分享出来的。

喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址