项目开发中一些常用的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 '
+
basket
.
count
+
' '
+
'items in your basket, '
+
''
+
basket
.
onSale
+
' 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服务器，其它编辑器具体的可以百度一下哈。阿门~
做开发十多年的时间，如果大家对于学习编程有很多疑惑，没有思路，不知道如何有效率的学习，可以私信我，我带你起飞，如果需要最新系统的学习教程也可以管我要。做了很多年开发，对于学习方式，如何提高自己的技术有一定的经验，术业有专攻，多跟有经验的人交流学习，对这个行业信息了解的多，职业发展的空间就越大。
)