前端面试题笔记 2021.8.26
2021.8.26學習筆記
如果需要匹配包含文本的元素，用下面哪種方法來實現？
A. text()
B. contains()
C. input()
D. attr(name)
正確答案: B
text()是jQuery中的方法，可是設置或返回被選元素的文本內容
contains選擇器，選取包含指定字符串的元素，字符串也可以是文本
input()選擇器，選取表單元素
attr(name,value)屬性操作，設置或返回被選元素的屬性和屬性值
以下代碼執行后，console 的輸出是？
let x = 10;
let foo = () => {
console.log(x);
let x = 20;
x++;
}
foo();
A. 拋出 ReferenceError
B. 10
C. 20
D. 21
正確答案: A
這題的本質是暫時死區的問題
如圖,單單是去掉了在function中let的定義
這里邊的console.log的結果是1，證明了是可以訪問function之前定義的變量的，
而之所以會產生reference error是因為暫時死區的問題(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語句會產生hoisting（變量提升），JavaScript引擎也會意識到在后邊的let定義，只是不支持在let聲明語句之前引用該變量而已。
所以，只要在同一個block中，let是在后邊定義的，就不能在之前引用該變量。與此同時，也不能再去取嵌套外層的值了（x=1）
代碼的輸出結果為（ ）
<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類型轉換：
1. 對于String:只有非空字符串為真
2. 對于Number:除了0和NaN之外都為真
3. 對于Boolean:true為真
4. 對于Object:除了null之外都為真
5. undefined為false;
下面哪些屬于JavaScript的typeof運算符的可能結果：（）
A. symbol
B. int
C. boolean
D. null
E. array
F. undefined
G.string
正確答案: A C F G
下面哪些方式在同一個窗口下能夠檢測一個js對象是數組類型？（ ）
A. Array.isArray()
B. instanceof
C. typeof
D. Object.prototype.toString.call()
正確答案: A B D
A：Array 為 js 的原生對象，它有一個靜態方法：Array.isArray()，能判斷參數是否為數組
B：instanceof 運算符返回一個布爾值，表示對象是否為某個構造函數的實例
C: typeof 能判斷類型有：number、string、boolean、symbol、undefined、function； object、array、null 的變量都返回 object
D：Object.prototype.toString() 為 Object 對象的實例方法，默認情況下（即不重寫該方法），返回參數的類型字符串。
this對象的理解正確的是 ()
A. 在不改變this指向的前提下，this總是指向函數的直接調用者
B. 如果有new關鍵字，this指向new出來的那個對象
C. this總是指向函數的非間接調用者
D. IE中attachEvent中的this總是指向全局對象Window
正確答案: A B D
下面的語言中哪些語言是動態語言( )
A. C
B. JavaScript
C. C++
D. CSS
E. Java
F. Objective-C
正確答案: B
- 動態類型語言：動態類型語言是指在運行期間才去做數據類型檢查的語言，也就是說，在用動態類型的語言編程時，永遠也不用給任何變量指定數據類型，該語言會在你第一次賦值給變量時，在內部將數據類型記錄下來。
Python 和 Ruby 就是一種典型的動態類型語言，其他的各種腳本語言如 JavaScript 也屬于動態類型語言。- 靜態類型語言：靜態類型語言與動態類型語言剛好相反，它的數據類型是在編譯其間檢查的，也就是說在寫程序時要聲明所有變量的數據類型，C/C++ 是靜態類型語言的典型代表，其他的靜態類型語言還有 C#、JAVA 等。
關于SVG和CANVAS，下面陳述正確的有?
A. SVG做動畫性能要優于CANVAS
B. CANVAS做動畫性能要優于SVG
C. SVG產生的dom數量比CANVAS要少
D. CANVAS產生的dom數量比SVG要少
E. CANVAS可以使用css設置動畫樣式
F. SVG可以使用css設置動畫樣式
正確答案: D F
SVG與Canvas的區別
SVG
不依賴分辨率
支持事件綁定
大型渲染區域的程序(例如百度地圖)
不能用來實現網頁游戲
Canvas
依賴分辨率
不支持事件綁定
最合適網頁游戲
保存為".jpg"格式的圖片
下面哪些技術可用于優化 CSS 圖片加載 ?
A. CSSSprite
B. SVGSprite
C. Iconfont
D. Base64
正確答案: A B C D
A,減少對服務器請求
B,體積小，矢量
C,體積小，矢量，集成度高
D, 減少對服務器請求
css中clear的作用是什么？
A. 清除該元素所有樣式
B. 清除該元素父元素的所有樣式
C. 指明該元素周圍不可出現浮動元素
D. 指明該元素的父元素周圍不可出現浮動元素
正確答案: C
clear : none | left | right | both.
對于CSS的清除浮動(clear)，一定要牢記：這個規則只能影響使用清除的元素本身，不能影響其他元素。
DHTML是 ？
1、HTML
2、javascript
3、HTML Dom
4、CSS
A. 1 和 2
B. 3 和 4
C. 都是
D. 都不是
正確答案: C
動態 HTML（DHTML）是指允許開發人員創建高度動畫和交互式網站的代碼標簽和語法。 所以上面的技術都需要。
DHTML 并不是新東西，而是技術的組合； HTML+JS+CSS
void();
該表達式的結果是：
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 語法錯誤
關于這段代碼正確的結論是：（）
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
（注：從網上找到了一個很詳細的答案）
網上有一道美團外賣的面試題是這樣的：
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
問為什么？
有不少同學第一眼看上去就覺得很疑惑，p不是應該繼承了Function原型里面的屬性嗎，為什么p.a返回值是undefined呢？
其實，只要仔細想一想就很容易明白了，Person函數才是Function對象的一個實例，所以通過Person.a可以訪問到Function
原型里面的屬性，但是new Person()返回來的是一個對象，它是Object的一個實例,是沒有繼承Function的，所以無法訪問
Function原型里面的屬性。但是,由于在js里面所有對象都是Object的實例，所以，Person函數可以訪問到Object原型里面的
屬性，Person.b => ‘b’
給網頁添加javascript的方式有
A. 使用script標簽，將javascript代碼寫到
<script></script>之間
B. 添加外部javascript文件
C. 使用行內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正確。行內js:javascript:return void(null)或javascript:return confirm("……");
D錯誤。查閱了資料，import用于引入css，js暫未發現這種用法。
以下哪些Array對象的方法不會更改原有數組？
A. concat()
B. splice()
C. map()
D. sort()
正確答案: A C
會改變數組的方法：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
forEach()
不會改變數組的方法：
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
代碼回收規則如下：
1.全局變量不會被回收。
2.局部變量會被回收，也就是函數一旦運行完以后，函數內部的東西都會被銷毀。
3.只要被另外一個作用域所引用就不會被回收
寫出下列代碼的執行結果：
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在處理異步操作時利用的是事件循環機制。事件循環機制處理順序，同步操作<-異步操作(微任務<-宏任務)
由于javascript是單線程任務所以主線程只能同時處理一個任務，所以把異步的事件放在同步的事件處理完成之后再來依次處理。
異步事件又包括微任務和宏任務：
宏任務和微任務關系：微任務執行完后再執行宏任務
微任務操作: 1：Promise,2:MutationObserver
宏任務操作: 1:setTimeout,2:setInterval,3:I/O操作
所以上面代碼執行順序為:
同步：console.log(1)->console.log(2)->console.log(5);
異步：(微任務)console.log(3)->（宏任務）console.log(4);
所以答案為：1 2 5 3 4
總結
以上是生活随笔為你收集整理的前端面试题笔记 2021.8.26的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 求一个好听的散文名字
- 下一篇： [JAVAEE] 初识ThymeLeaf