【前端】JavaScript入门及实战46-50

子非鱼921

于 2024-07-20 21:35:52 发布

阅读量450

点赞数 16

分类专栏：前端-JavaScript 文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_45980065/article/details/140577707

版权

前端-JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

文章目录

46 对象(1)
47 对象(2)
48 属性名和属性值
49 基本和引用数据类型
50 对象字面量

46 对象(1)

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<script type="text/javascript">
	/*
		5种基本数据类型：Number, String, Boolean, Null, Undefined，
		除这5种外，都是对象Object
		
		基本数据类型都是单一的值：123 true "hello"
		值和值之间没有任何的联系
		
		在JS中来表示一个人的信息（name, gender, age），
		var name = "孙悟空";
		var gender = "男";
		var age = 18;
		
		如果使用基本数据类型的数据，我们所创建的变量都是独立的，不能成为一个整体
		
		对象属于一种复合的数据类型，在对象中可以保存多个不同数据类型的属性
		
		对象的分类：
			1. 内建对象：由ES标准中定义的对象，在任何的ES实现中都可以使用
						 比如：Math String Number Boolean Function Object...
			2. 宿主对象： 由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象。
						  比如BOM（浏览器对象类型） DOM（文档对象类型）
			3. 自定义对象：由开发人员创建的对象
	*/
	
	console.log(); // console也是一个宿主对象
	document.write(); // 宿主对象	
</script>
<style>
</style>
</head>
<body>
</body>
</html>

47 对象(2)

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<script type="text/javascript">
	/*		
		对象的分类：
			1. 内建对象：由ES标准中定义的对象，在任何的ES实现中都可以使用
						 比如：Math String Number Boolean Function Object...
			2. 宿主对象：由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象。
						 比如BOM（浏览器对象类型） DOM（文档对象类型）
			3. 自定义对象：由开发人员创建的对象
	*/
	
	//创建对象
	/*
		使用new关键字调用的函数，是构造函数constructor
		构造函数是专门用来创建对象的函数
		使用typeof检查一个对象时，会返回object
		
	*/
	var obj = new Object(); //一个对象
	console.log(obj);
	
	/*
		在对象中保存的值称为属性
		向对象添加属性
		语法：对象.属性名 = 属性值;
	*/
	
	//向obj中添加一个name属性
	obj.name = "孙悟空";
	//向obj中添加一个gender属性
	obj.gender = "男";
	//向obj中添加一个age属性
	obj.age = 18;
	
	/*
		读取对象中的属性
		语法：对象.属性名
		
		如果读取对象中没有的属性，不会报错，而是会返回undefined
	*/
	
	console.log(obj.gender);
	
	/*
		修改对象的属性
		语法：对象.属性名 = 新值;
	*/
	
	obj.name = "tom";
	
	/*
		删除对象的属性
		语法：delete 对象.属性名
	*/
	
	delete obj.name;	
</script>
<style>
</style>
</head>
<body>
</body>
</html>

48 属性名和属性值

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<script type="text/javascript">
	/*	
		向对象中添加属性
		属性名：对象的属性名不强制要求遵守标识符的规范，
				但是尽量按照标识符的规范去做				
	*/
	
	var obj = new Object();
	
	obj.name = "孙悟空";
	obj.var = "hello";
	obj.123 = 789; // 错误
	
	obj["123"] = 789;
	console.log(obj["123"]);
	
	/*
		如果使用特殊的属性名，不能采用.的方式来操作
		需要使用另一种方式：语法：对象["属性名"] = 属性值
		读取时也需要采用这种方式
		
		使用[]这种形式去操作属性，更加的灵活，
		在[]中可以直接传递一个变量，这样变量值是多少就会读取那个属性
	*/
	
	obj["123"] = 789;
	var n = "123";
	console.log(obj[n]);
	
	/*
		属性值：JS对象的属性值可以是任意的数据类型，甚至也可以是一个对象
	*/

	obj.test = true;
	obj.test = null;
	obj.test = undefined;
	
	//创建一个对象
	var obj2 new Object();
	obj2.name = "猪八戒";
	
	//将obj2设置为obj的属性
	obj.test = obj2; //对象
	console.log(obj.test.name); //猪八戒
	
	/*
		in运算符：通过该运算符可以检查一个对象中是否含有指定的属性
				  如果有则返回true，没有则返回false
				  
				  语法：“属性名” in 对象
	*/
	console.log(obj.test2); //undefined
	
	//检查obj中是否含有test2属性
	console.log("test2" in obj); // false
</script>
<style>
</style>
</head>
<body>
</body>
</html>

49 基本和引用数据类型

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<script type="text/javascript">
	/*	
		基本数据类型：String Number Boolean Null Undefined

		引用数据类型：Object	
		
		JS中的变量都是保存到栈内存中的，
			基本数据类型的值直接在栈内存中存储，
			值与值之间是独立存在，修改一个变量不会影响其他的变量
			
			对象是保存到堆内存中的，每创建一个新的对象，就会在堆内存中开辟出一个新的空间，
			而变量保存的是对象的内存地址（对象的引用），如果两个变量保存的是同一个对象引用，
			当一个通过一个变量修改属性时，另一个也会受到影响
	*/
	
	var a = 123;
	var b = a; // 123
	a++; // 124
	
	var obj = new Object();
	obj.name = "孙悟空";
	
	var obj2 = obj;
	
	// 修改obj的name属性
	obj.name = "猪八戒"; // obj2也改变了
	
	// 设置obj2为null
	obj2 = null;
	console.log(obj); // 不影响，object
	console.log(obj2); // null
	
	/*
		当比较两个基本数据类型的值时，就是比较值，
		而比较两个引用数据类型时，他是比较对象的内存地址，
		如果两个对象的一样的，但是地址不同，也会返回false
	*/
	var obj3 = new Object();
	var obj4 = new Object();
	obj3.name = "沙和尚";
	obj.4name = "沙和尚";
	console.log(obj3 == obj4); // false
</script>
<style>
</style>
</head>
<body>
</body>
</html>

50 对象字面量

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<script type="text/javascript">
	/*	
		使用对象字面量来创建一个对象
	*/
	
	var obj = {};
	obj.name = "孙悟空";
	
	/*
		使用对象字面量，可以在创建对象时，直接指定对象中的属性
		语法：{属性名：属性值，属性名：属性值。。。}
		对象字面量的属性名可以加引号也可以不加，建议不加
		
		如果要使用一些特殊的名字，则必须加引号
		
		属性名和属性值是一组一组的名值对结构，
		名和值之间使用“：”连接，多个名值对之间使用“，”隔开
		如果一个属性之后没有其他的属性了，就不要写“，”了
	*/	
	
	var obj2 = {
		name: "猪八戒", 
		age: 28, 
		gender: "男",
		test: {
			name: "沙和尚"
		}
	};
</script>
<style>
</style>
</head>
<body>
</body>
</html>

子非鱼921

关注

16
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
【前端】JavaScript入门及实战46-50

2. 宿主对象：由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象。而变量保存的是对象的内存地址（对象的引用），如果两个变量保存的是同一个对象引用，2. 宿主对象：由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象。对象是保存到堆内存中的，每创建一个新的对象，就会在堆内存中开辟出一个新的空间，1. 内建对象：由ES标准中定义的对象，在任何的ES实现中都可以使用。属性值：JS对象的属性值可以是任意的数据类型，甚至也可以是一个对象。比如BOM（浏览器对象类型） DOM（文档对象类型）
复制链接

扫一扫