vue解构赋值_前端开发es6知识 模块化、解构赋值、字符串模板
項目開發中一些常用的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服務器，其它編輯器具體的可以百度一下哈。阿門~
做開發十多年的時間，如果大家對于學習編程有很多疑惑，沒有思路，不知道如何有效率的學習，可以私信我，我帶你起飛，如果需要最新系統的學習教程也可以管我要。做了很多年開發，對于學習方式，如何提高自己的技術有一定的經驗，術業有專攻，多跟有經驗的人交流學習，對這個行業信息了解的多，職業發展的空間就越大。
總結
以上是生活随笔為你收集整理的vue解构赋值_前端开发es6知识 模块化、解构赋值、字符串模板的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 小象优品二次认证后多久到账
- 下一篇： video怎么重新加载 vue_vue