整理的前端面試題目

時間 2019-11-08

原文原文鏈接

實現var a=add(2)(3)(4);//9

第一種方式：javascript

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);

第二種方式：css

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);

第三種方式html

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);

這裏須要說明一下的是：java

String類型的toString 方法須要存在而且返回原始類型，那麼若是返回的不是一個原始類型，則會去繼續尋找對象的 valueOf 方法
Function類型轉換：與 Number 轉換相似，若是函數的 valueOf 方法返回的不是一個原始類型，會繼續找到它的 toString 方法.web

判斷是否爲數組

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

解釋代碼

var a;
alert(typeof a); // undefined   Undefined是一個只有一個值的數據類型，這個值就是「undefined」，在使用var聲明變量但並未對其賦值進行初始化時，這個變量的值就是undefined
alert(b); // 報錯  因爲未聲明將報錯


var c = null;
alert(typeof c); //object  null是一個只有一個值的數據類型，這個值就是null。表示一個空指針對象，因此用typeof檢測會返回」object」


[] == false; // true
[] == ![];   // true  嘗試將Object轉換成number或string，取決於另一個對比量的類型

實現隨機選取10--100之間的10個數字，存入一個數組，並排序

var iArray = [];
function getRandom(istart, iend){
    //選擇的區間
    var iChoice = iend - istart + 1;
    //乘上區間加上起始位
    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是實參的個數面試

function inner(){
    console.log(arguments.callee);//--callee放回正在執行的函數自己的引用       指向擁有這個arguments對象的函數，即inner()
    console.log(arguments.callee.caller);//--這裏是callee.caller  這個屬性保存着調用當前函數的函數的引用,即outer()
    console.log(inner.caller);//[Function: outer]
}
function outer(){
    inner();
}
outer();
 
//嚴格模式下，不容許訪問arguments.callee和arguments.caller屬性  
 
'use strict';
// 兩次都是1
void function fn(a) {
    console.log(arguments[0]);//1
    a = 2;
    console.log(arguments[0]);//1
}(1);

找出數組中的最大值

//第一種方法
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);

斐波那契數列

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);
}

判斷一個字符串中出現次數最多的字符，並統計次數

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;
//正則表達式中的小括號"()"。是表明分組的意思。 若是再其後面出現\1則是表明與第一個小括號中要匹配的內容相同。
//注意：\1必須與小括號配合使用
var ans = s.match(pattern);
//ans 這時候就變成了 ["aaaaaaaaa", "bbbbbbbbbbbbbbbb", "ccc"]
ans.sort(function(a, b) {
  return a.length < b.length;
});;
console.log(ans[0][0] + ': ' + ans[0].length);

把queryString轉換成js對象

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");
//輸出結果爲{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);}

//請寫出如下輸出結果：
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

各瀏覽器內核

alt和title的區別

alt用來指定替換文字，只能用在img、area和input元素中（包括applet元素），用於網頁中圖片沒法正常顯示時給用戶提供文字說明使其瞭解圖像信息
title用來爲元素提供額外說明信息,舉例來講：給超連接標籤a添加了title屬性，把鼠標移動到該連接上面時，就會顯示title的內容，以達到補充說明或者提示的效果
強調的是：alt 在ie7下使用在img標籤上確實跟使用title的效果同樣正則表達式

strong和em標籤的區別

strong粗體強調標籤，強調錶示內容的重要性
em斜體強調標籤，更強烈的強調，表示內容的強調點跨域

漸近加強和優雅降級 ##

利用多個域名來存儲網站資源會更有效

CDN緩存更方便
突破瀏覽器併發限制
節約cookie帶寬
節約主域名的鏈接數，優化頁面響應速度
防止沒必要要的安全問題數組

src和href的區別

src用於替換當前元素，href用於在當前文檔和引用資源之間確立聯繫。
src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置；在請求src資源時會將其指向的資源下載並應用到文檔內，當瀏覽器解析到該元素時，會暫停其餘資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，相似於將所指向資源嵌入當前標籤內。這也是爲何將js腳本放在底部而不是頭部。
href是Hypertext Reference的縮寫，指向網絡資源所在位置，創建和當前元素（錨點）或當前文檔（連接）之間的連接，若是咱們在文檔中添加<link href="common.css" rel="stylesheet"/>那麼瀏覽器會識別該文檔爲css文件，就會並行下載資源而且不會中止對當前文檔的處理。這也是爲何建議使用link方式來加載css，而不是使用@import方式。

優化圖片加載方式

圖片懶加載，在頁面上的未可視區域能夠添加一個滾動條事件，判斷圖片位置與瀏覽器頂端的距離與頁面的距離，若是前者小於後者，優先加載。
若是爲幻燈片、相冊等，可使用圖片預加載技術，將當前展現圖片的前一張和後一張優先下載。
若是圖片爲css圖片，可使用CSSsprite，SVGsprite，Iconfont、Base64等技術。
若是圖片過大，可使用特殊編碼的圖片，加載時會先加載一張壓縮的特別厲害的縮略圖，以提升用戶體驗。
若是圖片展現區域小於圖片的真實大小，則因在服務器端根據業務須要先行進行圖片壓縮，圖片壓縮後大小與展現一致。

跨域通訊 ##

js定義方法的方法 ##

通常性的用Object.create建立對象會比較少用

本身實現bind方法

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