ES6基础

1、var\let区别

  var与let都是用来定义变量的，let可以看成为更完美的var，因为let有块级作用域，es5之前if和for都没有块级作用域的概念，所以在很多时候，我们都必须借助function作用域来解决引用外部变量问题。即es5中var没有块级作用域（if、for），es6中let有块级作用域（if、for）
没有块级作用域引起的问题：if的块级（不希望在块级作用域外随意修改块级作用域内变量值）

var func;
if(true){
	var name = 'aaa';
	
	func = function(){
		console.log(name);
	}
}
name = 'bbbb'
func()

没有块级作用域引起的问题：for的块级

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script type="text/javascript">
	var btns = document.getElementsByTagName('button');
	for(var i = 0;i<btns.length;i++){
		btns[i].addEventListener('click',function(){
			console.log('第'+i+'个按钮被点击')
		})
	}
</script>

运行截图：无论点击哪个按钮都会显示第五个按钮被点击，这就是由于没有块级作用域出现的问题。

解决没有块级作用域引起问题：使用闭包

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script type="text/javascript">
	var btns = document.getElementsByTagName('button');
	for(var i = 0;i<btns.length;i++){
		(function(num){
				btns[i].addEventListener('click',function(){
				console.log('第'+num+'个按钮被点击')
		})
		
		})(i)
	}

运行截图：依次点击按钮

解决没有块级作用域引起问题：使用let定义变量，有块级作用域

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script type="text/javascript">
	var btns = document.getElementsByTagName('button');
	for(let i = 0;i<btns.length;i++){
		btns[i].addEventListener('click',function(){
			console.log('第'+i+'个按钮被点击')
		})
	}
</script>

运行截图：依次点击按钮

2、const使用

  const关键字主要作用为将某个变量修饰为常量，不可以再次被赋值。在es6开发中，优先使用const，只有需要改变某一个标识符的时候才使用let。
注意一：一旦const修饰的标识符被赋值之后，不能修改
const name = ‘why’
name = ‘abc’
注意二：在使用const定义标识符时，必须进行赋值
const name；
注意三：常量的含义是指向的对象不能修改，但是可以改变对象内部的属性。
const obj = {
name = ‘why’，
age = ‘18’,
height = 1.88
}
console.log(obj);
obj.name = ‘kobe’，
obj.age = 40,
obj.height = 1.87
console.log(obj);

3、对象字面量增强写法

字面量：一般定义变量：const obj = new Object（）；简写：const obj = {}其中大括号{}就可以理解为字面量。
一般字面量对象定义方法：
obj = {
name = ‘why’，
run:function(){
console.log(‘在奔跑’);
}
}
属性的增强写法：
const name = ‘why’；
const age = 18；
ES5写法：
const obj = {
name ：name；
age：age；
}
ES6写法：
const obj = {
name，
age，
}
函数的增强写法：
ES5写法：
const obj = {
run：function（）{
}，
eat：function(){
}
}
ES6写法：
const obj = {
run(){
}，
eat(){
}
}