一、選擇題

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

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

答案：A B D

分析：cookie通常用于存儲(chǔ)用戶等登錄信息，能夠存儲(chǔ)的數(shù)據(jù)是有限的，而且在指定域名下所有的請(qǐng)求都會(huì)帶上。

localStoage是H5新增用于本地存儲(chǔ)，能夠存儲(chǔ)更多的數(shù)據(jù)，通常是5M

session服務(wù)器端與客戶端建立的會(huì)話，不屬于瀏覽器端存儲(chǔ)技術(shù)

userData是IE專有的存儲(chǔ)方案，可以用來存儲(chǔ)一些數(shù)據(jù)

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

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

答案：A

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

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

A.true　　B.false

答案：false

分析：fn作為構(gòu)造函數(shù)，如果內(nèi)部沒有顯示的聲明return語句，默認(rèn)會(huì)返回一個(gè)fn的實(shí)例對(duì)象，也就是new fn()?instanceof fn會(huì)返回true，

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

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

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

答案：C

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

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

A.***abcABCD_89　　　　B.abc*abcABCDEF

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

答案：A，C

分析：

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

d*? ? ? ?　? 表示零個(gè)或者多個(gè)數(shù)字

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

[^d]*? ?　　表示匹配零個(gè)或者多個(gè)非數(shù)字字符

[w]　? ?　　表示匹配字母數(shù)字下劃線字符相當(dāng)于[0-9a-zA-Z_]

{6}　? ? ?　　表示要要進(jìn)行匹配的字符數(shù)要大于等于6

答案A，* 屬于初次匹配內(nèi)容，其他的是剩下規(guī)則匹配

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

A.5, 5　　B.undeinfed, undefined　　C.5, undefined　　D.程序拋錯(cuò)

答案：D

分析：程序執(zhí)行完之后會(huì)先打印5，然后拋錯(cuò)，因?yàn)関ar a = b = 5;相當(dāng)于b = 5; var a = 5；在非嚴(yán)格模式下，全局環(huán)境不聲明直接

賦值相當(dāng)于給window對(duì)象賦值，所以相當(dāng)于window.b = 5; 然而a的作用域是匿名自執(zhí)行函數(shù)內(nèi)，所以在全局作用域下面是訪問不到的

二、簡(jiǎn)單題

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

分析：程序從上往下執(zhí)行首先打印出來one，new Promise會(huì)執(zhí)行他的構(gòu)造函數(shù)這時(shí)候打印three，

然后因?yàn)镻romise屬于異步microtask，這個(gè)時(shí)候會(huì)繼續(xù)執(zhí)行主線程代碼打印出來five，這個(gè)時(shí)候會(huì)執(zhí)行microtask隊(duì)列，

打印出來four，接下來執(zhí)行macrotask任務(wù)隊(duì)列打印出來two

8. 下面的代碼輸出結(jié)果？

falseStr = "false";

if (true) {

var?falseStr;

if (falseStr) {

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

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

}

}

答案：false false

分析：下面的規(guī)則用于判定==運(yùn)算符比較的兩個(gè)值是否相等：

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

2.如果兩個(gè)值的類型不同，它們?nèi)匀豢赡芟嗟取Ｓ孟旅娴囊?guī)則和類型轉(zhuǎn)換來檢測(cè)它們的相等性：

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

2.2 如果一個(gè)值是數(shù)字，另一個(gè)值是字符串，把字符串轉(zhuǎn)換為數(shù)字，再用轉(zhuǎn)換后的值進(jìn)行比較。

2.3 如果一個(gè)值是true，將它轉(zhuǎn)換成1，再進(jìn)行比較。如果一個(gè)值為false，把它轉(zhuǎn)換成0，再進(jìn)行比較。

2.4 如果一個(gè)值是對(duì)象，另一個(gè)值是數(shù)字或者字符串，將對(duì)象轉(zhuǎn)換成原始類型的值，再進(jìn)行比較。

2.5 其他的數(shù)值組合是不相等的。

9. 下面的代碼輸出結(jié)果？

var length = 10;

var obj = {

length: 5,

func: function() {

console.log(this.length);

}

};

var func = obj.func;

func();

obj.func();

答案：10，5

分析：函數(shù)的作用域是在被定義時(shí)候決定，跟執(zhí)行環(huán)境沒有關(guān)系，所以var func = obj.func;可以理解為在全局作用域定義了func

所以func函數(shù)內(nèi)的this應(yīng)該是全局，瀏覽器環(huán)境下是window，所以length為10。obj.func函數(shù)的執(zhí)行上下文對(duì)象是obj，所以

length是5

10. PNG,GIF,JPG的區(qū)別及如何選？

GIF：

256色

無損，編輯 保存時(shí)候，不會(huì)損失。

支持簡(jiǎn)單動(dòng)畫

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

JPG：

millions of colors

有損壓縮， 意味著每次編輯都會(huì)失去質(zhì)量

不支持透明

適合照片，實(shí)際上很多相機(jī)使用的都是這個(gè)格式

PNG：

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

與GIF相比：

它通常會(huì)產(chǎn)生較小的文件大小

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

無動(dòng)畫支持(可通過CSS3實(shí)現(xiàn)動(dòng)畫效果)

與JPEG相比：

文件更大

無損

因此可以作為JPEG圖片中間編輯的中轉(zhuǎn)格式

結(jié)論：

JPEG適合照片

GIF適合動(dòng)畫

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

11. 請(qǐng)用CSS實(shí)現(xiàn)屏幕正中間有個(gè)元素A，隨著屏幕寬度的增加，始終滿足以下條件：

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

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

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

答案：這道題目有多種實(shí)現(xiàn)方案，方案如下，

1.1 CSS3 flex來實(shí)現(xiàn)，對(duì)父元素設(shè)置樣式display: flex;?align-items: center;

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

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

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

3.1 這里借助于padding百分比來實(shí)現(xiàn)，padding百分比w3c解釋是：規(guī)定基于父元素的寬度的百分比的內(nèi)邊距

總結(jié)

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

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