javascript编程笔记

摘要：新手经常犯的一个错误是将一个方法从对象中拿出来，然后再调用，希望方法中的是原来的对象。如果不做特殊处理的话，一般会丢失原来的对象。

方法一

function quicksort(n,left,right){
  var p;
  if(lefttemp)
      right--;
    if(left
方法二
function quickSort(arr,left,right){
  var p;
  if(lefttemp) right--;
      if(left
2. 深度克隆clone(继承)
var cloneObj = function(obj){
    var str, newobj = obj.constructor === Array ? [] : {};
    if(typeof obj !== "object"){
        return;
    } else if(window.JSON){
        str = JSON.stringify(obj), //系列化对象
        newobj = JSON.parse(str); //还原
    } else {
        for(var i in obj){
            newobj[i] = typeof obj[i] === "object" ? cloneObj(obj[i]) : obj[i]; 
        }
    }
    return newobj;
};

//测试
var obj = {a: 0, b: 1, c: 2};
var arr = [0, 1, 2];
//执行深度克隆
var newobj = cloneObj(obj);
var newarr = cloneObj(arr);

//对克隆后的新对象进行成员删除
delete newobj.a;
newarr.splice(0,1);
console.log(obj);
console.log(arr);
console.log(newobj);
console.log(newarr);
/*
结果： 
{a: 0, b: 1, c: 2}
[0, 1, 2]
{b: 1, c: 2}
[1, 2]
*/
3. 找出字符串或者数组中出现相同字符， 并且打印出次数最多的次数和字符
var str = "abcdefgaffffda";　　
var obj = {};　　
for (var i = 0, l = str.length; i < l; i++) {　　
  var key = str[i];　　
  if (!obj[key]) {　　
    obj[key] = 1;　　
  } else {　　
    obj[key]++;　　
  }　　
}　　

var max = -1;　　
var max_key = "";　　
var key;　　
for (key in obj) {　　
  if (max < obj[key]) {　　
    max = obj[key];　　
    max_key = key;　　
  }　　
}　　
alert("max:" + max + " max_key:" + max_key);
4. 解析url为json数据格式 也叫将url的查询参数解析成字典对象同类型
function getUrl(url){
  //var arr=url.split("?")[1].split("&"); 
  var arr = [];
  var a3= [];
  arr = url.split("?");
  a1 = arr[1];
  a2 = a1.split("&");
  obj = {};
  for(var i=0;i
//正则方法
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);                
        val = String(val);
        obj[name] = val;
        return rs;
    });
    return obj;
}
5. 通用事件注册函数
var obj = document.getElementById("p");
var type = click；
function fun() {}

function addEvent(obj, type, fun) {
  if (obj.addEventListener) {
    obj.addEventListener(type, fun, false);
  } else if (obj.attachEvent) {
    obj.attachEvent("on" + type, fun);
  } else {
    obj["on" + type] = fun;
  }
}
6. 写一个获取url中参数的值的函数
function getRequest() {
  var url = window.location.search;
  var oRequest = new Object();
  if (url.indexOf("?") !== -1) {
    url = url.substr(1); // 取得?以后的字符串
    var reqArr = url.split("&");
    for (var i = 0; i < reqArr.length; i++) {
      oRequest[(reqArr[i].split("="))[0]] = unescape((reqArr[i].split("="))[1]);
    }
  }
  return oRequest;
}
7. JS中的数据类型？ 如何断定一个变量是否是String类型
var str = new String("abcd");
console.log(typeof str); // object
console.log(str instanceof String); //true
console.log(str.constructor == String); //true
console.log(Object.prototype.toString.call(str) === "[object String]"); // true

var str1 = "abcd";
console.log(typeof str1); // string
console.log(str1 instanceof String); //fasle
console.log(str1.constructor == String); //true
console.log(Object.prototype.toString.call(str1) === "[object String]"); // true*/

8. 请实现， 鼠标点击页面中的任意标签， alert该标签的名称．（ 注意兼容性）
document.onclick = function(e) {
  var e = e || window.event;
  var obj = e.target || e.srcElement;
  alert(obj.tagName.toLowerCase());
}
9. js异步加载的三种解决方案
(1) defer，只支持IE 
 
(2) async：
 
(3) 创建script，插入到DOM中，加载完毕后callBack，见代码：
function loadScript(url, callback){
    var script = document.createElement("script");
    script.type = "text/javascript";
    if(script.readyState){//IE
        script.onreadystatechange = function(){
            if(script.readyState == "loaded" ||
                script.readyState == "complete"){
                script.onreadystatechange = null;
                callback();
            }
        };
    }else{//firefox,safari,chrome,opera
        script.onload = function(){
            callback();
        };
    }
    script.src = url;
    document.body.appendChild(script);
}
10. 二分搜索，从数组中找到findvalue
function binarySearch(arr,start,end,findvalue){
  var arr = arr.sort(function(a,b){return a-b});
  var mid=Math.floor((start+end)/2);
  var midvalue = arr[mid];
  if(midvalue==findvalue){
    return mid;
  }else if(findvaluemidvalue){
    binarySearch(arr,mid+1,end,findvalue);
  }else{
    return -1;
  } 
}
11. javascript保留两位小数
num.toFixed(2);

function toDecimal(x) {    
  var f = parseFloat(x)
  if(isNaN(f)){
    return false;
  }
  var f = Math.round(x*100)/100;
  var s = f.toString();
  var rs = s.indexOf(".");
  if(rs<0){
    rs=s.length;
    s+=".";
  }
  while(s.length<=rs+2){
    s+="0";
  }
  return s;          
}   
12. 编写一个方法 求一个字符串的字节长度;英文占一个， 中文占两个
方法一：
function getStrlen(str) {
  var len = str.length;
  var re = /[u4e00-u9fa5]/;
  for(var i=0;i255)
      len++;
  }
  return len;
}
13. 编写一个方法 去掉一个数组的重复元素
方法一：该方法数组内顺序不变
function delRepeat(arr){
  var a = [];
  for(var i=0,l=arr.length;i
方法二：该方法由于排序原因，导致去重后数组内元素排序不同
function unique(arr){
    arr.sort();
    var re=[arr[0]];
    for(var i=1,len=arr.length;i
方法三：数组过滤
function unique(arr){
    return arr.filter((item, index, array) => array.indexOf(item) === index);
}
方法四：ES6
Array.form(...new Set(arr))  [...new Set(arr)]
13 输入两个数字，输出这两个数字的最大公约数。如16，4输出4。
最大公约数就是<=最小的那个数，那就从最小的那个数开始一个一个试
function maxDivisor(num1,num2){
   var max=num1>num2?num1:num2,
       min=num1>num2?num2:num1;
   for(var i=min;i>=1;i--){
      if(max%i==0&&min%i==0){
         return i;
      }
   }
}
顺带也写下最小公倍数就是>=最大的那个数，那就从最大的那个数开始一个一个试
function minDivisor(num1,num2){
   var max=num1>num2?num1:num2,
       min=num1>num2?num2:num1;
   for(var i=max;i>=max;i++){
      if(i%max==0&&i%min==0){
         return i;
      }
   }

}
方法挺多，还有辗转相除法，用递归做。
function maxDivisor(num1,num2){
   if(num2==0){
      return num1;
   }else{
      return maxDivisor(num2,num1%num2);
   }
}
14. JavaScript中如何检测一个变量是一个String类型？ 请写出函数实现
//判断是否是String
function isString(str){
    return ((str instanceof String) || (typeof str).toLowerCase() == "string");
}
//测试案例
var s1 = "abc",
var s2 = new String("abc");
console.log(isString(s1)+"
");
console.log(isString(s2));
//JS里面String的初始化有两种方式：直接赋值和String对象的实例化
var str = "abc";
var str = new String("abc");
//通常来说判断一个对象的类型使用typeof，但是在new String的情况下的结果会是object
//此时需要通过instanceof来判断

obj.constructor == String;
obj instanceof String;
15. 鼠标点击页面中的任意标签， alert该标签的名称．（ 注意兼容性）
方法一： DOM0级事件
document.onclick = function(e){
  var e = e||window.event;
  var target = e.target || e.srcElement;
  console.log(target.tagName.toLowerCase());
}
方法二： DOM2级事件
事件代理
function callback(e) {
  var e = e || window.event;
  var target = e.target || e.srcElement;
  console.log(target.tagName);
}

if (document.addEventListener) {
  document.addEventListener("click", callback, false)
} else if (document.attachEvent) {
  document.attachEvent("onclick", callback)
} else {
  document["onclick"] = callback;
}
手写Function.bind函数
bind()方法会创建一个新函数，当这个新函数被调用时，它的this值是传递给bind()的第一个参数, 它的参数是bind()的其他参数和其原本的参数.
bind() 最简单的用法是创建一个函数，使这个函数不论怎么调用都有同样的 this 值。JavaScript新手经常犯的一个错误是将一个方法从对象中拿出来，然后再调用，希望方法中的 this 是原来的对象。（比如在回调中传入这个方法。）如果不做特殊处理的话，一般会丢失原来的对象。从原来的函数和原来的对象创建一个绑定函数，则能很漂亮地解决这个问题：
this.x = 9; 
var module = {
  x: 81,
  getX: function() { return this.x; }
};

module.getX(); // 81

var retrieveX = module.getX;
retrieveX(); // 9, because in this case, "this" refers to the global object

// Create a new function with "this" bound to module
//New programmers (like myself) might confuse the global var getX with module"s property getX
var boundGetX = retrieveX.bind(module);
boundGetX(); // 81


Polyfill（兼容旧浏览器）
if (!Function.prototype.bind) {
    Function.prototype.bind = function () {
        var self = this,                        // 保存原函数
            context = [].shift.call(arguments), // 保存需要绑定的this上下文
            args = [].slice.call(arguments);    // 剩余的参数转为数组
        return function () {                    // 返回一个新函数
            self.apply(context,[].concat.call(args, [].slice.call(arguments)));
        }
    }
}
https://github.com/lin-xin/bl...
写一个判断质数的isPrime()函数，当其为质数时返回true，否则返回false。
function isPrime(number) {
   if (typeof number !== "number" || !Number.isInteger(number)) {
      // Alternatively you can throw an error.
      return false;
   }
   if (number < 2) {
      return false;
   }
 
   if (number === 2) {
      return true;
   } else if (number % 2 === 0) {
      return false;
   }
   var squareRoot = Math.sqrt(number);
   for(var i = 3; i <= squareRoot; i += 2) {
      if (number % i === 0) {
         return false;
      }
   }
   return true;
}
16通用事件处理函数
// event(事件)工具集，来源：github.com/markyun
EventUtil = {
    // 页面加载完成后
    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.removeEnentListener) {
            element.removeEnentListener(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;
    }
};

//获取浏览器页面当前坐标
EventUtil.addEvent(btn,"click",function(e){
e = EventUtil.getEvent(e);
var pageX = e.pageX,
      pageY = e.pageY;
if(!pageX) {
pageX = e.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
}
if(!pageY) {
pageY = e.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
}
console.log("页面X轴坐标为:"+pageX + " "+ "页面Y轴坐标为:"+pageY);
});
17javascript 事件派发 dispathEvent
单个派发事件
//document上绑定自定义事件onDataRes
document.addEventListener("onDataRes", function (event) {
        alert(event.eventType);
    }, false
);
var obj = document.getElementById("obj");
//obj元素上绑定click事件
obj.addEventListener("click", function (event) {
        alert(event.eventType);
    }, false
);
//调用document对象的 createEvent 方法得到一个event的对象实例。
var event = document.createEvent("HTMLEvents");
// initEvent接受3个参数：
// 事件类型，是否冒泡，是否阻止浏览器的默认行为
event.initEvent("onDataRes", true, true);
event.eventType = "message";
//触发document上绑定的自定义事件onDataRes
document.dispatchEvent(event);*/
/*var event1 = document.createEvent("HTMLEvents");

event1.initEvent("click", true, true);
event1.eventType = "message";
//触发obj元素上绑定click事件
document.getElementById("test").onclick = function () {
    obj.dispatchEvent(event1);
};

支持ie浏览器通用派发事件触发
var dispatch = function(ele, evt) {
    if(document.addEventListener){
        var event = document.createEvent("HTMLEvents");
        event.initEvent(evt, true, true);
        document.dispatchEvent(event);
    }else {
        var event = document.createEventObject();
        document.fireEvent("on"+evt, event)
    }
}

var li = document.getElementById("li");

document.addEventListener("onDataRes", function (event) {
        alert(event.eventType);
    }, false
);

dispatch(li, "onDataRes")

18，事件代理对比
1.方法一：循环绑定



2.方法2 ，事件代理，绑定到ul元素上





19，对象深拷贝
1.递归解决
let obj = {name:"fiona-SUN"};
let copyFunc = (originObj) => {
    let copyObj = {};
    for(let key in originObj){
        copyObj[key] = originObj[key];
    }
    return copyObj;
};

let copyObj = copyFunc(obj);
copyObj.name = "fiona";
console.log(copyObj.name); // "fiona"
console.log(obj.name); // "fiona-SUN"
方法二：通过JSON去解析
let obj = {name:"fiona-SUN"};

let copyObj = JSON.parse(JSON.stringify(obj));

copyObj.name = "fiona";
console.log(copyObj.name); // "fiona"
console.log(obj.name); // "fiona-SUN"
方法三：es6之展开Object.assign（拷贝obj的内容到一个新的堆内存，copyObj存储新内存的引用）
let obj = {name:"fiona-SUN"};

let copyObj = Object.assign({}, obj);

copyObj.name = "fiona";
console.log(copyObj.name); // "fiona"
console.log(obj.name); // "fiona-SUN"
方法四：es6之展开运算符（仅用于数组）
let arr = [1,2,3];
let copyArr = [...obj];
copyArr[2] = 0;
console.log(copyArr[2]); // 0
console.log(arr[2]); // 2
20, JS获取对象最大层级数
var res = 1;

function loopGetLevel(obj, level) {
    var level = level ? level : 1;
    if (typeof obj === "object") {
        for (var key in obj) {
            if (typeof obj[key] === "object") {
                loopGetLevel(obj[key], level + 1);
            } else {
                res = level + 1 > res ? level + 1 : res;
            }
        }
    } else {
        res = level > res ? level : res;
    }
}