脚本语言规范ES6-知识点1

曾经终败给现在 2023-02-25 08:48 5阅读 0赞

## 脚本语言规范ES6-知识点1 ##

**文章目录**

*   *   *   *  什么是ES6？
             *  为什么使用ES6？
             *  let关键字
             *  const关键字
             *  let、const、var的区别

#### 什么是ES6？ ####

ES的全称是ECMAScript，它是由ECMA国际标准化组织制定的一项脚本语言的标准化规范。  
ES6实际3上是一个泛指，泛指ES2015及后续的版本。

#### 为什么使用ES6？ ####

每一次标准的诞生都意味着语言的完善，功能的加强，JavaScript语言本身也有一些令人不满意的地方。

*  变量提升特性增加了程序运行时的不可预测性。
 *  语法过于松散，实现相同的功能，不同的人可能会写出不同的代码。

#### let关键字 ####

ES6中新增的用于声明变量的关键字，主要是用来替代var关键字的。  
let声明的变量只在所处的块级（大括号）有效。

if(true){ 
       let a = 10;
    }
    console.log(a)//输出a is not defined

好处：

*  在业务逻辑复杂的时候，**能够防止内层变量覆盖外层变量**。
 *  防止循环变量变成全局变量。

注意：在一个大括号中，使用let关键字声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域特性。

//在业务逻辑复杂的时候，能够防止内层变量覆盖外层变量
    if(true){ 
       let a = 10;
       var b = 20; 
    }
    console.log(b)//输出20
    console.log(a)//输出a is not defined

//防止循环变量变成全局变量
    //---------------使用var关键字-------------------------------
    for(var i = 0 ; i< 2; i++){ 
    
    }
    console.log(i);//输出2
    //---------------使用let关键字-------------------------------
    for(let i = 0 ; i< 2; i++){ 
    
    }
    console.log(i);//输出i is not defined

let关键字的特性：

*  不存在变量提升
 *  暂时性死区

let关键字**不存在变量提升**（var关键字可以先使用再声明，这属于语言中的糟粕性东西）  
使用let关键字**必须先声明后使用**

console.log(a)//输出a is not defined
    let a = 20;

let暂时性死区（不会受外层作用域影响）

var num = 20；
    if(true){ 
       console.log(a)//输出a is not defined
       let a = 10;   
    }

经典面试题  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaXh1YW5qaQ_size_16_color_FFFFFF_t_70_pic_center]  
此题的关键点在于变量i是全局的，函数执行是输出的都是全局作用域下的i值。输出的结果都是2。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaXh1YW5qaQ_size_16_color_FFFFFF_t_70_pic_center 1]  
此题的关键点在于每次循环都会产生一个块级作用域，每个块级作用域中的变量i都是不同的，函数执行是输出的是自己上一级（循环产生的块级作用域）作用域下的i值。输出的结果是0,1。

#### const关键字 ####

const关键字是用来声明常量的，常量就是值（内存地址）不能变化的量。

*  具有块级作用域

if(true){ 
       const a = 10;
       if(true){ 
    	   const a = 20;
    	   console.log(a);//输出20
    	}
       console.log(a);//输出10
    }
    console.log(a)//输出a is not defined

*  声明常量时必须赋值

const PI;//控制台报错：Missing initializer in const declareation

*  常量赋值后，值不能修改（对应的内存地址不可改，数据结构内部的关键字可以更改）

const PI = 3.14;
    PI = 100;//控制台报错： Assignment to constant variable

const arr = [ 100, 200];
    arr[0] = 123;
    console.log(arr);//输出[123,200]
    arr = [1,2];
    console.log(arr);//控制台报错： Assignment to constant variable

#### let、const、var的区别 ####

1.  使用**var**声明的变量，其作用域为**该语句所在的函数内，且存在变量提升现象**。
2.  使用**let**声明的变量，其作用域为**该语句所在的代码块内，不存在变量提升现象**。
3.  使用**const**声明的变量，其后面出现的代码**不能再修改该常量的值**。

<table> 
 <thead> 
  <tr> 
   <th>var</th> 
   <th>let</th> 
   <th>const</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>函数级作用域</td> 
   <td>块级作用域</td> 
   <td>块级作用域</td> 
  </tr> 
  <tr> 
   <td>变量提升</td> 
   <td>不存在变量提升</td> 
   <td>不存在变量提升</td> 
  </tr> 
  <tr> 
   <td>值可更改</td> 
   <td>值可更改</td> 
   <td>值不可更改</td> 
  </tr> 
 </tbody> 
</table>

## 后续再更！ ##

## 请尊重原创，如需转载，还请注明原作者，原文链接，谢谢啦！！！ ##

![在这里插入图片描述][20200711193951553.gif_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaXh1YW5qaQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20230209/8aefed5c0b794cd0bcf953ece001fdf2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaXh1YW5qaQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20230209/5c446b5fc2194a0780ac278629d6fb65.png
[20200711193951553.gif_pic_center]: https://img-blog.csdnimg.cn/20200711193951553.gif#pic_center