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

项目开发常用es6介绍

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

Module

Module即模块的意思，在一些小项目中可能用不到这个概念。但是对于一些大型的、复杂的项目尤其在多人协作的情况下几乎是必须的。

在 ES6 之前，最主要的有 CommonJS 和 AMD 两种模块化解决方案。前者用于服务器，后者用于浏览器。ES6 的出现实现了模块功能，而且实现得相当简单完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

简单的说ES6 模块是通过export命令指定输出的代码，再通过import命令导入

下面我们直接通过代码来演示：

<!
DOCTYPE html
>
<
html
>
<
head lang
=
"en"
>
 
<
meta charset
=
"UTF-8"
>
 
<
title
></
title
>
</
head
>
<
body
>
 
<
script type
=
"module"
>
 
//index.html
 
import
 
*
 as util from 
"./js/scrpit.js"
;
 
//用星号（*）指定一个对象，所有输出值都加载在这个对象上面
 util
.
func1
()
 
//1
 util
.
func2
()
 
//2
 console
.
log
(
util
.
a
==
3
)
 
//true
 
</
script
>
</
body
>
</
html
>
//script.js
export
 
function
 func1
()
 
{
 console
.
log
(
1
)
}
export
 
function
 func2
()
 
{
 console
.
log
(
2
)
}
export
 
var
 a 
=
 
3
;

可以看到body里面的script标签与我们平常写的稍有不同，加入了type="module"属性，这样浏览器才会知道这是一个 ES6 模块。

当然，模块的导入导出还可以有别的方式：

比如常用的导出模块的两种方式：

//script.js 方式1
export
 
function
 func1
()
 
{
 console
.
log
(
1
)
}
export
 
function
 func2
()
 
{
 console
.
log
(
2
)
}
export
 
var
 a 
=
 
3
;
//script.js 方式2
function
 func1
()
 
{
 console
.
log
(
1
)
}
function
 func2
()
 
{
 console
.
log
(
2
)
}
var
 a 
=
 
3
;
export
 
{
func1
,
func2
,
a
}

常用的导入模块的两种方式：

///方式1
import
 
{
func1
,
func2
,
a
}
 from 
"./js/scrpit.js"
;
func1
()
 
//1
func2
()
 
//2
console
.
log
(
a
==
3
)
 
//true
///方式2
import
 
*
 as util from 
"./js/scrpit.js"
;
util
.
func1
()
 
//1
util
.
func2
()
 
//2
console
.
log
(
util
.
a
==
3
)
 
//true

解构赋值

其实在模块的导入中就已经用到了解构赋值。即按照一定模式，从数组和对象中提取值，并对变量进行赋值。

下面列举一些简单的示例，如需深入学习建议大家去学习阮一峰写的es6入门哈

//情景1
let 
[
foo
,
 
[[
bar
],
 baz
]]
 
=
 
[
1
,
 
[[
2
],
 
3
]];
foo 
// 1
bar 
// 2
baz 
// 3
//情景2
let 
[
 
,
 
,
 third
]
 
=
 
[
"foo"
,
 
"bar"
,
 
"baz"
];
third 
// "baz"
//情景3
let 
[
x
,
 
,
 y
]
 
=
 
[
1
,
 
2
,
 
3
];
x 
// 1
y 
// 3
//情景4
let 
[
head
,
 
...
tail
]
 
=
 
[
1
,
 
2
,
 
3
,
 
4
];
head 
// 1
tail 
// [2, 3, 4]
//情景5
let 
[
x
,
 y
,
 
...
z
]
 
=
 
[
'a'
];
x 
// "a"
y 
// undefined
z 
// []

如果解构不成功，变量的值就等于undefined。

let 
[
foo
]
 
=
 
[];
let 
[
bar
,
 foo
]
 
=
 
[
1
];

以上两种情况都属于解构不成功，foo的值都会等于undefined。

另一种情况是不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组。这种情况下，解构依然可以成功。

let 
[
x
,
 y
]
 
=
 
[
1
,
 
2
,
 
3
];
x 
// 1
y 
// 2
let 
[
a
,
 
[
b
],
 d
]
 
=
 
[
1
,
 
[
2
,
 
3
],
 
4
];
a 
// 1
b 
// 2
d 
// 4

上面两个例子，都属于不完全解构，但是可以成功。

如果等号的右边不是数组（或者严格地说，不是可遍历的结构），那么将会报错。

// 报错
let 
[
foo
]
 
=
 
1
;
let 
[
foo
]
 
=
 
false
;
let 
[
foo
]
 
=
 
NaN
;
let 
[
foo
]
 
=
 
undefined
;
let 
[
foo
]
 
=
 
null
;
let 
[
foo
]
 
=
 
{};

解构赋值允许指定默认值。

注意，ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，只有当一个数组成员严格等于undefined，默认值才会生效。

let 
[
foo 
=
 
true
]
 
=
 
[];
foo 
// true
let 
[
x
,
 y 
=
 
'b'
]
 
=
 
[
'a'
];
 
// x='a', y='b'
let 
[
x
,
 y 
=
 
'b'
]
 
=
 
[
'a'
,
 
undefined
];
 
// x='a', y='b'
let 
[
x 
=
 
1
]
 
=
 
[
undefined
];
x 
// 1
let 
[
x 
=
 
1
]
 
=
 
[
null
];
x 
// null
//上面代码中，如果一个数组成员是null，默认值就不会生效，因为null不严格等于undefined。

解构不仅可以用于数组，还可以用于对象。

let 
{
 foo
,
 bar 
}
 
=
 
{
 foo
:
 
"aaa"
,
 bar
:
 
"bbb"
 
};
foo 
// "aaa"
bar 
// "bbb"

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

let 
{
 bar
,
 foo 
}
 
=
 
{
 foo
:
 
"aaa"
,
 bar
:
 
"bbb"
 
};
foo 
// "aaa"
bar 
// "bbb"
let 
{
 baz 
}
 
=
 
{
 foo
:
 
"aaa"
,
 bar
:
 
"bbb"
 
};
baz 
// undefined

如果变量名与属性名不一致，必须写成下面这样。

let 
{
 foo
:
 baz 
}
 
=
 
{
 foo
:
 
'aaa'
,
 bar
:
 
'bbb'
 
};
baz 
// "aaa"
let obj 
=
 
{
 first
:
 
'hello'
,
 last
:
 
'world'
 
};
let 
{
 first
:
 f
,
 last
:
 l 
}
 
=
 obj
;
f 
// 'hello'
l 
// 'world'

对象的解构也可以指定默认值。默认值生效的条件是，对象的属性值严格等于undefined。

var
 
{
x 
=
 
3
}
 
=
 
{
x
:
 
undefined
};
x 
// 3
var
 
{
x 
=
 
3
}
 
=
 
{
x
:
 
null
};
x 
// null

模板字符串

传统的 JavaScript 语言，输出模板通常是这样写的:

$
(
'#result'
).
append
(
 
'There are <b>'
 
+
 basket
.
count 
+
 
'</b> '
 
+
 
'items in your basket, '
 
+
 
'<em>'
 
+
 basket
.
onSale 
+
 
'</em> are on sale!'
);

上面这种写法相当繁琐不方便，ES6 引入了模板字符串解决这个问题。

$
(
'#result'
).
append
(`
 
There
 are 
<
b
>
$
{
basket
.
count
}</
b
>
 items
 in your basket
,
 
<
em
>
$
{
basket
.
onSale
}</
em
>
 are on sale
!
`);

即用反引号(Tab上面的按键)表示，如果模板字符串中嵌入变量，需要将变量名写在${}之中。这样就不需要使用大量的引号和加号，大大节约了开发时间。

注：在本地浏览器中使用模块化需要配置服务环境，如果使用的是vscode编辑器可以安装Open with live server插件，安装完成后重启编辑器就可以在.html文件上右键选择Open with live server，然后浏览器输入localhost:5500打开，端口号看编辑器最下方提示。如果是Hbuilder编辑器则需要配置一下web服务器，其它编辑器具体的可以百度一下哈。阿门~

关注我的头条号，分享更多的技术学习文章，我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。