ES6常见用法

1、介绍

ECMAScript是一套标准规范，JavaScript是ECMAScript规范的具体实现，各大浏览器能解析js程序，也是实现了ECMAScript规范的结果。

ES5、ES6是ECMAScript在不同时间发布的不同版本的标准规范。2015年，ES6 的第一个版本发布，正式名称就是《ECMAScript 2015 标准》（简称 ES2015），并且每年6月份都会发布一次，以年号命名（如ES2016）。

ES5、ES6都是一堆ECMAScript标准的集合，ES2015以前的标准统称为ES5标准，ES2015及其以后的标准统称为ES6标准（如ES2015、ES2016、ES2017 …）。

本文档主要描述ES6中一些常用的新语法特性。

2、let声明变量

let是es6语法中新增用于声明变量的关键字。

特性①：不可重复声明

let name = "张三";
let name = "李四";
//运行报错，若使用var则正常使用。
1
2
3

特性②：块级作用域

let name = "张三";
{
    let name = "李四";
    console.log("块级内部："+name);
}
console.log("块级外部："+name);
/*
 * 运行结果：
 * 	块级内部：李四
 * 	块级外部：张三
 */
1
2
3
4
5
6
7
8
9
10
11

特性③：不存在变量提升（必须先声明后使用）

console.log(name);
let name = "张三";
//报错，若使用var则正常，var存在变量提升
1
2
3

3、const声明常量

const是es6语法中新增用于声明常量的关键字。

特性：必须赋初值、赋值后不能改变、存在块级作用域。

const MAN; //未赋初值，运行报错

const WOMAN = 2;
WOMAN = 3; //修改常量值，运行报错
1
2
3
4

4、模板字符串

es6中新增创建字符串的方式，采用反引号定义。

特性：字符串可以换行、字符串中可以解析变量。

//换行演示
let str = `

                
1
                
2
                
3
           `;

//解析变量演示
let person = {
    "name":"张三",
    "age":13,
    "addr":"四川成都",
    "hobbys":function(){
        return "唱、跳、rap、篮球";
     }
};
let str = `

                
${person.name}
                
${person.age}
                
${person.addr}
                
${person.hobbys()}
           `;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

5、大括号对象中变量直接作为键值对

es6中针对{}类型的对象，可将变量名直接写入其中，解析结果变量名为键、变量值为键值对的值，使用,分割，无需再以键值对方式编写代码。

let name = "张三";
let age = 13;
function hobbys(){
	return "唱、跳、rap、篮球";
}
let introduce = {
	name,
	age,
    "addr":"四川成都",
	hobbys
};

console.log(introduce.name);
console.log(introduce.age);
console.log(introduce.addr);
console.log(introduce.fun());

/* 运行结果：
 * 	张三
 * 	13
 * 	四川成都
 * 	唱、跳、rap、篮球
 */
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

6、箭头函数

es6中新增箭头函数语法，用于简化函数的书写方式。

语法

let functionName = (arg1,arg2)=>{
    //xxx
}

//当参数仅一个时，小括号可省略
let functionName = arg1=>{
    //xxx
}

//当函数体仅一条语句，且为return操作，大括号可省略
let addOne = arg1=>{
    return arg1+1;
}
//上面函数可简写为：
let addOne = arg1=>arg1+1;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

演示

//普通写法
let sum = (arg1,arg2)=>{
    return arg1+arg2;
}

//当函数体仅一条语句，且为return操作，大括号可省略
let sum = (arg1,arg2)=>arg1+arg2;

//当参数仅一个时，小括号可省略
let addOne = arg1=>{
    return arg1+1;
}
1
2
3
4
5
6
7
8
9
10
11
12

7、解构赋值

8、Set数据结构

es6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

初始化

//初始化空的set
const s = new Set();

//使用数组初始化set，数组中的重复元素将被过滤掉
const s = new Set([1,2,3,3,"1","2","3","3"]);//3、"3"将被过滤掉
1
2
3
4
5

操作方法

• add(value); //往set对象中添加值，返回set对象本身。
• delete(value); //删除set对象中某个值，删除成功返回true、失败返回false。
• has(value); //判断set对象中是否存在某个值，存在返回true、不存在返回false。
• clear(); //清空set对象中所有值，无返回值。

遍历

采用forEach方法遍历。

const s = new Set([1,2,3,3]);
s.forEach((ele)=>{
    console.log(ele);
});

/* 运行结果：
 * 	1
 * 	2
 *	3
 */
1
2
3
4
5
6
7
8
9
10

9、模块化

ES6 Module把一个文件当作一个模块，每个模块有自己的独立作用域，各个模块间相互联系配合使用，核心点在于导入（import）、导出（export）语法的使用。

模块化优势：防止命名冲突、代码复用、维护简单。

按需导出/导入

导出语法（aaa.js）

/*
 * 按需导出写法一：直接在被导出的变量前加export关键字
 */
let var1 = "未被导出的变量";

export let var2 = "被导出的变量";

let fun1 = function(){
	console.log("未被导出的函数");
}

export let fun2 = function(){
	console.log("被导出的函数");
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

/*
 * 按需导出写法二：在文件末尾使用export关键字将多个变量导出
 ：
 */
let var1 = "未被导出的变量";

let var2 = "被导出的变量";

let fun1 = function(){
	console.log("未被导出的函数");
}

let fun2 = function(){
	console.log("被导出的函数");
}

export { var2, fun2};
//export { var2, fun2 as fn}; //可使用as关键字给导出变量起别名，导入时则需要按别名导入
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

导入语法（index.html）

/*
 * 按需导入写法一：导入js文件暴漏的指定变量
 */
<script type="module">
    import {var2,fun2} from './aaa.js';

    console.log(var2);
    fun2();
</script>
1
2
3
4
5
6
7
8
9

/*
 * 按需导入写法一：导入暴漏的全部变量
 */
<script type="module">
    import * as vars from './aaa.js'; //使用import *导入aaa.js文件暴漏的全部变量，此写法必须使用as起别名

    console.log(vars.var2); //使用导入的变量时，需要别名配合
    vars.fun2();
</script>
1
2
3
4
5
6
7
8
9

默认导出/导入

导出单个变量

/*
 * 导出
 * aaa.js
 */
export default "被导出的变量"; //直接导出字符串。export default在一个js文件中只能出现一次
1
2
3
4
5

导出单个函数

/*
 * 导出
 * aaa.js
 */
export default function(){ //直接导出函数。export default在一个js文件中只能出现一次
	console.log("被导出的函数");
}
1
2
3
4
5
6
7

导出多个变量

/*
 * 导出
 * aaa.js
 */
let var1 = "未被导出的变量";
let var2 = "被导出的变量";
let fun1 = function(){
	console.log("未被导出的函数");
}
let fun2 = function(){
	console.log("被导出的函数");
}
export default { var2, fun2}; //使用export default操作默认导出指定变量，export default在一个js文件中只能出现一次，被导出的变量不能起别名
1
2
3
4
5
6
7
8
9
10
11
12
13

导入

/*
 * 导入（写法1）
 * index.html
 */
<script type="module">
    import vars from './aaa.js';
    console.log(vars.var2);
    vars.fun2();
</script>

/*
 * 导入（写法2）
 * index.html
 */
<script type="module">
    import * as mm from './aaa.js';
    console.log(mm.default.var2); //使用导入变量方式：别名.default.变量名。别名.default被默认导出的全部变量对象
	console.log(mm.default.fun2());
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

直接导出/导入

如果某个模块中存在自执行代码块，不需要导出，其它模块代码带入即可执行。

/*
 * aaa.js
 */
(function(){
	console.log("其它模块的函数自执行代码");
})();
1
2
3
4
5
6

<script type="module">
    import './aaa.js'; //直接导入aaa.js模块，aaa.js模块中的自执行代码会自动运行。
</script>
1
2
3