（給達(dá)達(dá)前端加星標(biāo)，提升前端技能）

內(nèi)容有點(diǎn)多，也請你靜下來，慢閱讀，今后多多關(guān)照。

說到web前端開發(fā)高級，必須要掌握的是HTML和css代碼的優(yōu)化，前端優(yōu)化很重要，這是成功你進(jìn)階的道路上需要重視的知識點(diǎn)，面對代碼優(yōu)化，首先我們要學(xué)習(xí)的就是前端命名規(guī)范，HTML代碼優(yōu)化，和css代碼優(yōu)化。

前端命名規(guī)范是很重要的，一直說很重要，當(dāng)你用過別人的代碼進(jìn)行重構(gòu)時，你會知道，如果你看到一長串代碼，不了解之前的人是怎么寫的，開局全靠猜，結(jié)局就是不斷地浪費(fèi)時間。

掌握前端優(yōu)化目錄的學(xué)習(xí)

前端命名規(guī)范，前端結(jié)構(gòu)的組織，文件的命名規(guī)范，在一個項目中代碼的組織結(jié)構(gòu)要清晰易懂，同類型文件可以歸類到到相同的文件夾中，文件命名規(guī)則需要統(tǒng)一且命名要有意義。這里要有意義是指命名要通俗易懂，英文單詞可以寫縮寫，不必故步自封，寫那么長的單詞。

命名規(guī)范在前端領(lǐng)域，涉及HTML，css，JavaScript，在HTML代碼所有的標(biāo)簽名和屬性應(yīng)該都為小寫，屬性值應(yīng)該用引號括起來。元素的id和class都要按照規(guī)定命名，代碼縮進(jìn)時要縮進(jìn)，進(jìn)行格式化，讓代碼美觀，有時可以給HTML代碼添加必要注解。

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

對于JavaScript命名規(guī)范，變量名是區(qū)分大小寫，第一個字符是不允許為數(shù)字的，不允許是空格，不允許其他標(biāo)簽符號，盡量使用有意義的命名，不要使用JavaScript的關(guān)鍵詞，或者是保留字。

進(jìn)行前端代碼的優(yōu)化，優(yōu)化HTML代碼為了能夠使網(wǎng)站更好的搜索，讓用戶更快速搜索到我們的網(wǎng)站，寫好HTML代碼使用正確的閉合HTML標(biāo)簽，進(jìn)行HTML代碼層級間的合理縮進(jìn)，屬性值需要使用雙引號，結(jié)構(gòu)與樣式進(jìn)行有效的分離，結(jié)構(gòu)與行為進(jìn)行有效的分離。

進(jìn)行HTML語義化標(biāo)簽，HTML5提供的一些新的語義化元素來明確一個web頁面的不同部分，有：

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

css代碼優(yōu)化，在各個瀏覽器中，相同元素解析的結(jié)果不同，就需要手動重置一些樣式。

去除標(biāo)簽的默認(rèn)樣式，如p，li，input等。

HTML5新標(biāo)簽設(shè)置為display:block。

重置一些元素的樣式如超鏈接，字號等樣式。

css樣式選擇器的優(yōu)先級

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

第一，id選擇器的權(quán)重為100，第二，類選擇器的權(quán)重為10，第三，標(biāo)簽選擇器的權(quán)重為1。

注意，css樣式中盡量不要使用id選擇器，會降低代碼的復(fù)用性，盡量不要使用!important，會降低代碼的復(fù)用性，盡量減少子選擇器的層級。

css樣式多余樣式去除，和結(jié)構(gòu)優(yōu)化

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

sprite拼合圖

css sprite，也叫 css 精靈，雪碧圖。

是一種將雪散的背景圖合并成一張大圖，再次利用css的background-position屬性進(jìn)行背景的定位從而達(dá)到減少圖片請求數(shù)量達(dá)到加快加載速度的網(wǎng)頁應(yīng)用處理方式。

background屬性

• background-color，描述規(guī)定要使用的背景顏色
  

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

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

• background-repeat，描述規(guī)定如何重復(fù)背景圖像

• background-origin，描述規(guī)定背景圖片的定位區(qū)域

• background-clip，描述規(guī)定背景的繪制區(qū)域

• background-attachment，描述規(guī)定背景圖片是否固定或者隨著頁面的其余部分滾動

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

background-position屬性

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

x% y%


第一個值是水平位置，第二個值是垂直位置。
左上角是 0% 0%。右下角是 100% 100%。
如果您僅規(guī)定了一個值，另一個值將是 50%。

xpos ypos


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

css sprite的制作工具

css sprite制作工具，photoshop和打包工具webpack來制作。

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

webpack中只要安裝webpack-spritesmith依賴，然后在配置文件中引用依賴var SpritesmithPlugin = require('webpack-spritesmith'),最后在配置文件中添加代碼。

代碼壓縮，打包工具

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

在webpack中接入UglifyJS需要通過插件的形式，UgllifyJsPlugin是比較常用的插件，通過在webpack的配置文件webpack.config.js中加入以下代碼即可。

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

圖片的預(yù)加載

預(yù)加載簡單來說就是將所有所需的資源提前請求加載到本地，這樣需要用到時就可以直接從緩存中取資源了。

圖片的懶加載

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

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

JavaScript代碼優(yōu)化

JavaScript代碼可維護(hù)性

什么是代碼與結(jié)構(gòu)分離呢

代碼與結(jié)構(gòu)分離，就是把HTML代碼和JavaScript代碼進(jìn)行分離，第一在HTML中分離JavaScript，第二，在JavaScript中分離HTML。

什么是樣式與結(jié)構(gòu)分離呢

樣式與結(jié)構(gòu)分離，就是把css代碼和HTML代碼進(jìn)行有效分離。

什么是數(shù)據(jù)與代碼分離呢

數(shù)據(jù)與代碼分離，也可以認(rèn)為是前后端分離的表現(xiàn)，后端接口只負(fù)責(zé)返回json格式的數(shù)據(jù)，不會返回帶標(biāo)簽甚至是帶樣式或者帶JavaScript的組合數(shù)據(jù)。

JavaScript的代碼可調(diào)式性

代碼可調(diào)式性，可以用console.log，debugger，alert，try...catch捕獲異常來進(jìn)行JavaScript的調(diào)試。

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

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

debugger關(guān)鍵字用于停止執(zhí)行JavaScript，并調(diào)式函數(shù)，這個關(guān)鍵字與調(diào)式工具中設(shè)置斷點(diǎn)的效果是一樣的。

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

try...catch，用于try...catch...finally來進(jìn)行異常的捕獲，try代碼塊表示可能發(fā)生異常的代碼，catch表示捕獲異常對象，finally無論是否發(fā)生異常都執(zhí)行。

evalError，typeError，syntaxError
referenceError，rangeError，URLError

JavaScript dom的優(yōu)化

提升文件的加載速度，合并JavaScript代碼，盡量少用script標(biāo)簽，無堵塞加載JavaScript，通過給script標(biāo)簽增加defer屬性或者是async屬性來實(shí)現(xiàn)

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

動態(tài)創(chuàng)建script標(biāo)簽來加載，JavaScript dom操作優(yōu)化，dom訪問和修改，都說訪問dom耗性能，用循環(huán)訪問也是如此，所以要減少dom的訪問。

重排和重繪

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

JavaScript dom 腳本加載優(yōu)化

學(xué)習(xí)前端高級層次，掌握webpack入門

modules with dependencies webpack static assets

webpack是一個module bundler模塊構(gòu)建工具，由于JavaScript應(yīng)用程序的復(fù)雜性不斷增加，構(gòu)建工具已經(jīng)成為web開發(fā)中不可或缺的一部分。

它幫助我們?nèi)ゴ虬?#xff0c;編譯和管理項目需要的眾多資源文件和依賴庫。webpack支持CommoonJS,AMD和ES6模塊系統(tǒng)，并且兼容多種JS書寫規(guī)范，可以處理模塊間的依賴關(guān)系，所以具有更強(qiáng)大的JS模塊化的功能，它能壓縮圖片，對css, js 文件進(jìn)行語法檢查，壓縮，編譯打包。

構(gòu)建工具沒有標(biāo)準(zhǔn)

現(xiàn)在開發(fā)者可以用的構(gòu)造構(gòu)建工具有

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

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

安裝

全局安裝，用于全局使用命令行打包文件

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


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

新建項目文件夾

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

webpack -v
顯示版本號，說明webpack安裝成功，可以在全局任何目錄下使用

基本應(yīng)用

SPA是什么，它是單頁應(yīng)用程序。

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

index.html主文件，js文件，有多個js文件，可以通過webpack合并打包為一個文件，css文件，可以多個css文件，可以通過webpack合并打包為一個文件。圖片可以通過webpack壓縮優(yōu)化。

新建src文件夾，該文件夾存放開發(fā)用的文件，在src目錄下創(chuàng)建文件。

新建dist文件夾

該文件存放打包后的文件，可以先不創(chuàng)建，打包時可以自動創(chuàng)建。

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

webpack --output文件名，輸出文件路徑

webpack --config文件名，用于指定其他配置文

默認(rèn)為webpack.config.js

webpack --mode模式，打包模式 production，生成模式，developement開發(fā)模式。

webpack --watch 監(jiān)聽文件變化并自動打包

webpack -p 壓縮混淆腳本

webpack -d 生成Map映射文件

webpack --progress 顯示進(jìn)度，打印出編譯進(jìn)度的百分比值

webpack --color 用不同顏色標(biāo)記不同的信息

webpack --profile 顯示每一步編譯的具體時間，可幫助優(yōu)化構(gòu)建性能

webpack --hot 熱替換

webpack --bail 如果編譯過程出現(xiàn)error，立馬停止編譯

配置文件入門

通過定義配置文件進(jìn)行復(fù)雜操作，文件名webpack.config.js

一個配置文件的基本結(jié)構(gòu)：

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

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

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

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

plugins，插件擴(kuò)展webpack功能

devServer，開發(fā)服務(wù)器用于配置webpack-dev-server選項

簡單的配置文件

hello wrold例子：

修改webpack.json文件

配置詳細(xì)entry和output

entry入口配置是指頁面中的入口文件，默認(rèn)入口文件./src/index.js

output出口配置是指生成的文件輸出到哪個地方去，./dist/main.js

path，輸出路徑，filename，輸出文件名

module，webpack只能打包js文件，無法識別其他語法的文件，如果要讓webpack打包其他文件，首先需要讓webpack識別不同的文件。

loader分類

分類

說明

轉(zhuǎn)換編譯

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

處理樣式

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

處理文件

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

處理數(shù)據(jù)

csv-loader，xml-loader

處理模板語言

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

清理和測試

mocha-loader，eslint-loader

常用loader

loader

說明

css-loader

解析css語句

style-loader

將css-loader解析后的文本，添加<style>標(biāo)簽

babel-loader

將ES6+、JSX語法轉(zhuǎn)成ES5低版本語法

url-loader

url-loader對未設(shè)置或者小于limit byte設(shè)置的圖片以base64的格式進(jìn)行轉(zhuǎn)換<br />對于大于limit byte的圖片用file-loader進(jìn)行解析

file-loader

解析項目中的url引入（包括img的src和background的url）<br />修改打包后文件引用路徑，使之指向正確的文件

less-loader

less編譯器

vue-loader

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

babel loader

babel是一個js編譯器，它是通過語法轉(zhuǎn)換器支持最新版本的JavaScript，這插件允許你使用新語法，無需等待瀏覽器支持。

使用babel首先要配置.babelrc文件，該文件用來設(shè)置轉(zhuǎn)碼規(guī)則和插件，存放在項目的根目錄下。

在linux系統(tǒng)中，rc結(jié)尾的文件通常代表運(yùn)行時自動加載的文件、配置等等。

在.babelrc配置文件中，主要是對預(yù)設(shè)和插件進(jìn)行配置。

配置項

說明

presets

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

plugins

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

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

resolve配置webpack如何尋找模塊對應(yīng)的文件，webpack在啟動后會從配置的入口模塊觸發(fā)，找出所有依賴的模塊，默認(rèn)會采用模塊化標(biāo)準(zhǔn)里約定號的規(guī)則去尋找。

屬性

說明

alias

（譯：別名）通過別名將原來導(dǎo)入路徑映射成一個新的導(dǎo)入路徑

extensions

（譯：擴(kuò)展）數(shù)組 導(dǎo)入模塊時，可以省略的文件后綴名

其他配置

配置項

說明

devtool

是否生成以及如何生成sourcemap

devserver

開啟一個本地開發(fā)服務(wù)器

watch

監(jiān)聽文件變化并自動打包

watchoption

用來定制watch模式的選項

performance

打包后命令行如何展示性能提示，如果超過某個大小是警告還是報錯

webpack-dev-server

它是一個小型的web服務(wù)器，可以自動監(jiān)視項目文件的變化，自動刷新瀏覽器，其HMR方式只替換更新的部分，而不是重載頁面，大大提高了刷新效率

配置項

說明

默認(rèn)值

inline

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

true

hot

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

true

host

主機(jī)地址

open

自動打開瀏覽器，可以指定瀏覽器，例如：--open 'Chrome'

false

port

端口

默認(rèn)8080

overlay

編譯出錯的時候，在瀏覽器頁面上顯示錯誤

false

stats

用來控制編譯的時候shell上的輸出內(nèi)容<br />stats: "errors-only" 只打印錯誤<br /> 還有"minimal"，"normal"，"verbose"

compress

true：對所有服務(wù)器資源采用gzip壓縮

false

contentBase

指定了服務(wù)器資源的根目錄，<br />如果不寫入contentBase的值，那么contentBase默認(rèn)是項目的目錄

"./"

historyApiFallback

它使用的是HTML5 History Api，任意的跳轉(zhuǎn)或404響應(yīng)可以指向 index.html 頁面

true

例子：

運(yùn)行

npm start

運(yùn)行后，webpack-dev-server將開始運(yùn)行，打開瀏覽器，直接輸入127.0.0.1:8080/index.html，打包后的頁面已經(jīng)可以使用了

注意：

index.html內(nèi)無需引入main.js文件，打包后的index.html文件中會自動引入該文件。

webpack-dev-server運(yùn)行后，瀏覽器中輸出的頁面，都是運(yùn)行在內(nèi)存中的，只有build以后，才會在dist目錄中得到最終的結(jié)果文件。

ES6基礎(chǔ)

ECMAScript和JavaScript到底是什么關(guān)系？

ECMAScript是JavaScript語言的國際標(biāo)準(zhǔn)，JavaScript是ECMAScript的實(shí)現(xiàn)。ESMAScript6的簡稱為es6是JavaScript語言的下一代標(biāo)準(zhǔn)。

symbol數(shù)據(jù)類型，Symbol是一種唯一標(biāo)識符，可以用作對象的唯一屬性名，這樣就不會有人改寫或覆蓋你設(shè)置的屬性值了。

Symbol作為對象屬性名

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

Symbol 值不能與其他類型的值進(jìn)行運(yùn)算，可以顯式轉(zhuǎn)為字符串。

使用場景

為某個對象添加屬性，新添加屬性與原有屬性重名，新添加的屬性僅作為標(biāo)記使用，不需要用遍歷器遍歷處理。

let與const

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

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

const

const聲明一個只讀的常量，一旦聲明，常量的值就不能改變。

特性

var

let

const

作用域級別

函數(shù)級

塊級

塊級

初始值

否

否

聲明時必須賦值

變量提升

是

否

否

重復(fù)聲明

是

否

否

變量的解構(gòu)賦值

set與Map

js原有的2種數(shù)據(jù)結(jié)構(gòu)，array和object；es6新增兩種數(shù)據(jù)結(jié)構(gòu)，set和map

set數(shù)據(jù)結(jié)構(gòu)

set類似于數(shù)組，成員的值都是唯一的，沒有重復(fù)的值。

主要用于數(shù)據(jù)的去重。

set本身就是一個構(gòu)造函數(shù)，用來生成set數(shù)據(jù)結(jié)構(gòu)。set實(shí)例時一個類數(shù)組的對象。

方法

說明

add(value)

添加某個值，返回：Set結(jié)構(gòu)本身

delete(value）

刪除某個值，返回：bool（刪除是否成功）

has(value)

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

clear()

清除所有成員，返回：無

map數(shù)據(jù)結(jié)構(gòu)，map也是一個數(shù)據(jù)集合，與數(shù)據(jù)類似。

它是對object的一個補(bǔ)充，map的key可以是任意類型，而傳統(tǒng)對象的key必須是字符串。

遍歷object得到的結(jié)果是無序的，遍歷Map得到的結(jié)果是有序的

方法

說明

clear

從Map中移除所有元素

delete

從Map中移除指定的元素

forEach

對Map中的每個元素執(zhí)行指定操作

get

返回Map中的指定元素

has

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

set

添加一個新建元素到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(索引,刪除數(shù)量)

set.delete(2)

map.delete('t')

改

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

遍歷

map.set('t',2)

查

遍歷

set.has(1)

map.has('t')

清空

arr = []

set.clear()

map.clear()

共同變量方法

方法

說明

keys()

返回鍵名的遍歷器

values()

返回鍵值的遍歷器

entries()

返回鍵值對的遍歷器

forEach()

使用回調(diào)函數(shù)遍歷每個成員

箭頭函數(shù)，匿名函數(shù)

參數(shù)格式

箭頭函數(shù)中的this

函數(shù)的擴(kuò)展

對象的擴(kuò)展

在es6中允許向?qū)ο笾苯訉懭胱兞亢秃瘮?shù)，作為對象的屬性和方法。

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

setter和getter。

方法名稱

方法描述

Object.is()

比較兩個值是否相等

Object.assign()

用于將對象進(jìn)行合并

Object.getOwnPropertyDescriptor

返回對象屬性的描述

Object.keys()

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

數(shù)組的擴(kuò)展

方法

方法描述

copyWithin(target，start，end)

在當(dāng)前數(shù)組內(nèi)部，將指定位置的成員復(fù)制到其他位置（會覆蓋原有成員），然后返回當(dāng)前數(shù)組。也就是說，使用這個方法，會修改當(dāng)前數(shù)組。參數(shù)說明：<br />target（必需）：從該位置開始替換數(shù)據(jù)。負(fù)值:倒數(shù)。<br />start（可選）：從該位置開始讀取數(shù)據(jù)，默認(rèn):0。負(fù)值:倒數(shù)。<br /> end（可選）：到該位置前停止讀取數(shù)據(jù)，默認(rèn)等于數(shù)組長度。負(fù)值:倒數(shù)。

find()

數(shù)組實(shí)例的find方法，用于找出第一個符合條件的數(shù)組成員。它的參數(shù)是一個回調(diào)函數(shù)，所有數(shù)組成員依次執(zhí)行該回調(diào)函數(shù)，直到找出第一個返回值為true的成員，然后返回該成員。如果沒有符合條件的成員，則返回undefined。

findIndex()

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

fill()

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

includes()

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

ES6高級操作

promise對象

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

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

一個promise代表是一個任務(wù)結(jié)果，這個任務(wù)有可能完成沒完成。promise模式唯一需要的一個接口是調(diào)用then方法，它可以用來注冊當(dāng)promise完成或者失敗時調(diào)用的回調(diào)函數(shù)，可以把promise對象看成一條工廠的流水線。

promise是一個類，需要New實(shí)例化：

then方法

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

iterator方法

Iterator遍歷器是一種接口，為各種不同的數(shù)據(jù)結(jié)構(gòu)提供統(tǒng)一的訪問機(jī)制，任何數(shù)據(jù)結(jié)構(gòu)只要部署Iterator接口，就可以完成遍歷操作。

array，set，map，string都是可迭代對象

它們原型中都有一個symbol.iterator方法，通過調(diào)用symbol.iterator方法來獲取默認(rèn)迭代器。

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

執(zhí)行函數(shù)后，返回的是一個指向內(nèi)部狀態(tài)的指針對象，yield表達(dá)式是暫停執(zhí)行的標(biāo)記，next方法可以恢復(fù)執(zhí)行。

yield表達(dá)式在Generator中是作為一個暫停標(biāo)志，當(dāng)碰到y(tǒng)ield時，函數(shù)暫停執(zhí)行，等到下一次next()執(zhí)行時，函數(shù)才從當(dāng)前yield位置開始執(zhí)行。

Class，在傳統(tǒng)的JavaScript中只有對象，沒有類的概念，它是基于原型的面向?qū)ο笳Z言，原型對象特點(diǎn)就是將自身的屬性共享給新對象。我們可以通過class關(guān)鍵字可以定義類。

喜歡你的365天

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

推薦閱讀 點(diǎn)擊標(biāo)題可跳轉(zhuǎn)

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

【面試需要-Vue全家桶】一文帶你看透Vue前端路由

【面試需要】掌握J(rèn)avaScript中的this，call，apply的原理

2019年的每一天日更只為等待她的出現(xiàn)，好好過余生，慶余年 | 掘金年度征文

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

覺得本文對你有幫助？請分享給更多人

關(guān)注「達(dá)達(dá)前端」加星標(biāo)，提升前端技能

在博客平臺里，未來的路還很長，也希望自己以后的文章大家能多多支持，多多批評指正，我們一起進(jìn)步，一起走花路。

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

非常有用！！！

感謝閱讀，原創(chuàng)不易，喜歡就點(diǎn)個[在看] or [轉(zhuǎn)發(fā)朋友圈]，這是我寫作最大的動力。

意見反饋

若本號內(nèi)容有做得不到位的地方（比如：涉及版權(quán)或其他問題），請及時聯(lián)系我們進(jìn)行整改即可，會在第一時間進(jìn)行處理。

這是一個有質(zhì)量，有態(tài)度的公眾號

點(diǎn)關(guān)注，有好運(yùn)

程序員哆啦A夢 CSDN認(rèn)證博客專家 CSDN博客專家 簡書萬粉優(yōu)秀創(chuàng)作 掘金優(yōu)秀作者 我是程序員哆啦A夢，藍(lán)胖子，簡書萬粉優(yōu)秀創(chuàng)作者，掘金優(yōu)秀作者、CSDN博客專家，云+社區(qū)社區(qū)活躍作者，致力于打造一系列能夠幫助程序員提高的優(yōu)質(zhì)文章。網(wǎng)站@http://www.dadaqianduan.cn