ES6——基本语法与详情解析

桃扇骨 2022-06-07 10:13 278阅读 0赞

1、let命令

作用：用于声明变量，类似于var，但是，它只在let所在的代码块内部有效。

性质：  
（1）let不存在变量提升（let VS var）

ES5:

ES6：在let声明变量的时候，就不会如此结果，

解析：由于在执行函数时，将j=5作为变量赋值给传入函数中，所以执行完毕即退出。

（2）暂时性死区

即只要块级作用域中存在let命令，所声明的该变量是有效的“绑定的”，不再受外部影响。  
案例1：

解析：a在let a声明前就console了，即表示“未定义undefined”，在let之前的区域为“暂时性死区”。

案例2：

解析：在该案例中，多了“var a”，但是let所声明的变量，并不在乎外界的影响，所以在let作用域内部，var

声明的变量是无效的，即“console.log(a)”还是defined（3）let不允许重复声明情况1：模块内部重复声明（不允

许用let命令重复声明）

案例3：

解析：由于var重复声明的变量是可以运行的，即后边的会覆盖前边的变量。但是，只要声明的变量存在let ，则若重复声明一个变量，都会报错。无论有一个let，let在前还是在后；还是有两个重复let声明的变量，都是有错误的。

情况2：模块之间（不影响，可重复声明）

2、ES6的块级作用域  
（1）ES5 VS ES6  
ES5：在ES5中，只有两种作用域：全局作用域 + 局部作用域  
场景1——内部作用域会覆盖外部作用域  
场景2——用于计数的循环变量泄露为全局变量（循环变量结束，变量依然存在，内存占用）  
  
  
ES6：增加了“块级作用域”的概念  
A.块级作用域  
案例1：

案例2：

B.立即执行函数（ES5）

ES6：

3、const命令  
（1）Const也是声明变量，但是它声明的是一个常量。一旦声明，就不能改变。

1-1:使用const命令

1-2:const块级作用域

1-3:暂时性死区  
1-4:不可重复声明  
  
  
（2）const对象  
const命令是指向对象的一个地址

（3）const数组

（4）const对象冻结

4-2:彻底对象冻结函数

4、跨模块常量

5、全局对象属性  
全局对象：最顶层对象。  
（1）浏览器环境——window对象；  
（2）Node.js——global对象  
（3）Javascript——所有全局变量都是全局对象的属性  
ES6中规定的，  
属于全局对象的属性：var、function声明的全局对象  
不属于全局对象属性：let、const、class命令声明的全局对象

案例：全局对象的属性

6、变量的解构赋值  
Destructuring  
（1）数组解构赋值

案例1-1：对应位置

let [one, ,three] =[“one”,”two”,”three”];
    console.log(one);	//one
    console.log(three);  //three
     
    let [head,...tail] =[0,1,2,3,4,5];
    console.log(head);   //0
    console.log(tail);	//[1,2,3,4,5]

案例1-2：不完全解构

定义：等号左边的模式，只匹配一部分的等号右边的数据。（不会出现溢出等现象）

案例1-3：指定默认值

注意：非遍历解构产生报错

（2）对象的解构赋值  
2-1:对象的属性没有次序，变量必须与属性同名，才可取到正确的值。

2-2：对象的解构赋值不用按照顺序  
  
  
2-3：属性名与变量名  
由于变量名与属性名并不一致，所以需要如下方式来改变，以实现如上的效果。  
案例1：

案例2：

2-4：对象解构指定默认值生效条件

默认值生效的条件是，对象的属性值严格等于undefined

2-5：现有对象的方法

（3）字符串的解构赋值  
字符串被转换为一个类似数组的对象。  
属性的解构赋值：由于字符串属性length，可以利用该属性进行解构赋值。  
  
（4）函数参数的解构赋值  
 案例4-1：函数的解构赋值（略）  
  
 案例4-2：函数参数的解构赋值

（5）解构赋值的用途  
5-1：交换变量的值  
案例1：

5-2：从函数返回多个值

案例2-1：返回一个数组

案例2-2：返回一个对象

5-3：函数参数的定义

function fun(id,name,age){
    
    };
    
    fun({id:"007",name:"zhao",age:20});
    
    //参数是一组无次序的值
    function fun({x,y,z}){
    
    };
    fun({x:100,y:200,z:300});

5-4：提取json数据

5-5：函数参数的默认值

5-6：遍历Map结构

5-7：输入模块的指定方法  
   
require.js的引用