ES6新增

1. 新增模板字符串（为JavaScript提供了简单的字符串插值功能）

   模板字符串

   1. ES6新增的创建字符串的方式，使用反引号定义

      let name = `zhang`;
      let say = `hello,my name is ${name}`
      console.log(say);//hello,my name is zhang
      

   2. 可换行

      let result = {
        name: 'zhang',
        age: 12
      }
      let html = `
      name: 'zhang',
      age:12
      `;
      console.log(result);
      console.log(html);
      
      

   

   3. 可调用函数

      const say = () => {
        return 'hhhhhhhhhhh';
      }
      let greet = `${say()} aaaaaaaa`;
      console.log(greet);//hhhhhhhhhhh aaaaaaaa
      

   实例方法

   1. startsWith()：表示参数字符串是否在原字符串的头部，返回布尔值

   2. endsWith()：表示参数字符串是否在原字符串的尾部，返回布尔值

      let str = `hello world!`;
      console.log(str.startsWith(`hello`));//true
      console.log(str.endsWith(`!`));//true
      

   3. repeat()：方法表示将原字符串重复n次，返回一个新的字符串

      'x'.repeat(3) //xxx
      

2. 箭头函数

   //语法:() => {}
   const fn = () => {}
   

   函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号

   function sum(num1, num2) {
     return num1 + num2
   }
   const sum = (num1, num2) => num1 + num2
   

   函数体中只有一句代码，参数只有一个，且代码的执行结果就是返回值，可以省略大括号和小括号

   function sum(num1) {
     return num1
   }
   const sum = num1 => num1
   

   箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this

   const obj = { name: '张三' }
   function fn() {
     console.log(this);//obj
     return () => {
       console.log(this);//obj
     }
   }
   const res = fn.call(obj)
   res();
   

   面试题

   var age = 10;
   var obj = {
     age: 20,
     say: () => {
       console.log(this.age);//10
       console.log(age);//10
       console.log(this.age);//10
     }
   }
   obj.say();
   

3. for-of（用来遍历数据—例如数组中的值。）

   const arr = [2, 3, 5, 4, 5, 2, 2];
   for (let i of arr) {
     console.log(i) //打印出来的是value 2,3,5,4,2,2
   }
   
   const obj = { 'a': 1, 'b': 2, 'c': 3 }
   console.log(Object.keys(obj));//['a','b','c']
   //使用Object.keys方法将对象的键名生成一个数组，然后遍历这个数组
   for (let key of Object.keys(obj)) {
     console.log(obj[key]);
   }
   

4. arguments对象可被不定参数和默认参数完美代替。

   当开发人员不好确定用户输入的参数是几个的时候用

   //es6之前
   //封装自己的数学对象
   var myMath = {
     PI: 3.141592653589793,
     max: function () {
       var max = arguments[0];
       for (let i = 0; i < arguments.length; i++) {
         if (arguments[i] > max) {
           max = arguments[i];
         }
       }
       return max;
     }
   }
   console.log(myMath.PI);//3.141592653589793
   console.log(myMath.max(1, 22, 33, 32));//33
   
   //es6之后 因为箭头函数不可使用arguments对象
   //不定参数rest语法返回数组,  ...是spread扩展运算符
   function sum(...args) {
     console.log(args);//[10，23,98]
   }
   sum(10, 23, 98)
   ---------------------------------------------------------------
   const sum = (...args) => console.log(args);//[10，23,98]
   sum(10, 23, 98)
   

5. ES6将promise对象纳入规范，提供了原生的Promise对象。

   详见另一篇博客

6. 增加了let和const命令，用来声明变量。

7. 增加了块级作用域

8. let命令实际上就增加了块级作用域。

9. 还有就是引入module模块的概念

   模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。

   模块化的好处：

   模块化的优势有以下几点：

   1. 防止命名冲突
   2. 代码复用
   3. 高维护性

   模块化规范产品：

   ES6之前的模块化规范有：

   1. CommonJS => NodeJS、Browserify
   2. AMD => requireJS
   3. CMD => seaJS

   ES6模块化语法

   模块功能主要由两个命令构成：export 和 import

   export ：用于规定模块的对外接口

   //1.导出简单数据类型
   //方式一
   let age = 12;
   let aa = 13;
   export {
     age,
     aa
   }
   
   //方式二
   export let bb = 13;
   
   //2.导出函数/类
   //方式一
   export function f(cc) {
     return cc
   }
   export class dd {
     run() {
       console.log('banpan');
     }
   }
   //方式二
   function f2(ee) {
     return ee
   }
   class ff {
     run() {
       console.log('ban');
     }
   }
   export { f2, ff }
   
   //3.default
   let ga = "zhangyixing"
   export default ga
   

   import ：用于输入其他模块提供的功能

   //1.导入方式一
   import { age, bb, f, dd, f2, ff } from "./export.js";
   console.log(age);
   console.log(bb);
   console.log(f('cc'));
   const d = new dd();
   d.run()
   console.log(f2('ee'));
   const d2 = new ff();
   d2.run()
   
   
   //2.导入方式二 用default 导出的，导入时可以随便起名且不用大括号
   import mmm from "./export.js"
   console.log(mmm);
   
   //3.导入方式三：导入所有 并起别名为info
   import * as info from "./export.js"
   console.log(info);
   console.log(info.age);