javaScript ES 6 新增部分特性

59 阅读4分钟

一、 let const 声明语法形式

使用 letconst 声明变量
            ! let     更多用于存储 基本数据类型   字符串 布尔 数值 null undefined
            ! const   更多用于存储 引用数据类型   数组 对象 函数
            

var 声明的变量 和 let const 声明的变量的5个区别!

1,预解析 预编译

                var 声明的变量 可以被 JavaScript程序预解析 
                    也就是 var 声明的变量 如果提前调用结果是 undefined
                    
                let const 声明的变量 不能被 JavaScript程序预解析
                    也就是 let const 声明的变量 如果 提前调用结果是 报错

2, 作用域

                var 声明的变量 
                    只要定义在 函数之外 就是 全局变量 可以被任意调用

                let const 声明的变量 
                    如果 定义在 { } 外 是 全局变量 在 任意位置 都可以调用
                    如果 定义在 { } 内 是 局部变量 只能在 { } 内 被调用
                        

3, 变量名称的定义

                var 声明的变量 变量名称 可以重复 
                    执行效果是 后赋值的数据 覆盖之前赋值的数据

                let const 声明的变量 变量名称 不能重复
                    如果 变量名称 重复 程序会报错

4, 在 循环中 let 声明变量的作用

                在 循环语句中 var声明的变量 和 let 声明的变量 执行效果完全不同

                   * 在 循环中使用 var 声明 循环变量* 
                        for( var i = 0 ; i <= 5 ; i++ ){ }
                     在 循环中 使用 var 声明的循环变量 在 循环内 和 循环外 都可以调用
                     在 循环中 使用 var 声明的循环变量 在整个循环过程中 
                     只触发生成一个 作用域相同的循环变量
                     也就是 在 整个循环过程中 只会有一个循环变量 生成 
                        
                    *在 循环中 使用 let 声明 循环变量*
                        for( let i = 0 ; i <= 5 ; i++ ){ }
                        1,  在 循环中 使用 let 声明的循环变量 在 循环内 可以调用
                            在 循环中 使用 let 声明的循环变量 在 循环外 不能直接调用
                        2,  在 循环中 使用 let 声明的循环变量
                            每次循环执行 对于 let 声明的循环变量来说都是 一个独立的作用域
                            
    

5, const 定义的变量

                使用 const 定义的变量 
                    存储的数据数值 不能 被覆盖 
                    也就是 const 定义的变量 不能 执行 重复赋值操作

                const 定义引用数据类型 
                    变量中存储的是 引用数据类型的内存地址 

                    不能对这个变量 直接赋值 覆盖存储的内存地址

二、箭头函数

()=>{} 的语法形式 替换 匿名函数function(){}

! 箭头函数是为了 面向对象编程 定义的新的语法形式
                是 ES6 语法中 构造函数定义时 使用的关键语法形式

! 箭头函数 和 匿名函数 区别在于 函数中的this指向
                this指向非常重要 是 伴随我们一生的重要问题
                
                

三、解构赋值

更方便地将 对象/数组中 存储的数据 赋值给变量储存

解构赋值是为了配合 复杂程序中 对象/数组 中 存储数据的获取
数组的解构赋值
使用便捷的语法 将 数组单元存储的数据赋值给变量储存
let [变量1,变量2,变量3...] = 数组 ;

                解构赋值语法 自动将数组中 每一个数据单元存储的数据数值
                通过 解构语法获取 赋值给 一一对应的变量
                
对象的解构赋值
按照 键名 从 对象中 获取 对应键名存储的数据 

let { 属性 , 属性 ... } = { 属性:属性值 , 属性:属性值 .... }                

四、展开、合并(扩展)运算符...

展开运算符--在 函数的实参之前使用 
            将 赋值的实参数组 每一个数据单元的数据 展开 赋值给 函数的实参
            ! 展开运算符 只能 展开 数组 不能 展开对象
            
合并运算符-- 将 对应的形参 以 数组的形式 存储
            其他形参存储 之后 多余的实参 
            合并运算符 会 执行 存储功能

五、MAP SET 数据结构

Map数据类型
            是 ES6 新增的数据类型
            是 一个 类似于 对象的数据类型
            往往是 后端程序 交互的结果

            const 变量 = new Map( [ [键名,键值] , [键名,键值] , [键名,键值] , [键名,键值]... ] );
            操作方法 
            map类型.set( '键名' , 键值 );
                设定

            map类型.get( '键名' )
                获取

            map类型.delete( '键名' )
                删除

            map类型.clear()
                清空

            map类型.has( '键名' )
                判断有没有

            map类型.forEach(function(形参1,形参2,形参3){})
                形参1   map单元的键名
                形参2   map单元的键值
                形参3   原始map单元
                
Set数据类型
            是 ES6 新增的数据类型
            是 一个类似于 数组的数据类型
            往往是 后端程序 交互的结果
            ! set数据类型中 数据单元 不会存储 重复的数据
    
  const 变量 = new Set( 数组 );  
            
操作方法

            set对象.add();
                末位新增
                每次只能新增一个数据单元

            set对象.delete();
                删除
                
            set对象.clear();
                清空

            set对象.forEach(function( 形参1 , 形参2 , 形参3 ){});
                循环遍历
                形参1   存储 数据数值
                形参2   存储 数据数值
                形参3   存储 原始set数据类型