ES6

ES6是JavaScript一个非常重要的版本,新增了很多的重要的语法规范 对 JavaScript性能有了很大提升

`` 模板字符串

• 支持换行 支持解析变量 和 表达式
• 使用 ${} 包裹表达式 和 变量, 就可以直接解析 表达式/变量

    var a = `北京今天
天气挺好的`;
//(注意这里不要空格输出才是对齐的格式)
   console.log(a);
   
   var int1 = 100 ;
   var int2 = 200 ;

   // 使用 ${} 包裹 表达式 int1 + int2 
   console.log( `我今天的考试成绩是 ${int1 + int2} 分` );

   var int3 = int1 + int2 ;
   console.log( `我今天的考试成绩是 ${int3} 分` );

let const 声明变量

let const 声明变量

let

   1. let声明的变量 不会被预解析 提前调用结果是报错
   2. let声明的变量 变量名称不能重复
   3. 每一个{}对于 let声明的变量 就是一个独立的作用域
   4. 在 {} 中 使用let定义的变量 只能在 {} 中 调用使用

注意

  在循环中 使用 let 声明循环变量
  每一次循环 对于 let 声明的变量 都是 一个独立的作用域
  每一次循环 相当于 声明一个独立的变量 存储不同的数据

const

1. const声明的变量 不会被预解析 提前调用结果是报错
2. const声明的变量 变量名称不能重复
3. 每一个{}对于 const声明的变量 就是一个独立的作用域
4. 在 {} 中 使用const定义的变量 只能在 {} 中 调用使用

注意

const声明的变量 存储的数据不能改变
使用const声明的变量 也成为 常量

应用

在 JavaScript程序中
    let 一般用于声明存储 `基本数据类型`
        布尔 字符串 数值 null undefined

    const 一般用于声明存储 `引用数据类型`
        数组 对象 函数
        

        const a = '北京' ;
        // 对 const 声明的变量 重复赋值
        // 变量a 中 存储的是 北京 
        // 企图通过重复赋值 修改变量a中存储的字符串北京 改成 数值100
        // const 声明的变量 不能修改存储的数据 
        // a = 100 ;

        const arr = [100,200,300,400];
        // 变量arr中 存储的是 内存地址
        // 企图 修改 数组中 索引下标是0的单元存储的数据
        // 不会影响 变量arr 中 存储的数组的内存地址
        arr[0] = '北京' ;

        // 直接给变量arr赋值存储'北京' 是 不能执行的
        // arr = '北京' ;

解构语法形式

解构数组

let [ 变量1 , 变量2 ... ] = 数组 ;
数组中的数据按照顺序 解构赋值给左侧的变量

        const arr = [100,200,300,400,500];

         // 将数组中的数值 一一对应 赋值给 变量存储 
         let a = arr[0];
         let b = arr[1];
         let c = arr[2];
         let d = arr[3];
         let e = arr[4];

        // 结构赋值语法形式
        // 将 数组中的数据 一一对应的赋值给左侧 结构语法设定的变量
        let [ a,b,c,d,e ] = arr ;
        console.log( a,b,c,d,e );

    const arr = [100,200,300,[400,500,600]];
    let [a,b,c,[d,e,f]] = arr ;
    console.log( a,b,c,  d,e,f );

解构对象

    let { 键名1 , 键名2 ... } = 对象 ;
        第一步 使用键名从对象中调用数据
        第二步 使用键名声明一个变量 存储调用的数据

    let { 键名1:变量名 , 键名2:变量名 ... } = 对象 ;
        第一步 使用键名从对象中调用数据
        第二步 使用变量名 声明一个变量 存储调用的数据

        const obj = {
            name:'张三' , 
            age:18 ,
            phone:[ 123 , 456 , 789 ],

            qian:[
                {id:1},
                {id:2},
                {id:3},
            ],
        }

        let { 
            name:n ,
            age:a ,
            phone:[ p1 , p2 , p3 ],
            qian : [ {id:id1} , {id:id2} , {id:id3} ],

         } = obj ;
        
        console.log( n , a );
        console.log( p1 , p2 , p3 );
        console.log( id1 , id2 , id3 );

        console.log( obj.qian[2].id);

自执行函数

(函数)()

!函数()

~函数()

自执行函数 / 立即执行函数 

普通函数

分成两个步骤过程 
    步骤1   声明封装函数
    步骤2   调用执行函数
 

自执行函数 或者 立即执行函数

    本质是  在 声明封装函数的同时 就 调用执行函数

(封装的匿名函数)()

        将 封装的函数 作为一个整体 通过 () 语法来调用执行这个函数 
        普通函数可以反复调用 
        立即执行函数/自执行函数 只能调用执行一次

~匿名函数()

!匿名函数()

注意

    立即执行函数 只能调用执行`一次`
    !语法 和 ~语法 不支持 箭头函数语法形式

        // 普通函数 
        
        // 声明封装函数
         function fun(){ console.log(111) };
        // 调用执行函数 普通语法封装的函数可以反复调用
         fun();
         fun();
         fun();
         fun();
         

        // 立即执行函数 / 自执行函数

        (function(){ console.log(222) })();
        !function(){ console.log(333) }();
        ~function(){ console.log(444) }();

Set Map数据类型

Set数据类型

    是 ES6 新增的数据类型
    以 类似于`数组`的形式 存储数据

特点 不能存储重复的数据

声明

    const 变量 = new Set( 数组 );

新增

    变量.add( 数据 );
        每次只能新增一个数据 

删除

    变量.delete( 数据 );

清除

  变量.clear();
  删除所有的数据

判断有没有

  变量.has( 数据 );

循环

   变量.forEach( function( 参数1 , 参数2 , 参数3 ){} )
        参数1   set类型数据单元存储的数据数值
        参数2   set类型数据单元存储的数据数值
        参数3   原始set数据类型

利用 set类型 进行数组去重

        const arr = [1,2,3,1,2,3,4,1,2,3,4,5,1,2,3,4,5,6,1,2,3,4,5,6,7,];
        // 创建一个set数据类型
        // 使用需要去重的数组 作为 set类型设定的数据
        // set类型中存储的数据 就是 数组中去重之后的数据
        const set = new Set( arr );
        console.log( set );
        // 将 set类型中存储的不重复的数组的数据 存储到 新数组中
        // 使用 展开运算符 将 set类型中 不重复的数据 存储到 新数组中
        const newArr = [ ...set ];


        const newArr = [ ...new Set( arr ) ];

        console.log( newArr );

map 数据类型

是 ES6 新增的数据类型 
以 类似于 `对象`的形式 存储数据 

        // 使用 构造函数语法形式 创建一个新的Map数据类型
        // 在 创建 Map数据类型的同时 设定 存储的数据数值
        // 存储的数据 必须是 二维数组语法形式 
        // 二维数组中 第一个单元存储键名 
        // 二维数组中 第二个单元存储键值 
        const map = new Map( [ [ 'name' , '张三' ] , [ 'age' , 18 ] , [ 'sex' , '男' ] , [ 'addr' , '北京' ] ] );

        // 向 Map数据类型 新增数据单元
        map.set( 'phone' , 123 );
        map.set( 'email' , 'abc@qq.com' );

        // 利用 键名 从 Map数据类型中获取对应的键值
        console.log( map.get( 'name' ) ) ;
        console.log( map.get( 'phone' ) ) ;

        // 利用 键名 从 Map数据类型中删除对应的单元
        map.delete( 'name' );

        // 清空就是删除所有的数据单元
         map.clear();

        // 判断有没有 
         console.log( map.has('name') );
         console.log( map.has('age') );

        // 循环遍历
        // 参数1 map数据类型存储的键值
        // 参数2 map数据类型存储的键名
        // 参数3 原始map数据类型
        map.forEach( function( a,b,c ){
            console.log( a , b , c );
        })

        console.log( map );

箭头函数

箭头函数

ES6新增的语法形式 
将 匿名函数语法形式 使用 箭头函数语法形式执行
箭头函数 主要是为了配合 `面向对象语法`编程

基本语法

function(){} 匿名函数 改写成 ()=>{} 箭头函数

简写语法

如果 箭头函数 只有一个参数 可以不写 ( ) 
如果 箭头函数 只有一行代码 可以不写 { } 

重点

箭头函数 主要是 为了 配合 面向对象编程语法 
箭头函数和普通函数的this指向不同

    <div>我是div标签</div>

    const oDiv = document.querySelector('div');

    // 普通函数
    oDiv.addEventListener( 'click' , function(){ console.log(111) } );

    // 箭头函数
    oDiv.addEventListener( 'click' , () => console.log(222) );


    const arr = [ 100,200,300,400,500,600 ];

    // 匿名函数
    arr.forEach( function( item ){ console.log( item ) });

    // 箭头函数
    arr.forEach( item => console.log( item ) );

class语法声明构造函数

promise语法