當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

欢聚时代2017前端笔试C卷

發布時間：2024/1/18 HTML 33 豆豆

生活随笔收集整理的這篇文章主要介紹了欢聚时代2017前端笔试C卷小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1、使用了"use strict"后，以下哪些描述錯誤
正確答案: A B C ?
"use strict";
var x = 17;
with (obj) {
? x;
}
//會報obj未定義的錯誤

"use strict";
var x;
delete x;
//運行正常

function f(a){
"use strict";
a = 42;
? ? return a==arguments[0];
}
f(5); //運行結果為true

function f(str){
"use strict";
? ? return eval(str);
}
f(‘alert(1)’);
//運行正常，彈窗1的對話框
解析：
A：嚴格模式下禁止使用with語句，因為with語句無法在編譯時就確定屬性到底歸屬哪個對象。
B：嚴格模式下無法刪除變量。只有configurable設置為true的對象屬性，才能被刪除。
C：嚴格模式下arguments不再追蹤參數的變化，在函數內部，參數a被重新賦值為42，但arguments[0]仍然為5。
2、以下輸出結果為true的有
正確答案: A B C
’’==false
’’==0
’’==[]
’’=={}
解析：==先將待比較的操作數轉換為Number類型
‘’、false、0、[]、都可以轉換為number類型
{}轉換為number類型是NaN
3、以下代碼執行的結果是（）
var a = 0;
function b(c) {
?console.log(a);
?var a = 1;
?arguments[0] = 2;
?console.log(c);
?console.log(a);
}
b(3);
console.log(a);
正確答案: A?
undefined,2,1,0
1,2,2,0
undefined,3,1,0
undefined,3,2,0
解析：非嚴格模式下，arguments追蹤參數的變化
4、以下代碼的執行后將輸出（）
var a = 0;
var obj = {
?a:'obj',
?b:function(a){
?setTimeout(function(){
?console.log(this.a);
?},1000)
?}
}
obj.b(1);
正確答案: C ?
undefined
’obj’
0
1
解析：setTimeout函數中的this指向的是window對象
5、以下運算結果不是number類型的是
正確答案: D
"a"-1
1/0
0 && "a"
new Number(1)
解析：D項創建的是對象
var x="a"-1;
console.log(x); //NaN
console.log(typeof x); //number
var y=1/0;?
console.log(y); //Infinity
console.log(typeof y); //number
var z=0 && "a";
console.log(z); //0
console.log(typeof z); //number
var w=new Number(1);
console.log(w); //[Number: 1]
console.log(typeof w); //object
6、[“1", "2", "3"].map(parseInt)的執行結果是？
正確答案: D
["1", "2", "3"]
[1, 2, 3]
[0, 1, 2]
其他
解析：parseInt函數的參數有兩個，第二個參數表示的是參數1的進制
?map方法在調用callback函數時,會給回調函數傳遞三個參數:當前正在遍歷的元素, 元素索引, 原數組本身.
parseInt會忽略第三個參數，但不會忽略第二個參數，即parseInt將元素的索引當做進制數來用，故：
[ 1, NaN, NaN ]
7、下面代碼執行后，foo.x的值是？( ? ? )
var foo = {n: 1};
var bar = foo;
foo.x = foo = {n: 2};
正確答案: D
1
2
程序報錯
其他
解析：
foo指向對象{n:1}
bar指向對象{n:1}
首先foo斷開原來的指向，指向{n:2}，查找foo.x當然找不到，故undefined
若將此題改成：
var foo = {n: 1,x:1};
var bar = foo;
foo.x = foo = {n: 2};
更有迷惑力，其實結果還是undefined
8、關于SVG和CANVAS，下面陳述正確的有?
正確答案: D F
SVG做動畫性能要優于CANVAS
CANVAS做動畫性能要優于SVG
SVG產生的dom數量比CANVAS要少
CANVAS產生的dom數量比SVG要少
CANVAS可以使用css設置動畫樣式
SVG可以使用css設置動畫樣式
解：CANVAS產生的dom數量比SVG要少、SVG可以使用css設置動畫樣式
SVG 是一種使用 XML 描述 2D 圖形的語言。 Canvas 通過 JavaScript 來繪制 2D 圖形。
Canvas ：
依賴分辨率
不支持事件處理器
弱的文本渲染能力
能夠以 .png 或 .jpg 格式保存結果圖像
最適合圖像密集型的游戲，其中的許多對象會被頻繁重繪
SVG ：
不依賴分辨率
支持事件處理器
最適合帶有大型渲染區域的應用程序（比如谷歌地圖）復雜度高會減慢渲染速度（任何過度使用 DOM 的應用都不快）
不適合游戲應用
9、下述可正確注釋html代碼的有？
正確答案: C
// <div></div>
# <div></div>

/* <div></div> */
10、下述片段中，el指向的dom是？ ( ? ? )
html:
<div id=”foo”>
<p id=”foo”></p>
</div>
javascript:
var el = document.getElementById('foo');
正確答案: C?
<div id=”foo”></div>
<p id=”foo”></p>
無法獲取值
解析：id必須唯一，否則無法獲取值
11、typeof function( ){} 輸出的是_____
答案：function
12、在ES6中提供了__用于二進制的操作。
答案：ArrayBuffer、TypeArray、DataView
連續的內存緩沖區、特定類型的數組、工具類
13、請寫出HTML5新增的布局標簽_____
答案：header、footer、nav、aside、hgroup、section、figure、menu、artical
14、請使用CSS3畫出一個線性漸變，漸變的方向是從右上角到左下角，起點顏色是從白色到黑色，請寫出標準的寫法____
答案：background:line-gradient(to bottom left,#fff,#000);
15、Doctype 嚴格模式與混雜模式的區別在哪里?
答案：
1）、<!DOCTYPE> 聲明位于文檔中的最前面，處于 <html> 標簽之前。告知瀏覽器以何種模式來渲染文檔。
2）、嚴格模式的排版和 JS 運作模式是以該瀏覽器支持的最高標準運行。
3）、在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。
4）、DOCTYPE不存在或格式不正確會導致文檔以混雜模式呈現。
嚴格模式主要有以下限制：
變量必須聲明后再使用
函數的參數不能有同名屬性，否則報錯
不能使用with語句
不能對只讀屬性賦值，否則報錯
不能使用前綴0表示八進制數，否則報錯
不能刪除不可刪除的屬性，否則報錯
不能刪除變量delete prop，會報錯，只能刪除屬性delete global[prop]
eval不會在它的外層作用域引入變量
eval和arguments不能被重新賦值
arguments不會自動反映函數參數的變化
不能使用arguments.callee
不能使用arguments.caller
禁止this指向全局對象
不能使用fn.caller和fn.arguments獲取函數調用的堆棧
增加了保留字（比如protected、static和interface）
設立”嚴格模式”的目的，主要有以下幾個：
消除Javascript語法的一些不合理、不嚴謹之處，減少一些怪異行為;
消除代碼運行的一些不安全之處，保證代碼運行的安全；
提高編譯器效率，增加運行速度；
為未來新版本的Javascript做好鋪墊。
16、null和undefined的區別，null == undefined的結果是？
答案：
null是一個表示無的空對象，轉為數值是0，undefined是一個表示無的原始值，轉為數值是undefined
對象的屬性未定義時undefined
聲明變量未定義時undefined
函數調用時參數為賦值時undefined
函數沒有返回之時默認undefined
null==undefined的結果是true
17、background-position:top left,其中top，left對應的css盒子模型中的哪個矩形框的左上角，可以修改它的默認值嗎？如果可以如何修改？
答案：background-position相對于padding-box
通過修改background-origin:content-box | padding-box | border-box
18、css屬性float的屬性值有哪些，描述它們的作用
答案：
left:元素向左浮動。
right:元素向右浮動。
none :默認值。元素不浮動，并會顯示在其在文本中出現的位置。
inherit:規定應該從父元素繼承 float 屬性的值。
19、sass是什么？它有哪些好處和壞處？
答案：CSS預處理器，
好處：可以使用變量、mixin、函數、規則嵌套、顏色處理等，
壞處：css的文件體積和復雜度不可控、調試難度增加、成本等
20、function fun(n,o){
console.log(o);
return {
fun:function(m){
return fun(m,n);
}
}
}
var a = fun(0).fun(1);a.fun(2);a.fun(3);
var b = fun(0).fun(1).fun(2).fun(3);
var c =fun(0);c.fun(1);c.fun(2);c.fun(3);
三行a,b,c的輸出分別是什么？
答案：
undefined、0、1、1
undefined、0、1、2
undefined、0、0、0
21、ECMAScript和javaScript的關系？
答案：JavaScript包含核心（ECMAScript）、文檔對象模型（DOM）、瀏覽器對象模型（BOM）
22、那些操作會造成內存泄漏？
答案：閉包、setTimeout函數的第一個參數使用字符串而不是函數時、控制臺日志、對象的循環引用、從外到內執行appendChild、
給DOM對象用attachEvent綁定事件、反復重寫同一個屬性
23、你是否了解或使用過MVC框架，簡單陳述下你對MVC的理解
答案：MVC 是一種使用 MVC（Model View Controller 模型-視圖-控制器）設計創建 Web 應用程序的模式：
Model（模型）表示應用程序核心（比如數據庫記錄列表）；
View（視圖）顯示數據（數據庫記錄）；
Controller（控制器）處理輸入（寫入數據庫記錄）；
優點：
分層有助于管理復雜的應用程序、分層同時也簡化了分組開發；
每個部分都可以獨立的改變而不影響其他部分，從而大大提高了應用的靈活性和重用性；
24、求 10000 以內 3 和 5 的倍數和，寫出JavaScript實現函數
答案
var getSum=function(num){
? ? if (!num||(typeof num!='number')) {
? ? ? ? return 0;
? ? }
? ? var sum=0;
? ? for(var i=0;i<num;i++){
? ? ? ? if (i%3==0||i%5==0) {
? ? ? ? ? ? sum+=i;
? ? ? ? }
? ? }
? ? return sum;
}
25、請編寫一個JavaScript函數，實現清除數據中重復的元素
答案
var del=function(arr){
? ? if (!arr||arr.length==0) {
? ? ? ? return [];
? ? }
? ? return [...new Set(arr)];
}
26、用純css實現某個元素的雙邊框效果，邊框大小都為5，如圖

答案：用outline或box-shadow
（1）background:yellow;
border:5px solid red;
outline: 5px solid black;
（2）background:yellow;
box-shadow：5px 5px 5px 5px red;
box-shadow：10px 10px 10px 10px black;
27、請用html和css實現以下效果（移動設備），要求
①三個圓形icon大小為80px，固定不變，
②被三個圓形icon劃分的四個間距相等，
③黑色背景需要占滿移動設備的寬度

答案：
<div class="icon-list">
<div class="icon 1"></div>
<div class="icon 2"></div>
<div class="icon 3"></div>
</div>
?
.icon-list{
width:100%; ?height:100px;
background:#f00;
display:flex;
justify-content:space-between; ?/*三個真實元素之間有間距且相等*/

}

/*給父元素添加before和after兩個偽元素，相當于有五個子元素，只是第一個和最后一個看不見*/

.icon-list:before,.icon-list:after{ ??
content: "";
}
.icon{
margin-top: 10px;
width:80px;
height:80px;
border-radius:40px;
background:#fff;
}

總結

以上是生活随笔為你收集整理的欢聚时代2017前端笔试C卷的全部內容，希望文章能夠幫你解決所遇到的問題。

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