87-(JSON)JSON初识

最新推荐文章于 2024-08-31 20:02:26 发布

七色的天空

最新推荐文章于 2024-08-31 20:02:26 发布

阅读量32

点赞数

分类专栏： 04_JavaScript 文章标签： json javascript 前端

本文链接：https://blog.csdn.net/q506174602/article/details/133128868

版权

04_JavaScript 专栏收录该内容

121 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<ul>
		<!-- <li class=""></li> -->
	</ul>
	<script>
		/*
		JSON: JavaScript Object Notation , JavaScript对象表示法
		// 先来看 对象, 对象的创建/定义 有三种方式:
		1.使用字面量创建对象,为对象中的每项数据设置属性名称, 可以使访问数据更加语义化,数据结构更清晰
			数组: var arr = [1, 2, 3];
			对象Object:
				var a = {};
				var b = {
					"name": "李明",
					"age": 18
				}
				访问方式:
					b.name \ b.age 对象.属性名, .可以理解为 的
					b['name'] \ b['age'] 对象['属性名']
		2.通过内置构造函数 Object 创建对象. new 是实例化
			数组: var arr = new Array(); // 创建出来的是一个 空数组 []
			对象: var obj = new Object(); //创建出来的是一个 空对象 {}

		3.自定义构造函数
			function 构造函数名(形参1, 形参2, 形参3....) {
				this.属性名称1 = 形参1;
				this.属性名称2 = 形参2;
				this.属性名称3 = 形参3;
				this.方法名 = 函数体;
				...
			}
			注意: 1.构造函数约定首字母要大写
				  2.函数内部的属性和方法前面要添加  this, 表示当前对象的属性和方法
				  3.构造函数中不需要 return 返回值
				  4.创建对象的时候, 必须使用 new 来调用构造函数
		 */
		console.dir(window);
		
		var obj = {};
		console.log(typeof obj);
		console.log(obj instanceof Object);
		obj = {
			"name": "李明",
			'age': 18,
			gender: '1',
			func: function() {
				console.log('爱办业务');
			}
		}
		obj.like = '业务'; // 初始化对象的时候没有的属性,直接写的话,就相当于创建并赋值
		console.log(obj);
		console.log(obj.gender); // '1'
		console.log(obj['age']); // 18

		// console.dir(window); 
		// 2.内置构造函数方式创建对象
		// 2.1 如果有new关键字, this指向 new 出来 的那个对象
		// 2.2 Object.create(Object.prototype);
		var obj2 = new Object(); // {}
		var obj21 = Object.create(Object.prototype);
		console.log('obj21----',obj2, obj21);

		// 3.自定义构造函数方式创建对象
		// 3.1 先定义构造函数
		function Star(username, age, gender) {
			this.username = username;
			this.age = age;
			this.gender = gender;

			this.pop = function() {
				// 2.1 如果有new关键字, this指向 new 出来 的那个对象
				console.log('黑粉', this); // obj3 
				console.log('黑粉', this.username + '的年龄' + this.age + '了'); // obj3 

				return this.username + '的年龄' + this.age + '了';
			}

			// return this
		}
		var obj3 = new Star('刘德华', 55, 1); // '1' == 1 
		//console.log('obj----3', obj3.fans());

		function func(a, b) {
			// ... 业务处理程序
			
			return a + b;
		}
		// JS当中有哪些内置对象?? 
		//   --数据封装类对象: Array Object Number String Boolean
		//   --其他类型对象: Function Arguments Math Date RegExp Error
		// 栈 stack 基本数据类型的 
		// 堆 heap 引用数据类型 对象数组 函数
		var boy = {
			name: "张三",
			age: 3,
			gender: 1,
			girlFriends: [{name: "李明", age: 18, money: 10}, {name: "王红", age: 28, money: 100}, {name: "赵刚", age: 8, money: 10000}],
			wife: {name: "李明", age: 18, money: 10},
			money: 1000000000,
			eat: function() {
				console.log('狗粮');
			}
		}

		console.log('boy', boy);
		console.log('boy', boy.name);
		console.log('boy', boy['name']);
		console.log('boy', boy.girlFriends[0]);
		console.log('boy', boy.girlFriends[0]['money']);
		console.log('boy', boy.girlFriends[0].money);

		console.log('boy', boy.girlFriends[boy.girlFriends.length - 1]);
		console.log('boy', boy.girlFriends[boy.girlFriends.length - 1].name);

		var girlList = [{name: "李明", age: 18, money: 10}, {name: "王红", age: 28, money: 100}, {name: "赵刚", age: 8, money: 10000}];

		// li
		// newLi ---> ul
		var ul = document.querySelector('ul');
		for(var i = 0; i< girlList.length; i++) {
			// girlList[i]
			var newLi = document.createElement('li');
			newLi.innerText = "姓名:" + girlList[i].name + " 年龄:" + girlList[i].age + " 值钱数:" + girlList[i].money;
			ul.appendChild(newLi);
		}



		// null == undefined // true
		// null === undefined // false
	</script>
</body>
</html>

上述运行结果：