一、HTML和CSS
1、css動畫實現：
animation（動畫）：keyframes提供了更多的控制；可以指定播放次數或是無限循環；可以定義動畫的中間狀態
transition（過渡）：需要事件來觸發；是一次性的，不能重複發生；只能定義開始和結束狀態，不能自定義中間狀態；
transform（變形）：元素的縮放、旋轉、移動和傾斜
translate（移動）：transform的移動屬性
2、移動端自適應方案：
1）rem：相對於根元素的字體大小單位，em是相對於父級元素字體大小的單位，flexible
2）vw：postcss-px-to-viewport可以自動轉換vw
3）媒體查詢：處理特定狀態
4）<meta content="width=device-width,initial-scal=1.0,maximum-scale=1.0,user-scalable=0;" name="viewpott" />
沒有設置viewport會出現：網頁被縮小，字體很醜，排版錯亂；有了viewport能通過縮放讓瀏覽器完全顯示整個網頁
3、垂直居中：line-height+text-align；absolute+transform；flex+aligin-items+justify-content；table-cell
4、flex都有哪些屬性：flex-direction主軸方向、flex-wrap換行、justify-content主軸對其方式（flex-start/flex-end/center/space-between/space-around）、align-items交叉軸對齊方式、align-content多根軸線對齊方式
5、選擇器優先級：!import>內聯樣式>id選擇器>class選擇器>tag選擇器>*（通配符）>繼承>默認
僞類選擇器：:link>:visited>:focus>:hover>:active fist-of-type、last-of-type、only-of-type、only-child、nth-child、:enable、:disable、:checked
6、link和import的區別：
1）link是html標籤，不僅可以加載css，還可以定義rss、rel等屬性，import是css導入樣式的方法；
2）link標籤引入的css同時加載，import引入的css在頁面加載完畢之後加載
3）link可以使用js來動態引入，import不行
7、SVG和Canvas：svg是使用xml描述2d圖形，canvas是通過js來繪製2d圖形的
8、盒子模型：寬度=content+padding+border+margin
9、position的值有哪些？static（文檔流）relative（相對定位）absolute（絕對定位：不爲static的父級元素）fixed（固定定位：可視窗口）
10、繪製三角形的原理：把高度和寬度設置爲0，然後設置邊框樣式
11、display有哪些參數？block（塊顯示）inline-block（行內）none（隱藏）inline（內聯-行內）table（表格顯示）list-item（項目列表）
12、行內元素和塊級元素有啥區別？行內元素只有左右的margin和padding，不能設置寬和高，寬高取決於內部內容；塊級元素允許設置寬高，padding、margin，但不允許左右存在其他元素
13、H5新特性？
1）語義化標籤？常見語義化標籤：h1-h6、p、header、title、footer、nav、section、article、table、ul、dt、strong；有利於不同設備解析（盲人閱讀器），區分哪些優先閱讀；有利於搜索引擎的抓取；有利於團隊的開發維護；
2）新表單類型：input新增type:email、number、url、range、search、color、tel、date;新增屬性:min、max、autofocus、multiple、required、pattern
3）視頻和音頻：<video><audio>
4）canvas繪圖和svg矢量圖形
14、h5網頁怎麼顯示真實的1px邊框和12px字體大小？
1）使用box-shodow來模擬邊框：但是會有陰影顏色變淺
2）背景色漸變，一半有顏色一半設置透明
3）僞類+transform：用before或after做border，並transform的scale縮小一半
15、三欄佈局實現方式：
1）float:left；float:right；margin-left，margin-right（main標籤最後加載）
2）BFC：float:left；float:right；overflow:hidden（main標籤最後加載）
3）外層設置display:table,width:100%;內部標籤設置display:table-cell
4）絕對定位：左右設置absolute，中間的設置margin
16、BFC：塊級格式上下文，是頁面上一個獨立的容器，容器中的子元素不會影響到外面元素；
二、JS
1、高階函數：函數可以作爲參數傳遞；函數可以作爲返回值輸出
2、閉包？：
函數執行作用域內的變量，被另一個作用域引用，造成該變量不能在函數執行後銷燬，就形成了閉包
使用場景：原生的setTimeout傳遞的第一個函數無法帶參數，可以利用閉包實現傳參；回調、事件綁定；封裝私有變量
3、作用域：執行上下文中聲明的變量和聲明的作用範圍，分爲塊級作用域和函數作用域
4、isNAN、escape、 eval 、 parseFloat等js系統方法總結
5、js數據類型
基礎數據類型：undefined、null、number、boolean、string
object（引用類型）中還包括：array、function、date、regExp、error、arguments對象
基礎類型和引用類型的區別：一個存在堆內存，一個在棧內存；一個是值的引用，一個是地址
typeof 能檢測除了null以外的數據類型，null時返回object，除了function能返回function以外，其他都返回object
Object.prototype.toString.call() 能檢測所有類型
強制類型轉換：
String()、Number()、Boolean()、parseInt()
一元加減操作符等同於Number()；加法操作符如果一個字符串一個數字，會合成字符串；非與或；相等和不相等；全等和不全等；關係操作符
6、proxy理解：代理，new Proxy(target,handler)當代理對象中的某個值被訪問或是更新就會觸發相應的get和set方法
7、js繼承方式：原型鏈繼承、構造函數繼承、組合繼承
8、node的事件方法：emitter.addListener() emitter.emit() emitter.on() emitter.removeListener()
9、Promise：用於解決回調地獄，用於處理異步編程：new Promise().then().then().catch()；
狀態值：pending（等待中）fulfilled（已完成）rejected（已拒絕）
async/await也是基於promise實現的
generator：yield暫停代碼，next()繼續執行代碼
三兄弟：promise.all()全部完成輸出完成，一個拒絕直接輸出拒絕； promise.race()一個完成或拒絕就輸出結果；promise.allSettled()所有的完成或決絕的結果對應輸出
promise和settimeout有什麼區別 => this.$nexttick
settimeout還是最後，因爲本質上講settimeout反回的異步函數，是一個全新的任務隊列，就必須等待之前的所有任務隊列全部執行完畢纔會執行,所以總體來講，三個中settimeout性能最差,會導致2次瀏覽器重繪
console.log(1);
setTimeout(()=>{
console.log(2)
},100)
Promise.resolve().then(()=>{
console.log(3);
})
console.log(4)
10、函數防抖和節流：持續觸發事件resize、scroll、mousemove避免頻繁執行函數
防抖debounce：觸發事件後在n秒內函數只能執行一次
節流throttle：連續觸發事件但是n秒內只執行一次，停止觸發事件還會再執行一次；時間戳版和定時器版
11、如何理解原型和原型鏈？構造函數是什麼？
每個對象在創建的時候就會與之關聯的另一個對象，這個對象就是原型，每一個對象都會從原型繼承屬性；原型鏈就是由相互關聯的原型組成的鏈狀結構；
每一個構造函數都有一個prototype指針指向他的原型，構造函數被實例化之後具有一個proto屬性指向構造函數的原型
構造函數constructor本身就是一個函數，用於創建對象，使用new來生成實例（使用instanceof來確認實例與原型的繼承關係）
12、this、apply、call、bind：改變this指向
this永遠指向最後調用它的那個對象，匿名函數的this永遠指向window，vue中的this指向Vue實例
改變this指向的方法：箭頭函數：this始終指向函數定義時的this，而不是執行時；函數內部使用let _this = this；
apply和call類似，傳入參數不同，apply是數組，call是參數列表；bind是創建一個新的函數，需要手動調用
13、this指向問題？在嚴格模式和非嚴格模式的區別？
1）全局作用域下的this：都指向window；
2）全局作用域下函數中的this：嚴格模式指向undefined，非嚴格模式指向window；箭頭函數都指向window；
3）對象中的函數中的this：指向調用這個函數的對象
4）構造函數中的this：指向實例對象
5）事件處理中的this：指向觸發事件的目標對象
13、es中新類型symbol：1）作爲對象屬性的唯一標識符，防止對象屬性發生衝突，避免在屬性名相等的時候發生屬性覆蓋：[Symbol('name')]: ''； Object.getOwnPropertySymbols(target)；2）用來代替常量，const TYPE_1 = Symbol()；3）定義類的私有屬性/方法
14、js設計模式：
1）構造函數模式：用構造函數來生成對象
2）工廠模式：jquery中的$選擇器就是工廠模式創建的
3）單例模式：一個類智能創建一個實例，比如vuex和redux中的store
4）代理模式：proxy對象攔截操作
5）觀察者模式：vue響應式，eventEmitter
6）適配器模式：實現兼容性
7）裝飾器模式：爲對象添加新功能，不改變原有的結構和功能，將函數的核心功能和裝飾功能區分開
8）迭代器模式：ES6中的Map、Set等，for...of
9）外觀模式：封裝一個統一的事件處理中心
10）狀態模式：state、promise
11）命令模式：將請求封裝成一個對象
15、深拷貝（對象）：JSON.parse(JSON.stringify(obj));遞歸賦值，js裏的變量永遠是值傳遞，只有對象的引用纔會有深拷貝問題
16、new：新生成一個對象；鏈接到原型；綁定this；返回return中的值
17、變量提升？函數聲明可以被提升，賦值變量後的函數沒有被提升
18、require和import的區別
require運行時加載，可以運用在代碼任何地方；import編譯時加載，效率更高，不一定要寫在開頭，具有提升效果；
require遵循commonjs，本質是賦值過程，輸入時必須查找對象屬性；import遵循es6，本質是解構過程；require實際是加載了整個模塊，然後從模塊中讀取某個方法，而import是加載了需要的方法，其他的不加載
19、let、var、const
let/const塊級作用域，暫存死區（不存在變量提升），不允許重複聲明
const一旦聲明必須賦值（也可以用symbol賦值），不能用null佔位，聲明後不能再修改，如果聲明的是複合類型數據，可以修改其屬性
20、js嚴格模式：
1)不允許給沒有聲明的變量賦值，不能對變量調用delete，不能使用標識符做變量名
2）不允許給只讀對象屬性賦值，不可配置屬性不能使用delete，不可擴展的對象不能添加屬性，屬性名必須唯一
3）命名函數的參數必須唯一，函數參數與arguments獨立，只能在腳本頂級和函數內部聲明函數，if語句中不能聲明
4）eval()在包含上下文中不再創建變量或函數
5）抑制this，嚴格模式下的this始終指向指定的值
21、柯里化：首先填充幾個參數，再返回一個新的函數，爲函數預置通用參數
const add = function add(x) {
return function (y) {
return x + y
}
}
const add1 = add(1)
add1(2) === 3
add1(20) === 21
22、數組操作：map、forEach、filter、some（或）、every（與）、join（連接字符串）、push/pop（末尾入）、unshift/shift（頭部入）、sort/reverse（排序/翻轉，改變原數組）、
contact（連接數組，不影響原數組）、slice(start,end)返回截斷後的新數組，不改變原數組、splice(start,number,value)返回刪除元素組成的數組，value爲插入項，改變原數組
indexOf/lastIndexOf（查找數組項，放回對應下標）、reduce/reduceRight（求和）、flat（數組扁平化，多維數組-》一維數組）
數組亂序：arr.sort(()=>{return Math.random() - 0.5})
23、函數聲明和函數表達式的區別？函數聲明在js解析時可以函數提升，函數表達式只能在賦值之後才能使用
24、事件委託是什麼？利用事件流的冒泡特性把子節點的事件綁定父節點上，然後回調裏面使用事件對象進行區分；可以利用一個事件處理程序來完成某一類型的所有事件；減少內存消耗，減少dom操作
26、js加載位置：
三、VUE
- MVVM的理解：Model-View-ViewModel數據驅動視圖：雙向數據綁定 (MVC-Model-View-Controller)單向通信
- vue生命週期:beforeCreate、created（完成provide/inject和狀態的初始化）、beforeUpdate、updated、beforeMount、mounted（將render函數轉化爲vnode，創建真實dom）、activated（被keep-alive包裹的組件，created和mounted不會被觸發）、deactivated（離開當前激活的組件）、beforeDestory、destoryed
- vue雙向綁定原理--js實現雙向綁定：主要是通過object對象的defineProperty屬性，重寫data的setter和getter函數，在get函數中更改原數據，在set函數中更改視圖
- 輸入框內容變化，data數據變化，view=》model；data數據變化，顯示文本變化，model=》view；相當於getter、setter
- vue組件間通訊：props/$emit；eventBus（$on/$emit/$off）；vuex；provide/inject（跨組件通信）；slot插槽；ref；
- computed和watch：computed是計算屬性，更多用於計算值的場景，在getter執行後會緩存；watch更多是觀察作用，用於觀察props $emit或本組件的值，當數據變化時執行後續操作，無緩存性，頁面重新渲染時值不變化也會執行
- vue動態組件：<component :is= />
- vue動態路由實現：router.addRoutes() 路由傳參：/:id query:{} params:{}
- keep-alive工作原理：用於保存組件的渲染狀態，避免組件反覆創建和渲染；通常用於動態組件和router，include定義緩存白名單，exclude定義緩存黑名單，max定義緩存組件上限
- vue-router鉤子函數：beforeEach()全局前置守衛，進入路由之前調用；afterEach()全局後置守衛，進入路由之後調用；beforeResolve()全局解析守衛；
- vuex使用：組件通過dispatch一個action，action通過commit一個mutation，mutation來改變state，最後重新執行render生成新的vnode，刷新組件
- action和mutation的區別：mutation是同步函數，action是異步函數，mutation是修改state的唯一途徑，action不進行狀態的直接更改，而是通過commit觸發mutation，可以同時提交多個mutation
- dom在哪個vue的生命週期渲染完成的？
- 如何解決修改數據頁面不刷新的問題？爲何出現該問題？ this.$set，vue.js無法檢測到對象屬性的增加和修改，vue在初始化實例時將對象屬性轉化爲getter/setter，所以屬性必須在data對象上才能讓vue.js轉化它
- vue中的template如何理解？
- axios和ajax的區別
- ajax是針對MVC編程，不符合現在MVVM潮流；axios是promise的實現版本，符合es規範，提供了一些併發請求接口
- nextTick: 在下次dom更新循環結束之後再執行
四、React
1、react的優點：
1）遵循從上到下的單向響應數據流，減少重複代碼；
2）使用虛擬DOM來更新真正的dom，減少DOM操作成本，提高效率；
3）JSX語法（對es支撐很友好）
2、react如何獲取真正的dom：ReactDOM.findDOMNode()或this.$refs
3、react生命週期：
1）設置默認屬性defaultProps；2）設置初始化狀態state；3）componentWillMount()組件即將被渲染；4）render()組件渲染；
5）componentDidMount()組件渲染後觸發，此時有了真正的Dom；6）componentWillReceiveProps()組件接受到屬性；
7）shouldComponentUpdate()組件接收到新屬性或狀態改變時觸發；8）componentWillUpdate()組件即將被更新；
9）componentDidUpdate()組件更新完成，頁面產生新的dom；10）componentWillUnmount()組件銷燬時觸發；
4、react組件是通過什麼去判斷是否刷新的：通過判斷state是否變化
5、bind函數的位置：寫在render方法裏會導致組件狀態變更時重複觸發bind函數的執行，嚴重影響性能；寫在constructor中僅在組件初始化時調用，綁定自身作用域，缺點是每個事件都要綁定一次，寫起來比較麻煩
6、虛擬dom：用js這種抽象化的方式來渲染dom樹結構，實現了跨平臺的能力；其核心是diff算法，減少了js操作真實dom所帶來的性能消耗
7、diff算法：對比新老dom的變化，將變化的部分更新到視圖中；遍歷虛擬dom，對比節點的屬性及子節點，只修改變化的地方，其他的保持不變；
8、key值：作用是給每個節點做唯一標識，使得diff算法能夠正確識別節點並對其進行更新操作，可以更高效的更新虛擬dom；不推薦用index下標來表示key值，在數組中間追加元素時會導致後面的節點都重新渲染，最好使用id來作爲唯一標識
9、react-router：BrowserRouter和HashRouter都會創建history對象，項目中有服務器的web請求我們就用的BrowserRouter
用<Switch>組件將多個<Route>包裹在一起用於渲染第一個路徑匹配的route
標籤渲染<Link to="/" >Home</Link> 重定向<Redirect to="/index" />
10、redux：react狀態管理機制，將數據統一存儲在store狀態樹中，組件通過調用dispatch方法觸發一個action來更新store樹，其他組件可以通過訂閱store中的狀態值來刷新視圖
核心：provider：頂級組件來存放store，使得所有組件都可以在redux的控制下；connect：mapStateToProps將redux的值映射到props中,mapDispatchToProps將dispatch變成props直接使用
11、react組件通信：自上而下單向數據流，一層一層傳遞props，不需要props的就有context來實現數據共享，定義全局數據
1）props：利用props獲取父組件方法直接調用
2）context：利用React.createContext()創建全局可以訪問的值，使用provider和customer模式，在頂層的provider中傳入value
3）eventEmitter：可以引入events包，通過註冊事件和觸發事件來實現通信new EventEmitter()；addListener()；removeListener()；
4）路由傳參：params：this.props.match.params.（刷新頁面不會丟失）query:this.props.location.query.（刷新丟失，可傳對象）
state:this.props.location.query.state.（Hash中刷新頁面丟失，可傳對象）search：this.props.location.search
5）onRef：通過props機制將組件的this實例當做參數傳到父組件，父組件就可以操作子組件的方法和state
6）ref：通過ref屬性獲取整個子組件實例進行操作
7）redux
8）Mobx
9）flux
10）hooks：使用userReducer和context實現通訊，核心action，reducer，types
11）slot：將父組件的標籤傳遞給子組件，子組件使用this.props.slot來獲取內容
12、flux思想： 單向數據流
用戶訪問view；view發出用戶的action；dispatcher收到action，要求store進行更新；store更新後，發出一個change事件；view收到change事件後更新頁面
13、vue和react的虛擬dom有啥區別？
react和vue的虛擬dom都是一樣的，都是用js對象來模擬真實dom，然後用虛擬dom的diff來最小化更新真實dom，唯一的區別是react採用的是自上而下的全量diff，vue採用的是局部訂閱的模式
vue和react的區別：
1、虛擬dom不同：react採用的是自上而下的全量diff，vue採用的是局部訂閱的模式
2、數據流：react是自上而下單向數據流，需要用setState方式去更新狀態，vue雙向數據綁定
3、模板渲染方式不同：react通過jsx來渲染，vue是使用html語法，通過指令v-if、v-for來渲染。在引入模板引入中，react中import的組件可以在render中直接使用，vue還需要在components中聲明
4、react本身是嚴格的view層，MVC模式，vue是MVVM模式
五、瀏覽器和Http
1、cookie、sessionStorage、localStorage的區別
cookie常用於存儲用戶身份，登錄狀態等，http中自動攜帶，體積上限位4K，可自行設置過期時間
localStorage/sessionStorage：長久存儲/窗口關閉刪除，體積5M，不與服務端通信，兩者只有存儲期限不同，local除非手動清除否則永久保存，session頁面關閉後被清除
2、各大瀏覽器內核：Trident（IE）、Webkit（Chrome/Safari）、Gecko(Mozilla/Firefox）、Presto（）
3、web性能優化方向：
1）降低請求量（減少http請求次數，圖片文件壓縮，資源懶加載，按需加載，使用base64圖片）；
2）加快請求速度（並行加載，CDN分發）；
3）緩存（離線數據緩存在localStorage中）；
4）渲染（JS/CSS加載順序優化，css放在最上面，js放在body的最下面）；
5）事件節流，減少dom操作，避免迴流
6）減少cookie使用，減少請求攜帶的大小
4、http和https的區別：https比http多了一層SSL協議，用於加密，http明文傳輸，無狀態連接；https加密傳輸且身份認證，需要ca證書；http端口80，https端口443
5、301.302.303重定向
6、瀏覽器垃圾回收和內存泄漏：垃圾回收就是定期找出不繼續使用的變量釋放內存；
閉包導致父級中的變量無法被釋放；定時器未正確關閉導致引用的外部變量無法被釋放，事件監聽沒有被正確銷燬；dom元素被刪除時，內存中對dom的引用沒有被清除；沒有聲明的變量無法回收
7、瀏覽器渲染頁面流程：瀏覽器從請求到加載一個頁面：DNS查詢（域名解析：域名解析成ip地址）、TCP連接、HTTP請求響應、服務器響應、客戶端渲染
客戶端渲染的過程：處理html構建dom樹；處理css構建css樹；將dom樹和css樹合併渲染樹；佈局；繪製頁面
8、瀏覽器事件流：
捕獲（事件從window對象到document對象再到html標籤一層層傳到目標元素）、目標、冒泡（捕獲的逆過程）
9、重繪和重排：重繪是重新繪製受影響的部分；重排是重新生成佈局；重排一定會導致重繪；
觸發重繪重排：dom節點的增刪改；dom節點隱藏；dom節點的移動或添加動畫；調整樣式屬性；用戶調整窗口大小，滾動等操作
10、dom2事件綁定：可以添加多個處理函數，可以用addEventListener和removeEventListener來綁定和解綁事件
11、瀏覽器緩存：瀏覽器緩存基本是get方法
瀏覽器請求與緩存的關係流：是否有緩存、判斷緩存是否過期、判斷最後修改的時間
強制緩存：cache-control（no-cache不能緩存；public；private），expires
協商緩存：lastModified
12、websocket：實現客戶端和遠程服務端的全雙工通信；http是應用層協議，封裝解析傳輸的數據；socket不是協議，是對TCP的接口封裝，是傳輸通道兩端的接口；websocket是個持久化的協議，服務端可以主動push；new WebSocket(url); ws.onerror = fn; ws.onclose = fn; ws.onopen = fn; ws.onmessage = fn; ws.send()
13、http請求方式：GET獲取資源；POST傳輸數據；PUT傳輸文件；DELETE刪除資源；HEAD獲得報文首部；OPTIONS詢問支持的方法
15、get和post區別：get緩存、請求長度受限，會被歷史保存記錄；post安全、大數據、更多編碼類型
16、瀏覽器安全：同源策略（要求域名協議端口都相同），XSS注入攻擊（轉義html、過濾script標籤），跨域請求僞造csrf（增加用戶登錄授權）
17、跨瀏覽器、跨終端？瀏覽器兼容：css樣式、事件觸發，響應式開發：媒體查詢，多套css樣式
18、前端架構？可訪問性？可維護性？
1）創建gitlab和git flow工作流進行版本管理；2）埋點系統：記錄頁面訪問量，捕捉報錯等；3）使用ESlint：統一代碼風格，減少低級bug，增加可閱讀性和可維護性；4）Mock數據；
5）基礎組件封裝；6）公共樣式庫，統一UI風格；7）權限管理，路由守衛，單點登錄；8）請求攔截
19、hash和history的區別？hash不會被包含在http請求中，對後端完全沒有影響，改變hash不會重新加載頁面，只要#號前面的內容正確，就不會返回404錯誤；history需要服務端做完整的匹配，不然就會出現404錯誤
20、前端處理跨域問題？配置反向代理：在vue.config.js文件中配置proxyTable、jsonp原理，cors、iframe，postMessage....
module.exports = {
devServer: {
proxy: {
"/api": {
target: "http://typhoon.zjwater.gov.cn", //設置調用的接口域名和端口
changeOrigin: true, //是否跨域
ws:true, // 是否啓用websocket
pathRewrite: { "^/api": "" } } } } } // 使用/api來代替target裏面的地址
Webpack：
1、常用的loader：eslint-loader、url-loader、postcss-loader、style-loader、css-loader、sass-loader、file-loader、babel-loader、
2、基本功能及工作原理：代碼轉換：編譯ts/es，scss；文件優化：壓縮js、css代碼，壓縮圖片；代碼分割，異步加載；代碼校驗：代碼規範校驗，單元測試；
3、打包原理：將所有依賴打包成一個bundle.js，通過代碼分割按需加載
4、entry：告訴webpack使用哪個模塊作爲構建項目的起點；output：告訴webpack在哪裏輸出它打包好的代碼及如何命名
5、常用plugins：html-webpack-plugins（壓縮html）clean-webpack-plugins（打包器清理dist目錄）
6、babel：將es6代碼編譯成AST（抽象語法樹）
canvas使用：
1、轉換圖片格式
function getImgToBase64(url, callback){
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
let img = new Image;
img.crossOrigin = 'Anonymous';
img.onload = function(){
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img,0,0);
var dataURL = canvas.toDataURL('image/jpg'); callback(dataURL);
canvas = null;
};
img.src = url;
}
數組操作：
1、數組去重：Array.from(new Set([1,2,3,2,1]))或 [...new Set([1,2,3,2,1])]
2、替換數組中的元素：splice(atart, countToRemove, valueToAdd)
3、清空數組：直接將數組的長度設爲0
4、獲取數組中某個鍵值映射： arr.values() 或 Array.from(arr, ({name})=>name)
5、填充數組：let arr = new Array(10).fill(1)
6、合併數組：[...arr1, ...arr2] contact
7、兩個數組的交集：[...new Set(arr1)].filter(el => arr2.includes(el))
8、刪除假值：arr.filter(Boolean) 假值爲：null，undefined，false，0，NAN，“”
9、從數組中獲取隨機值：arr[Math.floor(Math.random() * (arr.length))]
10、數組翻轉：arr.reverse()
11、查找元素最後一次出現的索引：arr.lastIndexOf(1)
12、數組中所有元素相加：arr.reduce((x, y) => x+y)
Angular、vue、react對比：
angluar：比較完善，自帶了豐富的指令，包含模板，數據雙向綁定，過濾器，依賴注入等功能，對es6兼容不是很好，需要手寫jq來解決某些問題，
vue：輕量級，支持雙向數據綁定，不支持IE8
react：聲明範式，操作虛擬DOM，單向數據流，