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

内容有點多，也(yě)請你靜下來(lái)，慢閱讀，今後多多關照。

說(shuō)到(dào)web前端開發高級，必須要(yào / yāo)掌握的(de)是(shì)HTML和(hé / huò)css代碼的(de)優化，前端優化很重要(yào / yāo)，這(zhè)是(shì)成功你進階的(de)道(dào)路上(shàng)需要(yào / yāo)重視的(de)知識點，面對代碼優化，首先我們要(yào / yāo)學習的(de)就(jiù)是(shì)前端命名規範，HTML代碼優化，和(hé / huò)css代碼優化。

前端命名規範是(shì)很重要(yào / yāo)的(de)，一直說(shuō)很重要(yào / yāo)，當你用過别人(rén)的(de)代碼進行重構時(shí)，你會知道(dào)，如果你看到(dào)一長串代碼，不(bù)了(le／liǎo)解之(zhī)前的(de)人(rén)是(shì)怎麽寫的(de)，開局全靠猜，結局就(jiù)是(shì)不(bù)斷地(dì / de)浪費時(shí)間。

掌握前端優化目錄的(de)學習

前端命名規範，前端結構的(de)組織，文件的(de)命名規範，在(zài)一個(gè)項目中代碼的(de)組織結構要(yào / yāo)清晰易懂，同類型文件可以(yǐ)歸類到(dào)到(dào)相同的(de)文件夾中，文件命名規則需要(yào / yāo)統一且命名要(yào / yāo)有意義。這(zhè)裏要(yào / yāo)有意義是(shì)指命名要(yào / yāo)通俗易懂，英文單詞可以(yǐ)寫縮寫，不(bù)必故步自封，寫那麽長的(de)單詞。

命名規範在(zài)前端領域，涉及HTML，css，JavaScript，在(zài)HTML代碼所有的(de)标簽名和(hé / huò)屬性應該都爲(wéi / wèi)小寫，屬性值應該用引号括起來(lái)。元素的(de)id和(hé / huò)class都要(yào / yāo)按照規定命名，代碼縮進時(shí)要(yào / yāo)縮進，進行格式化，讓代碼美觀，有時(shí)可以(yǐ)給HTML代碼添加必要(yào / yāo)注解。

對于(yú)css命名的(de)規範，盡量使用class選擇器進行樣式的(de)定義，類命名時(shí)取父元素的(de)class名作爲(wéi / wèi)前綴，使用-符号進行連接。類名與樣式之(zhī)間以(yǐ)空格進行分割。

對于(yú)JavaScript命名規範，變量名是(shì)區分大(dà)小寫，第一個(gè)字符是(shì)不(bù)允許爲(wéi / wèi)數字的(de)，不(bù)允許是(shì)空格，不(bù)允許其他(tā)标簽符号，盡量使用有意義的(de)命名，不(bù)要(yào / yāo)使用JavaScript的(de)關鍵詞，或者是(shì)保留字。

進行前端代碼的(de)優化，優化HTML代碼爲(wéi / wèi)了(le／liǎo)能夠使網站更好的(de)搜索，讓用戶更快速搜索到(dào)我們的(de)網站，寫好HTML代碼使用正确的(de)閉合HTML标簽，進行HTML代碼層級間的(de)合理縮進，屬性值需要(yào / yāo)使用雙引号，結構與樣式進行有效的(de)分離，結構與行爲(wéi / wèi)進行有效的(de)分離。

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

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

css代碼優化，在(zài)各個(gè)浏覽器中，相同元素解析的(de)結果不(bù)同，就(jiù)需要(yào / yāo)手動重置一些樣式。

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

HTML5新标簽設置爲(wéi / wèi)display:block。

重置一些元素的(de)樣式如超鏈接，字号等樣式。

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

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

第一，id選擇器的(de)權重爲(wéi / wèi)100，第二，類選擇器的(de)權重爲(wéi / wèi)10，第三，标簽選擇器的(de)權重爲(wéi / wèi)1。

注意，css樣式中盡量不(bù)要(yào / yāo)使用id選擇器，會降低代碼的(de)複用性，盡量不(bù)要(yào / yāo)使用!important，會降低代碼的(de)複用性，盡量減少子(zǐ)選擇器的(de)層級。

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

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

sprite拼合圖

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

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

background屬性

• background-color，描述規定要(yào / yāo)使用的(de)背景顔色
  

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

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

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

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

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

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

• background-image，描述規定要(yào / yāo)使用的(de)背景圖像

background-position屬性

top，left，center，right，center等等，top表示垂直位置最頭部，bottom表示垂直位置最底部，left表示水平位置最左邊，center表示水平位置居中，right表示爲(wéi / wèi)水平位置最右邊。

x% y%


第一個(gè)值是(shì)水平位置，第二個(gè)值是(shì)垂直位置。
左上(shàng)角是(shì) 0% 0%。右下角是(shì) 100% 100%。
如果您僅規定了(le／liǎo)一個(gè)值，另一個(gè)值将是(shì) 50%。

xpos ypos


第一個(gè)值是(shì)水平位置，第二個(gè)值是(shì)垂直位置。
左上(shàng)角是(shì) 0 0。
單位是(shì)像素 (0px 0px) 或任何其他(tā)的(de) CSS 單位。
如果您僅規定了(le／liǎo)一個(gè)值，另一個(gè)值将是(shì)50%。
您可以(yǐ)混合使用 % 和(hé / huò) position 值。

css sprite的(de)制作工具

css sprite制作工具，photoshop和(hé / huò)打包工具webpack來(lái)制作。

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

webpack中隻要(yào / yāo)安裝webpack-spritesmith依賴，然後在(zài)配置文件中引用依賴var SpritesmithPlugin = require('webpack-spritesmith'),最後在(zài)配置文件中添加代碼。

代碼壓縮，打包工具

前端優化，壓縮JavaScript和(hé / huò)css是(shì)非常重要(yào / yāo)的(de)。目前最常用的(de)壓縮JavaScript代碼的(de)工具之(zhī)一有UglifyJS，它會分析JavaScript代碼語法樹，理解代碼含義，從而(ér)能做到(dào)諸如去掉無效代碼，去掉日志輸出(chū)代碼，縮短變量名等優化。

在(zài)webpack中接入UglifyJS需要(yào / yāo)通過插件的(de)形式，UgllifyJsPlugin是(shì)比較常用的(de)插件，通過在(zài)webpack的(de)配置文件webpack.config.js中加入以(yǐ)下代碼即可。

壓縮css代碼常用的(de)是(shì)CSSNANO，是(shì)基于(yú)PostCSS的(de)，可以(yǐ)讓我們的(de)代碼達到(dào)提升加載速度和(hé / huò)代碼混淆的(de)作用。

圖片的(de)預加載

預加載簡單來(lái)說(shuō)就(jiù)是(shì)将所有所需的(de)資源提前請求加載到(dào)本地(dì / de)，這(zhè)樣需要(yào / yāo)用到(dào)時(shí)就(jiù)可以(yǐ)直接從緩存中取資源了(le／liǎo)。

圖片的(de)懶加載

首屏的(de)加載，就(jiù)是(shì)用圖片懶加載技術，即是(shì)到(dào)可視區域再加載。

圖片懶加載，使用jquery.lazyload.js，該js是(shì)一個(gè)基于(yú)Jquery的(de)懶加載插件，裏面封裝了(le／liǎo)懶加載用到(dào)的(de)方法以(yǐ)及實現，第二種是(shì)echo.js，它是(shì)一款非常簡單實用輕量級的(de)圖片延時(shí)加載插件。

JavaScript代碼優化

JavaScript代碼可維護性

什麽是(shì)代碼與結構分離呢

代碼與結構分離，就(jiù)是(shì)把HTML代碼和(hé / huò)JavaScript代碼進行分離，第一在(zài)HTML中分離JavaScript，第二，在(zài)JavaScript中分離HTML。

什麽是(shì)樣式與結構分離呢

樣式與結構分離，就(jiù)是(shì)把css代碼和(hé / huò)HTML代碼進行有效分離。

什麽是(shì)數據與代碼分離呢

數據與代碼分離，也(yě)可以(yǐ)認爲(wéi / wèi)是(shì)前後端分離的(de)表現，後端接口隻負責返回json格式的(de)數據，不(bù)會返回帶标簽甚至是(shì)帶樣式或者帶JavaScript的(de)組合數據。

JavaScript的(de)代碼可調式性

代碼可調式性，可以(yǐ)用console.log，window，alert，try...catch捕獲異常來(lái)進行JavaScript的(de)調試。

console.log，即通過在(zài)JavaScript中添加console.log(msg)

msg爲(wéi / wèi)需要(yào / yāo)打印的(de)信息，可以(yǐ)是(shì)變量，字符串，變量類型可以(yǐ)是(shì)數組，對象，數字等等。

window關鍵字用于(yú)停止執行JavaScript，并調式函數，這(zhè)個(gè)關鍵字與調式工具中設置斷點的(de)效果是(shì)一樣的(de)。

alert和(hé / huò)console.log一樣，alert通過在(zài)JavaScript中添加alert(msg)，Msg爲(wéi / wèi)需要(yào / yāo)彈窗的(de)信息，值得一提的(de)是(shì)這(zhè)個(gè)彈框是(shì)強制阻塞的(de)，隻要(yào / yāo)關閉該彈窗才能解除阻塞，所以(yǐ)要(yào / yāo)謹慎使用。

try...catch，用于(yú)try...catch...finally來(lái)進行異常的(de)捕獲，try代碼塊表示可能發生異常的(de)代碼，catch表示捕獲異常對象，finally無論是(shì)否發生異常都執行。

evalError，typeError，syntaxError
referenceError，rangeError，URLError

JavaScript dom的(de)優化

提升文件的(de)加載速度，合并JavaScript代碼，盡量少用script标簽，無堵塞加載JavaScript，通過給script标簽增加defer屬性或者是(shì)async屬性來(lái)實現

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

動态創建script标簽來(lái)加載，JavaScript dom操作優化，dom訪問和(hé / huò)修改，都說(shuō)訪問dom耗性能，用循環訪問也(yě)是(shì)如此，所以(yǐ)要(yào / yāo)減少dom的(de)訪問。

重排和(hé / huò)重繪

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

JavaScript dom 腳本加載優化

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

modules with dependencies webpack static assets

webpack是(shì)一個(gè)module bundler模塊構建工具，由于(yú)JavaScript應用程序的(de)複雜性不(bù)斷增加，構建工具已經成爲(wéi / wèi)web開發中不(bù)可或缺的(de)一部分。

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

構建工具沒有标準

現在(zài)開發者可以(yǐ)用的(de)構造構建工具有

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

缺點有，不(bù)适合web開發的(de)初學者，對于(yú)css，圖片，以(yǐ)及其他(tā)非Js資源文件時(shí)，需要(yào / yāo)先混淆處理，文檔不(bù)夠完善，變化很大(dà)，不(bù)同版本的(de)使用方法存在(zài)較大(dà)的(de)差異。

安裝

全局安裝，用于(yú)全局使用命令行打包文件

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


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

新建項目文件夾

進入項目文件夾，打開cmd命令行窗口

webpack -v
顯示版本号，說(shuō)明webpack安裝成功，可以(yǐ)在(zài)全局任何目錄下使用

基本應用

SPA是(shì)什麽，它是(shì)單頁應用程序。

single page web application，是(shì)webpack打包的(de)典型應用，一個(gè)典型的(de)SPA應用，主要(yào / yāo)由以(yǐ)下幾個(gè)部分組成。

index.html主文件，js文件，有多個(gè)js文件，可以(yǐ)通過webpack合并打包爲(wéi / wèi)一個(gè)文件，css文件，可以(yǐ)多個(gè)css文件，可以(yǐ)通過webpack合并打包爲(wéi / wèi)一個(gè)文件。圖片可以(yǐ)通過webpack壓縮優化。

新建src文件夾，該文件夾存放開發用的(de)文件，在(zài)src目錄下創建文件。

新建dist文件夾

該文件存放打包後的(de)文件，可以(yǐ)先不(bù)創建，打包時(shí)可以(yǐ)自動創建。

打包，webpack-mode development，經過打包後，已經根據三個(gè)js依賴關系，打包合并爲(wéi / wèi)dist/main.js。

webpack --output文件名，輸出(chū)文件路徑

webpack --config文件名，用于(yú)指定其他(tā)配置文

默認爲(wéi / wèi)webpack.config.js

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

webpack --watch 監聽文件變化并自動打包

webpack -p 壓縮混淆腳本

webpack -d 生成Map映射文件

webpack --progress 顯示進度，打印出(chū)編譯進度的(de)百分比值

webpack --color 用不(bù)同顔色标記不(bù)同的(de)信息

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

webpack --hot 熱替換

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

配置文件入門

通過定義配置文件進行複雜操作，文件名webpack.config.js

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

entry，入口定義入口文件，默認文件./src/index.js

output，輸出(chū)定義出(chū)口文件，默認文件./dist/main.js

resolve，解析路徑映射，省略後綴名等

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

plugins，插件擴展webpack功能

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

簡單的(de)配置文件

hello wrold例子(zǐ)：

修改webpack.json文件

配置詳細entry和(hé / huò)output

entry入口配置是(shì)指頁面中的(de)入口文件，默認入口文件./src/index.js

output出(chū)口配置是(shì)指生成的(de)文件輸出(chū)到(dào)哪個(gè)地(dì / de)方去，./dist/main.js

path，輸出(chū)路徑，filename，輸出(chū)文件名

module，webpack隻能打包js文件，無法識别其他(tā)語法的(de)文件，如果要(yào / yāo)讓webpack打包其他(tā)文件，首先需要(yào / yāo)讓webpack識别不(bù)同的(de)文件。

loader分類

分類

說(shuō)明

轉換編譯

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

處理樣式

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

處理文件

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

處理數據

csv-loader，xml-loader

處理模闆語言

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

清理和(hé / huò)測試

mocha-loader，eslint-loader

常用loader

loader

說(shuō)明

css-loader

解析css語句

style-loader

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

babel-loader

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

url-loader

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

file-loader

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

less-loader

less編譯器

vue-loader

Vue也(yě)推出(chū)了(le／liǎo)自己的(de)vue-loader，可以(yǐ)方便的(de)打包 .vue文件 的(de)代碼。<br />在(zài)vue-cli（快速構建單頁應用的(de)腳手架）中得到(dào)應用。

babel loader

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

使用babel首先要(yào / yāo)配置.babelrc文件，該文件用來(lái)設置轉碼規則和(hé / huò)插件，存放在(zài)項目的(de)根目錄下。

在(zài)linux系統中，rc結尾的(de)文件通常代表運行時(shí)自動加載的(de)文件、配置等等。

在(zài).babelrc配置文件中，主要(yào / yāo)是(shì)對預設和(hé / huò)插件進行配置。

配置項

說(shuō)明

presets

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

plugins

插件 控制如何轉換代碼，babel默認隻轉換新的(de)js語法，而(ér)不(bù)轉換新的(de)API，比如 Set,，Maps，Symbol，Promise 等全局對象，transform-runtime 用來(lái)解決以(yǐ)上(shàng)問題

插件可以(yǐ)擴展webpack的(de)功能，Loader不(bù)能做的(de)處理都能交給plugin來(lái)做。

resolve配置webpack如何尋找模塊對應的(de)文件，webpack在(zài)啓動後會從配置的(de)入口模塊觸發，找出(chū)所有依賴的(de)模塊，默認會采用模塊化标準裏約定号的(de)規則去尋找。

屬性

說(shuō)明

alias

（譯：别名）通過别名将原來(lái)導入路徑映射成一個(gè)新的(de)導入路徑

extensions

（譯：擴展）數組 導入模塊時(shí)，可以(yǐ)省略的(de)文件後綴名

其他(tā)配置

配置項

說(shuō)明

devtool

是(shì)否生成以(yǐ)及如何生成sourcemap

devserver

開啓一個(gè)本地(dì / de)開發服務器

watch

監聽文件變化并自動打包

watchoption

用來(lái)定制watch模式的(de)選項

performance

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

webpack-dev-server

它是(shì)一個(gè)小型的(de)web服務器，可以(yǐ)自動監視項目文件的(de)變化，自動刷新浏覽器，其HMR方式隻替換更新的(de)部分，而(ér)不(bù)是(shì)重載頁面，大(dà)大(dà)提高了(le／liǎo)刷新效率

配置項

說(shuō)明

默認值

inline

自動刷新<br />當我們對業務代碼做了(le／liǎo)一些修改，保存（ctrl+s）後，頁面會自動刷新，所做的(de)修改會直接同步到(dào)頁面上(shàng)，不(bù)需要(yào / yāo)手動刷新頁面或重啓服務

true

hot

熱模塊替換<br /> 不(bù)用配置（通常是(shì)通過命令行 --hot 選項啓動，會自動加載webpack.HotModuleReplacementPlugin插件）

true

host

主機地(dì / de)址

open

自動打開浏覽器，可以(yǐ)指定浏覽器，例如：--open 'Chrome'

false

port

端口

默認8080

overlay

編譯出(chū)錯的(de)時(shí)候，在(zài)浏覽器頁面上(shàng)顯示錯誤

false

stats

用來(lái)控制編譯的(de)時(shí)候shell上(shàng)的(de)輸出(chū)内容<br />stats: "errors-only" 隻打印錯誤<br /> 還有"minimal"，"normal"，"verbose"

compress

true：對所有服務器資源采用gzip壓縮

false

contentBase

指定了(le／liǎo)服務器資源的(de)根目錄，<br />如果不(bù)寫入contentBase的(de)值，那麽contentBase默認是(shì)項目的(de)目錄

"./"

historyApiFallback

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

true

例子(zǐ)：

運行

npm start

運行後，webpack-dev-server将開始運行，打開浏覽器，直接輸入127.0.0.1:8080/index.html，打包後的(de)頁面已經可以(yǐ)使用了(le／liǎo)

注意：

index.html内無需引入main.js文件，打包後的(de)index.html文件中會自動引入該文件。

webpack-dev-server運行後，浏覽器中輸出(chū)的(de)頁面，都是(shì)運行在(zài)内存中的(de)，隻有build以(yǐ)後，才會在(zài)dist目錄中得到(dào)最終的(de)結果文件。

ES6基礎

ECMAScript和(hé / huò)JavaScript到(dào)底是(shì)什麽關系？

ECMAScript是(shì)JavaScript語言的(de)國(guó)際标準，JavaScript是(shì)ECMAScript的(de)實現。ESMAScript6的(de)簡稱爲(wéi / wèi)es6是(shì)JavaScript語言的(de)下一代标準。

symbol數據類型，Symbol是(shì)一種唯一标識符，可以(yǐ)用作對象的(de)唯一屬性名，這(zhè)樣就(jiù)不(bù)會有人(rén)改寫或覆蓋你設置的(de)屬性值了(le／liǎo)。

Symbol作爲(wéi / wèi)對象屬性名

Symbol永遠不(bù)相等，創建它們的(de)時(shí)候傳入相同值的(de)參數，也(yě)不(bù)相等，因此，可借助此特性解決屬性名的(de)沖突問題，也(yě)是(shì)該數據類型存在(zài)的(de)主要(yào / yāo)用途。

Symbol 值不(bù)能與其他(tā)類型的(de)值進行運算，可以(yǐ)顯式轉爲(wéi / wèi)字符串。

使用場景

爲(wéi / wèi)某個(gè)對象添加屬性，新添加屬性與原有屬性重名，新添加的(de)屬性僅作爲(wéi / wèi)标記使用，不(bù)需要(yào / yāo)用遍曆器遍曆處理。

let與const

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

let用來(lái)聲明變量，要(yào / yāo)先聲明後使用

const

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

特性

var

let

const

作用域級别

函數級

塊級

塊級

初始值

否

否

聲明時(shí)必須賦值

變量提升

是(shì)

否

否

重複聲明

是(shì)

否

否

變量的(de)解構賦值

set與Map

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

set數據結構

set類似于(yú)數組，成員的(de)值都是(shì)唯一的(de)，沒有重複的(de)值。

主要(yào / yāo)用于(yú)數據的(de)去重。

set本身就(jiù)是(shì)一個(gè)構造函數，用來(lái)生成set數據結構。set實例時(shí)一個(gè)類數組的(de)對象。

方法

說(shuō)明

add(value)

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

delete(value）

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

has(value)

表示該值是(shì)否爲(wéi / wèi)Set的(de)成員 返回：bool

clear()

清除所有成員，返回：無

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

它是(shì)對object的(de)一個(gè)補充，map的(de)key可以(yǐ)是(shì)任意類型，而(ér)傳統對象的(de)key必須是(shì)字符串。

遍曆object得到(dào)的(de)結果是(shì)無序的(de)，遍曆Map得到(dào)的(de)結果是(shì)有序的(de)

方法

說(shuō)明

clear

從Map中移除所有元素

delete

從Map中移除指定的(de)元素

forEach

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

get

返回Map中的(de)指定元素

has

如果Map包含指定元素，則返回 true

set

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

toString

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

valueOf

返回指定對象的(de)原始值

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()

共同變量方法

方法

說(shuō)明

keys()

返回鍵名的(de)遍曆器

values()

返回鍵值的(de)遍曆器

entries()

返回鍵值對的(de)遍曆器

forEach()

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

箭頭函數，匿名函數

參數格式

箭頭函數中的(de)this

函數的(de)擴展

對象的(de)擴展

在(zài)es6中允許向對象直接寫入變量和(hé / huò)函數，作爲(wéi / wèi)對象的(de)屬性和(hé / huò)方法。

es6中允許使用表達式作爲(wéi / wèi)對象屬性，并且函數名稱定義也(yě)可以(yǐ)采用相同的(de)方法。

setter和(hé / huò)getter。

方法名稱

方法描述

Object.is()

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

Object.assign()

用于(yú)将對象進行合并

Object.getOwnPropertyDescriptor

返回對象屬性的(de)描述

Object.keys()

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

數組的(de)擴展

方法

方法描述

copyWithin(target，start，end)

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

find()

數組實例的(de)find方法，用于(yú)找出(chū)第一個(gè)符合條件的(de)數組成員。它的(de)參數是(shì)一個(gè)回調函數，所有數組成員依次執行該回調函數，直到(dào)找出(chū)第一個(gè)返回值爲(wéi / wèi)true的(de)成員，然後返回該成員。如果沒有符合條件的(de)成員，則返回undefined。

findIndex()

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

fill()

fill方法使用給定值，填充一個(gè)數組,fill方法用于(yú)空數組的(de)初始化非常方便。數組中已有的(de)元素，會被全部抹去，如果填充的(de)類型爲(wéi / wèi)對象，那麽被賦值的(de)是(shì)同一個(gè)内存地(dì / de)址的(de)對象，而(ér)不(bù)是(shì)深拷貝對象。

includes()

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

ES6高級操作

promise對象

JavaScript本身就(jiù)是(shì)單線程的(de)，所以(yǐ)爲(wéi / wèi)了(le／liǎo)解決單線程帶來(lái)的(de)問題，在(zài)異步編程中，許多操作都會放在(zài)回調函數中，同步與異步的(de)混雜，過多的(de)回調嵌套都會讓代碼變得難以(yǐ)維護。

promise對象用于(yú)處理異步操作的(de)，異步處理成功了(le／liǎo)就(jiù)執行成功的(de)操作，異步處理失敗了(le／liǎo)就(jiù)捕獲錯誤或者是(shì)停止後續操作。

一個(gè)promise代表是(shì)一個(gè)任務結果，這(zhè)個(gè)任務有可能完成沒完成。promise模式唯一需要(yào / yāo)的(de)一個(gè)接口是(shì)調用then方法，它可以(yǐ)用來(lái)注冊當promise完成或者失敗時(shí)調用的(de)回調函數，可以(yǐ)把promise對象看成一條工廠的(de)流水線。

promise是(shì)一個(gè)類，需要(yào / yāo)New實例化：

then方法

then方法是(shì)promise原型上(shàng)的(de)方法，它把原來(lái)的(de)回調寫法分離出(chū)來(lái)了(le／liǎo)。

iterator方法

Iterator遍曆器是(shì)一種接口，爲(wéi / wèi)各種不(bù)同的(de)數據結構提供統一的(de)訪問機制，任何數據結構隻要(yào / yāo)部署Iterator接口，就(jiù)可以(yǐ)完成遍曆操作。

array，set，map，string都是(shì)可叠代對象

它們原型中都有一個(gè)symbol.iterator方法，通過調用symbol.iterator方法來(lái)獲取默認叠代器。

generator是(shì)es6提供的(de)一種異步編程解決方案。

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

yield表達式在(zài)Generator中是(shì)作爲(wéi / wèi)一個(gè)暫停标志，當碰到(dào)yield時(shí)，函數暫停執行，等到(dào)下一次next()執行時(shí)，函數才從當前yield位置開始執行。

Class，在(zài)傳統的(de)JavaScript中隻有對象，沒有類的(de)概念，它是(shì)基于(yú)原型的(de)面向對象語言，原型對象特點就(jiù)是(shì)将自身的(de)屬性共享給新對象。我們可以(yǐ)通過class關鍵字可以(yǐ)定義類。

喜歡你的(de)365天

今後也(yě)請你多多關照

推薦閱讀 點擊标題可跳轉

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

【面試需要(yào / yāo)-Vue全家桶】一文帶你看透Vue前端路由

【面試需要(yào / yāo)】掌握JavaScript中的(de)this，call，apply的(de)原理

2019年的(de)每一天日更隻爲(wéi / wèi)等待她的(de)出(chū)現，好好過餘生，慶餘年 | 掘金年度征文

進來(lái)就(jiù)是(shì)一家人(rén)【達達前端技術社群⑥】

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

關注「達達前端」加星标，提升前端技能

在(zài)博客平台裏，未來(lái)的(de)路還很長，也(yě)希望自己以(yǐ)後的(de)文章大(dà)家能多多支持，多多批評指正，我們一起進步，一起走花路。

非常感謝讀者能看到(dào)這(zhè)裏，如果這(zhè)個(gè)文章寫得還不(bù)錯，覺得「達達」我有點東西的(de)話，覺得我能夠堅持的(de)學習，覺得此人(rén)可以(yǐ)交朋友的(de)話， 求點贊，求關注，求分享，對暖男我來(lái)說(shuō)真的(de)

非常有用！！！

感謝閱讀，原創不(bù)易，喜歡就(jiù)點個(gè)[在(zài)看] or [轉發朋友圈]，這(zhè)是(shì)我寫作最大(dà)的(de)動力。

意見反饋

若本号内容有做得不(bù)到(dào)位的(de)地(dì / de)方（比如：涉及版權或其他(tā)問題），請及時(shí)聯系我們進行整改即可，會在(zài)第一時(shí)間進行處理。

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

點關注，有好運

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