ES6新增语法

一、定义变量

1.1 新增变量关键字

• let 变量

• const 常量

1.2 let/const 与var 的区别？

1.2.1 预解析

         var会进行与解析

        let/const没有与解析，必须先声明后使用

1.2.2重复变量名

• var定义的变量可以崇明

• let/const 不允许定义重名变量

1.2.3 块级作用域

• var没有块级作用域，只有函数能限制变量的使用范围

• let/const 有块级作用域，任何一个可执行代码的{}都会限制该变量的适用范围

1.3 let和const的区别

1.3.1 变量值可以变

• let定义的变量可以修改值

• const定义的变量不可以修改值

1.3.2 初始化赋值

• let 可以定义的时候不赋值

• const定义的时候必须赋值，而且一经赋值不允许修改

二、 ES6的箭头函数

2.1 定义

• 是ES6语法内退出的一种新的书写函数的方式

• 是对于 函数表达式 的简写形式

  • 事件源.on事件类型 = function(){ }

  • xxx.forEach(function(){ })

  • var obj = {fn:function(){ }}

2.2 语法

• () => {}

• （）书写形参的位置

• => 箭头函数的标志

• {}书写代码段位置

2.3 特点

1. 可以省略小括号 不写

   • 当你的形参只有一个的时候，可以省略小括号

   • 没有形参或者两个及以上的时候，必须写小括号

2. 可以省略大括号 不写

   • 当你的函数体内只有一句话的时候，可以不写的大括号

   • 并且会把这一句的结果当做该函数的返回值

3. 箭头函数内没有 arguments

   • 箭头函数内没有

   • arguments就是形参的合集

4. 箭头函数内没有this

   • 箭头函数内的this就是该作用域外部作用域的this

   • 箭头函数外面的函数this是什么，箭头函数内的this就是什么

     • 箭头函数自己没有this，使用的是其父级函数的this

5. 箭头函数不能当做构造函数使用

   • 不能和 new 关键字连用

三、ES6 模板字符串

• ES6模板字符串

  • ES6内新增的一种定义字符串的方法

  • 使用 反引号（``）定义字符串

• 特点：

  • 可以换行书写

  • 可以直接解析变量，当你需要解析变量的时候，使用${变量}

四、ES6 函数形参默认值

• 给函数的形参设置一个默认值，当你没有传递实参的时候，使用默认值

• 直接只用 赋值符号（=）给形参赋值即可

五、 ES6 解构赋值

• 作用：快速从对象或者数组内获取数据

• 解构数组

  • 作用：快速从数组内获取数据

  • 注意：解构数组使用[]

  • 解构：var[变量] = 数组

    • 按照索引顺序，依次赋值

  • 多维解构

    • 数组怎么写，解构怎么写，数据换成变量

• 解构对象

  • 作用：快速从对象内获取数据

  • 注意：解构数组使用{}

  • 解构：var{key} = 对象

    • 定义一个变量，获取的是该对象内同名key的数据

  • 起一个别名

    • 获取的是对象内的name属性，但是定义的变量名需要叫做n

    • var{key：别名} = 对象 ============== var{name:n} = 对象

  • 多维解构

    • 对象怎么写，解构怎么写，数据换成变量

var arr = [100, 200, 300, 400, 500]
        //普通写法
        // var a = arr[0]
        // var b = arr[1]
        // var c = arr[2]
        // var d = arr[3]
        // var e = arr[4]
        // console.log(a, b, c, d, e)

        //结构数组使用
        // var [a, b, c, d, e] = arr
        // console.log(a, b, c, d, e)

        // var arr2 = [[1, 2, 3, 4], 5, 6, 7, [8, 9]]
        // var [[a, b, c, d], e, f, g, [h, i]] = arr2
        // console.log(a, b, c, d, e, f, g, h, i)

        var obj = { name: 'jack', age: 18, gender: '男' }
        // var name = obj.name
        // var age = obj.age
        // var gender = obj.gender

        var { name: a, gender: b, age: c } = obj

        console.log(a, b, c)

六、ES6 扩展运算符

• 扩展符：...

  • 展开运算符：数组，对象，实参

  • 合并运算符：解构，形参

• 展开功能

  • 作用：展开数据合集（数组，对象，Set，Map,......）使用

  • 意义：就是把数据最外层的符号（包裹）去掉

// 1. 展开功能
        // var arr = [100,200,300,400,[10,20,30]] 
        // console.log(arr)
        // console.log(...arr)
        // var arr2 = [...arr,[1,2,3]]
        // var arr2 = [arr,[1,2,3]]
        // console.log(arr2) 

        // var obj1 = {name : 'jack' , age : 18 ,gender : '男'}
        // var obj2 = {...obj1,100:'abc'}
        // var obj3 = {obj1,100:'abc'}
        // console.log(obj2)
        // console.log(obj3)

        // 2. 合并功能
        // 解构的时候使用，形参的时候使用
        // 注意 ：只要使用到合并功能，这个运算符只能书写一个，并且需要写在最后
        // var arr = [100,200,300,400,500] 

        // var [a,...b] = arr
        // console.log(a,b)

        // function fn(a,...b){
            // 第一个实参赋值给 a ，第二个到最后一个实参，放在数组内 赋值给 b
            // console.log(a,b)
        // }

七、对象简写语法

1. 当你的key和value一模一样的时候

   • value的是一个变量

   • 可以省略一个不写

2. 当你的对象内的key对应的值是一个函数

   • 并且，不是箭头函数的时候

   • 可以省略function关键字和冒号（：）不写

var day = 3
        var houer = 12
        var minutes = 13
        var seconds = 22
        
        var obj = {
             day,
             houer,
             minutes,
             seconds
        }

        console.log(obj)

        var obj = {
            f1 : function() { console.log(this) },
            f2 : () => { console.log(this) },
            f3 () { console.log(this) }
        }

        obj.f1()   //  this  =>  obj
        obj.f2()   //  this  =>  window
        obj.f3()   //  this  =>  obj

八、ES6 的模块化开发（重点）

• 把我们的完整功能，拆开称为一个一个的独立功能（模块）

  • 一个js文件就是一个独立模块

• 根据业务需求，来进行模块整合

• 当模块化开发的时候

  • 我们需要把多个逻辑书写在多个js文件内

  • 此时，每一个文件都是一个独立的文件，都是一个独立的模块作用域（文件作用域）

  • 该文件内，只能使用自己文件内的变量，不能使用其他文件内的变量

• 导出/导入

  • 导出：在一个文件内，向外暴露一些内容

  • 导入：导入该文件的同时，拿到他向外暴露的内容

• 浏览器使用ES6模块化语法的要求

  • script标签必须要有一个type = "module" 的属性

  • 页面必须要在服务器上打开（借助 live server）

• 导出语法

  • 语法1：export default 你要导出的数据

    • 一个文件只能导出一个default数据

  • 语法2：export 定义变量= 值

    • 一个文件可以导出多个新定义的变量

  • 导入语法

    • 语法1：import 变量 from '文件'

      • 这个语法必须对应导出语法1

    • 语法2：import{导入的内容} from ‘文件’

      • 这个语法必须对应导出语法2

export const a = 100
export const b = 200

unction isPrime() { console.log('isPrime') }
function randomNum() { console.log('randomNum') }
function randomColor() { console.log('randomColor') }
export default { isPrime: isPrime, randomNum: randomNum, randomColor: randomColor }

import { a, b, c, d, e } from './comment.js'
import headerModer from './header.js'

九、ES6类语法

• ES6 类语法

  • ES6 书写构造函数的方式

• ES5 以前 - 构造函数

• 因为构造函数的本质还是函数，所以可以和 new 关键字连用，也可以不连用

  • 缺点 ：可以不依赖 new 自己直接调用

• ES6 类

  • 语法 ： class 类名 {构造器，原型上的方法}