整理的前端面試題目

lavnFan 發布于2019-08-29 12:55 / 1467人閱讀

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

實現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 方法需要存在并且返回原始類型，那么如果返回的不是一個原始類型，則會去繼續尋找對象的 valueOf 方法
Function類型轉換：與 Number 轉換類似，如果函數的 valueOf 方法返回的不是一個原始類型，會繼續找到它的 toString 方法.

判斷是否為數組

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的縮寫，指向網絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接，如果我們在文檔中添加那么瀏覽器會識別該文檔為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);
    };
}

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

第四個區別點怎么理解呢：如果display:none的容器中如果有img 則它的background-image都不會請求相應的資源，而visibility會請求

web安全及防護

參考文獻：
BAT及各大互聯網公司2014前端筆試面試題--Html,Css篇
BAT及各大互聯網公司2014前端筆試面試題--JavaScript篇
這10道javascript筆試題你都會么
大部分人都會做錯的經典JS閉包面試題
一道常被人輕視的前端JS面試題
/bVQYiH

云服務器 GPU云服務器面試題目 python面試題目中級php面試題目 php校招面試題目

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112243.html

整理下《前端江湖面試》對自己有益的題目。

摘要：面試題目匯總前言近期在找工作，也在讀前端面試江湖這本書，書中整理了很多基礎的面試題目，在書中也發現了一些錯誤。好記性不如爛筆頭，于是整理下對自己有益的題目，都是一些較為基礎的題目后期還會更新。，返回一個數組，成員為匹配的字符串。面試題目匯總前言近期在找工作，也在讀前端面試江湖這本書，書中整理了很多基礎的面試題目，在書中也發現了一些錯誤。好記性不如爛筆頭，于是整理下對自己有益的...

hikui 2019-08-01 17:28 評論0 收藏0
整理下《前端江湖面試》對自己有益的題目。

摘要：面試題目匯總前言近期在找工作，也在讀前端面試江湖這本書，書中整理了很多基礎的面試題目，在書中也發現了一些錯誤。好記性不如爛筆頭，于是整理下對自己有益的題目，都是一些較為基礎的題目后期還會更新。，返回一個數組，成員為匹配的字符串。面試題目匯總前言近期在找工作，也在讀前端面試江湖這本書，書中整理了很多基礎的面試題目，在書中也發現了一些錯誤。好記性不如爛筆頭，于是整理下對自己有益的...

QLQ 2019-08-20 18:57 評論0 收藏0
整理下《前端江湖面試》對自己有益的題目。

摘要：面試題目匯總前言近期在找工作，也在讀前端面試江湖這本書，書中整理了很多基礎的面試題目，在書中也發現了一些錯誤。好記性不如爛筆頭，于是整理下對自己有益的題目，都是一些較為基礎的題目后期還會更新。，返回一個數組，成員為匹配的字符串。面試題目匯總前言近期在找工作，也在讀前端面試江湖這本書，書中整理了很多基礎的面試題目，在書中也發現了一些錯誤。好記性不如爛筆頭，于是整理下對自己有益的...

Terry_Tai 2019-08-29 13:15 評論0 收藏0
php 面試題目整理（持續更新）

摘要：來自博客整理于面試別人或被別人面試的一些題目持續更新答案網上基本都有，不一一列舉。例有個人去游玩，需要買水，商店活動買瓶贈送一瓶。請問題目至少需要買多少瓶飲料才可以人手一瓶前端方面前端性能團隊總結的條黃金定律說出幾條來自 AT博客整理于面試別人或被別人面試的一些題目(持續更新),答案網上基本都有，不一一列舉。希望能幫到需要換工作的你。數據庫 mysql 索引的理解 mysql b...

missonce 2019-07-25 14:12 評論0 收藏0
php 面試題目整理（持續更新）

摘要：來自博客整理于面試別人或被別人面試的一些題目持續更新答案網上基本都有，不一一列舉。例有個人去游玩，需要買水，商店活動買瓶贈送一瓶。請問題目至少需要買多少瓶飲料才可以人手一瓶前端方面前端性能團隊總結的條黃金定律說出幾條來自 AT博客整理于面試別人或被別人面試的一些題目(持續更新),答案網上基本都有，不一一列舉。希望能幫到需要換工作的你。數據庫 mysql 索引的理解 mysql b...

Tony_Zby 2019-07-24 10:43 評論0 收藏0