ES-ES6篇

1. ES6简介

1.1 ES6概念

• ES全称是ECMAScript，它是由ECMA国际标准化组织，制定的一项脚本语言的标准化规范
• ES6是ES的全新一代标准也叫做ECMA6，于2015年发布
• ES6每年6月会更新一次，以年份命名版本ES2015、ES2016…
• ES5之后的版本统称ES6
• 支持的浏览器和环境：IE10+、Chrome、FireFox、移动端、NodeJS

1.2 为什么使用ES6

• 每一次标准的诞生都意味着语言的完善，功能的加强。javaScript本身也有一些令人不满意地方
• ES6之前版本的变量提升增加了程序运行的不可预测性
• 语法太过松散，实现相同的功能，不同的人可能会写出不同的代码，增加了代码的阅读难读

2. 变量和常量

2.1 let定义变量

1. let用来声明变量,它类似于var,但是所声明的变量只在let命令
   所在的代码块内有效
2. let的特点：
   a). 存在块级作用域(如：if、for)
   b). 不存在声明提升，只能先声明，再使用
   c). 不允许重复声明(包括普通变量和函数参数)

2.2 const定义常量

1. 用来声明常量,常量就是值(内存地址),不能变化的量
2. const的特点：
   a). 存在块级作用域
   b). 不存在声明提升
   c). 不允许重复声明
   d). 声明时必须赋初始值
   f). 常量赋值后不能修改
   e). 常量声明的对象不能修改，但是能改对象里的属性

3. 解构赋值

ES6中允许从数组中提取值，按照对应位置，对变量赋值。对象也可以实现解构

3.1 数组解构

1. 数组解构允许我们按照一一对应的关系从数组中提取值，然后赋值给变量
2. 在ES5中从数组中提取值是这样的：

           var arr = [10,20,30]
            arr[0]
            arr[1]
            arr[2]  
       //  等于声明了3次变量

3. 在ES6中提供了数组解构，取值是这样的：

         let arr = [10,20,30]
         let [a,b,c] = arr        
       //  值按顺序一一对应

3. 数组解构是从左到右一一对应，没对应的变量值为undefined
4. 如果变量本身有值，通过解构后值会被数组中解构过来的值覆盖

3.2 对象解构

1. 对象解构允许我们使用变量的名字匹配对象的属性，匹配成功将对象属性的
   值赋值给变量,匹配不要需要按一一对应，但变量的名字必须和对象属性的
   名字一样，才能匹配成功
2. 对象解构，是这样的：

       let obj = {
   name:"张三",age:18}    
       let {
   name,age} = obj;  
      // 注：age写在 name前面都行 ,但必须与对象中的属性名一样才可以

3. 也可以将解构出来的值重新赋值给变量

     let obj = {
   name:"张三",age:18}    
     let {
   name:myName,age:myAge} = obj;
     //注：重新赋值给变量之后，name和 age就不能用了，如果不想变量名和对象属性名一样的情况下，可以使用这种重新赋值 

4. 箭头函数

• ES6中新增的定义函数的方式: =>
• 箭头函数是用来简化函数定义语法的

4.1 箭头函数语法

1. 相较 ES5 这里把 function 换成了 =>
   函数表达式：const f1 = () => {}
2. 如果此函数只有一个参数的情况下，可以省略括号
   正常写法：const f1 = (a)=>{}
   简写：const f1 = a => {}
3. 如果函数体里面只有一行代码：return 的情况下，{}和 return可以省掉

	//正常写法：
	const f1 = (a)=>{
   
     	return a*2
	}
//==========================
	//简写：
	const f1 = a => a*2

4.2 箭头函数中的this

1. 箭头函数不绑定this关键字，箭头函数中的this指向的是函数定义位置
   的上下文this
2. 箭头函数在哪个位置定义，那么它的this就是指向当前位置的this
3. 箭头函数不绑定this，所以不管是谁调用，还是用call等方法改变this
   指向都是无效的
4. 对象的代码块不算块级作用域，对象里面的箭头函数，相当于定义在全局
   作用域下，它的this指向windwo

4.3 对象中的属性函数

		// ES5中： 	
		var obj =	{
   
            show:function () {
   
            
            }
        }
       	// ES6中： 
        const obj = {
   
           show () {
   
                 
           }   
        }

5. 剩余参数

剩余参数语法允许我们将一个不定数量的参数表示为一个数组

5.1 函数-剩余参数案例

     const fn = (a,...b) => {
   
        // a：会对应调用函数是传进来的而第一个参数
        // b：则会以数组的形式把剩余的所有参数都装进去
     }
     注：一般可以把剩余参数的形成以args命名

5.2 解构数组-剩余参数案例

    let obj = ["张三", "李四", "王五"]
    let [s1,...s2] = obj
    //通过解构后:
    s1="张三"
    s2=["李四","王五"]

6. 扩展运算符

• 扩展运算符为 Array 的扩展方法
• 扩展运算符可以将数组转为用逗号分隔的参数序列

6.1 扩展运算符的语法

• 在数组前面加 ...可以将它的元素以逗号分隔开来

    let arr = [10, 20, 30]
    console.log(...arr)
    拆分结果为