[JavaScript知识库]ES6必须知道的六大新特性

ES6

ES6新特性-let&const

• 使用const表示常量（声明之后不允许改变，一旦声明必须初始化，否则会报错）

//ES6 常量 不能修改
	const b=2;
	b=3;//Uncaught TypeError: Assignment to constant variable.
	console.log(b);

• 使用var声明的变量往往会越域，而let声明的变量有严格的局部作用域

// ES6
        // var声明的变量往往会越域
        // let声明的变量有严格的局部作用域
        {
            var a=1;
            let c=3;
        }
        console.log(a);
        console.log(c);//Uncaught ReferenceError: c is not defined

• let只可以声明一次，var可以声明多次

//var可以声明多次，let只可以声明一次
        var a=1
        var a=3
        let b=2
        let b=4
        console.log(a)
        console.log(b)//Uncaught SyntaxError: Identifier 'b' has already been declared

• let不会变量提升,变量提升的意思是可以先使用变量，再声明

// var会变量提升
// let不会变量提升
        console.log(a)
        var a =1
        console.log(b)
        let b =2

ES6新特性-解构&字符串

• 数组的解构：

//数据的解构
        let arr=[1,2,3];
        let a=arr[0];
        let b=arr[1];
        let c=arr[2];
        console.info(a,b,c);

//ES6:数组的解构表达式
        let[aa,bb,cc]=arr;
        console.info(aa,bb,cc);

• 对象的解构：

let person={
            name:'徐庶',
            age:11,
            hobbies:['唱歌','跳舞']
        }
        let name=person.name;
        console.info(name)

//ES6:对象的解构表达式
        let{name,age,hobbies}=person;
        console.info(name,age,hobbies);

• 字符串模板：直接将html放在``中

let html="<div>"+"<a>你好</a>"+"</div>";

//ES6:字符串模板
let esHtml=`<div><a>你好</a></div>`;
console.info(esHtml);

• 字符串扩展：

//字符串扩展
let str="hello.vue";
console.log(str.startsWith("hello"))//true
console.log(str.endsWith(".vue"))//true
console.log(str.includes("e"))//true
console.log(str.includes("hello"))//true

• 字符串插入变量和表达式，变量名可以写在$,${}中可以放入js表达式

 let person={
            name:'徐庶',
            age:11,
            hobbies:['唱歌','跳舞']
        }

        let{name,age,hobbies}=person;

        function fun(){
            return "这是一个函数"
        }
        //ES6:字符串插入变量和表达式，变量名写在${},${}中可以放入js表达式
        console.info(`名字是${name},年龄是${age},爱好是${hobbies},这个函数的返回值是${fun()}`);

ES6新特性-函数优化

• 函数参数默认值：直接括号内设置默认值

//1.函数的参数默认值 ES之前
        function add(a){
            if(!a){
                a=1;
            }
            console.log(a);
        }
        add();

//ES6:函数的参数默认值
        function add(a=1){
            console.info(a);
        }
        add();

• 可变长度参数：在括号内的参数前添加…

//2.可变长度参数 ES之前
        function add(a){
            console.info(a);
        }
        add([1,2]);

//ES6:可变长度参数
        function add(...a){
            console.log(a);
        }
        add(1,2,3);

• 参数解构

//ES6:参数解构
let nums={
            a:1,
            b:2
        }
        function add({a,b}){
            console.log(a+b);
        }
        add(nums);

• 箭头函数：单行的时候更简洁，不需要return，多行的时候需要。

//箭头函数 lambda =>   ES6之前
        function add(a,b){
             return a+b;
        }
        console.info(add(1,2));

//ES6:箭头函数
        let add=(a,b)=>{
            let c=a+b
            console.log(c);
        }
        add(2,2);

ES6新特征-对象优化

• 对象的内置函数

  • keys()显示对象的属性
  • values()显示属性的值
  • entries()显示对象的属性和值
  • 对象合并函数assign()
    • 说明：第一个参数是需要合并的对象 其他参数会合并到第一个参数上面（如果有相同的后来者居上）

// 1.对象的内置函数
     let person = {
            name: "jack",
            age: 21,
            language: ['java', 'js', 'css']
        }

        console.log(Object.keys(person));//["name", "age", "language"]
        console.log(Object.values(person));//["jack", 21, Array(3)]
        console.log(Object.entries(person));//[Array(2), Array(2), Array(2)]


         // 对象合并
         const target = { a: 1 };
        const source1 = { b: 2 };
        const source2 = { a:4,c: 3 };

        // 参数说明 第一个参数是需要合并的对象   其他参数会合并到第一个参数上面
        // 如果有重复的属性， 会以后面的进行覆盖
        Object.assign(target, source1, source2);

        console.log(target);//{a:4,b:2,c:3}

• 声明对象简写

  • 对象属性的简写：属性名和引用的变量名是相同的就可以省略赋值

    let name="徐庶";
    let age=11;
    
    // ES6之前
    let person={
         name:name,
         age:age
    }
    
    // ES6: 对象声明属性的简写 ：  如果属性名和引用的变量名是相同的就可以省略赋值，它会自动调用相同名字的变量
    let person={
        name,
        age
    } 
    console.info(person)
    

  • 对象中函数的简写：使用箭头函数声明，如果要调用本对象的属性this会失效，需要使用对象.属性的方式

    // ES: 对象中函数的简写方式
    let person={
        name:"徐庶",
    // ES6之前
        eat: function(food){
            console.info(this.name+"吃了："+food)
        },
    // ES6：通过箭头函数声明，   如果要调用本对象的属性this指向window， 需要使用对象.属性
        eat2: (food) => console.info(person.name+"吃了："+food),
    //第三种方式，不写冒号
        eat3(food){
            console.info(this.name+"吃了："+food)
        }
    }
    person.eat("米饭");
    person.eat2("海鲜");
    person.eat3("水果");
    

  • 对象扩展运算符：拷贝与合并（…）

    //对象的扩展运算符
        //1.拷贝对象（深拷贝）
        let person={name:"xushu",age:18,wife:{name:"杨迪"}};
        let person2={...person};
        console.info(person2);
    
        //2.合并对象
        const target = { a: 1 };
        const source1 = { b: 2 };
        const source2 = { c: 3 };
        let newObject={...target,... source1,...source2};
        console.info(newObject);
    

ES6新特性-promise异步编排

• 使用ES之前的ajax请求方式:

  //使用函数简化，但是还是嵌套的方式
  function myAjax(url, callback){
          $.ajax({
              url: url, 
              success: function (result) {
                  callback(result);
              }
          });
      }
  myAjax("http://localhost:8811/user/existUsername",function(result){
          if(result.data){
              				   myAjax("http://localhost:8811/user/existPhone",function(result){
                  
              })
          }
      })
  
  //传统的ajax请求方式
      用户名是否存在   
      $.ajax({
          url: "http://localhost:8811/user/existUsername",
          success: function (result) {
              if (result.data) {
                  alert('用户名不存在！')
                  // 手机是否存在
                  $.ajax({
                      url: "http://localhost:8811/user/existPhone",
                      success: function (result) {
                          if (result.data) {
                              alert('手机不存在！')
                              // 注册用户
                              $.ajax({
                              url:"http://localhost:8811/user/registryUser",
                                  success: function (result) {
                                      if (result.data) {
                                          alert(result.message)
                                      }
                                  },
                                  error: function (err) {
                                      alert("异常" + err)
                                  }
                              })
                          } else {
                              // 手机号已存在
                              alert(result.message)
                          }
                      },
                      error: function (err) {
                          alert("异常" + err)
                      }
                  })
              } else {
                  // 用户名已存在
                  alert(result.message)
              }
          },
          error: function (err) {
              alert("异常" + err)
          }
      })
  
  

• promise异步编排：

  • 当执行到resolve函数时，会调用.then()判断result
  • 当执行到reject函数时，会调用.catch()判断err

  new Promise((resolve, reject) => {
              // 1. 请求用户名是否存在
              $.ajax({
                  url: "http://localhost:8811/user/existUsername",
                  success: function (result) {
                      resolve(result);
                  },
                  error: function (err) {
                      reject(err);
                  }
              })
          })
          // 2.手机是否存在
          .then(result => {
              return new Promise((resolve, reject) => {
                  if (result.data) {
                      alert('用户名不存在！')
                      $.ajax({
                          url: "http://localhost:8811/user/existPhone",
                          success: function (result) {
                              resolve(result);
                          },
                          error: function (err) {
                              reject(err);
                          }
                      })
                  } else {
                      alert(result.message)
                  }
              })
  
          })
          .then(result => {
              return new Promise((resolve, reject) => {
                  if (result.data) {
                      alert('手机不存在！')
                      // 注册用户
                      $.ajax({
                          url: "http://localhost:8811/user/registryUser",
                          success: function (result) {
                              resolve(result);
                          },
                          error: function (err) {
                              alert("异常" + err)
                          }
                      })
                  } else {
                      // 手机号已存在
                      alert(result.message)
                  }
              });
          })
          .then(result => {
              if (result.data) {
                  alert(result.message)
              }
          })
          .catch(err => {
              alert('服务器异常')
          });
  
  //设置函数，简化请求
  
      function myAjax(url) {
          return new Promise((resolve, reject) => {
              // 1. 请求用户名是否存在
              $.ajax({
                  url,
                  success(result) {
                      resolve(result);
                  },
                  error(err) {
                      reject(err);
                  }
              })
          })
      }
  
      // 验证用户名不存在
      myAjax("http://localhost:8811/user/existUsername")
          .then(result => {
              if (result.data) {
                  alert('用户名不存在！');
                  return myAjax("http://localhost:8811/user/existPhone")
              } else {
                  alert(result.message)
              }
          })
          // 验证手机号是否存在
          .then(result => {
              if (result.data) {
                  alert('手机号不存在！');
                  return myAjax("http://localhost:8811/user/registryUser")
              } else {
                  alert(result.message)
              }
          })
          // 注册成功
          .then(result => {
              if (result.data) {
                  alert(result.message)
              }
          })
          .catch(err => {
              alert('服务器异常')
          });
  

ES6新特性-模块化

• 什么是模块化

  • 模块化就是把代码进行拆分，方便重复利用。类似于java中的导包：要使用一个包，必须先导包。然而JS中并没有包的概念，取而代之的是模块。
  • 在ES6中每一个模块既是一个文件，在文件中定义的变量，函数，对象在外部是无法获取的
  • 模块功能
    1. export命令用于规定模块的对外接口，如果你希望外部可以读取模块当中的内容，就必须使用export来对其进行暴露（输出）。其中export不仅仅只能导出对象，一切JS变量都可以导出
    2. import命令永固导入模块

• import语法：

  1. import 组件名 from ‘js文件路径’
  2. 组件名={需要导入的组件}需要多个时，用逗号隔开。当需要用的组件很多时，可直接写成*，就不要{}，但是还需要使用as取别名
  3. 非默认组件一定要用大括号，默认组件不能写在大括号里面

  <script type="module">
  // import 语法
  // import 组件名 from js文件路径
  // 组件名 : {需要导入的组件}  多个用逗号分隔，  用过组件有很多可以写成* ，就不需要{} ,但是还需要使用as取别名
  // 非默认组件一定要用大括号    ，默认组件不能写在大括号里面
  import * as person form './js/user.js'
  import xxx,{girl} from './js/user.js'
  
  console.info("---"+Object.keys(xxx));
  console.info("----"+girl);
  
  </script>
  

• 导出语法：

  • 对应三种import语法
    1. 直接写在组件上面（变量、对象、函数…)（export let User）
    2. 写在底部（批量导出）（export {User,girl}）
    3. 导出默认组件(export default)

export default {
    username:'徐庶',
    age:'18',
    print() {
        console.info(`姓名${this.username},年龄:${this.age}`)
    }
}

let girl ={
    realName:'迪丽热巴', 
    cup:'E'
}
 
export {girl}
// 需要导入 要先 导出 
// 导出 3:
//  1. 直接写在组件上面（变量、对象、函数....)
//export let User

//  2. 写在底部（批量导出）
// export {User,girl}

// 3. 导出默认组件