學習ES6的前置知識:html
- 熟練掌握ES5的知識:由於ES6只是ES5的升級,因此你必須對ES5的基本語法達到熟練的程度,若是你還不瞭解ES5的基本語法,仍是腳踏實地從頭開始。
- 瞭解ES6:據說並在工做學習中見過ES6,並瞭解ES6的用途。
第1節:ES6的開發環境搭建
工欲善其事,必先利其器。因此咱們第1節就是搭建一個基本的ES6開發環境。如今的Chrome瀏覽器已經支持ES6了,可是有些低版本的瀏覽器仍是不支持ES6的語法,這就須要咱們把ES6的語法自動的轉變成ES5的語法。若是你聽過我Vue課程的話,應該知道Webpack是有自動編譯轉換能力的,除了Webpack自動編譯,咱們還能夠用Babel來完成。這節課咱們就使用Babel把ES6編譯成ES5。前端
創建工程目錄:
先創建一個項目的工程目錄,並在目錄下邊創建兩個文件夾:src和distvue
- src:書寫ES6代碼的文件夾,寫的js程序都放在這裏。
- dist:利用Babel編譯成的ES5代碼的文件夾,在HTML頁面須要引入的時這裏的js文件。
編寫index.html:
文件夾創建好後,咱們新建一個index.html文件。java
1
2
3
4
5
6
7
8
9
10
11
12
|
<!DOCTYPE html>
<html
lang
=
"en"
>
<head>
<title>
</title>
<meta
charset
=
"UTF-8"
>
<meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1"
>
<script src="./dist/index.js"></script>
</head>
<body>
Hello ECMA Script 6
</body>
</html>
|
須要注意的是在引入js文件時,引入的是dist目錄下的文件。webpack
|
<script
src
=
"./dist/index.js"
>
</script>
|
編寫index.js
在src目錄下,新建index.js文件。這個文件很簡單,咱們只做一個a變量的聲明,並用console.log()打印出來。git
|
let
a
=
1
;
console
.
log
(
a
)
;
|
咱們用了let聲明,這裏let是ES6的一種聲明方式,接下來咱們須要把這個ES6的語法文件自動編程成ES5的語法文件。程序員
初始化項目
在安裝Babel以前,須要用npm init先初始化咱們的項目。打開終端或者經過cmd打開命令行工具,進入項目目錄,輸入下邊的命令:es6
-y表明所有默認贊成,就不用一次次按回車了。命令執行完成後,會在項目根目錄下生產package.json文件。github
1
2
3
4
5
6
7
8
9
10
11
12
|
{
"name"
:
"es6"
,
"version"
:
"1.0.0"
,
"description"
:
""
,
"main"
:
"index.js"
,
"scripts"
:
{
"test"
:
"echo \"Error: no test specified\" && exit 1"
}
,
"keywords"
:
[
]
,
"author"
:
""
,
"license"
:
"ISC"
}
|
能夠根據本身的須要進行修改,好比咱們修改name的值。web
全局安裝Babel-cli
在終端中輸入如下命令,若是你安裝很慢的話,可使用淘寶鏡像的cnpm來進行安裝。安裝cnpm的方法,你們本身百度吧。
|
npm
install
-
g
babel
-
cli
|
雖然已經安裝了babel-cli,只是這樣還不能成功進行轉換,若是你不相信能夠輸入下邊的命令試一下。
|
babel
src
/
index
.js
-
o
dist
/
index
.js
|
你會發現,在dist目錄下確實生產了index.js文件,可是文件並無變化,仍是使用了ES6的語法。由於咱們還須要安裝轉換包才能成功轉換,繼續往下看吧。
本地安裝babel-preset-es2015 和 babel-cli
|
npm
install
--
save
-
dev
babel
-
preset
-
es2015
babel
-
cli
|
安裝完成後,咱們能夠看一下咱們的package.json文件,已經多了devDependencies選項。
|
"devDependencies"
:
{
"babel-cli"
:
"^6.24.1"
,
"babel-preset-es2015"
:
"^6.24.1"
}
|
新建.babelrc
在根目錄下新建.babelrc文件,並打開錄入下面的代碼
|
{
"presets"
:
[
"es2015"
]
,
"plugins"
:
[
]
}
|
這個文件咱們創建完成後,如今能夠在終端輸入的轉換命令了,此次ES6成功轉化爲ES5的語法。
|
babel
src
/
index
.js
-
o
dist
/
index
.js
|
簡化轉化命令:
在學習vue 的時候,可使用npm run build 直接利用webpack進行打包,在這裏也但願利用這種方式完成轉換。打開package.json文件,把文件修改爲下面的樣子。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
{
"name"
:
"es6"
,
"version"
:
"1.0.0"
,
"description"
:
""
,
"main"
:
"index.js"
,
"scripts"
:
{
"build"
:
"babel src/index.js -o dist/index.js"
}
,
"keywords"
:
[
]
,
"author"
:
""
,
"license"
:
"ISC"
,
"devDependencies"
:
{
"babel-cli"
:
"^6.24.1"
,
"babel-preset-es2015"
:
"^6.24.1"
}
}
|
修改好後,之後咱們就可使用 npm run build 來進行轉換了。
第2節:新的聲明方式
經過上節課的學習咱們已經能夠愉快的寫代碼了。在文章開始以前,我仍是要強調一件事情:你們必定要親自動手敲代碼,學習編程這個事兒,不本身動手練習是學不會的。若是你上節課尚未搭建好,你仍是先把環境搭建好,再學習這節課。
之前咱們在聲明時只有一種方法,就是使用var來進行聲明,ES6對聲明的進行了擴展,如今能夠有三種聲明方式了。
字面理解ES6的三種聲明方式:
- var:它是variable的簡寫,能夠理解成變量的意思。
- let:它在英文中是「讓」的意思,也能夠理解爲一種聲明的意思。
- const:它在英文中也是常量的意思,在ES6也是用來聲明常量的,常量你能夠簡單理解爲不變的量。
var聲明:
var在ES6裏是用來升級全局變量的,咱們能夠先做一個最簡單的實例,用var聲明一個變量a,而後用console.log進行輸出。
|
var
a
=
'JSPang'
;
console
.
log
(
a
)
;
|
咱們能夠看到JSPang在控制檯已經被打印出來了。那如何理解它的做用是聲明全局變量那?咱們用匿名函數給他進行一個包裹,而後在匿名函數中調用這個a變量,看看能不能調用到。
|
var
a
=
"JSPang"
;
window
.
onload
=
function
(
)
{
console
.
log
(
a
)
;
}
|
能夠看到控制檯輸出了JSPang,這證實var確實是全局的。若是你覺的這個不夠直觀說明var是全局聲明,還能夠用區塊的方式進行調用測試,先看下面的代碼。
|
var
a
=
2
;
{
var
a
=
3
;
}
console
.
log
(
a
)
;
|
這時打印出來的值是多少呢?對,應該是3,由於var是全局聲明的,會覆蓋上面聲明的a變量。
let局部聲明
經過兩個簡單的例子,咱們對var的全局聲明有了必定了解。那跟var向對應的是let,它是局部變量聲明。仍是上面的例子,咱們試着在區塊裏用let聲明。
|
var
a
=
2
;
{
let
a
=
3
;
}
console
.
log
(
a
)
;
|
這時候控制檯打印出來的值就是2了。若是咱們只在區塊裏聲明,再也不外部聲明,咱們打印a時就會報錯,顯示找不到變量。
|
{
let
a
=
3
;
}
console
.
log
(
a
)
;// 報錯i is not defined
|
上面兩個例子說明了let是局部變量聲明,let聲明只在區塊內起做用,外部是不能夠調用的。
有些剛接觸JavaScript的小夥伴會疑惑了,我感受let尚未var好用,其實let是防止你的數據污染的,在大型項目中是很是有用處的。如今看一個循環的例子,咱們來看一下let的好處。
用var聲明的循環
|
for
(
var
i
=
0
;
i
<
10
;
i
++
)
{
console
.
log
(
'循環體中:'
+
i
)
;
}
console
.
log
(
'循環體外:'
+
i
)
;
|
你會發現循環體外的i變量被污染了,若是在外部再使用i時就會出現問題,這是開發者不想看到的。咱們再利用let聲明,就能夠解決這個問題。
用let聲明的循環
|
for
(
let
i
=
0
;
i
<
10
;
i
++
)
{
console
.
log
(
'循環體中:'
+
i
)
;
}
console
.
log
(
'循環體外:'
+
i
)
;
|
你執行時會發現控制檯報錯了,找不到循環體外的i變量。經過兩種聲明的比較,能夠明白let在防止程序數據污染上仍是頗有用處的。咱們要努力去習慣用let聲明,減小var聲明去污染全局空間,在vue的使用中也要注意這點。
const聲明常量
在程序開發中,有些變量是但願聲明後在業務層就再也不發生變化了,簡單來講就是從聲明開始,這個變量始終不變,就須要用const進行聲明。
咱們來一段用const聲明錯誤的代碼,在錯誤中學習const的特性也是很是好的。
|
const
a
=
"JSPang"
;
var
a
=
'技術胖'
;
console
.
log
(
a
)
;
|
在編譯這段代碼的過程當中,你就會發現已經報錯,沒法編譯了,緣由就是咱們const聲明的變量是不能夠改變的。const是很好理解的,我就不做過多的解釋說明了。
這節課咱們學了ES6的3種聲明方式,var、let、const,這三種方式各有所長,既然已經學習了新技術,咱們就要擁抱它,試着在你的項目中根據狀況用let和const進行聲明吧,不要再只使用var了。
下節課咱們將講解數據的解構,很高興你能和我一塊兒學習,成長爲更好的本身。
第3節:變量的解構賦值
ES6容許按照必定模式,從數組和對象中提取值,對變量進行賦值,這被稱爲解構。解構賦值在實際開發中能夠大量減小咱們的代碼量,而且讓咱們的程序結構更清晰。也許你仍是不太明白,那先來一個最簡單的數組解構賦值來進行賦值。
數組的解構賦值:
簡單的數組解構:
之前,爲變量賦值,咱們只能直接指定值。好比下面的代碼:
|
let
a
=
0
;
let
b
=
1
;
let
c
=
2
;
|
而如今咱們能夠用數組解構的方式來進行賦值。
|
let
[
a
,
b
,
c
]
=
[
1
,
2
,
3
]
;
|
上面的代碼表示,能夠從數組中提取值,按照位置的對象關係對變量賦值。
數組模式和賦值模式統一:
能夠簡單的理解爲等號左邊和等號右邊的形式要統一,若是不統一解構將失敗。
|
let
[
a
,
[
b
,
c
]
,
d
]
=
[
1
,
[
2
,
3
]
,
4
]
;
|
若是等號兩邊形式不同,極可能得到undefined或者直接報錯。
解構的默認值:
解構賦值是容許你使用默認值的,先看一個最簡單的默認是的例子。
|
let
[
foo
=
true
]
=
[
]
;
console
.
log
(
foo
)
;
//控制檯打印出true
|
上邊的例子數組中只有一個值,可能你會多少有些疑惑,咱們就來個多個值的數組,並給他一些默認值。
|
let
[
a
,
b
=
"JSPang"
]
=
[
'技術胖'
]
console
.
log
(
a
+
b
)
;
//控制檯顯示「技術胖JSPang」
|
如今咱們對默認值有所瞭解,須要注意的是undefined和null的區別。
|
let
[
a
,
b
=
"JSPang"
]
=
[
'技術胖'
,
undefined
]
;
console
.
log
(
a
+
b
)
;
//控制檯顯示「技術胖JSPang」
|
undefined至關於什麼都沒有,b是默認值。
|
let
[
a
,
b
=
"JSPang"
]
=
[
'技術胖'
,
null
]
;
console
.
log
(
a
+
b
)
;
//控制檯顯示「技術胖null」
|
null至關於有值,但值爲null。因此b並無取默認值,而是解構成了null。
對象的解構賦值
解構不只能夠用於數組,還能夠用於對象。
|
let
{
foo
,
bar
}
=
{
foo
:
'JSPang'
,
bar
:
'技術胖'
}
;
console
.
log
(
foo
+
bar
)
;
//控制檯打印出了「JSPang技術胖」
|
注意:對象的解構與數組有一個重要的不一樣。數組的元素是按次序排列的,變量的取值由它的位置決定;而對象的屬性沒有次序,變量必須與屬性同名,才能取到正確的值。
圓括號的使用
若是在解構以前就定義了變量,這時候你再解構會出現問題。下面是錯誤的代碼,編譯會報錯。
|
let
foo
;
{
foo
}
=
{
foo
:
'JSPang'
}
;
console
.
log
(
foo
)
;
|
要解決報錯,使程序正常,咱們這時候只要在解構的語句外邊加一個圓括號就能夠了。
|
let
foo
;
(
{
foo
}
=
{
foo
:
'JSPang'
}
)
;
console
.
log
(
foo
)
;
//控制檯輸出jspang
|
字符串解構
字符串也能夠解構,這是由於,此時字符串被轉換成了一個相似數組的對象。
|
const
[
a
,
b
,
c
,
d
,
e
,
f
]
=
"JSPang"
;
console
.
log
(
a
)
;
console
.
log
(
b
)
;
console
.
log
(
c
)
;
console
.
log
(
d
)
;
console
.
log
(
e
)
;
console
.
log
(
f
)
;
|
總結:這節課的內容很簡單,可是也有一些細節須要注意,但願你能動手把解構練習一遍,在實戰項目中解構Json數據格式仍是很廣泛的,有了ES6得幫助,提升了很多工做效率。
第4節:擴展運算符和rest運算符
上節課學的解構已經能夠大大增長咱們的開發效率,這節課咱們學習擴展運算符和rest運算符,它們都是…(三個點)。它們能夠很好的爲咱們解決參數和對象數組未知狀況下的編程,讓咱們的代碼更健壯和簡潔。
對象擴展運算符(…):
當編寫一個方法時,咱們容許它傳入的參數是不肯定的。這時候可使用對象擴展運算符來做參數,看一個簡單的列子:
|
function
jspang
(
.
.
.
arg
)
{
console
.
log
(
arg
[
0
]
)
;
console
.
log
(
arg
[
1
]
)
;
console
.
log
(
arg
[
2
]
)
;
console
.
log
(
arg
[
3
]
)
;
}
jspang
(
1
,
2
,
3
)
;
|
這時咱們看到控制檯輸出了 1,2,3,undefined,這說明是能夠傳入多個值,而且就算方法中引用多了也不會報錯。
擴展運算符的用處:
咱們先用一個例子說明,咱們聲明兩個數組arr1和arr2,而後咱們把arr1賦值給arr2,而後咱們改變arr2的值,你會發現arr1的值也改變了,由於咱們這是對內存堆棧的引用,而不是真正的賦值。
|
let
arr1
=
[
'www'
,
'jspang'
,
'com'
]
;
let
arr2
=
arr1
;
console
.
log
(
arr2
)
;
arr2
.
push
(
'shengHongYu'
)
;
console
.
log
(
arr1
)
;
|
控制檯輸出:
|
[
"www"
,
"jspang"
,
"com"
]
[
"www"
,
"jspang"
,
"com"
,
"shengHongYu"
]
|
這是咱們不想看到的,能夠利用對象擴展運算符簡單的解決這個問題,如今咱們對代碼進行改造。
|
let
arr1
=
[
'www'
,
'jspang'
,
'com'
]
;
//let arr2=arr1;
let
arr2
=
[
.
.
.
arr1
]
;
console
.
log
(
arr2
)
;
arr2
.
push
(
'shengHongYu'
)
;
console
.
log
(
arr2
)
;
console
.
log
(
arr1
)
;
|
如今控制檯預覽時,你能夠看到咱們的arr1並無改變,簡單的擴展運算符就解決了這個問題。
rest運算符
若是你已經很好的掌握了對象擴展運算符,那麼理解rest運算符並不困難,它們有不少類似之處,甚至不少時候你不用特地去區分。它也用…(三個點)來表示,咱們先來看一個例子。
|
function
jspang
(
first
,
.
.
.
arg
)
{
console
.
log
(
arg
.
length
)
;
}
jspang
(
0
,
1
,
2
,
3
,
4
,
5
,
6
,
7
)
;
|
這時候控制檯打印出了7,說明咱們arg裏有7個數組元素,這就是rest運算符的最簡單用法。
如何循環輸出rest運算符
這裏咱們用for…of循環來進行打印出arg的值,咱們這裏只是簡單使用一下,之後咱們會專門講解for…of循環。
|
function
jspang
(
first
,
.
.
.
arg
)
{
for
(
let
val
of
arg
)
{
console
.
log
(
val
)
;
}
}
jspang
(
0
,
1
,
2
,
3
,
4
,
5
,
6
,
7
)
;
|
for…of的循環能夠避免咱們開拓內存空間,增長代碼運行效率,因此建議你們在之後的工做中使用for…of循環。有的小夥伴會說了,反正最後要轉換成ES5,沒有什麼差異,可是至少從代碼量上咱們少打了一些單詞,這就是開發效率的提升。
總結:咱們這節課學習了對象擴展運算符和reet運算符,它們兩個仍是很是相似的,可是你要本身區分,這樣才能在工做中運用自如。在之後的課程中還會有不少關於擴展運算符和rset運算符的妙用,讓咱們一塊兒期待吧。
第5節:字符串模版
這節咱們主要學習ES6對字符串新增的操做,最重要的就是字符串模版,字符串模版的出現讓咱們不再用拼接變量了,並且支持在模板裏有簡單計算操做。小夥伴們是否是已經摩拳擦掌等不急了那?那咱們就開始吧。
字符串模版
先來看一個在ES5下咱們的字符串拼接案例:
|
let
jspang
=
'技術胖'
;
let
blog
=
'很是高興你能看到這篇文章,我是你的老朋友'
+
jspang
+
'。這節課咱們學習字符串模版。'
;
document
.
write
(
blog
)
;
|
ES5下必須用+jspang+這樣的形式進行拼接,這樣很麻煩並且很容易出錯。ES6新增了字符串模版,能夠很好的解決這個問題。字符串模版再也不使用‘xxx’這樣的單引號,而是換成了xxx
這種形式,也叫鏈接號。這時咱們再引用jspang變量就須要用${jspang}這種形式了,咱們對上邊的代碼進行改造。
|
let
jspang
=
'技術胖'
;
let
blog
=
`很是高興你能看到這篇文章,我是你的老朋友
$
{
jspang
}。這節課咱們學習字符串模版。
`
;
document
.
write
(
blog
)
;
|
能夠看到瀏覽器出現了和上邊代碼同樣的結果。並且這裏邊支持html標籤,能夠試着輸入一些。
|
let
jspang
=
'技術胖'
;
let
blog
=
`
<
b
>很是高興你能看到這篇文章
<
/
b
>,我是你的老朋友
$
{
jspang
}。
<
br
/
>這節課咱們學習字符串模版。
`
;
document
.
write
(
blog
)
;
|
對運算的支持:
|
let
a
=
1
;
let
b
=
2
;
let
result
=
`
$
{
a
+
b
}
`
;
document
.
write
(
result
)
;
|
強大的字符串模版,在實際開發中,咱們可讓後臺寫一個活動頁面,而後輕鬆的輸出給用戶。
字符串查找
ES6還增長了字符串的查找功能,並且支持中文哦,小夥伴是否是很興奮。仍是拿上邊的文字做例子,進行操做。
查找是否存在:
先來看一下ES5的寫法,其實這種方法並不實用,給咱們的索引位置,咱們本身還要肯定位置。
|
let
jspang
=
'技術胖'
;
let
blog
=
'很是高興你能看到這篇文章,我是你的老朋友技術胖。這節課咱們學習字符串模版。'
;
document
.
write
(
blog
.
indexOf
(
jspang
)
)
;
|
這是網頁中輸出了20,咱們還要本身判斷。
ES6直接用includes就能夠判斷,再也不返回索引值,這樣的結果咱們更喜歡,更直接。
|
let
jspang
=
'技術胖'
;
let
blog
=
'很是高興你能看到這篇文章,我是你的老朋友技術胖。這節課咱們學習字符串模版。'
;
document
.
write
(
blog
.
includes
(
jspang
)
)
;
|
判斷開頭是否存在:
|
blog
.
startsWith
(
jspang
)
;
|
判斷結尾是否存在:
|
blog
.
endsWith
(
jspang
)
;
|
須要注意的是:starts和ends 後邊都要加s,我開始時常常寫錯,但願小夥伴們不要採坑。
複製字符串
咱們有時候是須要字符串重複的,好比分隔符和特殊符號,這時候複製字符串就派上用場了,語法很簡單。
|
document
.
write
(
'jspang|'
.
repeat
(
3
)
)
;
|
固然ES6對字符串還有一些其它操做,由於實際工做中不太使用,這裏就不做太多的介紹了。但願你能動手練習一下,並把這些新特性應用到工做中,不然可能很快就忘記了。
第6節:ES6數字操做
前端編程工做中對數字的操做是很是多的,若是你對數字操做的很差,就很難寫出使人驚奇的程序,因此咱們這節課重點學習一下ES6新增的一些數字操做方法。
二進制和八進制
二進制和八進制數字的聲明並非ES6的特性,咱們只是作一個常識性的回顧,由於不少新人小夥伴會把他們當成字符串或者不知道是什麼,因此這算是贈送的知識點。
二進制聲明:
二進制的英文單詞是Binary,二進制的開始是0(零),而後第二個位置是b(注意這裏大小寫均可以實現),而後跟上二進制的值就能夠了。
|
let
binary
=
0B010101
;
console
.
log
(
binary
)
;
|
這時候瀏覽器的控制檯顯示出了21。
八進制聲明:
八進制的英文單詞是Octal,也是以0(零)開始的,而後第二個位置是O(歐),而後跟上八進制的值就能夠了。
|
let
b
=
0o666
;
console
.
log
(
b
)
;
|
這時候瀏覽器的控制檯顯示出了438。
數字判斷和轉換
數字驗證Number.isFinite( xx )
可使用Number.isFinite( )來進行數字驗證,只要是數字,不管是浮點型仍是整形都會返回true,其餘時候會返回false。
|
let
a
=
11
/
4
;
console
.
log
(
Number
.
isFinite
(
a
)
)
;
//true
console
.
log
(
Number
.
isFinite
(
'jspang'
)
)
;
//false
console
.
log
(
Number
.
isFinite
(
NaN
)
)
;
//false
console
.
log
(
Number
.
isFinite
(
undefined
)
)
;
//false
|
NaN驗證
NaN是特殊的非數字,可使用Number.isNaN()來進行驗證。下邊的代碼控制檯返回了true。
|
console
.
log
(
Number
.
isNaN
(
NaN
)
)
;
|
判斷是否爲整數Number.isInteger(xx)
|
let
a
=
123.1
;
console
.
log
(
Number
.
isInteger
(
a
)
)
;
//false
|
整數轉換Number.parseInt(xxx)和浮點型轉換Number.parseFloat(xxx)
|
let
a
=
'9.18'
;
console
.
log
(
Number
.
parseInt
(
a
)
)
;
console
.
log
(
Number
.
parseFloat
(
a
)
)
;
|
整數取值範圍操做
整數的操做是有一個取值範圍的,它的取值範圍就是2的53次方。咱們先用程序來看一下這個數字是什麼.
|
let
a
=
Math
.
pow
(
2
,
53
)
-
1
;
console
.
log
(
a
)
;
//9007199254740991
|
在咱們計算時會常常超出這個值,因此咱們要進行判斷,ES6提供了一個常數,叫作最大安全整數,之後就不須要咱們計算了。
最大安全整數
|
console
.
log
(
Number
.
MAX_SAFE_INTEGER
)
;
|
最小安全整數
|
console
.
log
(
Number
.
MIN_SAFE_INTEGER
)
;
|
安全整數判斷isSafeInteger( )
|
let
a
=
Math
.
pow
(
2
,
53
)
-
1
;
console
.
log
(
Number
.
isSafeInteger
(
a
)
)
;
//false
|
總結:這節課咱們學習了ES6數字的操做,方法不少,很零散,須要常常複習或者實戰中慢慢熟悉。
第7節:ES6中新增的數組知識(1)
JSON數組格式轉換
JSON的數組格式就是爲了前端快速的把JSON轉換成數組的一種格式,咱們先來看一下JSON的數組格式怎麼寫。
|
let
json
=
{
'0'
:
'jspang'
,
'1'
:
'技術胖'
,
'2'
:
'大胖逼逼叨'
,
length
:
3
}
|
這就是一個標準的JSON數組格式,跟普通的JSON對比是在最後多了一個length屬性。只要是這種特殊的json格式均可以輕鬆使用ES6的語法轉變成數組。在ES6中絕大部分的Array操做都存在於Array對象裏。咱們就用Array.from(xxx)來進行轉換。咱們把上邊的JSON代碼轉換成數組,並打印在控制檯。
|
let
json
=
{
'0'
:
'jspang'
,
'1'
:
'技術胖'
,
'2'
:
'大胖逼逼叨'
,
length
:
3
}
let
arr
=
Array
.
from
(
json
)
;
console
.
log
(
arr
)
|
實際開發中這種方法仍是比較經常使用的,畢竟節省了咱們代碼行數,也讓咱們的程序更清晰。
Array.of()方法:
它負責把一堆文本或者變量轉換成數組。在開發中咱們常常拿到了一個相似數組的字符串,須要使用eval來進行轉換,若是你一個老手程序員都知道eval的效率是很低的,它會拖慢咱們的程序。這時候咱們就可使用Array.of方法。咱們看下邊的代碼把一堆數字轉換成數組並打印在控制檯上:
|
let
arr
=
Array
.
of
(
3
,
4
,
5
,
6
)
;
console
.
log
(
arr
)
;
|
固然它不只能夠轉換數字,字符串也是能夠轉換的,看下邊的代碼:
|
let
arr
=
Array
.
of
(
'技術胖'
,
'jspang'
,
'大胖逼逼叨'
)
;
console
.
log
(
arr
)
;
|
find( )實例方法:
所謂的實例方法就是並非以Array對象開始的,而是必須有一個已經存在的數組,而後使用的方法,這就是實例方法(不理解請看下邊的代碼,再和上邊的代碼進行比對,你會有所頓悟)。這裏的find方法是從數組中查找。在find方法中咱們須要傳入一個匿名函數,函數須要傳入三個參數:
- value:表示當前查找的值。
- index:表示當前查找的數組索引。
- arr:表示當前數組。
在函數中若是找到符合條件的數組元素就進行return,並中止查找。你能夠拷貝下邊的代碼進行測試,就會知道find做用。
|
let
arr
=
[
1
,
2
,
3
,
4
,
5
,
6
,
7
,
8
,
9
]
;
console
.
log
(
arr
.
find
(
function
(
value
,
index
,
arr
)
{
return
value
>
5
;
}
)
)
|
控制檯輸出了6,說明找到了符合條件的值,並進行返回了,若是找不到會顯示undefined。
第8節:ES6中新增的數組知識(2)
fill( )實例方法:
fill()也是一個實例方法,它的做用是把數組進行填充,它接收三個參數,第一個參數是填充的變量,第二個是開始填充的位置,第三個是填充到的位置。
|
let
arr
=
[
0
,
1
,
2
,
3
,
4
,
5
,
6
,
7
,
8
,
9
]
;
arr
.
fill
(
'jspang'
,
2
,
5
)
;
console
.
log
(
arr
)
;
|
上邊的代碼是把數組從第二位到第五位用jspang進行填充。
數組的遍歷
for…of循環:
這種形式比ES5的for循環要簡單並且高效。先來看一個最簡單的for…of循環。
|
let
arr
=
[
'jspang'
,
'技術胖'
,
'大胖逼逼叨'
]
for
(
let
item
of
arr
)
{
console
.
log
(
item
)
;
}
|
for…of數組索引:有時候開發中是須要數組的索引的,那咱們可使用下面的代碼輸出數組索引。
|
let
arr
=
[
'jspang'
,
'技術胖'
,
'大胖逼逼叨'
]
for
(
let
index
of
arr
.
keys
(
)
)
{
console
.
log
(
index
)
;
}
|
能夠看到這時的控制檯就輸出了0,1,2,也就是數組的索引。
同時輸出數組的內容和索引:咱們用entries()這個實例方法,配合咱們的for…of循環就能夠同時輸出內容和索引了。
|
let
arr
=
[
'jspang'
,
'技術胖'
,
'大胖逼逼叨'
]
for
(
let
[
index
,
val
]
of
arr
.
entries
(
)
)
{
console
.
log
(
index
+
':'
+
val
)
;
}
|
entries( )實例方法:
entries()實例方式生成的是Iterator形式的數組,那這種形式的好處就是可讓咱們在須要時用next()手動跳轉到下一個值。咱們來看下面的代碼:
|
let
arr
=
[
'jspang'
,
'技術胖'
,
'大胖逼逼叨'
]
let
list
=
arr
.
entries
(
)
;
console
.
log
(
list
.
next
(
)
.
value
)
;
console
.
log
(
list
.
next
(
)
.
value
)
;
console
.
log
(
list
.
next
(
)
.
value
)
;
|
總結:咱們經過兩節課講了ES6對數組的擴展,數組在咱們的實際開發中是特別重要的,幾乎我天天都要編寫數組的操做代碼,因此這節課必定要在聽完以後本身敲一遍代碼。
第9節:ES6中的箭頭函數和擴展
這節課開始,先不着急看ES6中的函數,而是回顧一下ES5中的函數寫法。寫一個函數,進行一個加法計算。
|
function
add
(
a
,
b
)
{
return
a
+
b
;
}
console
.
log
(
add
(
1
,
2
)
)
;
|
咱們聲明瞭一個add函數,而後傳入a和b兩個值,返回a+b的值。 而後咱們在控制檯打印了這個函數的返回結果,這裏是3.
默認值
在ES6中給咱們增長了默認值的操做,咱們修改上邊的代碼,能夠看到如今只須要傳遞一個參數也是能夠正常運行的。
|
function
add
(
a
,
b
=
1
)
{
return
a
+
b
;
}
console
.
log
(
add
(
1
)
)
;
|
主動拋出錯誤
在使用Vue的框架中,能夠常常看到框架主動拋出一些錯誤,好比v-for必須有:key值。那尤大神是如何作到的那?其實很簡單,ES6中咱們直接用throw new Error( xxxx ),就能夠拋出錯誤。
|
function
add
(
a
,
b
=
1
)
{
if
(
a
==
0
)
{
throw
new
Error
(
'This is error'
)
}
return
a
+
b
;
}
console
.
log
(
add
(
0
)
)
;
|
函數中的嚴謹模式
咱們在ES中就常用嚴謹模式來進行編程,可是必須寫在代碼最上邊,至關於全局使用。在ES6中咱們能夠寫在函數體中,至關於針對函數來使用。
|
function
add
(
a
,
b
=
1
)
{
'use strict'
if
(
a
==
0
)
{
throw
new
Error
(
'This is error'
)
;
}
return
a
+
b
;
}
console
.
log
(
add
(
1
)
)
;
|
上邊的代碼若是運行的話,你會發現瀏覽器控制檯報錯,這是ES6中的一個坑,若是沒人指導的話,可能你會陷進去一會。這個錯誤的緣由就是若是你使用了默認值,再使用嚴謹模式的話,就會有衝突,因此咱們要取消默認值的操做,這時候你在運行就正常了。
|
function
add
(
a
,
b
)
{
'use strict'
if
(
a
==
0
)
{
throw
new
Error
(
'This is error'
)
;
}
return
a
+
b
;
}
console
.
log
(
add
(
1
,
2
)
)
;
|
得到須要傳遞的參數個數
若是你在使用別人的框架時,不知作別人的函數須要傳遞幾個參數怎麼辦?ES6爲咱們提供了獲得參數的方法(xxx.length).咱們用上邊的代碼看一下須要傳遞的參數個數。
|
function
add
(
a
,
b
)
{
'use strict'
if
(
a
==
0
)
{
throw
new
Error
(
'This is error'
)
;
}
return
a
+
b
;
}
console
.
log
(
add
.
length
)
;
|
這時控制檯打印出了2,可是若是咱們去掉嚴謹模式,並給第二個參數加上默認值的話,這時候add.length的值就變成了1, 也就是說它獲得的是必須傳入的參數。
箭頭函數
在學習Vue的時候,我已經大量的使用了箭頭函數,由於箭頭函數真的很好用,咱們來看一個最簡單的箭頭函數。也就是上邊咱們寫的add函數,進行一個改變,寫成箭頭函數。