前端项目中常用es6知识总结 -- let、const及数据类型延伸

项目开发中一些常用的es6知识，主要是为以后分享小程序开发、node+koa项目开发以及vueSSR（vue服务端渲染）做个前置铺垫。

项目开发常用es6介绍

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

let const

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

	声明	重复声明	变量提升
var	变量	可以	存在
let	变量	不可以	不存在
const	常量	不可以	不存在

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

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

// 报错，重复声明

function func() {

    let a = 10;

    let a = 1;

}

function func(arg) {

    let arg; // 报错，函数传参实际上也是定义了一个变量arg

    {

        let arg; // 不报错，因为函数参数和let声明的变量不在同一个作用域（代码块）内

        let aaa;

    }

    console.log(aaa) // aaa is not defined

}

//第二个示例说明了let声明的变量只在它所在的代码块有效，const同样如此

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

// var 的情况

console.log(foo); // 输出undefined

var foo = 2;

// let 的情况

console.log(bar); // 报错ReferenceError

let bar = 2;

//const同样如此

块级作用域

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

function f1() {

    let n = 5;

    if (true) {

        let n = 10;

    }

    console.log(n); //

}

//如果将let都改成var会打印10，这表示es6块级作用域外层代码块不受内层代码块的影响

补充

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

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

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

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

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

const a = 1;

const a = 2; // 报错

const arr = [1, 2, 3];

arr[0] = 9;

arr // [9,2,3]

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

const a = 1;

const b = 1;

a == b // true  基本数据类型只做值的比较

//---------------------------

const arr1 = [1, 2, 3];

const arr2 = [1, 2, 3];

arr1 == arr2 //false  虽然值是一样的，但是在定义的时候分配的内存中的指针不一样，引用型数据不仅比较值也会比较指针，指针即地址

//---------------------------

const arr3 = [1, 2, 3];

let arr4;

arr4 = arr3;

arr4[0] = 999;

arr3 //[999,2,3] 赋值的时候将arr3的指针和值都赋给了arr4，所以arr3和arr4共用一个指针，指向同一个地址，所以……

欢迎扫描下方二维码关注，这里更多前端技术分享，让我们一起成长 -- web前端周刊

巴特西

前端项目中常用es6知识总结 -- let、const及数据类型延伸

项目开发常用es6介绍

let const

块级作用域

补充

最新文章

热门文章