整理的前端面試題目

enda 發(fā)布于2019-08-20 18:02 / 359人閱讀

摘要：優(yōu)化圖片加載方式圖片懶加載，在頁面上的未可視區(qū)域可以添加一個(gè)滾動(dòng)條事件，判斷圖片位置與瀏覽器頂端的距離與頁面的距離，如果前者小于后者，優(yōu)先加載。

實(shí)現(xiàn)var a=add(2)(3)(4);//9

第一種方式：

function add(a) {
    var temp = function (b) {
        return add(a + b);
    }
    temp.valueOf = function () {
        return a;
    }
    return temp;
}
var result=add(2)(3)(4);
console.log(result);

第二種方式：

function add(){
    var args=Array.prototype.slice.call(arguments);
    var fn=function(){
        var fnArgs=Array.prototype.slice.call(arguments);
        return add.apply(null,args.concat(fnArgs));
    }
    fn.valueOf=function(){
        return args.reduce(function(a,b){
            return a+b;
        })
    }
    return fn;
}
var result=add(2)(3)(4);
console.log(result);

第三種方式

let add=(...a)=>{
    let helper=(...b)=>{
        return add(...[...a,...b]);
    };
    helper.valueOf=()=>{
        let sum=0;
        for(let item of a){
            sum+=item;
        }
        return sum;
    }
    return helper;
};
var result=add(2)(3)(4);
console.log(result);

第四種方式：

function add(num){
    num+=~~add;
    add.num=num;
    return add;
}
add.valueOf=function(){
    return add.num;
}
var result=add(2)(3)(4);
console.log(result);

這里需要說明一下的是：

String類型的toString 方法需要存在并且返回原始類型，那么如果返回的不是一個(gè)原始類型，則會(huì)去繼續(xù)尋找對(duì)象的 valueOf 方法
Function類型轉(zhuǎn)換：與 Number 轉(zhuǎn)換類似，如果函數(shù)的 valueOf 方法返回的不是一個(gè)原始類型，會(huì)繼續(xù)找到它的 toString 方法.

判斷是否為數(shù)組

if(typeof Array.isArray==="undefined")
{
  Array.isArray = function(arg){
        return Object.prototype.toString.call(arg)==="[object Array]"
    }; 
}

解釋代碼

var a;
alert(typeof a); // undefined   Undefined是一個(gè)只有一個(gè)值的數(shù)據(jù)類型，這個(gè)值就是“undefined”，在使用var聲明變量但并未對(duì)其賦值進(jìn)行初始化時(shí)，這個(gè)變量的值就是undefined
alert(b); // 報(bào)錯(cuò)  由于未聲明將報(bào)錯(cuò)


var c = null;
alert(typeof c); //object  null是一個(gè)只有一個(gè)值的數(shù)據(jù)類型，這個(gè)值就是null。表示一個(gè)空指針對(duì)象，所以用typeof檢測會(huì)返回”object”


[] == false; // true
[] == ![];   // true  嘗試將Object轉(zhuǎn)換成number或string，取決于另外一個(gè)對(duì)比量的類型

實(shí)現(xiàn)隨機(jī)選取10--100之間的10個(gè)數(shù)字，存入一個(gè)數(shù)組，并排序

var iArray = [];
function getRandom(istart, iend){
    //選擇的區(qū)間
    var iChoice = iend - istart + 1;
    //乘上區(qū)間加上起始位
    return Math.floor(Math.random() * iChoice + istart);
}
for (var i = 0; i < 10; i++) {
    iArray.push(getRandom(0, 200));
}
iArray.sort(function(a,b){
    return a-b;
});

arguments、callee、caller

arguments.length是實(shí)參的個(gè)數(shù)

function inner(){
    console.log(arguments.callee);//--callee放回正在執(zhí)行的函數(shù)本身的引用       指向擁有這個(gè)arguments對(duì)象的函數(shù)，即inner()
    console.log(arguments.callee.caller);//--這里是callee.caller  這個(gè)屬性保存著調(diào)用當(dāng)前函數(shù)的函數(shù)的引用,即outer()
    console.log(inner.caller);//[Function: outer]
}
function outer(){
    inner();
}
outer();
 
//嚴(yán)格模式下，不允許訪問arguments.callee和arguments.caller屬性  
 
"use strict";
// 兩次都是1
void function fn(a) {
    console.log(arguments[0]);//1
    a = 2;
    console.log(arguments[0]);//1
}(1);

找出數(shù)組中的最大值

//第一種方法
var a=[1,2,3,6,5,4];
var max=Math.max.apply(null,a);
console.log(max);
//第二種方法
var a=[1,2,3,6,5,4];
var max=eval("Math.max("+a.toString()+")");
console.log(max);

斐波那契數(shù)列

function* fib(n){
    let [a,b]=[1,1];
    while(n--){
        yield a;
        [a,b]=[b,a+b];
    }
}
for(let item of fib(5)){
    console.log(item);
}

判斷一個(gè)字符串中出現(xiàn)次數(shù)最多的字符，并統(tǒng)計(jì)次數(shù)

var s = "aaabbbcccaaabbbaaabbbbbbbbbb";
var a = s.split("");
a.sort();
//排序之后就變成了["a", "a", "a", "a", "a", "a", "a", "a", "a", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b", "c", "c", "c"]
s = a.join("");
var pattern = /(w)1*/g;
//正則表達(dá)式中的小括號(hào)"()"。是代表分組的意思。 如果再其后面出現(xiàn)1則是代表與第一個(gè)小括號(hào)中要匹配的內(nèi)容相同。
//注意：1必須與小括號(hào)配合使用
var ans = s.match(pattern);
//ans 這時(shí)候就變成了 ["aaaaaaaaa", "bbbbbbbbbbbbbbbb", "ccc"]
ans.sort(function(a, b) {
  return a.length < b.length;
});;
console.log(ans[0][0] + ": " + ans[0].length);

把queryString轉(zhuǎn)換成js對(duì)象

function getQueryObject(url){
    url=url==null?window.location.href:url;
    var search=url.substring(url.lastIndexOf("?")+1);
    var obj={};
    var reg=/([^?&=]+)=([^?&=]*)/g;
    search.replace(reg,function(rs,$1,$2){
        var name=decodeURIComponent($1);
        var val=decodeURIComponent($2);
        obj[name]=String(val);
        return rs;
    })
    return obj;
}

getQueryObject("http://www.cnblogs.com/zichi/p/4359786.html?aa=111&bb=3dadsads&43=43a");
//輸出結(jié)果為{43: "43a", aa: "111", bb: "3dadsads"}

js閉包問題

function fun(n,o) {
  console.log(o)
  return {
    fun:function(m){
      return fun(m,n);
    }
  };
}
var a = fun(0);  a.fun(1);  a.fun(2);  a.fun(3);//undefined,?,?,?
var b = fun(0).fun(1).fun(2).fun(3);//undefined,?,?,?
var c = fun(0).fun(1);  c.fun(2);  c.fun(3);//undefined,?,?,?
//問:三行a,b,c的輸出分別是什么？
//答案：
//a: undefined,0,0,0
//b: undefined,0,1,2
//c: undefined,0,1,1

prototype問題

function Foo() {
    getName = function () { alert (1); };
    return this;
}
Foo.getName = function () { alert (2);};
Foo.prototype.getName = function () { alert (3);};
var getName = function () { alert (4);};
function getName() { alert (5);}

//請(qǐng)寫出以下輸出結(jié)果：
Foo.getName();
getName();
Foo().getName();
getName();
new Foo.getName();
new Foo().getName();
new new Foo().getName();




//答案：
Foo.getName();//2
getName();//4
Foo().getName();//1
getName();//1
new Foo.getName();//2
new Foo().getName();//3
new new Foo().getName();//3

各瀏覽器內(nèi)核

alt和title的區(qū)別

alt用來指定替換文字，只能用在img、area和input元素中（包括applet元素），用于網(wǎng)頁中圖片無法正常顯示時(shí)給用戶提供文字說明使其了解圖像信息
title用來為元素提供額外說明信息,舉例來說：給超鏈接標(biāo)簽a添加了title屬性，把鼠標(biāo)移動(dòng)到該鏈接上面時(shí)，就會(huì)顯示title的內(nèi)容，以達(dá)到補(bǔ)充說明或者提示的效果
強(qiáng)調(diào)的是：alt 在ie7下使用在img標(biāo)簽上確實(shí)跟使用title的效果一樣

strong和em標(biāo)簽的區(qū)別

strong粗體強(qiáng)調(diào)標(biāo)簽，強(qiáng)調(diào)表示內(nèi)容的重要性
em斜體強(qiáng)調(diào)標(biāo)簽，更強(qiáng)烈的強(qiáng)調(diào)，表示內(nèi)容的強(qiáng)調(diào)點(diǎn)

漸近增強(qiáng)和優(yōu)雅降級(jí) ## 利用多個(gè)域名來存儲(chǔ)網(wǎng)站資源會(huì)更有效

CDN緩存更方便
突破瀏覽器并發(fā)限制
節(jié)約cookie帶寬
節(jié)約主域名的連接數(shù)，優(yōu)化頁面響應(yīng)速度
防止不必要的安全問題

src和href的區(qū)別

src用于替換當(dāng)前元素，href用于在當(dāng)前文檔和引用資源之間確立聯(lián)系。
src是source的縮寫，指向外部資源的位置，指向的內(nèi)容將會(huì)嵌入到文檔中當(dāng)前標(biāo)簽所在位置；在請(qǐng)求src資源時(shí)會(huì)將其指向的資源下載并應(yīng)用到文檔內(nèi)，當(dāng)瀏覽器解析到該元素時(shí)，會(huì)暫停其他資源的下載和處理，直到將該資源加載、編譯、執(zhí)行完畢，圖片和框架等元素也如此，類似于將所指向資源嵌入當(dāng)前標(biāo)簽內(nèi)。這也是為什么將js腳本放在底部而不是頭部。
href是Hypertext Reference的縮寫，指向網(wǎng)絡(luò)資源所在位置，建立和當(dāng)前元素（錨點(diǎn)）或當(dāng)前文檔（鏈接）之間的鏈接，如果我們在文檔中添加那么瀏覽器會(huì)識(shí)別該文檔為css文件，就會(huì)并行下載資源并且不會(huì)停止對(duì)當(dāng)前文檔的處理。這也是為什么建議使用link方式來加載css，而不是使用@import方式。

優(yōu)化圖片加載方式

圖片懶加載，在頁面上的未可視區(qū)域可以添加一個(gè)滾動(dòng)條事件，判斷圖片位置與瀏覽器頂端的距離與頁面的距離，如果前者小于后者，優(yōu)先加載。
如果為幻燈片、相冊等，可以使用圖片預(yù)加載技術(shù)，將當(dāng)前展示圖片的前一張和后一張優(yōu)先下載。
如果圖片為css圖片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技術(shù)。
如果圖片過大，可以使用特殊編碼的圖片，加載時(shí)會(huì)先加載一張壓縮的特別厲害的縮略圖，以提高用戶體驗(yàn)。
如果圖片展示區(qū)域小于圖片的真實(shí)大小，則因在服務(wù)器端根據(jù)業(yè)務(wù)需要先行進(jìn)行圖片壓縮，圖片壓縮后大小與展示一致。

跨域通信 ## js定義方法的方法 ##

一般性的用Object.create創(chuàng)建對(duì)象會(huì)比較少用

自己實(shí)現(xiàn)bind方法

Function.prototype.bind=Function.prototype.bind||function(context){
    var self=this;
    return function(){
        return self.apply(contex,arguments);
    };
}

HTTP Method一般有哪幾種 ## display:none和visiblity:hidden區(qū)別 ##

第四個(gè)區(qū)別點(diǎn)怎么理解呢：如果display:none的容器中如果有img 則它的background-image都不會(huì)請(qǐng)求相應(yīng)的資源，而visibility會(huì)請(qǐng)求

web安全及防護(hù)

參考文獻(xiàn)：
BAT及各大互聯(lián)網(wǎng)公司2014前端筆試面試題--Html,Css篇
BAT及各大互聯(lián)網(wǎng)公司2014前端筆試面試題--JavaScript篇
這10道javascript筆試題你都會(huì)么
大部分人都會(huì)做錯(cuò)的經(jīng)典JS閉包面試題
一道常被人輕視的前端JS面試題
/bVQYiH