當(dāng)前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

前端面试题笔记 2021.8.26

發(fā)布時間：2023/11/27 生活经验 33 豆豆

生活随笔收集整理的這篇文章主要介紹了前端面试题笔记 2021.8.26 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

2021.8.26學(xué)習(xí)筆記

如果需要匹配包含文本的元素，用下面哪種方法來實現(xiàn)？

A. text()
B. contains()
C. input()
D. attr(name)

正確答案: B

text()是jQuery中的方法，可是設(shè)置或返回被選元素的文本內(nèi)容
contains選擇器，選取包含指定字符串的元素，字符串也可以是文本
input()選擇器，選取表單元素
attr(name,value)屬性操作，設(shè)置或返回被選元素的屬性和屬性值

以下代碼執(zhí)行后，console 的輸出是？

let x = 10;
let foo = () => {
console.log(x);
let x = 20;
x++;
}
foo();

A. 拋出 ReferenceError
B. 10
C. 20
D. 21

正確答案: A

這題的本質(zhì)是暫時死區(qū)的問題
如圖,單單是去掉了在function中l(wèi)et的定義

這里邊的console.log的結(jié)果是1，證明了是可以訪問function之前定義的變量的，
而之所以會產(chǎn)生reference error是因為暫時死區(qū)的問題(temperal dead zone)

紅寶書描述:When parsing the code, JavaScript engine will still be aware of the let declarations that appearlater in a block, but these variables will be unable to be referenced in any way before the actual declaration occurs.

就是說雖然let語句不像var語句會產(chǎn)生hoisting（變量提升），JavaScript引擎也會意識到在后邊的let定義，只是不支持在let聲明語句之前引用該變量而已。
所以，只要在同一個block中，let是在后邊定義的，就不能在之前引用該變量。與此同時，也不能再去取嵌套外層的值了（x=1）

代碼的輸出結(jié)果為（）

<html><body><script type="text/javascript">var test=new Boolean();document.write(test);document.write("<br />");var test=new Boolean(0);document.write(test);document.write("<br />");var test=new Boolean(null);document.write(test);document.write("<br />");var test=new Boolean("");document.write(test);document.write("<br />");var test=new Boolean(NaN);document.write(test);document.write("<br />");</script></body>
</html>

A. false false false false false
B. false true false false false
C. false false true test Boolean
D. 其他幾項都不對

正確答案: A

Boolean類型轉(zhuǎn)換：
1. 對于String:只有非空字符串為真
2. 對于Number:除了0和NaN之外都為真
3. 對于Boolean:true為真
4. 對于Object:除了null之外都為真
5. undefined為false;

下面哪些屬于JavaScript的typeof運算符的可能結(jié)果：（）

A. symbol
B. int
C. boolean
D. null
E. array
F. undefined
G.string

正確答案: A C F G

下面哪些方式在同一個窗口下能夠檢測一個js對象是數(shù)組類型？（）

A. Array.isArray()
B. instanceof
C. typeof
D. Object.prototype.toString.call()

正確答案: A B D

A：Array 為 js 的原生對象，它有一個靜態(tài)方法：Array.isArray()，能判斷參數(shù)是否為數(shù)組

B：instanceof 運算符返回一個布爾值，表示對象是否為某個構(gòu)造函數(shù)的實例

C: typeof 能判斷類型有：number、string、boolean、symbol、undefined、function； object、array、null 的變量都返回 object
D：Object.prototype.toString() 為 Object 對象的實例方法，默認情況下（即不重寫該方法），返回參數(shù)的類型字符串。

this對象的理解正確的是 ()

A. 在不改變this指向的前提下，this總是指向函數(shù)的直接調(diào)用者
B. 如果有new關(guān)鍵字，this指向new出來的那個對象
C. this總是指向函數(shù)的非間接調(diào)用者
D. IE中attachEvent中的this總是指向全局對象Window

正確答案: A B D

下面的語言中哪些語言是動態(tài)語言( )

A. C
B. JavaScript
C. C++
D. CSS
E. Java
F. Objective-C

正確答案: B

動態(tài)類型語言：動態(tài)類型語言是指在運行期間才去做數(shù)據(jù)類型檢查的語言，也就是說，在用動態(tài)類型的語言編程時，永遠也不用給任何變量指定數(shù)據(jù)類型，該語言會在你第一次賦值給變量時，在內(nèi)部將數(shù)據(jù)類型記錄下來。
Python 和 Ruby 就是一種典型的動態(tài)類型語言，其他的各種腳本語言如 JavaScript 也屬于動態(tài)類型語言。
靜態(tài)類型語言：靜態(tài)類型語言與動態(tài)類型語言剛好相反，它的數(shù)據(jù)類型是在編譯其間檢查的，也就是說在寫程序時要聲明所有變量的數(shù)據(jù)類型，C/C++ 是靜態(tài)類型語言的典型代表，其他的靜態(tài)類型語言還有 C#、JAVA 等。

關(guān)于SVG和CANVAS，下面陳述正確的有?

A. SVG做動畫性能要優(yōu)于CANVAS
B. CANVAS做動畫性能要優(yōu)于SVG
C. SVG產(chǎn)生的dom數(shù)量比CANVAS要少
D. CANVAS產(chǎn)生的dom數(shù)量比SVG要少
E. CANVAS可以使用css設(shè)置動畫樣式
F. SVG可以使用css設(shè)置動畫樣式

正確答案: D F

SVG與Canvas的區(qū)別
SVG
不依賴分辨率
支持事件綁定
大型渲染區(qū)域的程序(例如百度地圖)
不能用來實現(xiàn)網(wǎng)頁游戲
Canvas
依賴分辨率
不支持事件綁定
最合適網(wǎng)頁游戲
保存為".jpg"格式的圖片

下面哪些技術(shù)可用于優(yōu)化 CSS 圖片加載 ?

A. CSSSprite
B. SVGSprite
C. Iconfont
D. Base64

正確答案: A B C D

A,減少對服務(wù)器請求
B,體積小，矢量
C,體積小，矢量，集成度高
D, 減少對服務(wù)器請求

css中clear的作用是什么？

A. 清除該元素所有樣式
B. 清除該元素父元素的所有樣式
C. 指明該元素周圍不可出現(xiàn)浮動元素
D. 指明該元素的父元素周圍不可出現(xiàn)浮動元素

正確答案: C

clear : none | left | right | both.
對于CSS的清除浮動(clear)，一定要牢記：這個規(guī)則只能影響使用清除的元素本身，不能影響其他元素。

DHTML是？

1、HTML
2、javascript
3、HTML Dom
4、CSS

A. 1 和 2
B. 3 和 4
C. 都是
D. 都不是

正確答案: C

動態(tài) HTML（DHTML）是指允許開發(fā)人員創(chuàng)建高度動畫和交互式網(wǎng)站的代碼標簽和語法。所以上面的技術(shù)都需要。
DHTML 并不是新東西，而是技術(shù)的組合； HTML+JS+CSS

`void();`

該表達式的結(jié)果是：

A. undefined
B. TypeError
C. null
D. SyntaxError

正確答案: D

typeof  1; //'number'
typeof (1);//'number'
typeof (); //SyntaxError 語法錯誤void  0; //undefined
void (0);//undefined
void (); //SyntaxError 語法錯誤

關(guān)于這段代碼正確的結(jié)論是：（）

var F=function(){};
Object.prototype.a=function(){};
Function.prototype .b=function(){};
var f=new F();

A. f能取到a，但取不到b
B. f能取到a,b
C. F能取到b，不能取到a
D. F能取到a，不能取到b

正確答案: A

（注：從網(wǎng)上找到了一個很詳細的答案）
網(wǎng)上有一道美團外賣的面試題是這樣的：

Function.prototype.a = 'a';
Object.prototype.b = 'b';
function Person(){};
var p = new Person();
console.log('p.a: '+ p.a); // p.a: undefined
console.log('p.b: '+ p.b); // p.b: b

問為什么？

有不少同學(xué)第一眼看上去就覺得很疑惑，p不是應(yīng)該繼承了Function原型里面的屬性嗎，為什么p.a返回值是undefined呢？
其實，只要仔細想一想就很容易明白了，Person函數(shù)才是Function對象的一個實例，所以通過Person.a可以訪問到Function
原型里面的屬性，但是new Person()返回來的是一個對象，它是Object的一個實例,是沒有繼承Function的，所以無法訪問
Function原型里面的屬性。但是,由于在js里面所有對象都是Object的實例，所以，Person函數(shù)可以訪問到Object原型里面的
屬性，Person.b => ‘b’

給網(wǎng)頁添加javascript的方式有

A. 使用script標簽，將javascript代碼寫到<script></script>之間
B. 添加外部javascript文件
C. 使用行內(nèi)javascript
D. 使用@import引入javascript文件

正確答案: A B C

A正確。使用script標簽，將javascript代碼寫到<script></script>之間，例子：<scriptype="text/javascript"> document.write("Hello World!");</script>
B正確。加外部javascript文件 <script src="xxx.js"></script>
C正確。行內(nèi)js: javascript:return void(null)或javascript:return confirm("……");
D錯誤。查閱了資料，import用于引入css，js暫未發(fā)現(xiàn)這種用法。

以下哪些Array對象的方法不會更改原有數(shù)組？

A. concat()
B. splice()
C. map()
D. sort()

正確答案: A C

會改變數(shù)組的方法：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()
forEach()

不會改變數(shù)組的方法：

filter()
concat() 
slice()
map()

下列代碼存在幾個變量沒有被回收？（）

var i = 1;
var i = 2;
var add = function() {var i = 0;return function(){i++;console.log(i);}
}();
add();

A. 0個
B. 1個
C. 2個
D. 3個

正確答案: D

代碼回收規(guī)則如下：
1.全局變量不會被回收。
2.局部變量會被回收，也就是函數(shù)一旦運行完以后，函數(shù)內(nèi)部的東西都會被銷毀。
3.只要被另外一個作用域所引用就不會被回收

寫出下列代碼的執(zhí)行結(jié)果：

new Promise((resolve) => {console.log('1')resolve()console.log('2')}).then(() => {console.log('3')
})
setTimeout(() => {console.log('4')
})
console.log('5')

答案：1 2 5 3 4

js在處理異步操作時利用的是事件循環(huán)機制。事件循環(huán)機制處理順序，同步操作<-異步操作(微任務(wù)<-宏任務(wù))
由于javascript是單線程任務(wù)所以主線程只能同時處理一個任務(wù)，所以把異步的事件放在同步的事件處理完成之后再來依次處理。

異步事件又包括微任務(wù)和宏任務(wù)：
宏任務(wù)和微任務(wù)關(guān)系：微任務(wù)執(zhí)行完后再執(zhí)行宏任務(wù)
微任務(wù)操作: 1：Promise,2:MutationObserver
宏任務(wù)操作: 1:setTimeout,2:setInterval,3:I/O操作

所以上面代碼執(zhí)行順序為:
同步：console.log(1)->console.log(2)->console.log(5);
異步：(微任務(wù))console.log(3)->（宏任務(wù)）console.log(4);
所以答案為：1 2 5 3 4

總結(jié)

以上是生活随笔為你收集整理的前端面试题笔记 2021.8.26的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：求一个好听的散文名字
下一篇： [JAVAEE] 初识ThymeLeaf

生活经验

前端面试题笔记 2021.8.26

2021.8.26學(xué)習(xí)筆記

如果需要匹配包含文本的元素，用下面哪種方法來實現(xiàn)？

以下代碼執(zhí)行后，console 的輸出是？

代碼的輸出結(jié)果為（ ）

下面哪些屬于JavaScript的typeof運算符的可能結(jié)果：（）

下面哪些方式在同一個窗口下能夠檢測一個js對象是數(shù)組類型？（ ）

this對象的理解正確的是 ()

下面的語言中哪些語言是動態(tài)語言( )

關(guān)于SVG和CANVAS，下面陳述正確的有?

下面哪些技術(shù)可用于優(yōu)化 CSS 圖片加載 ?

css中clear的作用是什么？

DHTML是 ？

void();

該表達式的結(jié)果是：

關(guān)于這段代碼正確的結(jié)論是：（）

給網(wǎng)頁添加javascript的方式有

以下哪些Array對象的方法不會更改原有數(shù)組？

下列代碼存在幾個變量沒有被回收？（ ）

寫出下列代碼的執(zhí)行結(jié)果：

總結(jié)

代碼的輸出結(jié)果為（）

下面哪些方式在同一個窗口下能夠檢測一個js對象是數(shù)組類型？（）

DHTML是？

`void();`

下列代碼存在幾個變量沒有被回收？（）