浅谈ES6里的let const import export class命令和块级作用域

ES6简介

ES6全称是ECMAScript6,它是于2015年6月正式发布的JavaScript语言的标准.现在已经发展到了ES10。

let const import export class命令

1. let 命令

ES6新增了let命令，用来声明变量。它的用法类似于var，

但区别是let声明的变量只在let命令所在的代码块{ }内有效,

也就是说let声明的变量有块级作用域,而var没有,看下例:

{

let a = 10;

var b = 1;

}

console.log(b); // 1

console.log(a); // 报错a没有定义,a有块级作用域

只在{ }内起作用

let没有变量提升,而var有变量提升。let不允许在同一作用域内声明同一变量，即let不允许重复声明。如下情况那样就都会报错：

   {

             let b = 5;

             var b = 4;

   }

2. const命令

const用于声明一个常量，声明时必须进行初始化，且初始化后值不可再修改。const的作用域与let命令相同：只在声明所在的块级作用域内有效。const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指针，const只能保证这个指针是固定的，至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。如：

const PI = 3.14；

PI = 3.14; // 会报错，因为声明以后PI就代表常量3.14且不能再进行赋值进行修改。

const foo = { };

// const foo = []同理，可以正常使用push等功能

foo.prop = 123;

// 为foo添加一个属性，可以成功

console.log(foo.prop); //123

foo = { };

// 将foo指向另一个对象，就会报错

3. import命令

通过import命令加载引入这个模块，模块就是文件。比如在vue里经常就是这样引入import A from B 表示把B引入到A

4. export命令

与import命令相对的就是export命令了，它是导出模块，经常是export default B 表示将B导出

5. class命令

ES6 提供了更接近传统语言的写法，引入了Class（类）这个概念（类的数据类型就是函数，类本身就指向构造函数），作为对象的模板。通过class关键字，可以定义类。class可以看作只是一个语法糖，它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已：

function Point(x, y) {

   this.x = x;

   this.y = y;

}

Point.prototype.toString = function () {

    return '(' + this.x + ', ' + this.y + ')';

};

// 上面为原生写法，下面为ES6的Class写法

class Point {

constructor(x, y) { // 构造方法，this关键字代表实例对象

   this.x = x;

   this.y = y;

}

toString() { // 自定义方法，方法之间不需要逗号分隔，加了会报错

    return '(' + this.x + ', ' + this.y + ')';

}

}

块级作用域

js里没有块级作用域概念,ES6为js新增了块级作用域，let和const都会形成块级作用域，块级作用域类似于私有作用域，只在{ }内部起作用，外部无法访问到内部的变量。