ES6 语法

ES6 语法

• let 和 var

let 有块级作用域

var 没有块级作用域

if 和 for 是没有作用域的， 但函数有作用域

没有块级作用域产生的问：

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>

var btns = document.getElementsByTanName('button');
for (var i=0; i < btns.length; i++) {
	btns[i].addEventListener('click',function() {
		console.log('第' + i +'个按钮被点击');
	})
}

目的当点击哪个按钮，控制台打印：第几个按钮被点击

输出结果为：第5个按钮被点击

用闭包可以解决，因为函数是有作用域的 为什么闭包可以解决问题: 函数是有作用域的

var btns = document.getElementsByTanName('button');
for (var i=0; i < btns.length; i++) {
	(function (num) {
        btns[num].addEventListener('click',function() {
            console.log('第' + num +'个按钮被点击');
        });
	})(i)
}

// 立即执行函数
(function () {

})()

ES5之前因为 if 和 for 都没有块级作用域，所以在很多时候需要借助函数function的作用域来解决问题

ES6中加入了 let ，let 是有 if 和 for 的块级作用域

用ES6 的写法

const btns = document.getElementsByTanName('button');
for (let i =0; i < btns.length; i++){
	btns[i].addEventListener('click',function() {
            console.log('第' + i +'个按钮被点击');
    });
}

• const 关键字

注意一： 一旦给 const 修饰的标识符被赋值后，不能修改

const name = "why";

name = 'abc'

注意二：在使用 const 定义的标识符，必须进行赋值

const name;

注意三： 指向的对象不能修改，但可以改变对象内部属性的值

const obj = {
	name:"李四"，
	age: 18,
	height: 180
}

console.log(obj)

obj.name = "张飞"
obj.age = 22
obj,height = 185

console.log(obj)

• ES6对象的字变量增强写法

  1. 属性的增强写法

  const name = "李四"；
  
  const age=18;
  
  const height =  1.88;
  // ES5 的写法
  const obj = {
      name:name,
      age:age,
      height:height
  }
  // ES6 的写法
  const obj = {name,age,height}
  

  2. 函数的增强写法

  const obj = {
  	// ES5 写法
      run: function(){
  	
  	}
  }
  
  const obj = {
      // ES6 写法
      run(){
          
      }
  }