7.ES6新语法

76 阅读6分钟

ES6中定义变量

**其中varletconst的区别**
  预解析:
         通过var关键字声明的变量有预解析
         通过let/const定义的变量没有预解析
  重复声明:
         通过var可以重复定义一个变量
         通过let/const无法重复定义变量
  块级作用域:
         var不能形成块级作用域
         letconst可以形成块级作用域
**其中letconst的区别**
  语法不同:
         let定义的变量叫变量
         const定义的变量叫常量
  重复赋值:
         let定义的变量可以修改值
         const定义的变量不能修改值
  声明时赋值:
         let声明时可以不赋值
         const在声明时必须赋值

ES6中的模板字符串

ES中新的定义字符串的方式
使用的是反引号(``)
    特点: 可以换行
         可以在字符串中使用变量
         ${变量}

ES6中函数的默认值

就是在定义函数的形参时给形参赋值,如果传递了实参就使用传递的值,如果没有传递就使用默认值
**例:function(a=1b=2)

ES6中的箭头函数

var 变量名 = (参数)=>{代码段}
//箭头函数是匿名函数,凡是可以使用匿名函数的地方都可以使用箭头函数
使用匿名函数的地方:
    1.赋值式声明函数 let fun = function(){}
    2.事件处理程序
    3.方法中的函数
    4.定时器中的函数
特点:
    1.箭头函数中如果只有一个参数,小括号可以不写 e => {}
    2.如果没有或者多于一个参数要写小括号
    3.如果代码块中只有一句代码时,大括号可以省略不写 e => return 123
    4.箭头函数中没有arguments
    5.箭头函数中没有this
        //官方说法:
            //箭头函数中的this指向上下文(环境)
            //即箭头函数中的this指向箭头函数外面的this
            //换句话说就是箭头函数外面的this指向哪里,箭头函数里的this就指向哪里

ES6中的解构赋值

就是允许我们按照一定的方式快速的从```对象或者数组```中获取值
解构对象:
    普通解构:
        语法:let(键名1,键名2,...) = 要解构的对象
    带有别名的解构:
        就是允许我们在解构的时候给键名起别名
        语法:let(键名1:别名1,键名2:别名2...) = 要解构的对象
            //注意:起了别名之后,之前的键名就不能用了
    解构多维对象:
        之前的对象如何书写,解构的时候括号里就如何书写,把之前的值删掉就可以了。如果想要起别名,就把之前的名改成别名。
解构数组:
    普通解构:
        语法:let [变量名1,变量名2,...] = 你要解构的数组
        //当我们要获取数组中的某一个值,是没有办法只定义一个变量来获取的
    解构多维数组:
        之前的数组如何书写,解构的时候就如何书写,就是把之前的数据改成变量
ES6中的对象简写:
    1.如果在一个对象中,键和值是一样的,并且值是一个```变量```,这个时候可以只写一个
    2.如果对象中的值是一个函数,并且```不是箭头函数```function和冒号(:)可以省略不写

ES6中的展开合并运算符

就是把一个对象或者是数组展开,
一般就是在一个对象或者数组中展开另一个对象或者是数组,
使用的符号是...。
**展开**:
    展开对象:
        语法:let 变量名 = {键1:值1,键2:值2,...你要展开的对象}
        就是在一个对象中展开另一个对象,就是去掉展开的对象的大括号就可以了
        //根据键名不能重复的特点,展开的位置决定了最后的结果,键名重复会覆盖
    展开数组:
        语法:let 变量名 = [数据1,数据2,...你要展开的数组]
        就是去掉展开数组的中括号。
        //在函数实参的地方使用(形参,实参对应那里)
**合并**:
        //就是在函数形参的地方使用

ES6中的模块化

一个.js文件就是一个模块,在每一个js文件中定义的变量只能在当前的模块中使用,其他模块中不能使用。
如何使用模块化:
    导入:
        语法:import 变量名 from '文件地址'
    导出:
        语法:export default 要导出的数据
        语法:export default {要导出的数据}
    执行模块化:
        需要在服务端打开,也就是需要使用 open with live server
        需要在script标签添加type = "module"属性

ES6中的Set和Map数据结构

Set数据结构:就是长得像数组一样的数据结构
   语法:let 变量名 = new Set([数据1,数据2,...])
   注意:以数组的形式传递参数
   常用的属性和方法:
       属性:size
           语法:Set数据结构.size
           作用:就是用来表示这个数据结构中有多少个数据
           返回值:是一个数值
       方法:add()
           语法:Set数据结构.add(数据)
           作用:就是向数据结构添加数据
             has()
           语法:Set数据结构.has(数据)
           作用:用来检测数据结构中有没有这个数据
           返回值:布尔值,true表示有,false表示没有
             delete()
           语法:Set数据结构.delete(数据)
           作用:用来删除数据结构中的这个数据
             clear()
           语法:Set数据结构.clear()
           作用:用来删除数据结构中的所有数据
             forEach()
            //这个方法只是和数组中的方法重名
           语法:Set数据结构.forEachfunction(value,key,origin){})
           作用:用来遍历数据结构中的所有数据
Map数据结构:是一个长得像对象的数据结构,不要和数组中的map方法混淆了
   语法:let 变量名 = new Map([[key1,value1],[key2,value2],...[])
       属性:size
           语法:Map数据结构.size
           作用:用来表示这个数据结构中有多少条数据的
           返回值:就是一个数值
       方法:set()
           语法:Map数据结构.set(key,value)
           作用:往数据结构中添加一条数据的
             get()
           语法:Map数据结构.get(key)
           作用:获取这个键对应的值
           返回值:如果有,就返回这个键对应的值
                  如果没有就返回undefined
             has()
           语法:Map数据结构.has(key)
           作用:用来检测数据结构中有没有这个数据
           返回值:布尔值,true表示有,false表示没有
             delete()
           语法:Map数据结构.delete(key)
           作用:用来删除数据结构中的这个数据
             clear()
           语法:Map数据结构.clear()
           作用:用来清除数据结构中的所有数据
             forEach()
             //这个方法只是和数组中的方法重名
           语法:Map数据结构.forEachfunction(value,key,origin){})
           作用:用来遍历数据结构中的所有数据