ES6新特性总结

ES6新特性

1.1：let和const

let的出现，解决了某些场景下var关键字带来的变量作用域问题，一般用var在外部定义的变量是全局的，但有时候我们想像Java那样，对于不同场合定义当前场合的局部变量，出了这个场合即为未定义，比如下面这个场景

for(var i = 0; i < 5; i++){
  console.log("循环内：" + i);
} 
console.log("循环外：" + i ) //5

我们在外部也能访问到变量i，这个变量的作用域太大了，这是不够完善的，而let的出现就是解决了这个问题

for(let i = 0; i < 5; i++){
  console.log("循环内：" + i);
} 
console.log("循环外：" + i ) //未定义

let：let声明的变量，只在let命令所在代码块内有效

　　且let审美的变量，只能赋值一次，不能多次赋值

const：声明的变量就是常量，定义为是不能修改的，要求在定义变量时就得完成初始化，且后续不能修改

1.2：字符串扩展

• 字符串api扩展

<script>
  let str = "hello world";
  //返回布尔，表示是否包含
  console.log(str.includes("hello"));
  //返回布尔，表示是否以 h 开头，区分大小写哦
  console.log(str.startsWith("h"));
  //返回布尔，表示是否以 d 结尾
  console.log(str.endsWith("d"));
</script>

• 模板字符串

• 模板字符串无论是在Vue还是React中用的都很普遍，使用的是``来标记

• 模板字符串中换行，在渲染的时候也会换行

<script>
  let str = `
    Hello
    World 
    ES6`
  console.log(str);
</script>

1.3：解构表达式

• 个人理解解构为：解析结构，按照一定的模式从数组和对象中拿到值

• 下面我们分别以数组和对象做一个列子简单说明一下

   <script>
     let arr = [1, 2, 3]  //定义一个数组
     const [a, b, c] = arr  //通过这种方式取得1,2,3
     console.log(a, b, c)
     const [d] = arr     //如果不匹配的情况，从数组0开始去
     console.log(d)      // 1
  </script>

  <script>
    let person = {
                name: '玛卡巴卡',
                age: 3,
                address: '魔仙堡'
     }
    //对象属性名接受
     const {name,age,address} = person
     console.log(name, age, address);
    //自定义变量接受
     const {name: yourName,age: yourAge,address: yourAddress} = person
     console.log(yourName, yourAge, yourAddress);
  </script>

1.4：函数优化

• ES6中，对函数做了些许优化，这些优化，我们在工作中还是很常见的

  • 函数参数默认值

    • 我们可以给形参指定默认值，

   <script>
          //ES6之前，想实现相同的效果
          function add1(a, b) {
              b = b || 1; // 判断b是否为空，为空就给默认值1
              return a + b;
          }
          console.log(add1(10));
  ​
          //ES6带来的改变
          function add2(a, b = 1) {
              return a + b;
          }
          console.log(add2(10));
      </script>

• 箭头函数，详细说明一下：

  • 箭头函数没有参数的时候，形参括号为空必须有

  • 当有一个参数，括号可以省略不写

  • 当函数体内部只要有一行代码是，大括号可以省略

 <script>
        // ES6之前
        var test1 = function(arg1) {
           console.log(arg1);
         }
        // ES6的箭头函数
        var test2 = (arg1) => {
           console.log(arg1);
        }
        // 精简版
        var test3 = arg1 => console.log(arg1)
    </script>

• 对象的函数属性简写

<script>
        let person = {
            name: "Ninja",
            // ES6之前
            do1: function(thing) {
                console.log(this.name + "正在" + thing);
            },
          
            // ES6的箭头函数
            // 这里拿不到this
            do2: thing => console.log(this.name + "正在" + thing), 
            // 使用person.的方式
            do22: thing => console.log(person.name + "正在" + thing), 
            
          // 简写版：
            do3(thing) {
                console.log(this.name + "正在" + thing);
            }
        }
    </script>

• 箭头函数配合结构表达式

<script>
    let person = {
      name: "Ninja",
      age: 24,
    }
​
  function test1(person) {
    console.log(person.name + '的年龄是' + person.age);
  }
 //箭头函数配合结构表达式
  var test2 = ({name,age}) => console.log(name + '的年龄是' + age);
​
  test1(person)
  test2(person)
</script>

1.5：map和reduce

• map() :接收的是一个函数，将原数组中的元素经过这个函数处理后放入一个新的数组

<script>
        var arr = [1, 2, 3, 4, 5]
        var newArr = arr.map(item => item * 10)
        console.log(newArr); //[10, 20, 30, 40, 50]
</script>

• reduce()：接收两个参数，一个函数(必须)，一个初始值(选择)

  • 这个要稍微复杂一点，但是也不难理解

  • reduce函数会把数组中的每一个值依次处理，比如下面的列子，第一次时，a就是数组中第一个值1，b就是数组中第二个值2，函数体为俩个数相加为3

  • 然后又会把上一次的结果带入下一次的运算中，知道数组内数据遍历完毕。把上次的结果继续操作a为3，b就为了数组中的3，相加为6，再下一轮a就是6，b就是4了

<script>
   var arr = [1, 2, 3, 4, 5]
   var result = arr.reduce((a, b) => a + b)
   console.log(result); //1+2+3+4+5 = 15
​
   // 指定初始值
   var result2 = arr.reduce((a, b) => a + b, -15)
   console.log(result2); //-15+1+2+3+4+5 = 0
</script>

1.6：扩展运算符

• 用...标识符将一个数组转为用逗号分隔的参数序列 。

<script>          
  console.log(...[1, 2, 3]); //1 2 3
  console.log(1, ...[2, 3, 4], 5); // 1 2 3 4 5
​
  function add(x, y) {
    return x + y;
  }
  var numbers = [1, 2];
  console.log(add(...numbers)); // 3
​
  // 数组合并
  let arr = [...[1, 2, 3], ...[4, 5, 6]];
  console.log(arr); //[1, 2, 3, 4, 5, 6]
​
  // 与解构表达式结合
  const [first, ...rest] = [1, 2, 3, 4, 5];
  console.log(first, rest) //1 [2, 3, 4, 5]
​
  //将字符串转成数组
  console.log([...'hello']) //["h", "e", "l", "l", "o"]
</script>

1.7：Promise

• 从语法上来看，Promise是一个对象，里面保存着未来才会触发的事件，通常是一个异步操作的结果，比如我们异步请求，我们不知道什么时候会有响应，我们可以通过Promise来写出看似同步的代码，下面一个写过列子看看

• new关键字创建一个Promise的实例饿，传入一个函数做为参数

• 入参函数有两个参数，第一个为成功的回调，第二个为失败的回调

• 在我们异步请求中，可能会请求成功，也可能会请求失败，分别调用上面的两个参数，然后通过Promise的实例方法.then获取异步操作结果，如果如果调用成功，就会走.then(function(msg){})方法，且响应也在msg中，否之，则走catch(function(msg){})方法，相应的，响应也在msg中，至于最后的那个finally，无论请求是否请求成功都会执行的代码段，和Java中一致

<script>
  const promise = new Promise(function(success, error) {
    //我们使用定时器来模仿一个异步任务
    setTimeout(() => {
      const num = Math.random()
      if (num <= 0.5) {
        success("成功" + num)
      } else {
        error("失败" + num)
      }
    }, 1000)
  })
​
  promise.then(function(msg) {
    console.log(msg);
  }).catch(function(msg) {
    console.log(msg);
  }).finally(function() {
    console.log("finally是一定会执行的代码段");
  })
   </script>     

1.8：Set和Map数据结构

• Set：和数组一致，差别在于，Set中只能保存不同的元素，重复的会被剔除

<script>
  const set1 = new Set()
  const set2 = new Set([1,2,3,4,1])
  set1.add(1)
  set1.add(2)
  set1.add(1)
  console.log(set1); //{1 2}
  console.log(set2); //{1, 2, 3, 4}
</script

• 一些api

  • set.add(); // 添加 set.clear(); // 清空 set.delete(2); // 删除指定元素 set.has(2); // 判断是否存在 set.forEach(function(){}) //遍历元素 set.size; // 元素个数。是属性，不是方法

• Map：

<script>
  const map = new Map([
    ['key1', 'value1'],
    ['key2', 'value2'],
  ])
  const set = new Set([
    ['key1', 'value1'],
    ['key2', 'value2'],
  ])
  const map2 = new Map(set) //可以接收一个set
  const map3 = new Map(map); //也可以接受其他map
  
  const map4 = new Map() //Map的键值都是Object，而Object的键只能是字符串
  map4.set(1, 2)
  map4.set('key', 'value')
  map4.set(true, false)
  console.log(map4);
</script>

• 一些api：

  • map.set(key, value);// 添加 map.clear(); // 清空该map所有键值 map.delete(key); // 根据键删除键值 map.has(key); // 判断是否存在 map.forEach(function(key,value){}) //遍历元素 map.size; // 元素个数。是属性，不是方法 map.values() //获取value的迭代器 map.keys() //获取key的迭代器 map.entries() //获取entry的迭代器

1.9：Class类的引入

• 写Java的对下面的代码应该熟悉得不得了，思想差不多

  • constructor构造函数，创建实例时调用，完成实例初始化

  • 实例方法、静态方法的创建和调用如下所示

  • 继承采用extends关键字

  • 一旦有继承关系，应该在构造函数中，第一步应该完成父类的初始化

<script>
    class User {
      constructor(name, age = 24) {
        this.name = name;
        this.age = age;
      }
      method1() {
        return "Hello World";
      }
      static method2() {
        return "我是静态方法"
      }
    }
​
  let user = new User("Ninja")
​
  console.log(user.method1()); //实例调用实例方法
  console.log(User.method2()); //类调用静态方法
​
  // 继承玩法
  class Son extends User {
    constructor(name, age, lovely) {
      // 完成父类的初始化
      super(name, age)
      this.lovely = lovely
    }
​
    method3() {
      return "我是" + this.name + ",我今年" + this.age + "岁，我的爱好是" + this.lovely
    }
  }
  let son = new Son("大猪蹄子", 18, "打篮球")
  console.log(son.method1());
  console.log(Son.method2()); //静态方法也会被继承，但不建议这样写
  console.log(son.method3());
</script>

1.10：Generator函数

• 这个用的少，还是记录一下

  • function命令与函数名 之间有一个星号:

  • 函数体内部使用 yield语句定义不同的内部状态。

  • next()方法的持续调用，依次暴露函数内部的值

<script>     
  function* hello() {
    yield "hello";
    yield "world";
    return "ES6";
  }
​
  let h = hello();
  console.log(h.next()); //{value: "hello", done: false}
  console.log(h.next()); //{value: "world", done: false}
  console.log(h.next()); //{value: "ES6", done: true}
  console.log(h.next()); //{value: undefined, done: true}
  // 遍历，注意不要和上面同时启用
  for (let item of h) {
     console.log(item); //hello world
  }
</script>

1.11:模块化

• 就是将代码抽出去，单独封装为一个js文件，我们需要什么就引入对应的js文件即可，有利于代码的复用

  • export命令用于模块化中的导出

  • import命令用于模块化的中导入

.