摘要：第二段代碼如下修改就可以了改這一行其實你的本質問題就在于誤認為是數組對象，然而它是構造函數。它繼承自構造函數被執行。故視為兩個字符串的拼接，結果為字符串，其長度為。

問題表示：在某些場景下，需要將函數的 arguments 參數作為一個數組調用，但是 arguments 是一個奇異對象，所以試著將 arguments 轉化為一個數組；

function argToArr(){
    return [].slice.call(arguments, 0);
}
console.log(argToArr(1,2,3));    //[1,2,3]




function argToArr(){
        return Array.slice.call(arguments, 0);
    }
    console.log(argToArr(1,2,3));    //[]

問：這是為什么呢？
另外還有一個問題，是關于 Array 是怎么找到 slice 方法的？
Array 本身是沒有 slice 方法，它的方法在 Array.prototype 中，而我們在調用 slice 方法的時候，如果在 Array 本身沒有找到 slice 方法的話，會通過它的原型鏈往上查找，而 Array.proto 并沒有指向 Array.prototype，而是指向 Function()，那么它是怎么找到 slice 方法的呢？

解釋：

第二段代碼報錯是因為Array是構造函數，不是對象，打開控制臺，輸入 typeof Array，結果是 function
你也說了slice()方法在其原型對象中，而[]就是Array的原型對象，在控制臺中輸入 Array.prototype，結果是[],所以第一段代碼可以順利執行。

第二段代碼如下修改就可以了：

functionargToArr(){
    returnArray.prototype.slice.call(arguments, 0); // 改這一行
}
console.log(argToArr(1,2,3)); 

其實你的本質問題就在于誤認為Array是數組對象，然而它是構造函數。

對于 if 語句括號里的表達式，ECMAScript 會自動調用 Boolean()轉型函數將這個表達式的結果轉換成一個布爾值。如果值為 true，執行后面的一條語句，否則不執行。

通過arguments 對象的length屬性，來智能的判斷有多少參數，然后把參數進行合理的應用 。
比如，要實現一個加法運算，將所有傳進來的數字累加，而數字的個數又不確定。

function box() {
        var sum = 0;
        if (arguments.length == 0) return sum; //如果沒有參數，退出
        for(var i = 0;i < arguments.length; i++) { //如果有，就累加
            sum = sum + arguments[i];
        }
        return sum; //返回累加結果
    }
    alert(box(5,9,12));

函數內部，有兩個特殊的對象：arguments 和 this。arguments 是一個類數組對象，包含著傳入函數中的所有參數，主要用途是保存函數參數。但這個對象還有一個名叫 callee 的屬性，該屬性是一個指針，指向擁有這個 arguments 對象的函數。
對于階乘函數一般要用到遞歸算法，所以函數內部一定會調用自身；如果函數名不改變是沒有問題的，但一旦改變函數名，內部的自身調用需要逐一修改。為了解決這個問題，我們可以使用 arguments.callee 來代替。

function box(num) {
        if (num <= 1) {
            return 1;
        } else {
            return num * arguments.callee(num-1);//使用 callee 來執行自身         }
    }

直接接收 event 對象，是 W3C 的做法，IE 不支持，IE 自己定義了一個 event 對象，直接在 window.event 獲取即可。

input.onclick = function (evt) {
    var e = evt || window.event; //實現跨瀏覽器兼容獲取 event 對象
    alert(e);
};

W3C 中的 target 和 IE 中的 srcElement，都表示事件的目標。

function getTarget(evt) {
    var e = evt || window.event;
    return e.target || e.srcElement; //兼容得到事件目標 DOM 對象
}
document.onclick = function (evt) {
    var target = getTarget(evt);
    alert(target);
};

在阻止冒泡的過程中，W3C 和 IE 采用的不同的方法，那么我們必須做一下兼容。

function stopPro(evt) {
    var e = evt || window.event;
    window.event ? e.cancelBubble = true : e.stopPropagation();
}

function preDef(evt) {
    var e = evt || window.event;
    if (e.preventDefault) {
        e.preventDefault();
    } else {
        e.returnValue = false;
    }
}

當我們右擊網頁的時候，會自動出現 windows 自帶的菜單。那么我們可以使用 contextmenu 事件來修改我們指定的菜單，但前提是把右擊的默認行為取消掉。

function addEvent(obj, type, fn) { //添加事件兼容
    if (obj.addEventListener) {
        obj.addEventListener(type, fn);
    } else if (obj.attachEvent) {
        obj.attachEvent("on" + type, fn);
    }
}
function removeEvent(obj, type, fn) { //移除事件兼容
    if (obj.removeEventListener) {
    ob    j.removeEventListener(type, fn);
    } else if (obj.detachEvent) {
        obj.detachEvent("on" + type, fn);
    }
}


addEvent(window, "load", function () {
    var text = document.getElementById("text");
    addEvent(text, "contextmenu", function (evt) {
        var e = evt || window.event;
        preDef(e);
        var menu = document.getElementById("menu");
        menu.style.left = e.clientX + "px";
        menu.style.top = e.clientY + "px";
        menu.style.visibility = "visible";
        addEvent(document, "click", function () {
            document.getElementById("myMenu").style.visibility = "hidden";
        });
    });
});

文檔模式在開發中貌似很少用到，最常見的是就是在獲取頁面寬高的時候，比如文檔寬高，可見區域寬高等。

IE對盒模型的渲染在 Standards Mode和Quirks Mode是有很大差別的，在Standards Mode下對于盒模型的解釋和其他的標準瀏覽器是一樣，但在Quirks Mode模式下則有很大差別，而在不聲明Doctype的情況下，IE默認又是Quirks Mode。所以為兼容性考慮，我們可能需要獲取當前的文檔渲染方式。

document.compatMode正好派上用場，它有兩種可能的返回值：BackCompat和CSS1Compat。
BackCompat：標準兼容模式關閉。瀏覽器客戶區寬度是document.body.clientWidth;
CSS1Compat：標準兼容模式開啟。 瀏覽器客戶區寬度是document.documentElement.clientWidth。
例如：

function getViewport(){
　　　　if (document.compatMode == "BackCompat"){
　　　　　　return {
　　　　　　　　width: document.body.clientWidth,
　　　　　　　　height: document.body.clientHeight
　　　　　　}
　　　　} else {
　　　　　　return {
　　　　　　　　width: document.documentElement.clientWidth,
　　　　　　　　height: document.documentElement.clientHeight
　　　　　　}
　　　　}
　　}

function getStyle(element, attr) {
    if (typeof window.getComputedStyle != "undefined") {//W3C
        return window.getComputedStyle(element, null)[attr];
    } else if (typeof element.currentStyle != "undeinfed") {//IE
        return element.currentStyle[attr];
    }
}

標準瀏覽器支持 insertRule， IE低版本則支持 addRule。

window.innerWidth，window.innerHeight與document.documentElement.clientWidth，document.documentElement.clientHeight

注：用jquery獲取的頁面的寬度頁面不包括滾動條的寬度的

window.innerWidth與window.innerHeight（IE9及以上，谷歌，火狐識別，寬高包含滾動條的寬度）
document.documentElement.clientWidth與document.documentElement.clientHeight（IE，火狐，谷歌都能識別，寬高不包含滾動條的寬度）
如果頁面沒有滾動條:
window.innerWidth==document.documentElement.clientWidth，
window.innerHeight==document.documentElement.clientHeight（IE8及一下不識別window.innerHeight與window.innerWidth）

//跨瀏覽器獲取視口大小
function getInner() {
    if (typeof window.innerWidth != "undefined") { //IE8及以下undefined
        return {
            width : window.innerWidth,
            height : window.innerHeight
        }
    } else {
        return {
            width : document.documentElement.clientWidth,
            height : document.documentElement.clientHeight
        }
    }
}

這個是瀏覽器隔離的，每個瀏覽器都會把localStorage存儲在自己的UserData中，如chrome一般就是

C:Users你的計算機名AppDataLocalGoogleChromeUser DataProfileLocal Storage
如果要在瀏覽器查看，打開調試工具，在application選項卡下可以查看。

function Person {}
Person.prototype.test = function() {} 

當代碼 new Person(...) 執行時：
一個新對象被創建。它繼承自Person.prototype.構造函數 Person 被執行。執行的時候，相應的傳參會被傳入，同時上下文(this)會被指定為這個新實例。
new Person()與new Person這兩種寫法有相同的效果。
new Person 等同于 new Person(), 只能用在不傳遞任何參數的情況。

sss
 //ps:不加紅顯示不了p標簽。

解決方式：
在body設置ondrop

document.body.ondrop = function (event) {
        event.preventDefault();
        event.stopPropagation();
}

問題地址：https://segmentfault.com/q/1010000004689615

問題描述：使用ajaxfileupload.js進行文件上傳，后臺正確執行，并返回了對應的響應值，但是前臺進入error，返回值自動加上了

標簽

ajaxfileupload不支持響應頭ContentType為application/json設置，不支持原因可能是為了瀏覽器兼容，因為ie不支持application/json格式,另外firefox, chrome瀏覽器iframe在接收application/json格式的時候會自動將其轉化為html格式，自動在json數據前后加上
標簽導致ajaxfileupload插件取json數據錯誤

問題地址：https://segmentfault.com/q/1010000004292314
18.網頁中的背景圖怎樣讓他加載的更快？
描述：網頁中很多地方有背景圖，但網頁打開時，他才一點一點的顯示，怎樣讓它快速的顯示？在網頁制作過程中，怎樣優化有圖片的地方？

用 jpeg，設置壓縮率
圖片切片，組合成一張大圖
用 CDN 加速

問題地址：https://segmentfault.com/q/1010000003847764
19.([] + {}).length ?
[] + {} 運算，首先是調用對象的 valueOf 方法，如果返回一個基本類型，則以該基本類型參與運算；否則調用 toString 方法，返回基本類型則參與運算。
數組和對象的 valueOf（默認）返回自身，因此不是基本類型，接著調用 toString，空數組返回空字符串，普通對象始終返回字符串 [object Object]。故視為兩個字符串的拼接，結果為字符串 [object Object]，其長度為 15。
一個例外是 Date 的實例，其實例首先調用 toString ，接著才調用valueOf。
可以這樣驗證：
([]).toString() // ""
({}).toString() // "[object Object]"
([]+{}) // "[object Object]"
問題地址：https://segmentfault.com/q/1010000003824450
20.js對Date對象的操作的問題
使用JavaScript生成一個倒數7天的數組。
比如今天是10月1號，生成的數組是["9月25號","9月26號","9月27號","9月28號","9月29號","9月30號","10月1號"]。
Date 的 setDate() 可以給 0 和負數作為參數，日期會自動計算
var today = new Date();
var dates = [today];

for (var i = 1; i < 7; i++) {
    var d = new Date(today);
    d.setDate(d.getDate() - i);
    dates.unshift(d);
}

console.log(dates);
[Fri Sep 25 2015 09:58:23 GMT+0800 (中國標準時間),
 Sat Sep 26 2015 09:58:23 GMT+0800 (中國標準時間),
 Sun Sep 27 2015 09:58:23 GMT+0800 (中國標準時間),
 Mon Sep 28 2015 09:58:23 GMT+0800 (中國標準時間),
 Tue Sep 29 2015 09:58:23 GMT+0800 (中國標準時間),
 Wed Sep 30 2015 09:58:23 GMT+0800 (中國標準時間),
 Thu Oct 01 2015 09:58:23 GMT+0800 (中國標準時間)]
如果要取得格式化后的日期
var today = new Date();
var dates = [today];

for (var i = 1; i < 7; i++) {
    var d = new Date(today);
    d.setDate(d.getDate() - i);
    dates.unshift(d);
}

dates = dates.map(function(d) {
    return (d.getMonth() + 1) + "月" + d.getDate() + "日";
});

console.log(dates);
結果：
["9月25日",
 "9月26日",
 "9月27日",
 "9月28日",
 "9月29日",
 "9月30日",
 "10月1日"]
問題地址：https://segmentfault.com/q/1010000003811778
21.用閉包保存狀態
和普通function執行的時候傳參數一樣，自執行的函數表達式也可以這么傳參，因為閉包直接可以引用傳入的這些參數，利用這些被lock住的傳入參數，自執行函數表達式可以有效地保存狀態。
// 這個代碼是錯誤的，因為變量i從來就沒背locked住
// 相反，當循環執行以后，我們在點擊的時候i才獲得數值
// 因為這個時候i操真正獲得值
// 所以說無論點擊那個連接，最終顯示的都是I am link #10（如果有10個a元素的話）

var elems = document.getElementsByTagName("a");

for (var i = 0; i < elems.length; i++) {

    elems[i].addEventListener("click", function (e) {
        e.preventDefault();
        alert("I am link #" + i);
    }, "false");

}

// 這個是可以用的，因為他在自執行函數表達式閉包內部
// i的值作為locked的索引存在，在循環執行結束以后，盡管最后i的值變成了a元素總數（例如10）
// 但閉包內部的lockedInIndex值是沒有改變，因為他已經執行完畢了
// 所以當點擊連接的時候，結果是正確的

var elems = document.getElementsByTagName("a");

for (var i = 0; i < elems.length; i++) {

    (function (lockedInIndex) {

        elems[i].addEventListener("click", function (e) {
            e.preventDefault();
            alert("I am link #" + lockedInIndex);
        }, "false");

    })(i);

}

// 你也可以像下面這樣應用，在處理函數那里使用自執行函數表達式
// 而不是在addEventListener外部
// 但是相對來說，上面的代碼更具可讀性

var elems = document.getElementsByTagName("a");

for (var i = 0; i < elems.length; i++) {

    elems[i].addEventListener("click", (function (lockedInIndex) {
        return function (e) {
            e.preventDefault();
            alert("I am link #" + lockedInIndex);
        };
    })(i), "false");

}
22.各瀏覽器的navigator.userAgent
IE11：Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E; rv:11.0) like Gecko
IE10：Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E)
IE9： Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E)
IE8： Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E)
谷歌：Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36
火狐：Mozilla/5.0 (Windows NT 6.1; WOW64; rv:48.0) Gecko/20100101 Firefox/48.0
QQ瀏：Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.80 Safari/537.36 Core/1.47.933.400 QQBrowser/9.4.8699.400
360js:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.101 Safari/537.36
360jr:Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E)
safar:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.57.2 (KHTML, like Gecko) Version/5.1.7 Safari/534.57.2
23.向一個數組中插入元素
向數組結尾添加元素用push()很簡單，但下面有一個更高效的方法：
例如：
var arr = [1,2,3,4,5];
var arr2 = [];

arr.push(6);
arr[arr.length] = 6;
最快的為：
1.arr[arr.length] = 6; // 平均 5 632 856 ops/sec
2.arr.push(6); // 慢35.64%
 3.arr2 = arr.concat([6]); // 慢62.67%
向數組的頭部添加元素現在我們試著向數組的頭部添加元素：
var arr = [1,2,3,4,5];

arr.unshift(0);

[0].concat(arr);
注：這里有一些小區別，unshift操作的是原始數組，concat返回一個新數組
最快的為：

[0].concat(arr); // 平均6 032 573 ops/sec
arr.unshift(0); // 慢78.65%

向數組中間添加元素，使用splice可以簡單的向數組中間添加元素，這也是最高效的方法：
var items = ["one", "two", "three", "four"];
items.splice(items.length / 2, 0, "hello");
參考地址：http://www.cnblogs.com/rubylouvre/p/5751564.html
24.360的渲染模式
360能選擇極速模式和兼容模式 但我想要像淘寶那樣

只能是極速模式,不能切換至兼容模式
網友的回復：我查了很多時間,只找到 默認是極速模式渲染,但是這樣還是能夠切換的,我需要不能切換。
我在開發中也遇到過這個問題，就是當我們的項目用IP訪問，用360查看默認是兼容模式，盆友們是不是也遇見過呢？
問題地址：https://segmentfault.com/q/10...
25.純css 實現footer sticker
希望footer一直在頁面底部
html代碼：


    




footer

css代碼：
html, body,#sticker {height: 100%;}
body > #sticker {height: auto; min-height: 100%;}
#stickerCon {padding-bottom: 40px;} 
#footer {
    margin-top:-41px;
    height: 40px; 
    width: 100%; 
    text-align: center;
    line-height: 40px;
    color: #ABA498;
    font-size: 12px;
    background: #fafafa;
    border-top:1px solid #E7E7E7;
}

原文地址：https://segmentfault.com/a/11...
26.js中的pixelTop屬性
style對象：
pixelLeft
pixelTop
pixelWidth
pixelHeight
返回以像素為單位的位置坐標的數值,非像素單位轉換為像素單位顯示。
left
top
width
height
返回帶單位的位置坐標字符串
27.TweenMax.js用法總結
1.yoyo:Boolean -- YOYO球。另外一種循環的方式，像我們玩的YOYO球一樣，從頭到尾，再從尾到頭的往返運動，PS：要與repeat同時設置
2.repeat:int -- 循環次數。設置為-1為無限循環
28.window.location屬性
window.location 對象所包含的屬性


屬性
描述



hash
從井號 (#) 開始的 URL（錨）


host
主機名和當前 URL 的端口號


hostname
當前 URL 的主機名


href
完整的 URL


pathname
當前 URL 的路徑部分


port
當前 URL 的端口號


protocol
當前 URL 的協議


search
從問號 (?) 開始的 URL（查詢部分）



protocol 屬性是一個可讀可寫的字符串，可設置或返回當前 URL 的協議。
語法：
location.protocol=path
實例：假設當前的 URL 是: http://example.com:1234/test.htm#part2：

輸出：http:
29.正則表達式中的RegExp.$1
RegExp 是javascript中的一個內置對象。為正則表達式。
RegExp.$1是RegExp的一個屬性,指的是與正則表達式匹配的第一個子匹配(以括號為標志)字符串，以此類推，RegExp.2, RegExp.3, ..RegExp.$99總共可以有99個匹配。
例如：
var r= /^(d{4})-(d{1,2})-(d{1,2})$/; //正則表達式 匹配出生日期(簡單匹配)    
r.exec("1985-10-15");
s1=RegExp.$1;
s2=RegExp.$2;
s3=RegExp.$3;
console.log(s1+" "+s2+" "+s3)//結果為1985 10 15
30.js中的Navigator對象
Navigator 對象包含有關瀏覽器的信息。
注釋：沒有應用于 navigator 對象的公開標準，不過所有瀏覽器都支持該對象。
Navigator 對象屬性：


屬性
描寫



appCodeName
返回瀏覽器的代碼名。


appMinorVersion
返回瀏覽器的次級版本。


appName
返回瀏覽器的名稱。


appVersion
返回瀏覽器的平臺和版本信息。


browserLanguage
返回當前瀏覽器的語言。


cookieEnabled
返回指明瀏覽器中是否啟用 cookie 的布爾值。


cpuClass
返回瀏覽器系統的 CPU 等級。


onLine
返回指明系統是否處于脫機模式的布爾值。


platform
返回運行瀏覽器的操作系統平臺。


systemLanguage
返回 OS 使用的默認語言。


userAgent
返回由客戶機發送服務器的 user-agent 頭部的值。


userLanguage
返回 OS 的自然語言設置。



在谷歌瀏覽器中打印Navigator對象，如圖所示：

31.markdown語法經常遺忘操作記錄
刪除線：~~ ~~包裹的文字會顯示刪除線 刪除線