项目开发中一些常用的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服务器，其它编辑器具体的可以百度一下哈。阿门~

做开发十多年的时间，如果大家对于学习编程有很多疑惑，没有思路，不知道如何有效率的学习，可以私信我，我带你起飞，如果需要最新系统的学习教程也可以管我要。做了很多年开发，对于学习方式，如何提高自己的技术有一定的经验，术业有专攻，多跟有经验的人交流学习，对这个行业信息了解的多，职业发展的空间就越大。