目開發中一些常用的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前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。