ES6

概述

1. ECMAScript6.0（简称：ES6）是JavaScript语言的下一代标准，在2015年6月正式发布
2. 目标：使得JavaScript语言可以用来编写复杂大型的应用程序，成为企业级的开发语言

ES6编程基础

let命令

1. 使用let声明的变量，只在代码块中有效（代码块作用域）
2. let命令没有变量提升
3. 暂时性死区：只要块级作用域存在let命令，它所声明的变量就“绑定”在这个区域，不再受外界影响

const命令

1. const命令声明一个常量，一旦声明，值不能被改变
2. 必须在声明的同时赋予初始值

函数的扩展–rest参数（剩余参数）

1. 语法格式：

   function 函数名(命名参数,...剩余参数名){
   }
   

2. 剩余参数：不与任何命名参数相比配的其他参数

3. 案例：

   function add(sum,...args){
       for(n of args){
          sum += n;
       }
   
       console.log(sum);
   }
   let sum = 10;
   add(sum,1,2,3,4);
   

解构赋值

使用解构赋值可以轻松地使用模板从对象或数组中提取数据

好处：一次可以定义多个变量，并赋值初始值

对象解构

1. 可以一次性的将每个属性赋予给同名变量

   //同名
   let stu = {name:"tom",age:20};
   let {name,age} = stu;
   console.log(name,age);
   
   //不同名
   let stu = {name:"tom",age:20};			
   let {name:stuName,age:stuAge} = stu;
   console.log(stuName,stuAge);
   

数组解构

var arr = ["tom","marry","scott"];
var [a,b,c] = arr;
console.log(a,b,c);

增强版的对象字面量

var name ="marry";
var stu = {
    name,//属性的简写形式，将同名变量的值赋予给属性
    age:20,
    //方法的简写形式
    hi(){
        alert("hi")
    }
}

console.log(stu.name);
stu.hi();

箭头函数

1. 箭头函数：是ES6中函数表达式定义的一种简化写法

2. ES6中允许使用“箭头” (=>)定义函数

   /* var fun1 = function(a){
       return a + 1;
   } */
   //var fun1 = (a)=>{return a+1;}
   var fun1 = a => a + 1
   
   var result = fun1(1);
   console.log(result);
   

   注意：

   • 当方法的形参个数为1的时候，形参外的括号可以省略

   • 当方法体中只有一条 return语句的时候，方法体外的大括号可以省略，return关键字也可以省略

   • 箭头函数在被调用的时候，不会向其传递隐式的 arguments 和 this 对象

   • 箭头函数的函数体内的this对象，就是定义箭头函数时所在的对象，而不是调用时的对象

     function test(){
                     console.log(this);//{"name":"tom"}
                     let t;
                     
                     /* t = function (){
                         console.log(this);//window
                     } */
                     
                     t = ()=>{
                         console.log(this);//{"name":"tom"}
                     }
                     t();
                 }
                 
                 var stu = {"name":"tom"};
                 
                 stu.test = test;
                 
                 stu.test();
     

扩展运算符

对象扩展运算符（…）：用于取出参数对象中的所有可遍历的属性，拷贝到当前对象中

var stu = {"name":"tom","age":20};
            
var stu2 = {...stu};

stu2.name = "marry";

console.log(stu.name);
console.log(stu2.name);

数组扩展运算符:

var arr = [1,2,3,4,5];
var arr2 = [...arr];

arr[0] = 10;

console.log(arr2);

模块

1. ES6模块的主要思想是必须显示地使用标识符导出模块数据，才能从外部访问模块

2. 导入导出方式一：要求导入时使用导出时候的名称

   //1.js
   export var name = "tom";
   
   <script type="module">
   import {name} from './js/1.js'
   
   console.log(name)
   </script>
   
   //1.js
   function test1(){
       alert('test1')
   }
   //导出方法
   export {test1}
   
   <script type="module">
       import {test1} from "./js/1.js";
       test1()
   </script>
   

3. 默认导出导入

   //1.js
   export default {
       name:"tom"
   }
   
   <script type="module">
   import Stu from './js/1.js'
   
   console.log(Stu.name)
   </script>
   

4. 全部导入

   //1.js
   export var name = "tom";
   export default {
       name:"tom"
   }
   function test1(){
       alert('test1')
   }
   //导出方法
   export {test1}
   
   <script type="module">
   import Stu from './js/1.js'
   import * as app from './js/1.js'
   
   console.log(Stu.name)
   console.log(app.name)
   console.log(app.default.name)
   app.test1()
   </script>