前端开发es6知识1 let、const及数据类型延伸

新项目开发设计中一些常见的es6专业知识，关键是为之后共享小程序定制开发、node+koa新项目开发设计及其vueSSR（vue服务器端3D渲染）做个前置埋下伏笔。

项目开发常用es6介绍

• 1、块级作用域 let const
• 2、箭头函数及this指向
• 3、promise、async await语法
• 4、模块化 module export和import
• 5、解构赋值、字符串模板
• ……

let const

es6新增了let和const命令，用法类似于var。对于三者的异同见下表格：

对于var不过多解释，let用于声明变量const用于声明常量。常量即是不可改变的量，一旦声明，常量的值就不能改变。所以使用const，就必须立即初始化，不能留到以后赋值（当然如果只声明不赋值的话浏览器也会报错）。

let和const在相同的作用域内是不能重复声明的，如下示例：

1. // 报错，重复声明
2. function func() {
3.  let a = 10;
4.  let a = 1;
5. }
7. function func(arg) {
8.  let arg; // 报错，函数传参实际上也是定义了一个变量arg
9.  {
10.    let arg; // 不报错，因为函数参数和let声明的变量不在同一个作用域（代码块）内
11.    let aaa;
12.  }
13.  console.log( aaa ) // aaa is not defined
14. }
15. //第二个示例说明了let声明的变量只在它所在的代码块有效，const同样如此

var命令会发生”变量提升“现象，即变量可以在声明之前使用。而let和const所声明的变量常量一定要在声明后使用，否则报错。

1. // var 的情况
2. console.log(foo); // 输出undefined
3. var foo = 2;
5. // let 的情况
6. console.log(bar); // 报错ReferenceError
7. let bar = 2;
9. //const同样如此

块级作用域

块级作用域即是将代码写在{}里，是一个语句且没有返回值。

1. function f1() {
2.  let n = 5;
3.  if (true) {
4.    let n = 10;
5.  }
6.  console.log(n); // 5
7. }
8. //如果将let都改成var会打印10，这表示es6块级作用域外层代码块不受内层代码块的影响

补充

const实际上保证的并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。如果不太明白这句话的具体意思就一起来补一补js的基础知识了：数据类型。

这里就做个简要介绍，大神可以略过。

js数据类型可以分类基本数据类型（Number、String 、Boolean、Null和Undefined）和引用数据类型（Object 、Array）。

当我们定义一个变量的时候，系统会给这个变量分配一块内存。如果该变量是基本数据类型那么定义的数据就会保存在该内存中。但是！！注意这个但是！！！如果该变量是引用数据类型，那么该内存中保存的就不是定义的数据了，而是一个指针，这个指针指向另一个地址，数据就保存在这个指针所指向的地址里。

所以，对于引用类型数据而言，const只能保证内存中存放的指针不发生变化，不关心这个指针指向的地址里面的数据有没有变化。

1. const a=1;
2. const a=2;
3. // 报错
4. const arr=[1,2,3];
5. arr[0]=9;
6. arr // [9,2,3]

基本数据类型和引用数据类型区别的代码示例：

1. const a=1;
2. const b=1;
3. a==b // true  基本数据类型只做值的比较
4. //---------------------------
5. const arr1=[1,2,3];
6. const arr2=[1,2,3];
7. arr1==arr2 //false  虽然值是一样的，但是在定义的时候分配的内存中的指针不一样，引用型数据不仅比较值也会比较指针，指针即地址
8. //---------------------------
9. const arr3=[1,2,3];
10. let arr4;
11. arr4=arr3;
12. arr4[0]=999;
13. arr3  //[999,2,3] 赋值的时候将arr3的指针和值都赋给了arr4，所以arr3和arr4共用一个指针，指向同一个地址，所以……

Next：箭头函数及this指向

本文来源于：前端开发es6知识1 let、const及数据类型延伸-变化吧门户
特别声明：以上文章内容仅代表作者本人观点，不代表变化吧门户观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与变化吧联系。