• 第十九章 ES6语法

    一、ESC6语法

    含义：是在2015年更新的ECMAscript标准

    二、ESC6中新增语法

    1、定义变量 

    2、模板字符串：是es6中定义字符串的一种方式，有字符串该有的属性和方法

    3、解构赋值

    4、展开合并运算符

    5、对象的简写

    6、函数的默认值

    7、模块化开发

    三、定义变量

    1、之前我们在定义变量的时候使用的关键字==var，在es6中出现了两个关键字：let 、 const

    2、let：我们把使用let定义的变量称之为变量

    3、const：我们把const定义的变量称之为常量

    4、var 和let /const 的区别

           =>预解析。var定义的变量有预解析，let/const定义的变量没有预解析；

            =>变量的重复定义。var 可以定义多个同名变量，let/const不能同时定义多个同名变量；

            =>块级作用域。var 定义的变量不能形成块级作用域，let/const可以形成块级作用域；

    延伸：块级作用域: 任何一个可以书写代码段的 {} 都会限制变量的使用范围

    5、let 和const 的区别

            =>语法不同。let定义的变量称之为变量,const定义的变量称之为常量;

            =>声明时赋值。let在定义的时候可以不赋值，但是const必须要在声明的时候赋值；

            =>值的修改。let定义的变量可以修改值，const定义的变量不能修改值,但是用const声明的对象，对象里面的属性的值是可以修改的 ；

    四、函数的默认值

    含义：就是在我们es6中可以给函数的参数定义默认值，如果在函数调用的时候传递了参数，就使用传递进来的参数，如果在函数调用的时候没有传递参数，就使用我们的默认值代替；

    1.     function fn(a, b = 100) {
    2.       console.log(a, b)
    3.     }
    4.  
    5.     fn()
    6.     fn(10)
    7.     fn(10, 20)

    五、对象的简写

    1、含义：在es6中，对象内的键值对可以简写，前提是：

            =>如果对象中的键和值一样，并且值是一个变量，这时可以只写一个

            =>如果在对象中值是一个函数，并且不是箭头函数，这时function 和 ：（冒号）可以省略不写

    1.         // 第一种情况 键和值一样，值是一个变量
    2.         // 假设这个是计算得出的
    3.         var day = 12,hours = 13,minutes = 25
    4.         // 定义了一个对象
    5.         let obj = {
    6.             day:day,
    7.             hours:hours,
    8.             minutes:minutes
    9.         }
    10.         // 可简写为
    11.         let obj2 = {
    12.             day,
    13.             hours,
    14.             minutes
    15.         }
    16.         console.log(obj2.day); //12
    17.  
    18.         // 第二种 函数
    19.         const obj3 = {
    20.             fn1:function(){console.log(111);},
    21.             fn2:function(){console.log(222);}
    22.         }
    23.  
    24.         // 可简写为
    25.         const obj4 = {
    26.             fn1(){console.log(111);},
    27.             fn2(){console.log(222);}
    28.         }

    2、箭头函数

            （1）含义：箭头函数也是函数，是es6中定义的一种函数，也是一个匿名函数；

            注意：凡事可以使用匿名函数的地方，都可以使用匿名函数

            （2）语法：（形参） => {代码段}

            （3）使用

            +赋值式

            +定时器中的函数

            +方法中的函数

            +事件处理程序（函数）

    1.         // 赋值式
    2.         let fun = () =>{
    3.             console.log(666);
    4.         }
    5.         fun() //666
    6.  
    7.         // 定时器中的函数
    8.         setTimeout(() => {
    9.             console.log(111);
    10.         },1000)//111
    11.  
    12.         // 方法中的函数
    13.         const arr = [1,2,3]
    14.         arr.forEach((item) => {
    15.             console.log(item);
    16.         })//1 2 3
    17.  
    18.         // 时间处理中的函数
    19.         btns.onclick = () => {
    20.             console.log(222);
    21.         }//222

    （4）箭头函数的特点

    • 在箭头函数中，如果形参只有一个，（）可以省略不写
    • 没有参数或者是参数多余一个，（）必须要写
    • 如果大括号中，只有一句话，大括号可以省略不写，会自动返回结果
    1.         const arr = [3,1,2]
    2.         arr.sort((a,b) => a-b) //[1,2,3]

    （5）箭头函数的特点2 

    • 在箭头函数中没有arguments
    • 箭头函数中没有this,箭头函数中的this指向上下文，即指向箭头函数外面，就是外面的this指向哪里，箭头函数就指向哪里

    六、解构赋值

    1、含义：是es6的语法，就是允许我们按照一个方式从对象或者数组中获取值

    2、分类：解构对象和解构数组

    3、解构对象

    （1）普通解构

      语法：let{键名1，键名2，...} = 你要解构的对象

                let{键名1：别名，键名2：别名，...} = 你要解构的对象

    注意：如果起了别名，键名就不能使用了，只能使用别名

    1.     // 解构数组
    2.     const arr = [100, 200, 300, 400, 500]
    3.     //需求: 单独定义五个变量获取五个数据
    4.     const [a, b, c, d, e] = arr
    5.     console.log(a, b, c, d, e) // 100 200 300 400 500

    （2）解构多维对象

    =>原则：就是之前的对象如何书写，我们在解构的时候把值去掉就可以了

            ->如果想要起别名，我们就把之前的值改为别名

    1.         const obj = {
    2.             name:'Tom',
    3.             age:18,
    4.             love:{
    5.                 eat:{
    6.                     fruit:'苹果',
    7.                     food:'面包'
    8.                 },
    9.                 drink:{
    10.                     water:'白开水'
    11.                 }
    12.             }
    13.         }
    14.         // 解构普通对象
    15.         //第一种语法
    16.         let {name,age} = obj
    17.         console.log(name);//Tom
    18.  
    19.         //第二种语法
    20.         let {name:a,age:b} = obj
    21.         console.log(a);//Tom
    22.  
    23.         //解构多维对象
    24.         // 解构的方式获取值
    25.         let{
    26.             name,
    27.             age,
    28.             love:{
    29.                 eat:{
    30.                     fruit,
    31.                     food:b
    32.                 },
    33.                 drink:{
    34.                     water
    35.                 }
    36.             }
    37.         } = obj
    38.         console.log(water);//白开水
    39.         console.log(b);//面包

    4、解构数组

    （1）普通解构

    =>语法： let[变量1，变量2...] = 要解构的数组

    （2）多维解构

    =>原则：之前的数组如何书写，解构的时候就如何书写，把之前的值改成变量

    1.         let arr = [1,2,3]  
    2.         let[a,b,c] = arr
    3.         console.log(b); //2     
    4.         console.log(a,b);//1,2   
    5.  
    6.  
    7.         //多维数组
    8.         let arr1 = [1,2,[3,[4]]]
    9.         // 获取到4
    10.         let [a,b,[c,[d]]] = arr1
    11.         console.log(d);//4

    七、展开合并运算符

    1、含义：是在我们es6中的一个新的符号

    2、书写：...  这个符号就是三个点

    3、...有两层含义：展开和合并

    4、展开

    =>展开对象：就是在一个对象中展开另一个对象，就是把两个对象合并成一个对象。

    注意：由于在我们对象中键名不能重复的特点，如果展开的对象中有与上一个对象中一样的键名，后面的会把前面的进行覆盖；

    =>展开数组：就是把一个数组在另一个数组中展开，两个合并了

    =>就是在函数调用传递实参

    1.         function fun(){
    2.             console.log(arguments);// 0:1 1:2 2:3
    3.         }
    4.         let arr = [1,2,3]
    5.         fun(...arr)

    5、合并

    =>当这个符号书写在函数的形参位置的时候, 叫做合并运算

    =>从当前形参位置开始获取实参, 直到末尾

    注意: 合并运算符一定要写在最后一位，否则会报错

    =>就是在数组解构的时候

    八、es6的模块化开发

    1、模块：就是一个单独的JS文件就是一个模块

    =>特点：每一个JS文件中的内容（变量、函数..）都只能在当前的模块中被使用

    2、为什么需要模块化开发？

            在网页中有的内容是一样，就不需要重复的编写，我们只需要书写一次 ，哪里需要引入到那个文件中使用就可以了

    3、模块开发的核心：导入和导出

    =>导入：你需要那个文件（.js），就需要导入那个文件

      ->语法：import 变量 from '你要导入的文件路径'

    =>导出：你要让别的文件使用你里面的内容，就需要导出

     ->语法： exports  default你要导出的内容

            +特点：只能导出一个，多个导出后面的会覆盖前面的

     ->语法： exports default{你要导出的内容}

    4、使用

    =>es6的模块化开发不能直接在本地打开，需要在服务端打开，liv server

    =>同时需要在script标签上书写一个属性 type = 'module'

    九、Map和Set数据结构

    1、es6新增了两种数据结构：Map和Set。共同点：不接受重复数据；

    2、Set数据结构

    （1）是一个 类似于 数组的数据结构，按照索引排列的数据结构

    （2）语法：var s = new Set([ 数据1, 数据2, 数据3, ... ])

    （3）Set的属性和方法

    =>size 属性

    • 语法: 数据结构.size
    • 返回值：该数据结构内有多少个数据

    =>add() 方法

    • 语法: 数据结构.add(数据)
    • 作用: 向该数据结构内添加数据
    • 返回值：就是添加后的数据结构

    =>has() 方法

    • 语法: 数据结构.has(数据)
    • 作用：检测这个数据结构中有没有这个数据的
    • 返回值: 一个布尔值
    • true, 表示该数据结构内有该数据
    • false, 表示该数据结构内没有该数据

    =>delete() 方法

    • 语法: 数据结构.delete(数据)
    • 作用: 删除该数据结构内的某一个数据

    =>clear() 方法

    • 语法: 数据结构.clear()
    • 作用: 清除该数据结构内所有数据

    =>forEach() 方法

    • 语法: 数据结构.forEach(function (value, key, origin) {})
    • 作用：用来循环遍历数据结构的
    1. // 创建 Set 数据结构
    2. var s = new Set([ 100, 200, 300 ])
    3. console.log(s)
    4. // Set 的属性和方法
    5. // 1. size
    6. console.log(s.size)
    7. // 2. add()
    8. var o = { name: 'Jack' }
    9. s.add({ name: 'Jack' })
    10. s.add(o)
    11. console.log(s)
    12. // 3. has()
    13. console.log(s.has(200))
    14. console.log(s.has(o))
    15. // 4. delete()
    16. s.delete(300)
    17. s.delete(o)
    18. console.log(s)
    19. // 5. clear()
    20. s.clear()
    21. console.log(s)
    22. // 6. forEach()
    23. s.forEach(function (item, value, origin) {
    24.   console.log('我执行了', item, value, origin)
    25. })

    （4）Map数据结构

    =>是一个类似于对象的数据结构, 但是他的 key 可以是任何数据类型

    =>可以被叫做一个 值=值 的数据结构

    =>语法：var m = new Map([ [ key, value ], [ key, value ] ])

    （5）Map的属性和方法

    =>set() 方法

    • 语法: 数据结构.set(key, value)
    • 作用: 向该数据结构内添加数据

    =>get() 方法

    • 语法: 数据结构.get(key)
    • 返回值: 数据结构内该 key 对应的 value

    注意：Map()方法没有add（），多了set()、get()两个方法，其余的和其他的一样；

  • 相关阅读:
    单机部署
    Day42：网易云项目，路由进阶
    HCIP实验6
    vuex中的 actions 中，是不能使用 this.$message.error() 的
    VMware虚拟机开机黑屏问题
    台达PLC和昆仑通态触摸屏通讯设置
    QT之QWebEngineUrlRequestInterceptor
    云计算平台建设总体技术方案参考
    unity编辑器报错Microsoft Visual C# Compiler version
    VNC viewer在windows与linux之间文本和文件拷贝
  • 原文地址：https://blog.csdn.net/Girasoles/article/details/128080451