（給達達前端加星标，提升前端技能）

内容有點多，也請你(nǐ)靜下(xià)來，慢閱讀，今後多多關(guān)照。

說到web前端開發高級，必須要掌握的是HTML和(hé)css代碼的優化，前端優化很重要，這是成功你(nǐ)進階的道路(lù)上需要重視的知識點，面對代碼優化，首先我們要學習的就是前端命名規範，HTML代碼優化，和(hé)css代碼優化。

前端命名規範是很重要的，一直說很重要，當你(nǐ)用過别人的代碼進行重構時，你(nǐ)會知道，如(rú)果你(nǐ)看到一長串代碼，不了解之前的人是怎麼寫的，開局全靠猜，結局就是不斷地浪費時間。

掌握前端優化目錄的學習

前端命名規範，前端結構的組織，文(wén)件的命名規範，在一個(gè)項目中(zhōng)代碼的組織結構要清晰易懂，同類型文(wén)件可(kě)以歸類到到相同的文(wén)件夾中(zhōng)，文(wén)件命名規則需要統一且命名要有意義。這裡要有意義是指命名要通(tōng)俗易懂，英文(wén)單詞可(kě)以寫縮寫，不必故步自封，寫那麼長的單詞。

命名規範在前端領域，涉及HTML，css，JavaScript，在HTML代碼所有的标簽名和(hé)屬性應該都為小寫，屬性值應該用引号括起來。元素的id和(hé)class都要按照規定命名，代碼縮進時要縮進，進行格式化，讓代碼美觀，有時可(kě)以給HTML代碼添加必要注解。

對于css命名的規範，盡量使用class選擇器(qì)進行樣式的定義，類命名時取父元素的class名作為前綴，使用-符号進行連接。類名與樣式之間以空格進行分割。

對于JavaScript命名規範，變量名是區分大小寫，第一個(gè)字符是不允許為數字的，不允許是空格，不允許其他标簽符号，盡量使用有意義的命名，不要使用JavaScript的關(guān)鍵詞，或者是保留字。

進行前端代碼的優化，優化HTML代碼為了能夠使網站(zhàn)更好的搜索，讓用戶更快速搜索到我們的網站(zhàn)，寫好HTML代碼使用正确的閉合HTML标簽，進行HTML代碼層級間的合理縮進，屬性值需要使用雙引号，結構與樣式進行有效的分離(lí)，結構與行為進行有效的分離(lí)。

進行HTML語義化标簽，HTML5提供的一些新的語義化元素來明确一個(gè)web頁面的不同部分，有：

優化前端效果，可(kě)以删除多餘容器(qì)元素，讓代碼層次少(shǎo)，避免使用table進行頁面的布局，換成用div+css的樣式布局。

css代碼優化，在各個(gè)浏覽器(qì)中(zhōng)，相同元素解析的結果不同，就需要手動(dòng)重置一些樣式。

去除标簽的默認樣式，如(rú)p，li，input等。

HTML5新标簽設置為display:block。

重置一些元素的樣式如(rú)超鍊接，字号等樣式。

css樣式選擇器(qì)的優先級

對于css樣式選擇器(qì)，優先級高的會覆蓋優先級低的。

第一，id選擇器(qì)的權重為100，第二，類選擇器(qì)的權重為10，第三，标簽選擇器(qì)的權重為1。

注意，css樣式中(zhōng)盡量不要使用id選擇器(qì)，會降低代碼的複用性，盡量不要使用!important，會降低代碼的複用性，盡量減少(shǎo)子(zǐ)選擇器(qì)的層級。

css樣式多餘樣式去除，和(hé)結構優化

定義簡潔的css樣式規則，合并相關(guān)css樣式規則，定義簡潔的屬性值，合并相同的，删除無效的。

sprite拼合圖

css sprite，也叫 css 精靈，雪(xuě)碧圖。

是一種将雪(xuě)散的背景圖合并成一張大圖，再次利用css的background-position屬性進行背景的定位從而達到減少(shǎo)圖片請求數量達到加快加載速度的網頁應用處理方式。

background屬性

• background-color，描述規定要使用的背景顔色
  

• background-position，描述規定背景圖片的位置

• background-size，描述規定背景圖片的尺寸

• background-repeat，描述規定如(rú)何重複背景圖像

• background-origin，描述規定背景圖片的定位區域

• background-clip，描述規定背景的繪制區域

• background-attachment，描述規定背景圖片是否固定或者随着頁面的其餘部分滾動(dòng)

• background-image，描述規定要使用的背景圖像

background-position屬性

top，left，center，right，center等等，top表示垂直位置最頭部，bottom表示垂直位置最底部，left表示水平位置最左邊，center表示水平位置居中(zhōng)，right表示為水平位置最右邊。

x% y%


第一個(gè)值是水平位置，第二個(gè)值是垂直位置。
左上角是 0% 0%。右下(xià)角是 100% 100%。
如(rú)果您僅規定了一個(gè)值，另一個(gè)值将是 50%。

xpos ypos


第一個(gè)值是水平位置，第二個(gè)值是垂直位置。
左上角是 0 0。
單位是像素 (0px 0px) 或任何其他的 CSS 單位。
如(rú)果您僅規定了一個(gè)值，另一個(gè)值将是50%。
您可(kě)以混合使用 % 和(hé) position 值。

css sprite的制作工具

css sprite制作工具，photoshop和(hé)打包工具webpack來制作。

打包工具，現在流行的很多前端打包工具都有支持css sprite的集成，如(rú)

webpack中(zhōng)隻要安裝webpack-spritesmith依賴，然後在配置文(wén)件中(zhōng)引用依賴var SpritesmithPlugin = require('webpack-spritesmith'),最後在配置文(wén)件中(zhōng)添加代碼。

代碼壓縮，打包工具

前端優化，壓縮JavaScript和(hé)css是非常重要的。目前最常用的壓縮JavaScript代碼的工具之一有UglifyJS，它會分析JavaScript代碼語法樹(shù)，理解代碼含義，從而能做到諸如(rú)去掉無效代碼，去掉日志輸出代碼，縮短(duǎn)變量名等優化。

在webpack中(zhōng)接入UglifyJS需要通(tōng)過插件的形式，UgllifyJsPlugin是比較常用的插件，通(tōng)過在webpack的配置文(wén)件webpack.config.js中(zhōng)加入以下(xià)代碼即可(kě)。

壓縮css代碼常用的是CSSNANO，是基于PostCSS的，可(kě)以讓我們的代碼達到提升加載速度和(hé)代碼混淆的作用。

圖片的預加載

預加載簡單來說就是将所有所需的資(zī)源提前請求加載到本地，這樣需要用到時就可(kě)以直接從緩存中(zhōng)取資(zī)源了。

圖片的懶加載

首屏的加載，就是用圖片懶加載技術(shù)，即是到可(kě)視區域再加載。

圖片懶加載，使用jquery.lazyload.js，該js是一個(gè)基于Jquery的懶加載插件，裡面封裝了懶加載用到的方法以及實現，第二種是echo.js，它是一款非常簡單實用輕量級的圖片延時加載插件。

JavaScript代碼優化

JavaScript代碼可(kě)維護性

什麼是代碼與結構分離(lí)呢(ne)

代碼與結構分離(lí)，就是把HTML代碼和(hé)JavaScript代碼進行分離(lí)，第一在HTML中(zhōng)分離(lí)JavaScript，第二，在JavaScript中(zhōng)分離(lí)HTML。

什麼是樣式與結構分離(lí)呢(ne)

樣式與結構分離(lí)，就是把css代碼和(hé)HTML代碼進行有效分離(lí)。

什麼是數據與代碼分離(lí)呢(ne)

數據與代碼分離(lí)，也可(kě)以認為是前後端分離(lí)的表現，後端接口隻負責返回json格式的數據，不會返回帶标簽甚至是帶樣式或者帶JavaScript的組合數據。

JavaScript的代碼可(kě)調式性

代碼可(kě)調式性，可(kě)以用console.log，window，alert，try...catch捕獲異常來進行JavaScript的調試。

console.log，即通(tōng)過在JavaScript中(zhōng)添加console.log(msg)

msg為需要打印的信息，可(kě)以是變量，字符串，變量類型可(kě)以是數組，對象，數字等等。

window關(guān)鍵字用于停止執行JavaScript，并調式函數，這個(gè)關(guān)鍵字與調式工具中(zhōng)設置斷點的效果是一樣的。

alert和(hé)console.log一樣，alert通(tōng)過在JavaScript中(zhōng)添加alert(msg)，Msg為需要彈窗的信息，值得一提的是這個(gè)彈框是強制阻塞的，隻要關(guān)閉該彈窗才能解除阻塞，所以要謹慎使用。

try...catch，用于try...catch...finally來進行異常的捕獲，try代碼塊表示可(kě)能發生異常的代碼，catch表示捕獲異常對象，finally無論是否發生異常都執行。

evalError，typeError，syntaxError
referenceError，rangeError，URLError

JavaScript dom的優化

提升文(wén)件的加載速度，合并JavaScript代碼，盡量少(shǎo)用script标簽，無堵塞加載JavaScript，通(tōng)過給script标簽增加defer屬性或者是async屬性來實現

<script src="file.js" defer></script>

動(dòng)态創建script标簽來加載，JavaScript dom操作優化，dom訪問(wèn)和(hé)修改，都說訪問(wèn)dom耗性能，用循環訪問(wèn)也是如(rú)此，所以要減少(shǎo)dom的訪問(wèn)。

重排和(hé)重繪

用cssText改變樣式，批量修改dom。

JavaScript dom 腳本加載優化

學習前端高級層次，掌握webpack入門

modules with dependencies webpack static assets

webpack是一個(gè)module bundler模塊構建工具，由于JavaScript應用程序的複雜性不斷增加，構建工具已經成為web開發中(zhōng)不可(kě)或缺的一部分。

它幫助我們去打包，編譯和(hé)管理項目需要的衆多資(zī)源文(wén)件和(hé)依賴庫。webpack支持CommoonJS,AMD和(hé)ES6模塊系統，并且兼容多種JS書寫規範，可(kě)以處理模塊間的依賴關(guān)系，所以具有更強大的JS模塊化的功能，它能壓縮圖片，對css, js 文(wén)件進行語法檢查，壓縮，編譯打包。

構建工具沒有标準

現在開發者可(kě)以用的構造構建工具有

webpack,gulp,bowserify,npm scripts,grunt等。

缺點有，不适合web開發的初學者，對于css，圖片，以及其他非Js資(zī)源文(wén)件時，需要先混淆處理，文(wén)檔不夠完善，變化很大，不同版本的使用方法存在較大的差異。

安裝

全局安裝，用于全局使用命令行打包文(wén)件

//安裝全局webpack
npm install webpack -g


//安裝全局webpack-cli
npm install webpack-cli -g

新建項目文(wén)件夾

進入項目文(wén)件夾，打開cmd命令行窗口

webpack -v
顯示版本号，說明webpack安裝成功，可(kě)以在全局任何目錄下(xià)使用

基本應用

SPA是什麼，它是單頁應用程序。

single page web application，是webpack打包的典型應用，一個(gè)典型的SPA應用，主要由以下(xià)幾個(gè)部分組成。

index.html主文(wén)件，js文(wén)件，有多個(gè)js文(wén)件，可(kě)以通(tōng)過webpack合并打包為一個(gè)文(wén)件，css文(wén)件，可(kě)以多個(gè)css文(wén)件，可(kě)以通(tōng)過webpack合并打包為一個(gè)文(wén)件。圖片可(kě)以通(tōng)過webpack壓縮優化。

新建src文(wén)件夾，該文(wén)件夾存放開發用的文(wén)件，在src目錄下(xià)創建文(wén)件。

新建dist文(wén)件夾

該文(wén)件存放打包後的文(wén)件，可(kě)以先不創建，打包時可(kě)以自動(dòng)創建。

打包，webpack-mode development，經過打包後，已經根據三個(gè)js依賴關(guān)系，打包合并為dist/main.js。

webpack --output文(wén)件名，輸出文(wén)件路(lù)徑

webpack --config文(wén)件名，用于指定其他配置文(wén)

默認為webpack.config.js

webpack --mode模式，打包模式 production，生成模式，developement開發模式。

webpack --watch 監聽文(wén)件變化并自動(dòng)打包

webpack -p 壓縮混淆腳本

webpack -d 生成Map映射文(wén)件

webpack --progress 顯示進度，打印出編譯進度的百分比值

webpack --color 用不同顔色标記不同的信息

webpack --profile 顯示每一步編譯的具體時間，可(kě)幫助優化構建性能

webpack --hot 熱替換

webpack --bail 如(rú)果編譯過程出現error，立馬停止編譯

配置文(wén)件入門

通(tōng)過定義配置文(wén)件進行複雜操作，文(wén)件名webpack.config.js

一個(gè)配置文(wén)件的基本結構：

entry，入口定義入口文(wén)件，默認文(wén)件./src/index.js

output，輸出定義出口文(wén)件，默認文(wén)件./dist/main.js

resolve，解析路(lù)徑映射，省略後綴名等

module，模塊定義不同loader，讓webpack能夠處理非JavaScript模塊

plugins，插件擴展webpack功能

devServer，開發服務器(qì)用于配置webpack-dev-server選項

簡單的配置文(wén)件

hello wrold例子(zǐ)：

修改webpack.json文(wén)件

配置詳細entry和(hé)output

entry入口配置是指頁面中(zhōng)的入口文(wén)件，默認入口文(wén)件./src/index.js

output出口配置是指生成的文(wén)件輸出到哪個(gè)地方去，./dist/main.js

path，輸出路(lù)徑，filename，輸出文(wén)件名

module，webpack隻能打包js文(wén)件，無法識别其他語法的文(wén)件，如(rú)果要讓webpack打包其他文(wén)件，首先需要讓webpack識别不同的文(wén)件。

loader分類

分類

說明

轉換編譯

script-loader，babel-loader，ts-loader，coffee-loader

處理樣式

style-loader，css-loader，less-loader，sass-loader，postcss-loader

處理文(wén)件

raw--loader，url-loader，file-loader

處理數據

csv-loader，xml-loader

處理模闆語言

html-loader，pug-loader，jade-loader，markdown-loader

清理和(hé)測試

mocha-loader，eslint-loader

常用loader

loader

說明

css-loader

解析css語句

style-loader

将css-loader解析後的文(wén)本，添加<style>标簽

babel-loader

将ES6+、JSX語法轉成ES5低版本語法

url-loader

url-loader對未設置或者小于limit byte設置的圖片以base64的格式進行轉換<br />對于大于limit byte的圖片用file-loader進行解析

file-loader

解析項目中(zhōng)的url引入（包括img的src和(hé)background的url）<br />修改打包後文(wén)件引用路(lù)徑，使之指向正确的文(wén)件

less-loader

less編譯器(qì)

vue-loader

Vue也推出了自己的vue-loader，可(kě)以方便的打包 .vue文(wén)件 的代碼。<br />在vue-cli（快速構建單頁應用的腳手架）中(zhōng)得到應用。

babel loader

babel是一個(gè)js編譯器(qì)，它是通(tōng)過語法轉換器(qì)支持最新版本的JavaScript，這插件允許你(nǐ)使用新語法，無需等待浏覽器(qì)支持。

使用babel首先要配置.babelrc文(wén)件，該文(wén)件用來設置轉碼規則和(hé)插件，存放在項目的根目錄下(xià)。

在linux系統中(zhōng)，rc結尾的文(wén)件通(tōng)常代表運行時自動(dòng)加載的文(wén)件、配置等等。

在.babelrc配置文(wén)件中(zhōng)，主要是對預設和(hé)插件進行配置。

配置項

說明

presets

預設 對js最新的語法糖進行編譯，并不負責轉譯新增的api和(hé)全局對象。例如(rú)：let/const可(kě)以被編譯，而String.includes、Object.assign等對象新增方法并不能被編譯。<br />常用轉譯器(qì)：babel-preset-env、babel-preset-es2015（2016、2017）、babel-preset-latest等

plugins

插件 控制如(rú)何轉換代碼，babel默認隻轉換新的js語法，而不轉換新的API，比如(rú) Set,，Maps，Symbol，Promise 等全局對象，transform-runtime 用來解決以上問(wèn)題

插件可(kě)以擴展webpack的功能，Loader不能做的處理都能交給plugin來做。

resolve配置webpack如(rú)何尋找模塊對應的文(wén)件，webpack在啟動(dòng)後會從配置的入口模塊觸發，找出所有依賴的模塊，默認會采用模塊化标準裡約定号的規則去尋找。

屬性

說明

alias

（譯：别名）通(tōng)過别名将原來導入路(lù)徑映射成一個(gè)新的導入路(lù)徑

extensions

（譯：擴展）數組 導入模塊時，可(kě)以省略的文(wén)件後綴名

其他配置

配置項

說明

devtool

是否生成以及如(rú)何生成sourcemap

devserver

開啟一個(gè)本地開發服務器(qì)

watch

監聽文(wén)件變化并自動(dòng)打包

watchoption

用來定制watch模式的選項

performance

打包後命令行如(rú)何展示性能提示，如(rú)果超過某個(gè)大小是警告還是報錯

webpack-dev-server

它是一個(gè)小型的web服務器(qì)，可(kě)以自動(dòng)監視項目文(wén)件的變化，自動(dòng)刷新浏覽器(qì)，其HMR方式隻替換更新的部分，而不是重載頁面，大大提高了刷新效率

配置項

說明

默認值

inline

自動(dòng)刷新<br />當我們對業(yè)務代碼做了一些修改，保存（ctrl+s）後，頁面會自動(dòng)刷新，所做的修改會直接同步到頁面上，不需要手動(dòng)刷新頁面或重啟服務

true

hot

熱模塊替換<br /> 不用配置（通(tōng)常是通(tōng)過命令行 --hot 選項啟動(dòng)，會自動(dòng)加載webpack.HotModuleReplacementPlugin插件）

true

host

主機地址

open

自動(dòng)打開浏覽器(qì)，可(kě)以指定浏覽器(qì)，例如(rú)：--open 'Chrome'

false

port

端口

默認8080

overlay

編譯出錯的時候，在浏覽器(qì)頁面上顯示錯誤

false

stats

用來控制編譯的時候shell上的輸出内容<br />stats: "errors-only" 隻打印錯誤<br /> 還有"minimal"，"normal"，"verbose"

compress

true：對所有服務器(qì)資(zī)源采用gzip壓縮

false

contentBase

指定了服務器(qì)資(zī)源的根目錄，<br />如(rú)果不寫入contentBase的值，那麼contentBase默認是項目的目錄

"./"

historyApiFallback

它使用的是HTML5 History Api，任意的跳轉或404響應可(kě)以指向 index.html 頁面

true

例子(zǐ)：

運行

npm start

運行後，webpack-dev-server将開始運行，打開浏覽器(qì)，直接輸入127.0.0.1:8080/index.html，打包後的頁面已經可(kě)以使用了

注意：

index.html内無需引入main.js文(wén)件，打包後的index.html文(wén)件中(zhōng)會自動(dòng)引入該文(wén)件。

webpack-dev-server運行後，浏覽器(qì)中(zhōng)輸出的頁面，都是運行在内存中(zhōng)的，隻有build以後，才會在dist目錄中(zhōng)得到最終的結果文(wén)件。

ES6基礎

ECMAScript和(hé)JavaScript到底是什麼關(guān)系？

ECMAScript是JavaScript語言的國際标準，JavaScript是ECMAScript的實現。ESMAScript6的簡稱為es6是JavaScript語言的下(xià)一代标準。

symbol數據類型，Symbol是一種唯一标識符，可(kě)以用作對象的唯一屬性名，這樣就不會有人改寫或覆蓋你(nǐ)設置的屬性值了。

Symbol作為對象屬性名

Symbol永遠(yuǎn)不相等，創建它們的時候傳入相同值的參數，也不相等，因此，可(kě)借助此特性解決屬性名的沖突問(wèn)題，也是該數據類型存在的主要用途。

Symbol 值不能與其他類型的值進行運算，可(kě)以顯式轉為字符串。

使用場景

為某個(gè)對象添加屬性，新添加屬性與原有屬性重名，新添加的屬性僅作為标記使用，不需要用遍曆器(qì)遍曆處理。

let與const

用var聲明的變量會造成全局污染。

let用來聲明變量，要先聲明後使用

const

const聲明一個(gè)隻讀的常量，一旦聲明，常量的值就不能改變。

特性

var

let

const

作用域級别

函數級

塊級

塊級

初始值

否

否

聲明時必須賦值

變量提升

是

否

否

重複聲明

是

否

否

變量的解構賦值

set與Map

js原有的2種數據結構，array和(hé)object；es6新增兩種數據結構，set和(hé)map

set數據結構

set類似于數組，成員的值都是唯一的，沒有重複的值。

主要用于數據的去重。

set本身就是一個(gè)構造函數，用來生成set數據結構。set實例時一個(gè)類數組的對象。

方法

說明

add(value)

添加某個(gè)值，返回：Set結構本身

delete(value）

删除某個(gè)值，返回：bool（删除是否成功）

has(value)

表示該值是否為Set的成員 返回：bool

clear()

清除所有成員，返回：無

map數據結構，map也是一個(gè)數據集合，與數據類似。

它是對object的一個(gè)補充，map的key可(kě)以是任意類型，而傳統對象的key必須是字符串。

遍曆object得到的結果是無序的，遍曆Map得到的結果是有序的

方法

說明

clear

從Map中(zhōng)移除所有元素

delete

從Map中(zhōng)移除指定的元素

forEach

對Map中(zhōng)的每個(gè)元素執行指定操作

get

返回Map中(zhōng)的指定元素

has

如(rú)果Map包含指定元素，則返回 true

set

添加一個(gè)新建元素到Map

toString

返回Map的字符串表示形式（序列化）

valueOf

返回指定對象的原始值

array set map

類别

Array

Set

Map

長度

arr.length

set.size

map.size

增

arr.push(新增值)

set.add(4)

map.set('t', 1)

删

arr.splice(索引,删除數量)

set.delete(2)

map.delete('t')

改

arr.splice(索引,删除數量,[新增值])

遍曆

map.set('t',2)

查

遍曆

set.has(1)

map.has('t')

清空

arr = []

set.clear()

map.clear()

共同變量方法

方法

說明

keys()

返回鍵名的遍曆器(qì)

values()

返回鍵值的遍曆器(qì)

entries()

返回鍵值對的遍曆器(qì)

forEach()

使用回調函數遍曆每個(gè)成員

箭頭函數，匿名函數

參數格式

箭頭函數中(zhōng)的this

函數的擴展

對象的擴展

在es6中(zhōng)允許向對象直接寫入變量和(hé)函數，作為對象的屬性和(hé)方法。

es6中(zhōng)允許使用表達式作為對象屬性，并且函數名稱定義也可(kě)以采用相同的方法。

setter和(hé)getter。

方法名稱

方法描述

Object.is()

比較兩個(gè)值是否相等

Object.assign()

用于将對象進行合并

Object.getOwnPropertyDescriptor

返回對象屬性的描述

Object.keys()

返回一個(gè)數組，包括對象自身的所有的可(kě)枚舉屬性

數組的擴展

方法

方法描述

copyWithin(target，start，end)

在當前數組内部，将指定位置的成員複制到其他位置（會覆蓋原有成員），然後返回當前數組。也就是說，使用這個(gè)方法，會修改當前數組。參數說明：<br />target（必需）：從該位置開始替換數據。負值:倒數。<br />start（可(kě)選）：從該位置開始讀取數據，默認:0。負值:倒數。<br /> end（可(kě)選）：到該位置前停止讀取數據，默認等于數組長度。負值:倒數。

find()

數組實例的find方法，用于找出第一個(gè)符合條件的數組成員。它的參數是一個(gè)回調函數，所有數組成員依次執行該回調函數，直到找出第一個(gè)返回值為true的成員，然後返回該成員。如(rú)果沒有符合條件的成員，則返回undefined。

findIndex()

findIndex方法的用法與find方法非常類似，返回第一個(gè)符合條件的數組成員的位置，如(rú)果所有成員都不符合條件，則返回-1。

fill()

fill方法使用給定值，填充一個(gè)數組,fill方法用于空數組的初始化非常方便。數組中(zhōng)已有的元素，會被全部抹去，如(rú)果填充的類型為對象，那麼被賦值的是同一個(gè)内存地址的對象，而不是深拷貝對象。

includes()

該方法返回一個(gè)布爾值，表示某個(gè)數組是否包含給定的值，與字符串的includes方法類似。

ES6高級操作

promise對象

JavaScript本身就是單線程的，所以為了解決單線程帶來的問(wèn)題，在異步編程中(zhōng)，許多操作都會放在回調函數中(zhōng)，同步與異步的混雜，過多的回調嵌套都會讓代碼變得難以維護。

promise對象用于處理異步操作的，異步處理成功了就執行成功的操作，異步處理失敗了就捕獲錯誤或者是停止後續操作。

一個(gè)promise代表是一個(gè)任務結果，這個(gè)任務有可(kě)能完成沒完成。promise模式唯一需要的一個(gè)接口是調用then方法，它可(kě)以用來注冊當promise完成或者失敗時調用的回調函數，可(kě)以把promise對象看成一條工廠的流水線。

promise是一個(gè)類，需要New實例化：

then方法

then方法是promise原型上的方法，它把原來的回調寫法分離(lí)出來了。

iterator方法

Iterator遍曆器(qì)是一種接口，為各種不同的數據結構提供統一的訪問(wèn)機制，任何數據結構隻要部署Iterator接口，就可(kě)以完成遍曆操作。

array，set，map，string都是可(kě)疊代對象

它們原型中(zhōng)都有一個(gè)symbol.iterator方法，通(tōng)過調用symbol.iterator方法來獲取默認疊代器(qì)。

generator是es6提供的一種異步編程解決方案。

執行函數後，返回的是一個(gè)指向内部狀态的指針對象，yield表達式是暫停執行的标記，next方法可(kě)以恢複執行。

yield表達式在Generator中(zhōng)是作為一個(gè)暫停标志，當碰到yield時，函數暫停執行，等到下(xià)一次next()執行時，函數才從當前yield位置開始執行。

Class，在傳統的JavaScript中(zhōng)隻有對象，沒有類的概念，它是基于原型的面向對象語言，原型對象特點就是将自身的屬性共享給新對象。我們可(kě)以通(tōng)過class關(guān)鍵字可(kě)以定義類。

喜歡你(nǐ)的365天

今後也請你(nǐ)多多關(guān)照

推薦閱讀 點擊标題可(kě)跳轉

【面試Vue全家桶】vue前端交互模式-es7的語法結構？async/await

【面試需要-Vue全家桶】一文(wén)帶你(nǐ)看透Vue前端路(lù)由

【面試需要】掌握JavaScript中(zhōng)的this，call，apply的原理

2019年的每一天日更隻為等待她(tā)的出現，好好過餘生，慶餘年 | 掘金年度征文(wén)

進來就是一家人【達達前端技術(shù)社群⑥】

覺得本文(wén)對你(nǐ)有幫助？請分享給更多人

關(guān)注「達達前端」加星标，提升前端技能

在博客平台裡，未來的路(lù)還很長，也希望自己以後的文(wén)章大家能多多支持，多多批評指正，我們一起進步，一起走花(huā)路(lù)。

非常感謝讀者能看到這裡，如(rú)果這個(gè)文(wén)章寫得還不錯，覺得「達達」我有點東西的話，覺得我能夠堅持的學習，覺得此人可(kě)以交朋友的話， 求點贊，求關(guān)注，求分享，對暖男(nán)我來說真的

非常有用！！！

感謝閱讀，原創不易，喜歡就點個(gè)[在看] or [轉發朋友圈]，這是我寫作最大的動(dòng)力。

意見反饋

若本号内容有做得不到位的地方（比如(rú)：涉及版權或其他問(wèn)題），請及時聯系我們進行整改即可(kě)，會在第一時間進行處理。

這是一個(gè)有質量，有态度的公衆号

點關(guān)注，有好運

程序員哆啦A夢 CSDN認證博客專家 CSDN博客專家 簡書萬粉優秀創作 掘金優秀作者 我是程序員哆啦A夢，藍胖子(zǐ)，簡書萬粉優秀創作者，掘金優秀作者、CSDN博客專家，雲+社區社區活躍作者，緻力于打造一系列能夠幫助程序員提高的優質文(wén)章。網站(zhàn)@http://www.dadaqianduan.cn