js細(xì)枝末節(jié)(2)

(1)不同的瀏覽器有不同的滾輪事件姥闭。主要是有兩種门怪,onmousewheel(firefox不支持)和DOMMouseScroll(只有firefox支持)
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}//W3C firefox
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome 

(2)創(chuàng)建對象酿傍,并保持原型鏈
var O = function(obj) {
    function T() {}
    T.prototype = obj;
    return new T();
};

var obj = {name: 'obj', age: 0 }, 
    obj1 = O(obj), 
    obj2 = O(obj1);

// 更改原型鏈的一處魄鸦,所有原型鏈都會更改
obj.name = 'superclass';    
console.log(obj1.name);    // 'superclass'
console.log(obj2.name);    // 'superclass'

// 每一層可單獨處理
obj1.name = 100;
console.log(obj1.name);    //100
delete obj1.name;    //暴漏原型鏈
console.log(obj1.name);    // 'superclass'
(來源于Rain Man博客)

(3)return false用在什么地方; 如果是初學(xué)者蠢熄,可能也一頭霧水

1.阻止瀏覽器默認(rèn)事件,如點擊元素,阻止向上冒泡
2.判斷表單填寫錯誤時碳竟,阻止提交
3.滿足條件時煤禽,跳出jq的eack遍歷


(4)prototype中的一些細(xì)節(jié)

函數(shù)實例.__proto__ == 構(gòu)造器.prototype

function phone(name){
            //this.name = "mi";
            this.name = name;
            this.price = function(){
                console.log("2000");
            }
        }
        phone.prototype = {
            name:"meizu",
            price:function(){
                console.log("2500");
            }
        }
        var buy = new phone('mi');
        console.log(buy.name);
        buy.price();

在這個問題上丹诀,完全當(dāng)了個白癡,竟然還覺得查找屬性和方法枚荣,要先查找構(gòu)造器函數(shù),明明是先在對象實例上找屬性和方法蛮原,如果沒有笋籽,再通過__proto__去構(gòu)造器.prototype上查找(在markdown上輸下劃線還要用 \ 轉(zhuǎn)義)

(5)Array.protptype.sort()

對于數(shù)組元素為數(shù)字字符的,直接用sort()數(shù)字0-9內(nèi)還好,兩位以上就不適用了,因為會先將數(shù)字轉(zhuǎn)換為字符串


(6) 使用reduce()實現(xiàn)二維數(shù)組的扁平化
<script>
var matrix = [
    [1,2],
    [3,4],
    [5,6],
        ];
var flatten = matrix.reduce(function(pre,cur){
    return pre.concat(cur);
})
console.log(flatten);    //Array [ 1, 2, 3, 4, 5, 6 ]

(來源于張鑫旭大神博客)


另一種數(shù)組扁平化

var arrprimary = new Array();
    arrprimary[0] = new Array('one','two');
    arrprimary[1] = new Array('three','four');
    arrprimary[2] = new Array('five','six');
    arrprimary[3] = new Array('seven','eight');
    console.log(arrprimary[0].concat(arrprimary[1],arrprimary[2],arrprimary[3]));

Array對象concat方法接受一個或多個數(shù)組翰灾,并且將數(shù)組元素附加到用來調(diào)用該方法的父數(shù)組的的內(nèi)容的末尾侈沪。合并的數(shù)組作為新數(shù)組返回


(7)柯里化可是函數(shù)式編程中的一個技巧
(8)自執(zhí)行函數(shù)中的變量提升

(9)循環(huán)中中的setTimeout()
for(var i = 0;i < 3;i++){
        setTimeout(function(){
                console.log(i);
    },0);
        console.log(i);
}
打印的結(jié)果是: 0 1 2 3 3 3

我還很奇怪為什么是333,確實循環(huán)結(jié)束的時候 i 的值為3,所以在還在等待執(zhí)行的3個setTimeout函數(shù)都引用了現(xiàn)在的i
(當(dāng)i = 2進行了比較后,i++了一次歧沪,所以當(dāng)前為3,但是比較不成立了,循環(huán)結(jié)束)

如果循環(huán)外面還有循環(huán)应役,例如

for (var j = 0;j < 4;j++) {
        console.log(j);
}
for (var k = 0;k < 4;++k) {
        console.log(k);
}

setTimeout在最后面執(zhí)行!T锟辍箩祥!


(10)js中括號操作對象屬性
<script type="text/javascript">
        var obj = {
            somevalues:"hehe",
            methods:function(){
                alert("haha"); /*控制臺中會看到第二個為undefined
                因為沒指定return*/
            },
            '8':"weidapao"
        }
        console.log(obj['some'+'values']); //拼接也是可以的
        console.log(obj['methods']());
        console.log(obj[2+6]); //會把數(shù)字轉(zhuǎn)換為字符串
        </script>
(11)ascii碼的轉(zhuǎn)換

很笨實現(xiàn)這么個效果

<script>
        var str1 ="",str2 = "";
        for (var i = 97;i<=122;i++) {
            if(i > 109){
                str2 += String.fromCharCode(i);
            }else{
                str1 += String.fromCharCode(i);
            }
                
        }
        console.log(str1);
        console.log(str2);
        /*abcdefghijklm
          nopqrstuvwxyz
          */

(12)用函數(shù)實現(xiàn)數(shù)組push()
function PushToArr(arr,item){
            arr[arr.length] = item;
            return arr;
        }
        var array1 = [1,2,3];
        var result = PushToArr(array1,8);
        var result2 = PushToArr(array1,5);
        var result3 = PushToArr(array1,7); //1,2,3,8,5,7
        console.log(result3);

總感覺在哪本書上看過?


(13)[ ] == " " //true
(14)二維數(shù)組
var outarr = new Array(3);
    for (var i = 0;i < outarr.length;i++){
        outarr[i] = new Array(3);
    }
    outarr[0][0] = 1;
    outarr[0][1] = 2;
    outarr[0][2] = 3;
    outarr[1][0] = 4;
    outarr[1][1] = 5;
    outarr[1][2] = 6;
    outarr[2][0] = 7;
    outarr[2][1] = 8;
    outarr[2][2] = 9;

也可以使用字面量


(15)換個行
document.write("<br>");
(16)關(guān)于函數(shù)名稱

當(dāng)你發(fā)現(xiàn)在最簡單的情況下肆氓,函數(shù)也不能被綁定在標(biāo)簽上的事件觸發(fā)袍祖,明明是沒錯的情況下,很有可能是與window對象的屬性方法重名了,對于數(shù)組谢揪,對象蕉陋,函數(shù)的命名都不能與window上的屬性沖突

<input type="button" value="Dosomething" onclick="size()"/>
function size(){
      alert(1);  
}

還有close,name


要想隨意寫變量名,不用擔(dān)心與window的屬性沖突键耕,可以用自執(zhí)行函數(shù)進行包裹

(17)如果控制臺提示某個選擇器返回的結(jié)果是null寺滚,很有可能是因為domready的問題,切記切記屈雄,經(jīng)驗慘痛

(18)兩種路徑
require('./index.js')         //相對路徑
require('d:/web_project_all/node學(xué)習(xí)/index.js')        //絕對路徑

命令行使用的是反斜線,js文件使用的是斜線

(19)函數(shù)為全局變量取值
var boy;
            function test(){
                boy = 200;
            }
            test();
            console.log(boy);  //200
//函數(shù)必須被執(zhí)行

function test(){
        var boy = 200;
        return function(){
            return boy;
        }
    }
    console.log(test()());   //可以通過函數(shù)返回值拿到boy
    console.log(boy);  //但是無法在全局進行訪問
(20)前端路由的優(yōu)缺點

優(yōu)點:用戶體驗好官套,不需要每次從服務(wù)器拉取頁面


缺點: 不利于SEO
使用瀏覽器的前進酒奶,后退會重新發(fā)起請求蚁孔,沒合理利用緩存
單頁面無法記住滾輪滾動的位置


(21)NaN
image.png
(22)類型轉(zhuǎn)換
image.png
(23)switch一定要加break
image.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市惋嚎,隨后出現(xiàn)的幾起案子杠氢,更是在濱河造成了極大的恐慌,老刑警劉巖另伍,帶你破解...
    沈念sama閱讀 216,997評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件鼻百,死亡現(xiàn)場離奇詭異,居然都是意外死亡摆尝,警方通過查閱死者的電腦和手機温艇,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,603評論 3 392
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來堕汞,“玉大人勺爱,你說我怎么就攤上這事⊙都欤” “怎么了琐鲁?”我有些...
    開封第一講書人閱讀 163,359評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長人灼。 經(jīng)常有香客問我围段,道長,這世上最難降的妖魔是什么投放? 我笑而不...
    開封第一講書人閱讀 58,309評論 1 292
  • 正文 為了忘掉前任蒜撮,我火速辦了婚禮,結(jié)果婚禮上跪呈,老公的妹妹穿的比我還像新娘段磨。我一直安慰自己,他們只是感情好耗绿,可當(dāng)我...
    茶點故事閱讀 67,346評論 6 390
  • 文/花漫 我一把揭開白布苹支。 她就那樣靜靜地躺著,像睡著了一般误阻。 火紅的嫁衣襯著肌膚如雪债蜜。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,258評論 1 300
  • 那天究反,我揣著相機與錄音寻定,去河邊找鬼。 笑死精耐,一個胖子當(dāng)著我的面吹牛狼速,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播卦停,決...
    沈念sama閱讀 40,122評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼向胡,長吁一口氣:“原來是場噩夢啊……” “哼恼蓬!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起僵芹,我...
    開封第一講書人閱讀 38,970評論 0 275
  • 序言:老撾萬榮一對情侶失蹤处硬,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后拇派,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體荷辕,經(jīng)...
    沈念sama閱讀 45,403評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,596評論 3 334
  • 正文 我和宋清朗相戀三年件豌,在試婚紗的時候發(fā)現(xiàn)自己被綠了疮方。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,769評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡苟径,死狀恐怖案站,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情棘街,我是刑警寧澤蟆盐,帶...
    沈念sama閱讀 35,464評論 5 344
  • 正文 年R本政府宣布,位于F島的核電站遭殉,受9級特大地震影響石挂,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜险污,卻給世界環(huán)境...
    茶點故事閱讀 41,075評論 3 327
  • 文/蒙蒙 一痹愚、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧蛔糯,春花似錦拯腮、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,705評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至淮逻,卻和暖如春琼懊,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背爬早。 一陣腳步聲響...
    開封第一講書人閱讀 32,848評論 1 269
  • 我被黑心中介騙來泰國打工哼丈, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人筛严。 一個月前我還...
    沈念sama閱讀 47,831評論 2 370
  • 正文 我出身青樓醉旦,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子髓抑,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,678評論 2 354

推薦閱讀更多精彩內(nèi)容