js面試題

1、js數(shù)據(jù)類型

基本數(shù)據(jù)類型

Number、String、Boolean、Null、Undefined、Symbol、bigInt

引用數(shù)據(jù)類型

object、Array、Date、Function、RegExp

2、js變量和函數(shù)聲明的提升

在js中變量和函數(shù)的聲明會(huì)提升到最頂部執(zhí)行

函數(shù)的提升高于變量的提升

函數(shù)內(nèi)部如果用 var 聲明了相同名稱的外部變量，函數(shù)將不再向上尋找。

匿名函數(shù)不會(huì)提升。

3、閉包

閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)

閉包基本上就是一個(gè)函數(shù)內(nèi)部返回一個(gè)函數(shù)

好處

可以讀取函數(shù)內(nèi)部的變量

將變量始終保持在內(nèi)存中

可以封裝對(duì)象的私有屬性和私有方法

壞處

比較耗費(fèi)內(nèi)存、使用不當(dāng)會(huì)造成內(nèi)存溢出的問(wèn)題

4、== 和 ===的區(qū)別

==是非嚴(yán)格意義上的相等

值相等就相等

===是嚴(yán)格意義上的相等，會(huì)比較兩邊的數(shù)據(jù)類型和值大小

值和引用地址都相等才相等

5、this

this總是指向函數(shù)的直接調(diào)用者

如果有new關(guān)鍵字，this指向new出來(lái)的對(duì)象

在事件中，this指向觸發(fā)這個(gè)事件的對(duì)象

6、js數(shù)組和對(duì)象的遍歷方式

for in

for

forEach

for-of

7、map與forEach的區(qū)別

forEach 方法，是最基本的方法，就是遍歷與循環(huán)，默認(rèn)有 3 個(gè)傳參：分別是遍歷的數(shù)組內(nèi)

容 item、數(shù)組索引 index、和當(dāng)前遍歷數(shù)組 Array

map 方法，基本用法與 forEach 一致，但是不同的，它會(huì)返回一個(gè)新的數(shù)組，所以 callback

需要有 return 值，如果沒(méi)有，會(huì)返回 undefined

8、箭頭函數(shù)與普通函數(shù)的區(qū)別?

函數(shù)體內(nèi)的 this 對(duì)象，就是定義時(shí)所在的對(duì)象，而不是使用時(shí)所在的對(duì)象

不可以當(dāng)作構(gòu)造函數(shù)，也就是說(shuō)，不可以使用 new 命令，否則會(huì)拋出一個(gè)錯(cuò)誤

不可以使用 arguments 對(duì)象，該對(duì)象在函數(shù)體內(nèi)不存在。如果要用，可以用 Rest 參數(shù)代替

不可以使用 yield 命令，因此箭頭函數(shù)不能用作 Generator 函數(shù)

9、同源策略

同源指的是域名、協(xié)議、端口號(hào)相同

10、如何解決跨域

jsonp跨域

document.domain + iframe 跨域

nodejs中間件代理跨域

后端在頭部信息里面設(shè)置安全域名

11、嚴(yán)格模式的限制

變量必須聲明后再使用

函數(shù)的參數(shù)不能有同名屬性，否則報(bào)錯(cuò)

不能使用 with 語(yǔ)句

禁止 this 指向全局對(duì)象

12、es6新增

新增模板字符串

箭頭函數(shù)

for-of（用來(lái)遍歷數(shù)據(jù)—例如數(shù)組中的值。）

ES6 將 Promise 對(duì)象納入規(guī)范，提供了原生的 Promise 對(duì)象。

增加了 let 和 const 命令，用來(lái)聲明變量。

還有就是引入 module 模塊的概念

13、attribute 和 property 的區(qū)別是什么?

attribute 是 dom 元素在文檔中作為 html 標(biāo)簽擁有的屬性

property 就是 dom 元素在 js 中作為對(duì)象擁有的屬性。

對(duì)于 html 的標(biāo)準(zhǔn)屬性來(lái)說(shuō)，attribute 和 property 是同步的，是會(huì)自動(dòng)更新的

但是對(duì)于自定義的屬性來(lái)說(shuō)，他們是不同步的

14、let和const 的區(qū)別是什么?

let 命令不存在變量提升，如果在 let 前使用，會(huì)導(dǎo)致報(bào)錯(cuò)

如果塊區(qū)中存在 let 和 const 命令，就會(huì)形成封閉作用域

不允許重復(fù)聲明

const定義的是常量，不能修改，但是如果定義的是對(duì)象，可以修改對(duì)象內(nèi)部的數(shù)據(jù)

15、內(nèi)存泄

漏

定義：程序中己動(dòng)態(tài)分配的堆內(nèi)存由于某種原因程序未釋放或無(wú)法釋放引發(fā)的各種問(wèn)題。

js中可能出現(xiàn)的內(nèi)存泄漏情況：結(jié)果：變慢，崩潰，延遲大等

js中可能出現(xiàn)的內(nèi)存泄漏原因

全局變量

dom 清空時(shí)，還存在引用

定時(shí)器未清除

子元素存在引起的內(nèi)存泄露

16、script 引入方式?

html 靜態(tài) <script> 引入

js 動(dòng)態(tài)插入 <script>

<script defer> : 異步加載，元素解析完成后執(zhí)行

<script async> : 異步加載，但執(zhí)行時(shí)會(huì)阻塞元素渲染

17、數(shù)組(array)方法

map : 遍歷數(shù)組，返回回調(diào)返回值組成的新數(shù)組

forEach : 無(wú)法 break ，可以用 try/catch 中 throw new Error 來(lái)停止

filter : 過(guò)濾

some : 有一項(xiàng)返回 true ，則整體為 true

every : 有一項(xiàng)返回 false ，則整體為 false

join : 通過(guò)指定連接符生成字符串

push / pop : 末尾推入和彈出，改變?cè)瓟?shù)組， 返回推入/彈出項(xiàng)

unshift / shift : 頭部推入和彈出，改變?cè)瓟?shù)組，返回操作項(xiàng)

sort(fn) / reverse : 排序與反轉(zhuǎn)，改變?cè)瓟?shù)組

concat : 連接數(shù)組，不影響原數(shù)組， 淺拷貝

slice(start, end) : 返回截?cái)嗪蟮男聰?shù)組，不改變?cè)瓟?shù)組

splice(start,number,value…): 返回刪除元素組成的數(shù)組，value 為插入項(xiàng)，改變?cè)瓟?shù)組

indexOf / lastIndexOf(value, fromIndex) : 查找數(shù)組項(xiàng)，返回對(duì)應(yīng)的下標(biāo)

reduce / reduceRight(fn(prev, cur) ，defaultPrev) : 兩兩執(zhí)行，prev 為上次化簡(jiǎn)函數(shù)的return 值，cur 為當(dāng)前值(從第二項(xiàng)開始)

18、JavaScript 深淺拷貝?

淺拷貝

Object.assign

深拷貝

可以通過(guò) JSON.parse(JSON.stringify(object)) 來(lái)解決

19、說(shuō)說(shuō)異步編程的實(shí)現(xiàn)方式?

回調(diào)函數(shù)

優(yōu)點(diǎn)：簡(jiǎn)單、容易理解

缺點(diǎn)：不利于維護(hù)、代碼耦合高

事件監(jiān)聽

優(yōu)點(diǎn)：容易理解，可以綁定多個(gè)事件，每個(gè)事件可以指定多個(gè)回調(diào)函數(shù)

缺點(diǎn)：事件驅(qū)動(dòng)型，流程不夠清晰

發(fā)布/訂閱(觀察者模式)

類似于事件監(jiān)聽，但是可以通過(guò)‘消息中心’，了解現(xiàn)在有多少發(fā)布者，多少訂閱者

Promise 對(duì)象

優(yōu)點(diǎn)：可以利用 then 方法，進(jìn)行鏈?zhǔn)綄懛?；可以書寫錯(cuò)誤時(shí)的回調(diào)函數(shù)

缺點(diǎn)：編寫和理解，相對(duì)比較難

Generator 函數(shù)

優(yōu)點(diǎn)：函數(shù)體內(nèi)外的數(shù)據(jù)交換、錯(cuò)誤處理機(jī)制

缺點(diǎn)：流程管理不方便

async 函數(shù)

優(yōu)點(diǎn)：內(nèi)置執(zhí)行器、更好的語(yǔ)義、更廣的適用性、返回的是 Promise、結(jié)構(gòu)清晰

缺點(diǎn)：錯(cuò)誤處理機(jī)制

20、說(shuō)說(shuō)面向?qū)ο缶幊趟枷?

基本思想是使用對(duì)象，類，繼承，封裝等基本概念來(lái)進(jìn)行程序設(shè)計(jì)

優(yōu)點(diǎn)

易維護(hù)

易擴(kuò)展

開發(fā)工作的重用性、繼承性高，降低重復(fù)工作量。

縮短了開發(fā)周期

21、項(xiàng)目性能優(yōu)化

減少 HTTP 請(qǐng)求數(shù)

減少 DNS 查詢

使用 CDN

避免重定向

圖片懶加載

減少 DOM 元素?cái)?shù)量

減少 DOM 操作

使用外部 JavaScript 和 CSS

壓縮 JavaScript、CSS、字體、圖片等

優(yōu)化 CSS Sprite

使用 iconfont

多域名分發(fā)劃分內(nèi)容到不同域名

盡量減少 iframe 使用

避免圖片 src 為空

把樣式表放在 link 中

把 JavaScript 放在頁(yè)面底部

22、什么是單線程，和異步的關(guān)系？

單線程 ：只有一個(gè)線程，只能做一件事

原因 ： 避免 DOM 渲染的沖突

瀏覽器需要渲染 DOM

JS 可以修改 DOM 結(jié)構(gòu)

JS 執(zhí)行的時(shí)候，瀏覽器 DOM 渲染會(huì)暫停

兩段 JS 也不能同時(shí)執(zhí)行（都修改 DOM 就沖突了）

webworker 支持多線程，但是不能訪問(wèn) DOM

解決方案 ：異步

23、說(shuō)說(shuō)負(fù)載均衡？

單臺(tái)服務(wù)器共同協(xié)作，不讓其中某一臺(tái)或幾臺(tái)超額工作，發(fā)揮服務(wù)器的最大作用

http 重定向負(fù)載均衡：調(diào)度者根據(jù)策略選擇服務(wù)器以 302 響應(yīng)請(qǐng)求，缺點(diǎn)只有第一次有效果，后續(xù)操作維持在該服務(wù)器 dns 負(fù)載均衡：解析域名時(shí)，訪問(wèn)多個(gè) ip 服務(wù)器中的一個(gè)（可監(jiān)控性較弱）原因 - 避免 DOM 渲染的沖突

反向代理負(fù)載均衡：訪問(wèn)統(tǒng)一的服務(wù)器，由服務(wù)器進(jìn)行調(diào)度訪問(wèn)實(shí)際的某個(gè)服務(wù)器，對(duì)統(tǒng)一的服務(wù)器要求大，性能受到 服務(wù)器群的數(shù)量

24、作用域鏈？

作用域鏈可以理解為一組對(duì)象列表，包含 父級(jí)和自身的變量對(duì)象，因此我們便能通過(guò)作用域鏈訪問(wèn)到父級(jí)里聲明的變量或者函數(shù)

25、什么是原型、原型鏈、繼承？

所有的函數(shù)都有prototype屬性（原型）

所有的對(duì)象都有__proto__屬性

在Javascript中，每個(gè)函數(shù)都有一個(gè)原型屬性prototype指向自身的原型，而由這個(gè)函數(shù)創(chuàng)建的對(duì)象也有一個(gè)proto屬性指向這個(gè)原型，而函數(shù)的原型是一個(gè)對(duì)象，所以這個(gè)對(duì)象也會(huì)有一個(gè)proto指向自己的原型，這樣逐層深入直到Object對(duì)象的原型，這樣就形成了原型鏈。

26、JS垃圾回收機(jī)制是怎樣的？

1.概述

js的垃圾回收機(jī)制是為了防止內(nèi)存泄漏（已經(jīng)不需要的某一塊內(nèi)存還一直存在著），垃圾回收機(jī)制就是不停歇的尋找這些不再使用的變量，并且釋放掉它所指向的內(nèi)存。

在JS中，JS的執(zhí)行環(huán)境會(huì)負(fù)責(zé)管理代碼執(zhí)行過(guò)程中使用的內(nèi)存。

2.變量的生命周期

當(dāng)一個(gè)變量的生命周期結(jié)束之后，它所指向的內(nèi)存就會(huì)被釋放。js有兩種變量，局部變量和全局變量，局部變量是在他當(dāng)前的函數(shù)中產(chǎn)生作用，當(dāng)該函數(shù)結(jié)束之后，該變量?jī)?nèi)存會(huì)被釋放，全局變量的話會(huì)一直存在，直到瀏覽器關(guān)閉為止。

3.js垃圾回收方式

有兩種方式： 標(biāo)記清除、引用計(jì)數(shù)

標(biāo)記清除：大部分瀏覽器使用這種垃圾回收，當(dāng)變量進(jìn)入執(zhí)行環(huán)境(聲明變量）的時(shí)候，垃圾回收器將該變量進(jìn)行了標(biāo)記，當(dāng)該變量離開環(huán)境的時(shí)候，將其再度標(biāo)記，隨之進(jìn)行刪除。

引用計(jì)數(shù)：這種方式常常會(huì)引起內(nèi)存的泄露，主要存在于低版本的瀏覽器。它的機(jī)制就是跟蹤某一個(gè)值得引用次數(shù)，當(dāng)聲明一個(gè)變量并且將一個(gè)引用類型賦值給變量得時(shí)候引用次數(shù)加1，當(dāng)這個(gè)變量指向其他一個(gè)時(shí)引用次數(shù)減1，當(dāng)為0時(shí)出發(fā)回收機(jī)制進(jìn)行回收。

27、逐進(jìn)增強(qiáng)和優(yōu)雅降級(jí)

逐進(jìn)增強(qiáng)

針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面，保證最基本的功能，然后再針對(duì)高版本瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)。

優(yōu)雅降級(jí)

一開始就構(gòu)建完整的功能，然后再針對(duì)低版本瀏覽器進(jìn)行兼容

vue面試題

1、vue優(yōu)點(diǎn)

輕量級(jí)

速度快

簡(jiǎn)單易學(xué)

低耦合

可重用性

獨(dú)立開發(fā)

文檔齊全，且文檔為中文文檔

2、vue父組件向子組件傳遞數(shù)據(jù)

props

3、子組件向父組件傳遞事件

$emit

4、v-show和v-if指令的共同點(diǎn)和不同點(diǎn)

相同點(diǎn):都可以控制dom元素的顯示和隱藏

不同點(diǎn):v-show只是改變display屬性，dom元素并未消失，切換時(shí)不需要重新渲染頁(yè)面

v-if直接將dom元素從頁(yè)面刪除，再次切換需要重新渲染頁(yè)面

5、如何讓CSS只在當(dāng)前組件中起作用

scoped

6、<keep-alive></keep-alive>的作用是什么

主要是用于需要頻繁切換的組件時(shí)進(jìn)行緩存，不需要重新渲染頁(yè)面

7、如何獲取dom

給dom元素加ref=‘refname’,然后通過(guò)this.$refs.refname進(jìn)行獲取dom元素

8、說(shuō)出幾種vue當(dāng)中的指令和它的用法

v-model

v-on

v-html

v-text

v-once

v-if

v-show

9、vue-loader是什么？它的用途是什么？

vue文件的一個(gè)加載器，將template/js/style轉(zhuǎn)換為js模塊

用途:js可以寫es6、style樣式

10、為什么用key

給每個(gè)dom元素加上key作為唯一標(biāo)識(shí) ，diff算法可以正確的識(shí)別這個(gè)節(jié)點(diǎn)，使頁(yè)面渲染更加迅速。

11、axios及安裝？

vue項(xiàng)目中使用ajax時(shí)需要axios插件

下載方式cnpm install axios --save

12、v-model的使用

v-model用于表單的雙向綁定，可以實(shí)時(shí)修改數(shù)據(jù)

13、請(qǐng)說(shuō)出vue.cli項(xiàng)目中src目錄每個(gè)文件夾和文件的用法

components存放組件

app.vue主頁(yè)面入口

index.js主文件入口

ass存放靜態(tài)資源文件

14、分別簡(jiǎn)述computed和watch的使用場(chǎng)景

用官網(wǎng)的一句話來(lái)說(shuō)，所有需要用到計(jì)算的都應(yīng)該使用計(jì)算屬性。多條數(shù)據(jù)影響一條數(shù)據(jù)時(shí)使用計(jì)算屬性，使用場(chǎng)景購(gòu)物車。

如果是一條數(shù)據(jù)更改，影響多條數(shù)據(jù)時(shí)，使用watch，使用場(chǎng)景搜索框。

獲取方式：

點(diǎn)贊評(píng)論：資料

移步后臺(tái)主動(dòng)打招呼即可~? ? ?up看到會(huì)挨個(gè)發(fā)~