一、選擇題

1. 瀏覽器端的存儲技術有哪些()

A.cookie　　B.localStorage　　C.session　　D.userData

答案：A B D

分析：cookie通常用于存儲用戶等登錄信息，能夠存儲的數據是有限的，而且在指定域名下所有的請求都會帶上。

localStoage是H5新增用于本地存儲，能夠存儲更多的數據，通常是5M

session服務器端與客戶端建立的會話，不屬于瀏覽器端存儲技術

userData是IE專有的存儲方案，可以用來存儲一些數據

2. (function() { return typeof arguments; })(); 代碼將會返回()

A.object　　B.array　　C.arguments　　D.undefined

答案：A

分析：arguments 是類數組，正常情況下typeof []會返回"object"，所以typeof?arguments也會返回"object"

3. function fn() { return fn; } new fn() instanceof fn; 上面的代碼會輸出()

A.true　　B.false

答案：false

分析：fn作為構造函數，如果內部沒有顯示的聲明return語句，默認會返回一個fn的實例對象，也就是new fn()?instanceof fn會返回true，

但是這里有return fn;這條語句，那么new fn()就會返回fn，所以結果為false

4. 下列哪個屬性不會讓div脫離文檔流(normal flow)()

A.position: absolute　　B.position: fixed　　C.position: relative　　D.float: float

答案：C

分析：position: relative相對于自己定位，不會脫離文檔流

5. 正則表達式/^d**[^d]*[w]{6}$/，下面的字符串哪個能正確匹配？()

A.***abcABCD_89　　　　B.abc*abcABCDEF

C.123*abcABCD_89　　　 D.123*ABCabcd-89

答案：A，C

分析：

^? ? ? ? ?　　表示匹配字符必須以后面規則開始

d*? ? ? ?　? 表示零個或者多個數字

*? ? ? ? 　　表示只匹配字符*

[^d]*? ?　　表示匹配零個或者多個非數字字符

[w]　? ?　　表示匹配字母數字下劃線字符相當于[0-9a-zA-Z_]

{6}　? ? ?　　表示要要進行匹配的字符數要大于等于6

答案A，* 屬于初次匹配內容，其他的是剩下規則匹配

6.? (function() { var a = b = 5; })(); console.log(b); console.log(a); 代碼輸出結果：()

A.5, 5　　B.undeinfed, undefined　　C.5, undefined　　D.程序拋錯

答案：D

分析：程序執行完之后會先打印5，然后拋錯，因為var a = b = 5;相當于b = 5; var a = 5；在非嚴格模式下，全局環境不聲明直接

賦值相當于給window對象賦值，所以相當于window.b = 5; 然而a的作用域是匿名自執行函數內，所以在全局作用域下面是訪問不到的

二、簡單題

7. 下面的代碼輸出順序？

console.log(‘one‘);

setTimeout(function() {

console.log(‘two‘);

}, 0);

new Promise(function(resolve, reject) {

console.log(‘three‘);

resolve();

}).then(function() {

console.log(‘four‘);

});

console.log(‘five‘);

答案：one three five four two

分析：程序從上往下執行首先打印出來one，new Promise會執行他的構造函數這時候打印three，

然后因為Promise屬于異步microtask，這個時候會繼續執行主線程代碼打印出來five，這個時候會執行microtask隊列，

打印出來four，接下來執行macrotask任務隊列打印出來two

8. 下面的代碼輸出結果？

falseStr = "false";

if (true) {

var?falseStr;

if (falseStr) {

console.log("false" == true);

console.log("false" == false);

}

}

答案：false false

分析：下面的規則用于判定==運算符比較的兩個值是否相等：

1.如果兩個值具有相同的類型，那么就檢測它們的等同性。如果這兩個值完全相同，它們就相等。如果它們不完全相同，則它們不相等。

2.如果兩個值的類型不同，它們仍然可能相等。用下面的規則和類型轉換來檢測它們的相等性：

2.1 如果一個值是null,另一個值是undefined,它們相等。

2.2 如果一個值是數字，另一個值是字符串，把字符串轉換為數字，再用轉換后的值進行比較。

2.3 如果一個值是true，將它轉換成1，再進行比較。如果一個值為false，把它轉換成0，再進行比較。

2.4 如果一個值是對象，另一個值是數字或者字符串，將對象轉換成原始類型的值，再進行比較。

2.5 其他的數值組合是不相等的。

9. 下面的代碼輸出結果？

var length = 10;

var obj = {

length: 5,

func: function() {

console.log(this.length);

}

};

var func = obj.func;

func();

obj.func();

答案：10，5

分析：函數的作用域是在被定義時候決定，跟執行環境沒有關系，所以var func = obj.func;可以理解為在全局作用域定義了func

所以func函數內的this應該是全局，瀏覽器環境下是window，所以length為10。obj.func函數的執行上下文對象是obj，所以

length是5

10. PNG,GIF,JPG的區別及如何選？

GIF：

256色

無損，編輯 保存時候，不會損失。

支持簡單動畫

支持boolean透明，也就是要么完全透明，要么不透明

JPG：

millions of colors

有損壓縮， 意味著每次編輯都會失去質量

不支持透明

適合照片，實際上很多相機使用的都是這個格式

PNG：

無損，其實PNG有好幾種格式的，一般分為兩類：PNG8和truecolor PNGs

與GIF相比：

它通常會產生較小的文件大小

它支持阿爾法(變量)透明度

無動畫支持(可通過CSS3實現動畫效果)

與JPEG相比：

文件更大

無損

因此可以作為JPEG圖片中間編輯的中轉格式

結論：

JPEG適合照片

GIF適合動畫

PNG8適合其他任何種類——圖表，buttons，背景，圖表等等

11. 請用CSS實現屏幕正中間有個元素A，隨著屏幕寬度的增加，始終滿足以下條件：

1)A元素垂直居中于屏幕中央

2)A元素離屏幕左右邊距各10px

3)A元素的高度始終是A元素寬度的50%

答案：這道題目有多種實現方案，方案如下，

1.1 CSS3 flex來實現，對父元素設置樣式display: flex;?align-items: center;

1.2 父元素設置postion: relative; A元素設置樣式position: absolute; top: 50%; transform: translateY(-50%);

1.3 父元素設置postion: relative; A元素設置：postition: absolute; top: 0; bottom: 0; margin: auto 0;

2.1 A元素margin-left: 10px; margin-right: 10px;

3.1 這里借助于padding百分比來實現，padding百分比w3c解釋是：規定基于父元素的寬度的百分比的內邊距

總結

以上是生活随笔為你收集整理的html5画布funcition,2020前端基础知识学习第一节(示例代码)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。