ES6(let、模板字符串、对象简化赋值、箭头函数、箭头函数中的this)知识点整理

1.let
和var关键字的用法基本一致

let food = '西红柿';
    food = '西红柿炒鸡蛋';
    console.log(food);

 // 变量的声明 会提升到 当前作用域的顶端
    var food;
    console.log(food);
    food = '西红柿';

没有变量提升

// let 不会提升
    console.log(city);
    let city = '广州';

2.模板字符串
使用``包裹文本
在需要替换的位置使用${}占位，并填入内容即可
没有使用模板字符：

let temStr = `我的名字是：我喜欢的东西是：我所在的城市是`;
    console.log(temStr);

使用模板字符：

    let name = "I";
    let food = "西红柿";
    let city = "广州";
    let temStr = `我的名字是：${name} 我喜欢的东西是：${food} 我所在的城市是:${city}`;
    console.log(temStr);

3.对象简化赋值
如果属性名和变量名相同，可以简写

没有简写：

    let name = "I";
    let city = "广州";
    let person = {
      name:name,
      city:city
    }
    console.log(person);

简写：

   let name = "I";
    let city = "广州";
    let person = {
      name,//name:name,
      city//city:city
    }
    console.log(person);

方法可以省略function关键字
没有省略function：

    let name = "I";
    let city = "广州";
    let person = {
      name,//name:name,
      city,//city:city
      sayHello:function(){
        console.log('你好吗？');
      }
    }
    console.log(person);
    person.sayHello();

省略function：

    let name = "I";
    let city = "广州";
    let person = {
      name,//name:name,
      city,//city:city
      // sayHello:function(){
      //   console.log('你好吗？');
      // }
      sayHello(){
        console.log('你好吗？');
      }
    }
    console.log(person);
    person.sayHello();

4.箭头函数
function省略掉，替换为 =>
函数体只有一行时，可以省略**{}**
参数只有一个时，可以省略**()**
函数体只有一行，并且有返回值时，如果省略了**{}，必须省略return**

//无参数 ，一行，无返回值的函数
    // let fun1 = function(){
    //   console.log('Hello JavaScript!');
    // }
    let fun1 = ()=> console.log('Hello JavaScript!');
    
    fun1();

 //1个参数，一行，无返回值的函数
    // let fun2 = function(p1){
    //   console.log(p1);
    // }
    let fun2 = (p1)=>console.log(p1);
    fun2('程序员');

//2个参数，多行，无返回值的函数
    // let fun3 = function(p1,p2){
    //   console.log(p1);
    //   console.log(p2);
    // }
    let fun3 = (p1,p2)=>{
      console.log(p1);
      console.log(p2);
    }
    fun3('广州','程序员');

//无参数，一行，有返回值的函数
    // let fun4 = function(){
    //   return 'Hello JavaScript';
    // }
    let fun4 = ()=> 'Hello JavaScript';
    let fun4Res = fun4();
    console.log(fun4Res);

 //1个参数，一行，有返回值的函数
    // let fun5 = function(p1){
    //   return p1 + 'Hello JavaScript';
    // }
    let fun5 = p1=> p1 + 'Hello JavaScript';
    let fun5Res = fun5('HTML ');
    console.log(fun5Res);

 //2个参数，多行，有返回值的函数
    // let fun6 = function(p1,p2){
    //   console.log(p1,p2);
    //   return p1+p2+'Hello JavaScript';
    // }
    let fun6 = (p1,p2)=>{
      console.log(p1,p2);
      return p1+p2+'Hello JavaScript';
    }
    let fun6Res = fun6('HTML','程序员');
    console.log(fun6Res);

5.箭头函数中的this
创建时的this是谁，运行的时候this就是谁

let person = {
      name:'I',
      food:'西红柿',
      sayHi(){
        console.log(this);
      }
    }
    //谁点出来的 就是谁
    person.sayHi();

let person = {
      name:'I',
      food:'西红柿',
      sayHi(){
        //console.log(this);
        setTimeout(function(){
          console.log(this);
        },100)
      }
    }
    //谁点出来的 就是谁
    person.sayHi();

let person = {
      name:'I',
      food:'西红柿',
      sayHi(){
        //console.log(this);
        // setTimeout(function(){
        //   console.log(this);
        // },100)

        setTimeout(()=>{
          console.log(this);
        },100)
      }
    }
    //谁点出来的 就是谁
    person.sayHi();