5 ES6相关

ES6

let(ES6)/var(ES5)

var的设计可以看成是JavaScript语言设计上的错误，但是这种错误多半不能修复和移除，需要向后兼容。let可以看成更完美的var。

块级作用域

ES5之前因为if和for都没有块级作用域的概念，所以在很多时候都需要借助函数的作用域。

块作用域由 { } 包括，if语句和for语句里面的{ }也属于块作用域。

函数是有作用域的。

<div id="app">
   <button>按钮1</button>
   <button>按钮2</button>
   <button>按钮3</button>
</div>

<script>
// 没有块级作用域引起的问题：for的块级
//为什么闭包可以解决问题：函数是一个作用域
//1 ES5中没有使用闭包   错误的方式 输出都是第3个按钮被点击。
//添加监听类似于初始化，是需要按钮点击触发的  此时i已经为3了
//var btns=document.getElementsByTagName('button');
//for(var i=0;i<btns.length;i++){
//    btns[i].addEventListener('click',function () {
//        console.log('第' + i + '个按钮被点击');
//    })
//}

//2 ES5中使用闭包  有块级作用域  正确输出
//var btns=document.getElementsByTagName('button');
//for(var i=0;i<btns.length;i++){
//    (function (i) {
//        btns[i].addEventListener('click',function () {
//            console.log('第' + i + '个按钮被点击');
//        })
//    })(i)
//}

//3 使用ES6的let  有块级作用域  正确输出
var btns=document.getElementsByTagName('button');
for(let i=0;i<btns.length;i++){
   btns[i].addEventListener('click',function () {
       console.log('第' + i + '个按钮被点击');
   })
}
</script>

const的使用和注意点

• 主要的作用是将某个变量修饰为常量
• 不可以再次赋值
• 在ES6开发中尽量使用const

<script>
// 注意1 一旦给const修饰的标识符被赋值之后,不能修改
//注意2 在使用const定义标识符必须进行赋值
//注意3 常量的含义是指向的对象不能修改,但是可以改变对象内部的属性
const obj={
   name:'xhm',
   age:24,
   height:1.77
};
console.log(obj);
obj.name='kobe';
obj.age=40;
obj.height=1.88;
console.log(obj);
</script>

对象字面量增强写法

<script>
//1.属性的增强写法
const name='why';
const age=18;
const height=1.77;

//ES5的写法
//const obj={
//    name:name,
//    age:age,
//    height:height
//};

//ES6的写法
const obj={
   name,
   age,
   height
};

//函数的增强写法
//ES5的写法  btn:function(){}
//ES6的写法  btn(){}
console.log(obj);
</script>