js细枝末节(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)创建对象,并保持原型链
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用在什么地方; 如果是初学者,可能也一头雾水

1.阻止浏览器默认事件,如点击元素,阻止向上冒泡
2.判断表单填写错误时,阻止提交
3.满足条件时,跳出jq的eack遍历


(4)prototype中的一些细节

函数实例.__proto__ == 构造器.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();

在这个问题上,完全当了个白痴,竟然还觉得查找属性和方法,要先查找构造器函数,明明是先在对象实例上找属性和方法,如果没有,再通过__proto__去构造器.prototype上查找(在markdown上输下划线还要用 \ 转义)

(5)Array.protptype.sort()

对于数组元素为数字字符的,直接用sort()数字0-9内还好,两位以上就不适用了,因为会先将数字转换为字符串


(6) 使用reduce()实现二维数组的扁平化
<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 ]

(来源于张鑫旭大神博客)


另一种数组扁平化

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方法接受一个或多个数组,并且将数组元素附加到用来调用该方法的父数组的的内容的末尾。合并的数组作为新数组返回


(7)柯里化可是函数式编程中的一个技巧
(8)自执行函数中的变量提升

(9)循环中中的setTimeout()
for(var i = 0;i < 3;i++){
        setTimeout(function(){
                console.log(i);
    },0);
        console.log(i);
}
打印的结果是: 0 1 2 3 3 3

我还很奇怪为什么是333,确实循环结束的时候 i 的值为3,所以在还在等待执行的3个setTimeout函数都引用了现在的i
(当i = 2进行了比较后,i++了一次,所以当前为3,但是比较不成立了,循环结束)

如果循环外面还有循环,例如

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

setTimeout在最后面执行!!!


(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]); //会把数字转换为字符串
        </script>
(11)ascii码的转换

很笨实现这么个效果

<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)用函数实现数组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)二维数组
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)关于函数名称

当你发现在最简单的情况下,函数也不能被绑定在标签上的事件触发,明明是没错的情况下,很有可能是与window对象的属性方法重名了,对于数组,对象,函数的命名都不能与window上的属性冲突

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

还有close,name


要想随意写变量名,不用担心与window的属性冲突,可以用自执行函数进行包裹

(17)如果控制台提示某个选择器返回的结果是null,很有可能是因为domready的问题,切记切记,经验惨痛

(18)两种路径
require('./index.js')         //相对路径
require('d:/web_project_all/node学习/index.js')        //绝对路径

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

(19)函数为全局变量取值
var boy;
            function test(){
                boy = 200;
            }
            test();
            console.log(boy);  //200
//函数必须被执行

function test(){
        var boy = 200;
        return function(){
            return boy;
        }
    }
    console.log(test()());   //可以通过函数返回值拿到boy
    console.log(boy);  //但是无法在全局进行访问
(20)前端路由的优缺点

优点:用户体验好,不需要每次从服务器拉取页面


缺点: 不利于SEO
使用浏览器的前进,后退会重新发起请求,没合理利用缓存
单页面无法记住滚轮滚动的位置


(21)NaN
image.png
(22)类型转换
image.png
(23)switch一定要加break
image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,013评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,205评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,370评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,168评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,153评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,954评论 1 283
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,271评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,916评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,382评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,877评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,989评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,624评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,209评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,199评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,418评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,401评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,700评论 2 345

推荐阅读更多精彩内容