master

分支 (1)

管理

管理

master

exercise
/
javaScirpt_object_handle.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>object_对象</title>
</head>
<body>

	<script>
		/* 1 对象创建方法 */
			// 方法一 Object构造函数创建
			var Person = new Object();
				Person.name = 'Nike';
				Person.age = 29;
				console.log(Person);

			// 方法二 使用对象字面量表示法
			var Person_ = {}; // 相当于var Person = new Object();
			Person_ = {
				name:'Nike',
				age:29
			}

			// 方法三 使用工厂模式创建对象
			function createPerson(name, age, job) {
				var o = new Object();
				o.name = name;
				o.age = age;
				o.job = job;
				return o;
			}
			var _person = createPerson('Nike', 29, 'student');
			console.log(_person);

			// 方法四 使用构造函数创建对象
			function Persons(name, age, job) {
				this.name = name;
				this.age = age;
				this.job = job;
			}
			var person_c = new Persons('Nike', 29, 'student');
			console.log(person_c);

			// 方法五 使用原型创建对象模式
			function Person_y(){}
				Person_y.prototype.name = 'Nike';
				Person_y.prototype.age = 20;
				Person_y.prototype.jbo = 'teacher';
				Person_y.prototype.sayName = function(){};
			var person1 = new Person_y();
			person1.sayName();


		/* 2 对象操作——增删改查 */
		var obj = {
				name:'张三',
				age:18,
				fei:function(){
					console.log('本人就是张三');
				}
			}

			// 查 有两种方式可以访问对象属性
				// 获取对象成员(.)
					// obj.name  //获取对象的属性
					// obj.fei(); //调用对象的方法

				// ['name']
					// obj['name']

			// 增 添加对象成员
				// -往对象中添加属性
				obj.sex = '男';
				// -往对象中添加方法
				obj.pao = function(){
					console.log('我能跑起来')
				}
			// 删 使用delete关键字来删除对象成员
			// delete obj.name //删除对象中的属性
			// delete obj.fei  //删除对象中的方法


		/* 3 对象操作——循环遍历——常用 */

			// 第一种 for ...in
			const objTest = {
				id:1,
				name:'zhangsan',
				age:18
			}
			for(let key  in objTest){
				console.log(key + '---' + objTest[key])
			}

			// 第二种
				// 返回值 一个对象的所有可枚举属性的字符串数组
				// 1）、Object.keys（obj）
				// 2）、Object.values（obj）
				console.log(Object.keys(objTest));
				console.log(Object.values(objTest));


		/* 4 对象操作——常用方法 */

			// assign() 合并对象
			let a = {
			　　a: 'js'
			}
			let b = {
			　　b: 'sun'
			}
			let c = {
			　　c: 'web'
			}
			let d = Object.assign(a, b, c)
			console.log(d);

			// ES6语法 对象赋值简写
			let name = 'sun'
			let skill = 'web'
			let obj_b = {
			　　name,
			　　skill
			}
			console.log(obj_b);

			// key值构建
			let key = 'skill'
			let objs_s = {
			　　[key]: 'web'
			}
			console.log(objs_s);

			// object转string JSON.stringify(obj)
				// 有些场景 拿到后端(接口)数据对象之后需要存储 先把数据对象转成字符串 在存起来
				// 比如HTML5 localStorage和sessionStorage 存储
				// 使用时取出来又把字符串转成对象 JSON.parse(objToStr)
			const objToStr = JSON.stringify(obj)
			console.log('objToStr:', objToStr);

			const strToObj = JSON.parse(objToStr);
			console.log('strToObj:', strToObj);
	</script>
</body>
</html>