ES6语法

一、let/var/const

• let/var：事实上var的设计可以看成JS语言设计上的错误，所以设计者决定修复这个问题，添加了一个新的关键字：let。let可以看成更完美的var。都是用来定义变量。

let/var的作用域，区别

  1.变量作用域：变量在什么范围内是可用。
   {
     var name = 'why';
     console.log(name);
  }
  console.log(name);

  2.没有块级作用域引起的问题 if快级
   var func;
   if(true){
     var name = "why";
     func = function () {
       console.log(name);
     }
  }
   name = 'kobe'
   func()

  3.没有块级作用域引起的问题 for快级
  var btns = document.getElementsByTagName('button');
   for (var i=0; i<btns.length; i++){
     下面代码只会打印最大按钮被点击信息
     btns[i].addEventListener('click',function () {
     console.log('第' + i + '个按钮被点击')
  })

     闭包可以解决上面的问题，因为函数是一个作用域
     (function(i){
        btns[i].addEventListener('click',function () {
        console.log('第' + (i+1) + '个按钮被点击')
      })
     })(i)
  }
  或者最简单的方式，用let
  for (let i=0; i<btns.length; i++) {
     //因为let有作用域
     btns[i].addEventListener('click',function () {
     console.log('第' + (i+1) + '个按钮被点击')
   })
 }
</script>

• const

const：在跟多语言中都存在，主要作用是将变量修饰为常量。当我们修饰的标识符不会被再次赋值时，就可以使用const来保证数据的安全性。
注：修饰的标识符必须赋值且不可以修改
推荐：ES6开发中，优先使用const，只有标识符需要修改时用let

常量的含义是指向的对象不能改变，但可以改变对象内部的属性

const obj = {
  name: "kobe",
  age:  "18"
}
//不可以
obj = {}
//可以
obj.name = "hello"

二、

对象字面量的增强写法

1.属性的增强写法

const name = "kobe";
const height = "1.88";
const age = "18";

//ES5写法
const obj5 = {
  name: name,
  height: height,
  age: age
}

//ES6写法
const obj6 = {
  name,
  height,
  age
}

2.函数的增强写法

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

  },
  eat: function () {

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

  },
  eat(){

  }
}

三、箭头函数

箭头函数也是一种定义函数的方式；一般在需要将一个函数当作参数时使用箭头函数。java8中的ramanda表达式。

1.定义函数的三种方式

1.1function

const aaa = function () {

}

2.对象字面量中定义函数

const obj = {
  bbb() {

  }
}

3.ES6中的箭头函数

const ccc = (参数列表) => {

}

2.箭头函数参数和返回值

2.1 参数问题

//放入两个参数
const sum = (num1, num2) => {
  return num1 + num2
}
//放入一个参数 （）可以省略
const power = num => {
  return num * num
}

2.2 返回值

//函数代码块中有多行代码时，正常写
const test = () => {
  console.log('Hello world');
  console.log('Hello Vue.js');
}

//函数代码块中只有一行代码
// const mul = (num1, num2) => {
//   return num1 * num2
// }
const mul = (num1, num2) => num1 * num2

// const demo = () => {
//   console.log('Hello Demo');
// }
//函数没有返回值，会打印undefined
const demo = () => console.log('Hello Demo')
console.log(demo());

3.箭头函数中this的指向

箭头函数中的this是向外层作用域中，一层层查找this，直到有this的定义

const obj = {
  aaa() {
    setTimeout(function () {
      console.log(this);//window
    },1000)

    setTimeout(() => {
      //上层找到aaa函数，aaa函数的this指向obj对象，所以这里箭头函数this指向obj对象
      console.log(this);//obj对象
    },1000)
  }
}

例子

const obj = {
  aaa() {
    setTimeout(function () {
      setTimeout(function () {
        console.log(this);//window
      })

      setTimeout(() => {
        console.log(this);//window
      })
    },1000)

  setTimeout(() => {
    setTimeout(function () {
      console.log(this);//window
    })

    setTimeout(() => {
      console.log(this);//obj
    })
  },1000)
}
}