Vue Es6语法

let和var

• var是Js的一个设计缺陷，于是增加了一个新的关键字let。
• var没有块级作用域

块级作用域

{var name = '张三' console.log(name) } console.log(name) //如果用var,这里也能用name

• 没有块级作用域容易引起问题：if的块级作用域
  var func if(true){ var name = '张三' func = function(){ console.log(name) } } func() //没有块级作用域，name在任何地方都能被改掉
• 没有块级作用域引起的问题：for的块级作用域
  
  如果定义5个button，想实现点击第一个按钮，显示第1个按钮被点击。

点击5个按钮的代码

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

• 实际执行时，点击第1个按钮，显示第5个按钮被点击,没有达到预期效果。
• 因为addEventListener使用的外部的var定义的i，for执行后,i已经变成了5
• 想解决，必须使用闭包函数，因为函数是一个作用域
• 在Es6之前，Js中if和for是没有作用域的，所以必须借助匿名function作用域

ES6有if和for块级作用域

• 使用Es6，只需把前面代码中的var改成let即可，for就有了块级作用域

const的使用

• 当我们修饰的标识符不被再次赋值时，优先使用const来保证数据的安全
• ES6开发中，优先使用const，只有需要改变某个标识符时才使用let

const的注意事项

• ①const a = 1; a = 2 //再次赋值会出错
• ②在使用const定义标识符时，必须进行赋值
  const name //会出错
• ③常量的含义是指向的对象不能改变，但可以改变该对象内部的属性

const obj = {
  name:'关羽',
  age:36,
  height:1.82
}
obj.name = '张飞'   //可以更改对象的属性
obj.age = 35        //可以更改对象的属性

比如，const app = new Vue({})之后，可以通过app.属性值对app的属性进行更改

对象字面量的增强写法

const obj = new Object() //也可写成const obj = {}，即字面量

属性的增强写法

Es5的写法

const name = '关羽'
const age = 36
const height = 1.86
const obj = {
  name:name,
  age:age,
  height:height
}
console.log(obj)
//

Es6的写法

const name = '关羽'
const age = 36
const height = 1.86
const obj = {
  name,
  age,
  height
}

函数的增强写法

Es5的函数

const obj = {
  run:function(){
  },
  eat:function(){}
}

Es6函数

const obj = {
  run(){}
}