hui

zyh9 · Jul 27, 2017 · f48d886 · f48d886
1 parent 49bbe0f
commit f48d886
Show file tree

Hide file tree

Showing 5 changed files with 494 additions and 0 deletions.
diff --git a/ES6_函数.html b/ES6_函数.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+	<meta charset="UTF-8" />
+	<title>Document</title>
+</head>
+<body>
+<script type="text/javascript">
+
+//	function fn(a=1,b=2){
+//		alert(a+b);
+//	}
+//	
+//	fn();
+
+//	function fn([x,y]){
+//		alert(x+y);
+//	}
+//	
+//	fn([1,2]);
+
+	function fn(a,b,...f){
+		console.log(a+b);
+
+		var num = 0;
+		for(var i=0;i<f.length;i++){
+			num+=f[i];
+		}
+
+		console.log(num);
+
+	}
+
+	fn(1,2,3,4,5,6,7,8,9);
+
+
+</script>
+</body>
+</html>
diff --git a/ES6_变量常量.html b/ES6_变量常量.html
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+	<meta charset="UTF-8" />
+	<title>Document</title>
+</head>
+<body>
+	<input type="button" id="" value="按一" />
+	<input type="button" id="" value="按二" />
+	<input type="button" id="" value="按三" />
+<script type="text/javascript">
+
+	/*
+		变量：可变的量
+			var 
+			let:
+				1.没有预解析，声明变量之前调用不会出现undefined而是报错
+				
+				2.使用let之后，不会在window下注册一个属性，所以为undefined
+				3.变量名不允许是重复的，如果重复报错。
+				
+				4.在某些情况下可以替代索引
+				
+				
+		常量：不可变的量
+			const
+				
+				1.没有预解析，声明变量之前调用不会出现undefined而是报错
+				
+				2.声明时要立即声明立即赋值，不然会报错。
+				
+				3.变量名不允许是重复的，如果重复报错。
+				
+				4.某些值只是使用不会改变的就使用const
+				
+				5.使用const之后，不会在window下注册一个属性，所以为undefined
+				
+		块：{}
+			{
+				fn(){},
+				age,
+				name
+			}
+			
+			一个块就相当于一个作用域，子级能够访问父级域中的变量/常量，而父级不能访问子级的变量/常量
+	*/
+
+	//变量死区，暂存死区
+
+	//alert(a);  //报错
+
+	//let a = 10;
+
+//	function fn(){
+//		alert(window.a);
+//	}
+//	fn();
+//	console.dir(window);
+
+	//let a = 20;
+
+
+//	{
+//		let a = 10;
+//		{
+//			alert(a);
+//		}
+//	}
+
+
+	const inputs = document.getElementsByTagName('input');
+
+	for(let i=0;i<inputs.length;i++){
+		inputs[i].onclick = function(){
+			alert(i);
+		}
+	}
+
+	/*
+		for(let i=0;i<inputs.length;i++){
+			inputs[0].onclick = function(){
+				alert(0);
+			}
+		}
+		for(let i=0;i<inputs.length;i++){
+			inputs[1].onclick = function(){
+				alert(1);
+			}
+		}
+		for(let i=0;i<inputs.length;i++){
+			inputs[2].onclick = function(){
+				alert(2);
+			}
+		}
+		
+	*/
+
+
+	//console.log(i);
+
+
+//	var a = 12;
+//	const b = 12;
+//	
+////	a = 'heheda';
+//
+//	b = '123';
+//	
+//	console.log(b);
+
+
+	//const a = 10;
+
+	const obj = {
+		name:'hehe'
+	}
+
+	obj.name = 'haha'; //不会报错
+//	obj = {
+//		name:'haha'  会报错
+//	}
+
+	alert(obj.name);
+
+	const ab = 10;
+
+	console.log(window.ab);
+
+
+</script>
+</body>
+</html>
diff --git a/ES6_对象.html b/ES6_对象.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+	<meta charset="UTF-8" />
+	<title>Document</title>
+<style>
+#div{
+	width:100px;
+	height: 100px;
+	border: 1px solid #000;
+	position: absolute;
+	top:10px;
+	left:20px;
+	margin: 2px;
+	padding: 5px;
+}	
+</style>
+</head>
+<body>
+	<div id="div"></div>
+<script type="text/javascript">
+	/*
+		如果右边是对象，左边也有用{}包裹，直接找对应的属性名即可。 
+		
+		如果变量名要修改，那么:新的变量名。
+	*/
+
+//	let {b,a} = {a:1,b:2};
+
+//	console.log(a,b); //2,1
+
+
+//	let {x,y} = {a:1,b:2};
+//	console.log(x,y);//undefined,undefined
+
+	//let {b:x,a:y} = {a:1,b:2};
+
+//	console.log(x,y);
+
+	//let div = document.getElementById('div');
+
+//	console.log(getComputedStyle(div)['width'])
+//	console.log(getComputedStyle(div)['height'])
+
+	//let {width:w,height:h,border:b,margin:m} = getComputedStyle(div);
+
+//	console.log(m);
+
+
+	/*
+		如果数组与对象嵌套，那么直接把右边的值复制过来，换成变量名即可。 
+	*/
+//	let obj = {
+//	  p: [
+//	    'Hello',
+//	    { y: 'World' }
+//	  ]
+//	};
+//
+//	let { p: [x, { y }] } = obj;
+
+//	console.log(x,y)
+
+	/*
+		使用解构赋值将下列数字放到同一个数组中 
+	*/
+//	let obj = {
+//		a:{
+//			b:[
+//				[1,2,3],
+//				['a','b','c',{d:7}]
+//			]
+//		}
+//	};
+//	
+//	let {
+//		a:{
+//			b:[
+//				c,
+//				[v,h,k,{d:f}]
+//			]
+//		}
+//	} = obj;
+//	
+//	c.push(f);
+//	
+//	console.log(c);
+
+
+
+//	var {x: y = 3} = {x: 5};
+
+//	let {x: y = 3} = {};  //y = 3
+
+//	let {x, y = 5} = {x: 1};
+
+
+
+	/*
+		如果有默认设置，右边为没有值或者值为undefined，走默认，别的都走配置。 
+	*/
+//	var {x = 3} = {x: undefined};
+//	//x // 3
+//	
+//	var {x = 3} = {x: null}; 
+//	
+//	var [x=3] = [undefined]
+//	console.log(x);
+
+	let {baz: {bar}} = {baz: 'baz'};
+	console.log(bar); //undefined 
+
+
+</script>
+</body>
+</html>