JS 对象

久醉呀

已于 2022-08-06 11:02:47 修改

阅读量114

点赞数 1

文章标签： javascript 前端 json

于 2022-08-06 11:02:34 首次发布

本文链接：https://blog.csdn.net/qq_35991442/article/details/126191160

版权

本文介绍了JavaScript中对象的创建、遍历方法，包括使用for...in遍历对象和对象数组。讲解了JSON的转换方法，如JSON.parse()和JSON.stringify()。深入探讨了深浅拷贝的概念，并提供了实现深拷贝的代码示例，强调了深拷贝在处理复杂对象时的重要性。最后，提醒读者对象和数组的知识需要多加练习，深浅拷贝是难点。

摘要由CSDN通过智能技术生成

前言

今天我们学习一下 JS 对象，这一块也是比较碎，需多加练习。

一、对象的创建

1、创建对象:静态特点(属性)+动态特点(方法)

var zs={
	"name":"张三",   //键值对
	"sex":"boy",
	"age":20,
	"test":function(){
			console.log("会跑步");
	},
	"addAge":function(n){
			console.log(this.age+n);
		}
	}

2、直接new一个对象，然后给里面的对象赋值

var ls=new Object();
ls.name="张三";
ls.age=20;
ls.showInfo=function(){
		console.log(this.name,this.age);
}

调用对象：

调用对象属性:对象名.属性名或对象名[属性名]

调用对象中的方法:对象名.方法名()

console.log(zs.name);
console.log(zs["sex"]);
zs.test();
zs.addAge(6);
console.log(ls.name);
ls.showInfo();

效果展示：

二、对象的遍历

对象的遍历方法只有一种

遍历对象: for key键 in 对象名

<script>
    var zs={
        "name":"张三",
        "age":20,
        "sex":"男",
        "height":1.83
    }


    for(var key in zs){
        //zs.key=>zs["key"]，可以将变成字符串
        document.write("<li>");
        document.write(key+':'+zs[key]);
        document.write("</li>");
    }
    document.write("</ul>");
</script>

效果展示：

对象数组的遍历

对象数组：顾名思义既有对象又有数组（直接上案例）

<script>
			var array=[{
				"name":"张三",
				"age":20,
				"sex":"男",
				"height":1.83
			},{
				"name":"李四",
				"age":20,
				"sex":"女",
				"height":1.65
			},{
				"name":"王五",
				"age":20,
				"sex":"男",
				"height":1.78
			}]
			
			//obj:每一个对象
			document.write("<ul>")
			array.forEach(function(obj){
				//每一条数据
				document.write("<li>")
				for (var key in obj) {
					document.write(`${key}:${obj[key]}`)
				}
				document.write("</li>")
				
			})
			document.write("</ul>")
			
</script>

效果展示：

三、JSON

json:数据格式，形如{“key”:“value”,“key”:“value”,…}

两个用法：

1、字符串转换为对象

JSON.parse();

2、将对象转换为字符串

JSON.stringify();

四、深浅拷贝

浅拷贝：拷贝基本数据类型时，不受任何影响，当拷贝引用类型时，源对象也会被修改。
深拷贝：就是完完全全拷贝一份新的对象，它会在内存的堆区域重新开辟空间，修改拷贝对象就不会影响到源对象。

代码：

<script>
			var n=6;
			var m=n;
			console.log(m);//6
			 var obj1={"a":1,"b":2};   //obj1:0x001
			//浅拷贝
			var obj2=obj1;   //obj2:0x001
			 obj2.a=6;
			console.log(obj1); //{a: 6, b: 2}
			//对象深拷贝
			var obj3={};
			for (var key in obj1) {
				//obj3.a=1;
				obj3[key]=obj1[key];
			}
			console.log(obj3); //{a: 6, b: 2}
			obj3.b=888;
			console.log(obj3);  //{a: 6, b: 888}
			console.log(obj1);  //{a: 6, b: 2}
</script>

效果展示：

一些更复杂的对象数组结合就需要特殊的函数实现

代码：

<script>
		   var obj1={"a":1,"b":2};
		   var ary1=[1,2,3];
		   
		   var obj = {
				"a": 1,
				"b": 2,
				"c": ['hello', 'world'],
				"stu": {
					'name': 'zs',
					"age": 18,
					"score": [10, 50, 60]
				}
			}
			//obj可能是数组也可能是对象
			function deepCopy(obj){
				var newObj=Array.isArray(obj)?[]:{};
				for (var key in obj) {
					if(typeof(obj[key])!="object"){
						newObj[key]=obj[key];
					}else{
						//递归
						var no=deepCopy(obj[key]);
						newObj[key]=no;
					}
					
				}
				return newObj;
			}
			
			//深拷贝
			var obj8=JSON.parse(JSON.stringify(obj));
			console.log(obj8);
			obj8.c[0]="奇酷";
			console.log(obj8);
			console.log(obj);
			
			var obj2=deepCopy(obj1);
			console.log(obj2);
			
			var ary2=deepCopy(ary1);
			console.log(ary2);
			
			var obj6=deepCopy(obj);
			console.log(obj6);
			obj6.stu.score[1]=100;
			console.log(obj6);
			console.log(obj);
			
</script>