一些常用js功能简易方法

1.用argument.callee()实现匿名函数的递归;

var i = 0;
(function () {
     if (i < 10) {
        console.log(i);
        i++;
        arguments.callee();
    }
})()

 

 2.冒泡排序:

var arr = [5, 7, 6, 2, 0, 8, 1, 4, 3];
for (i = 0; i < arr.length; i++) {
    for (j = i + 1; j < arr.length; j++) {
        if (arr[i] > arr[j]) {
            var temp = arr[i];
            arr[i] = arr[j];
            arr[j] = temp;
        }
    }
}

 

3.打擂算法:

var arr = [5, 7, 6, 2, 0, 8, 1, 4, 3];
var master = arr[0];
for (var i = 0; i < arr.length; i++) {
    if (arr[i] > master) {
        master = arr[i];
    }
}
console.log(master);//8

 

4.数组去重:

//(1)高效去重，
var arr = [1, 1, 3, 3, 3, 4, 4, 5, 5, 6, 4, 2, 3, 3]
var newArr =[...new Set(arr)];//一行代码去重
console.log(newArr);
//(2)新建容器,查询之后push元素达到去重的目的
var arr1 = [];
for (var i = 0; i < arr.length; i++) {
    if (arr1.indexOf(arr[i]) == -1) {
        arr1.push(arr[i])
    }
}
console.log(arr1);

 

5.封装取随机数的函数

function getRand(a, b) {
    return Math.floor(Math.random() * (b - a + 1)) + a;
}
console.log(getRand(2, 9));

 

6.随机取不重复数组

var arr = [];//容器
var data = [];//奖池
for (var i = 0; i < 10; i++) {
    data.push(i)//先把可能随机到的所有数据全部放入一个data数组

}
for (var i = 0; i < 10; i++) {//每次随机从data里选取一个元素，选取之后把它从data里删除，防止下次再次选中这个元素
    var index = Math.floor(Math.random() * data.length);
    arr.push(data[index]);//通过随机下标选择data里面的元素
    data.splice(index, 1);//删除data中被选中的元素
}
console.log(arr);

 

7.回到顶部效果

var oDiv = document.getElementById("fixed");
oDiv.onclick = function () {
    document.documentElement.scrollTop = 0;//点击div设置页面的卷去偏移为0(相当于回到页面最顶部)
}

 

8.拖拽效果

var oDiv = document.getElementById('div1');
oDiv.onmousedown = function (ev) {
    var ev = ev || window.event;
    var disX = ev.clientX - this.offsetLeft;
    var disY = ev.clientY - this.offsetTop;
    document.onmousemove = function (ev) {
        var ev = ev || window.event;
        oDiv.style.left = ev.clientX - disX + 'px';
        oDiv.style.top = ev.clientY - disY + 'px';
    }
    document.onmouseup = function () {
        document.onmousemove = null;
        document.onmouseup = null;
    }
}

 

9.经典闭包理解

function show() {
    var x = 10;
    function abc() {
        x++;
        console.log(x);
    }
    return abc;
}
var fn = show();//fn就是show调用以后拿到的闭包abc
fn();//11
fn();//12

 

10.事件委托

var oUl = document.getElementById("ul");
var aLi = oUl.children;
var oBtn = document.getElementById("btn");
oBtn.addEventListener('click', function () {
    var oLi = document.createElement('li');
    oLi.innerHTML = '我是新来的';
    oUl.appendChild(oLi);
})
oUl.addEventListener('click', function (ev) {//给父元素ul添加事件
    var ev = ev || window.event;
    var et = ev.target || ev.srcElement;
    if (ev.target.nodeName == 'LI') {//通过事件源锁定子元素
        for (var i = 0; i < aLi.length; i++) {
            aLi[i].style.background = '';
        }
        et.style.background = 'red';
    }
})

 

11.加千分号

//(1)字符串截取
function addThousands(num) {
    var num = (num || 0).toString();
    var result = '';
    while (num.length > 3) {
        result = ',' + num.slice(-3) + result;
        num = num.slice(0, num.length - 3)
    }
    if (num) { result = num + result; }
    return result;
}
console.log(addThousands(1234567890));
//(2)正则表达式
var str = '1234567890';
var re = /\B(?=(\d{3})+\b)/g;
var str1 = (str.replace(re, ','));
console.log(str1);

 

12.对象的缓存(object,arr,function都是引用类型)-引用类型不能直接赋值,否则就相当于是复制了一下地址

//(1)数组缓存
var arr = [1, 2, 4, 5, 6, 4];
var arr2 = [];
for (var i = 0; i < arr.length; i++) {
    arr2.push(arr[i]);
}
for (var i = 0; i < 6; i++) {
    arr2.pop();
}
console.log(arr);
console.log(arr2);
//(2)对象的深拷贝(obj继承obj1)
function deepClone(obj, obj1) {
    for (var prop in obj1) {
        if (typeof obj1[prop] != 'object') {
            obj[prop] = obj1[prop];
        } else {//如果循环到的属性值是object类型，那么再进行依次浅拷贝
            obj[prop] = deepClone(obj[prop], obj1[prop]);
        }
    }
    return obj
}