学习笔记2

二十六、交换字符串中的两个单词

var re = /(\w+)\s(\w+)/;
var str = "John Smith";
var newstr = str.replace(re, "$2, $1");
// Smith, John
console.log(newstr);

//自己只想到一个蠢方法
var str = "John Smith";
        var arr = [];
        arr = str.split(' ');
        for(var i = 0; i<arr.length; i++) {
            a = arr[1];
            b = arr[0];
        }
var str2 = a +' '+ b;
console.log(str2);

二十七、如何将浮点数点左边的数每三位添加一个逗号，如12000000.11转化为『12,000,000.11』?

    function commafy(num){
        return num && num
            .toString()
            .replace(/(\d)(?=(\d{3})+\.)/g, function($1, $2){
                return $2 + ',';
            });
   } 

二十八、null,undefined的区别
null 表示一个对象是“没有值”的值，也就是值为“空”；
undefined 表示一个变量声明了没有初始化(赋值)；

undefined不是一个有效的JSON，而null是；
undefined的类型(typeof)是undefined；
null的类型(typeof)是object；

Javascript将未赋值的变量默认值设为undefined；
Javascript从来不会将变量设为null。它是用来让程序员表明某个用var声明的变量时没有值的。

注意：
在验证null时，一定要使用　=== ，因为 == 无法分别 null 和　undefined
null == undefined // true
null === undefined // false

二十九、写一个通用的事件侦听器函数。

// 自己只能到这样。。。
function bindEvent(elem, type, selector, fn){
    if(fn === null){
        fn = selector;
        selector = null;
    }
}

elem.addEventListener(type, function (e) {
    var target;
    if(selector) {
        target = e.target;
        if(target.matches(selector)){
            fn.call(target, e);
        } else {
            fn(e);
        }
    }
})

答案

// event(事件)工具集，来源：github.com/markyun
    markyun.Event = {
        // 页面加载完成后
        readyEvent : function(fn) {
            if (fn==null) {
                fn=document;
            }
            var oldonload = window.onload;
            if (typeof window.onload != 'function') {
                window.onload = fn;
            } else {
                window.onload = function() {
                    oldonload();
                    fn();
                };
            }
        },
        // 视能力分别使用dom0||dom2||IE方式 来绑定事件
        // 参数： 操作的元素,事件名称 ,事件处理程序
        addEvent : function(element, type, handler) {
            if (element.addEventListener) {
                //事件类型、需要执行的函数、是否捕捉
                element.addEventListener(type, handler, false);
            } else if (element.attachEvent) {
                element.attachEvent('on' + type, function() {
                    handler.call(element);
                });
            } else {
                element['on' + type] = handler;
            }
        },
        // 移除事件
        removeEvent : function(element, type, handler) {
            if (element.removeEventListener) {
                element.removeEventListener(type, handler, false);
            } else if (element.datachEvent) {
                element.detachEvent('on' + type, handler);
            } else {
                element['on' + type] = null;
            }
        },
        // 阻止事件 (主要是事件冒泡，因为IE不支持事件捕获)
        stopPropagation : function(ev) {
            if (ev.stopPropagation) {
                ev.stopPropagation();
            } else {
                ev.cancelBubble = true;
            }
        },
        // 取消事件的默认行为
        preventDefault : function(event) {
            if (event.preventDefault) {
                event.preventDefault();
            } else {
                event.returnValue = false;
            }
        },
        // 获取事件目标
        getTarget : function(event) {
            return event.target || event.srcElement;
        },
        // 获取event对象的引用，取到事件的所有信息，确保随时能使用event；
        getEvent : function(e) {
            var ev = e || window.event;
            if (!ev) {
                var c = this.getEvent.caller;
                while (c) {
                    ev = c.arguments[0];
                    if (ev && Event == ev.constructor) {
                        break;
                    }
                    c = c.caller;
                }
            }
            return ev;
        }
    };

三十、javaScript中hasOwnProperty函数方法是返回一个布尔值，指出一个对象是否具有指定名称的属性。
此方法无法检查该对象的原型链中是否具有该属性，该属性必须是对象本身的一个成员。
方法： object.hasOwnProperty(proName);

三十一、ajax解决浏览器缓存问题？
1、ajax发送请求前加上 anyAjaxObj.setRequestHeader(‘If-Modified-Since’,”0”);
2、在ajax发送请求前加上 anyAjaxObj.setRequestHeader(“Cache-Control”, “no-cache”)。
3、在URL后面加上一个随机数：”fresh=” +Math.random();
4、在URL后面加上时间戳：”nowtime=” + new Date().getTime();
5、如果使用jQuery。直接这样就可以了。

$.ajaxSetup({cache:false})。
//这样页面的所有ajax都会执行这条语句就是不需要保存缓存记录。

三十三、document.write 和 innerHTML 的区别
document.write 还能重绘整个页面；
innerHTML可以重绘页面的一部分。

三十四、DOM 操作怎么添加、删除、移动、复制、创建和查找节点？
1） 创建
a： createDocumentFragment() // 创建一个DOM片段
b： createElement() //创建一个具体元素
c： createTextNode() // 创建一个文本节点

2）添加、移除、替换、插入
appendChild();
removeChild();
replaceChild();
insertBefore(); //在已有的子节点前插入一个新的子节点

3）查找
getElementById();
getElementsByTagName(); //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
getElementsByName();

三十五、使用JS实现获取文件扩展名

var fileName = "http://www.111cn.net/sys/nginx/62888.htm";

// 方法一：
var fileExtension = fileName.substring(fileName.lastIndexOf('.') + 1);

//方法二：
var fileExtension = fileName.split('.').pop().toLowerCase();

//方法三：
var str = document.getElementById('FileUpload1').value;
var pos = str.lastIndexOf(".");
var lastname = str.substring(pos, str.length);

三十六、在实现一些需要被频繁调用的函数时，我们通常会使用debounce或 throttle 方法
debounce和throttle

三十七、数组乱写，又称洗牌

function shuffle(a) {
    var b = [];
    while(a.length){
        var index = Math.floor(Math.random()*a.length);
        b.push(a[index]);
        a.splice(index, 1);
    }
    return b;
}

var a = [1,2,3,4,5];
console.log(shuffle(a));  //4,2,5,1,3

三十八、使用Promise描述如下过程： 绿灯亮3秒，然后黄灯再亮3秒。灯亮过程可以用console表示。

 function sleep(delay){
        var now = new Date().getTime();
        while(new Date().getTime() - now < delay){
        }
    }

    function led(color){
        console.log(color);
        sleep(3000);
// //Promise 对象用于异步计算. 一个Promise对象代表一个值, 该值可以在当前或未来可用, 或永远不可用.
        return new Promise(function(resolve,reject){
            resolve();
        });
    }

    led("green").then(function(){
        led("red");
    }).then(function(){
        led("yellow");
    });

三十九、数组去重
数组去重

//最熟悉的方法就是json
var arr = [1,1,1,2,2,2,3,3,3];
var arr2 = [];
var json = {};
for(var i = 0; i<arr,length; i++) {
    json[arr[i]] = 'a';
}
for(var name in json) {
    arr2.push(name);    
}
console.log(arr2);

//使用数组查找方法
var arr = [1,1,1,2,2,2,3,3,3];
var arr2 = [];
for(var i = 0; i<arr.length; i++) {
    if(arr2.indexOf(arr[i])<0) {
        arr2.push(arr[i]);
    }
}
document.write(arr2);

//使用数组方法2
var arr = [1,2,1,1,2,3,4,5,5,6];
arr.sort();

for(var i = 0; i<arr.length; i++) {
    if(arr[i] === arr[i+1]){
        arr.splice(i, 1);
        i--;
    }
}
alert(arr);

四十、IE与W3C事件模型有什么区别：
通常，事件传送有三个阶段： 事件捕获，停留目标阶段，事件冒泡阶段
1、阶段差异： DOM事件模型包含捕获阶段和冒泡阶段，DOM事件模型可以使用event.stopPropagation()来阻止事件流；IE事件模型只包含冒泡阶段；
2、事件差异
DOM事件模型：addEventListener
IE事件模型：attachEvent；
3、参数差异
在DOM事件模型中，addEventListener(eventType, handler, useCapture)有三个参数，eventType没有on字符串，handler参数是一个事件句柄，这个函数或方法带有一个事件对象参数，useCapture参数决定了事件句柄触发在哪种事件传播阶段，如果useCapture为true则为捕获阶段，反之则为冒泡阶段。
在IE事件模型中，attachEvent(eventType, handler)有两个参数，eventType 带 on字符串，handler参数是一个事件句柄，这个函数或方法带有一个事件对象参数。