ES6新增的知识(轻松了解)

菠萝脑瓜儿
2,511 阅读6分钟

let const 声明变量

let 一般用于声明存储 基本数据类型
布尔 字符串 数值 null undefined
const 一般用于声明存储 引用数据类型
数组 对象 函数
​
​
let
let声明的变量 不会被预解析 提前调用结果是报错
let声明的变量 变量名称不能重复
每一个{}对于 let声明的变量 就是一个独立的作用域
在 {} 中 使用let定义的变量 只能在 {} 中 调用使用
在循环中 使用 let 声明循环变量
每一次循环 对于 let 声明的变量 都是 一个独立的作用域
每一次循环 相当于 声明一个独立的变量 存储不同的数据
​
const
const声明的变量 不会被预解析 提前调用结果是报错
const声明的变量 变量名称不能重复
每一个{}对于 const声明的变量 就是一个独立的作用域
在 {} 中 使用const定义的变量 只能在 {} 中 调用使用
​
const声明的变量 存储的数据不能改变
使用const声明的变量 也成为 常量

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

// 所谓的 自执行函数 或者 立即执行函数
//             本质是  在 声明封装函数的同时 就 调用执行函数
// 立即执行函数/自执行函数 只能调用执行一次
​
(function(){ console.log(222) })();
!function(){ console.log(333) }();
~function(){ console.log(444) }();

解构赋值语法形式

  • 数组解构
    /*
    解构赋值语法形式 
        将 数组/ 中的数据 获取 一一对应的赋值给变量存储
        let [变量1,变量2...] = 数组 ;  
    */
​
        // 结构赋值语法形式
        // 将 数组中的数据 一一对应的赋值给左侧 结构语法设定的变量
        const arr = [100,200,300,400,500];
        let [ a,b,c,d,e ] = arr ;
        console.log( a,b,c,d,e );
  • 对象解构
        /*
            对象的解构赋值
                将 对象中存储的数据 一一对应的赋值给变量存储
​
                    let { 键名 , 键名 .... } = 对象 ;
                        这里设定的键名 有两个作用 
                            作用1 作为 键名 从 对象中调用数据 
                            作用2 作为 变量名称 将 从对象中调用的数据存储到这个变量中
                                之后 可以 作为 变量名称 调用数据
​
                    let { 键名:变量名称 , 键名 .... } = 对象 ;
                        通过 键名 从 对象中调用数据 
                        存储到 设定的变量名称中 
                        之后 使用 设定的变量名称调用数据
        */
​
        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);

展开合并运算符

  • 展开运算符
        /*
            展开合并运算符 展开运算符
                ... 写在 函数实参位置上 称为 展开运算符 
                将 数组中的数据 展开 一个一个的赋值给函数的形参
        */
​
        function fun( a,b,c,d ){
            console.log( a,b,c,d );
        }
        const arr = [ '北京' , '上海' , '广州' , '重庆' ];
​
        // 展开运算符 
        // 将数组中的每一个单元存储的数值 按照顺序 一个一个的赋值给函数的形参
        fun( ...arr );
  • 合并运算符
        /*
        function 函数( 参数1 , 参数2 , ...参数3 ){} 
        第一个实参赋值给参数1存储
        第二个实参赋值给参数2存储
        剩余所有的实参 赋值给 参数3 以数组的形式存储
        */
        
        // 合并运算符
        function fun( a,b,...c ){
            console.log( a , b , c );   // 100 200 (3) [300, 400, 500]
        }
​
        fun( 100 , 200 , 300 , 400 , 500 );

Set数据类型

        /*
        以 类似于数组的形式 存储数据
        特点 不能存储重复的数据
        */
​
        // 创建一个 空set
        const set = new Set();
​
        // 向 set数据类型 新增数据
        // 每次新增只能新增一个数据单元
        set.add( 100 );
        set.add( 200 );
        set.add( 300 );
        set.add( 400 );
        set.add( 500 );
​
        // 从 set数据类型 删除数据
        set.delete( 300 );
​
        // 清空 set类型 
        set.clear();
​
        // 判断有没有
        console.log( set.has( 100 ) );
        console.log( set.has( 300 ) );
        
  • 利用 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数据类型

        /*
            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 );

箭头函数

       基本语法: function(){} 匿名函数 改写成 ()=>{} 箭头函数             
       箭头函数 主要是 为了 配合 面向对象编程语法 
       箭头函数和普通函数的this指向不同
    
		// 获取元素
        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 ) );

this指向

this本质上是 指针操作
this的指针指向谁 this就是谁
就可以通过 this 操作谁 

// 普通函数的this指向 
            情况1
                this指向是 window对象 
                实际操作通用一般没啥用

                声明式函数 赋值式函数 数组的forEach 定时器 延时器....


            情况2
                this指向是 事件源标签对象
                在 事件处理函数中 this指向 是 事件源标签对象
                也就是 绑定事件的标签对象

            情况3
                this指向是 数组/对象 
                存储在数组或者对象中的函数 
                this指向 是存储这个函数的 数组/对象
// 箭头函数的this指向
                箭头函数 本身 没有this指向
                箭头函数的this指向 是 父级程序的this指向
                如果箭头函数没有父级程序 或者 父级程序没有this指向 
                箭头函数的this指向 是 window
avatar
文章
阅读
粉丝