前端面試題總結--1 JS篇
妹子就要找工作了,所以時候要研究一下面試題,總結一下,查缺補漏。
所以要開始搜刮各種的面試題做練習啦~~
1.JS中DOM節點操作,新增,刪除,插入,查詢,建立,複製節點
//1.建立節點
document.createElement();//建立一個新元素
document.createTextNode();//建立一個文字節點
//2.查詢節點
document.getElementById('');//按id查詢
document.getElementsByClassName('');//按類名查詢
document.getElementsByTagName('' );//按節點名稱查詢
document.getElementsByName('');//按name查詢
//3複製節點
cloneNode(true)//true:深複製,複製該元素以及後代元素
cloneNode(false)//false:淺複製,只複製節點本身
//4節點操作
appendChild(node)//在末尾新增元素
insertBefore(node,targrt)//在targrt幾點之前插入元素
removeChild(node)//移除父節點的某個子節點
replaceChild(newnode,oldnode)//將父元素的某個子元素替換為新元素
2.實現一個函式clone,可以對JavaScript中的5種主要的資料型別(包括Number、String、Object、Array、Boolean)進行值複製。
function clone(obj){
var o;
switch (typeof obj){
case 'undefined':
break;
case 'string':
o=obj+'';
break ;
case 'number':
o= obj+0;
break;
case 'boolean':
o = obj;
break;
case 'object':
if(obj === null){
o = null;
}else{
if(Object.prototype.toString.call(obj).slice(8, -1) === "Array"){
o = [];
for(var i=0;i<obj.length;i++){
o.push(clone(obj[i]));
}
}else{
o={};
for(var j in obj){
o[j] = clone(obj[j]);
}
}
}
break;
default:
o = obj;
break;
}
return o;
}
3.javascript的typeof返回哪些資料型別
string,number,boolean,undefined,object,function
4.js 實現陣列去重
陣列去重這個問題好像還挺多問到的,這個問題並不是很困難,方法也有很多,這裡我只寫了兩種。
function sort1(){//方法1
var arr1 = [0,1,2,2,3,5,8,8,4,4,6];
var arr2 = [];
for(var i=0;i<arr1.length;i++){
if(arr2.indexOf(arr1[i]) < 0){
arr2.push(arr1[i]);
}
}
return arr2;
}
function sort2(){//方法2
var arr1 = [0,1,2,2,3,5,8,8,4,4,6];
var arr2 = [];
arr1.sort(function (a,b) {
return a-b;
})
for(var i=0;i<arr1.length-1;i++){
if(arr1[i] != arr1[i+1]){
arr2.push(arr1[i]);
}
}
arr2.push(arr1[arr1.length-1]);
return arr2;
}
5.統計一行字串中字母個數或出現次數最多的字母
var str = "aaaabbbccccddfgh";
var obj = {};
for(var i=0;i<str.length;i++){
var v = str.charAt(i);
if(obj[v] & obj[v].value == v){
obj[v].count = ++ obj[v].count;
}else{
obj[v] = {};
obj[v].count = 1;
obj[v].value = v;
}
}
for(key in obj){
document.write(obj[key].value +'='+obj[key].count+' '); // a=4 b=3 c=4 d=2 f=1 g=1 h=1
}
6.變數提升
寫出下列程式的執行結果
function test() {
console.log(a);
console.log(foo());
var a = 1;
function foo() {
return 2;
}
}
test();
答案為undefined,2
關於變數提升的問題,可以參見博主的文章 關於js中變數作用於和變數提升的那些事
7.寫一個function,清除字串前後的空格。(相容所有瀏覽器)
function trim(str) {
if (str && typeof str === "string") {
return str.replace(/(^\s*)|(\s*)$/g,""); //去除前後空白符
}
}
這裡主要是考察的正則表示式的使用,我決定明天要複習一下正則表示式啦,明天博主會更的~
8.請描述一下cookies,sessionStorage和localStorage的區別
sessionStorage用於本地儲存一個會話(session)中的資料,這些資料只有在同一個會話中的頁面才能訪問並且當會話結束後資料也隨之銷燬。因此sessionStorage不是一種持久化的本地儲存,僅僅是會話級別的儲存。而localStorage用於持久化的本地儲存,除非主動刪除資料,否則資料是永遠不會過期的。
web storage和cookie的區別
Web Storage的概念和cookie相似,區別是它是為了更大容量儲存設計的。Cookie的大小是受限的,並且每次你請求一個新的頁面的時候Cookie都會被髮送過去,這樣無形中浪費了頻寬,另外cookie還需要指定作用域,不可以跨域呼叫。
除此之外,Web Storage擁有setItem,getItem,removeItem,clear等方法,不像cookie需要前端開發者自己封裝setCookie,getCookie。但是Cookie也是不可以或缺的:Cookie的作用是與伺服器進行互動,作為HTTP規範的一部分而存在 ,而Web Storage僅僅是為了在本地“儲存”資料而生。
9.引數的作用範圍
考慮下面的JavaScript程式碼:
(function() { var a = b = 5;})();console.log(b);
會輸出什麼樣的結果?
回答:
上面的程式碼會列印 5。
這個問題的訣竅是,這裡有兩個變數宣告,但 a 使用關鍵字var宣告的。代表它是一個函式的區域性變數。與此相反,b 變成了全域性變數。這個問題的另一個訣竅是,它沒有使用嚴格模式 (‘use strict’;) 。如果啟用了嚴格模式,程式碼就會引發ReferenceError的錯誤:B沒有定義(b is not defined)。請記住,嚴格模式,則需要明確指定,才能實現全域性變數宣告。比如,你應該寫:
(function() { ‘use strict’; var a = window.b = 5;})();console.log(b);
10.this 的用法
寫出一下程式的執行結果
var fullname = 'John Doe';
var obj = {
fullname: 'Colin Ihrig',
prop: {
fullname: 'Aurelio De Rosa',
getFullname: function() {
return this.fullname;
}
}
};
console.log(obj.prop.getFullname());
var test = obj.prop.getFullname;
console.log(test());
答案是Aurelio De Rosa和John Doe。
原因是,在一個函式中,this的行為,取決於JavaScript函式的呼叫方式和定義方式,而不僅僅是看它如何被定義的。
在第一個 console.log()呼叫中,getFullname() 被呼叫作為obj.prop物件的函式。所以,上下文指的是後者,函式返回該物件的fullname。與此相反,當getFullname()被分配到test變數時,上下文指的是全域性物件(window)。這是因為test是被隱式設定為全域性物件的屬性。出於這個原因,該函式返回window的fullname,即定義在第一行的那個值。