js小技巧

1、随机字母数字字符串

function generateRandomAlphaNum(len) {
    var rdmString = "";
    for( ; rdmString.length < len; rdmString  += Math.random().toString(36).substr(2));
    return  rdmString.substr(0, len);
}

console.log(generateRandomAlphaNum(24));

2、随机颜色

var color = '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6);
console.log(color)

3、清空一个数组

var list = [1,2,3];
list.length = 0;//list.length = 0比list = []更加高性能

4、洗牌

function shuffle(arr) {
    var i,j,temp;
    for (i = arr.length - 1; i > 0; i--) {
        j = Math.floor(Math.random() * (i + 1));
        temp = arr[i];
        arr[i] = arr[j];
        arr[j] = temp;
    }
    return arr; 
};
var a = [1, 2, 3, 4, 5, 6, 7, 8];
var b = shuffle(a);
console.log(b);//[4, 5, 2, 6, 7, 1, 8, 3]

5、字符串安全连接

var one = 1;
var two = 2;
var three = '3';
var result1 = ''.concat(one, two, three); //"123"
var result2 = one + two + three; //"33" 而不是 "123"

6、双波浪线“~~”操作符

// 单位移
console.log(~1337) // -1338
// 双位移
console.log(~~47.11) // -> 47
console.log(~~-12.88) // -> -12
console.log(~~1.9999) // -> 1
console.log(~~3) // -> 3
//失败的情况
console.log(~~[]) // -> 0 
console.log(~~NaN) // -> 0
console.log(~~null) // -> 0
//大于32位整数则失败
console.log(~~(2147483647 + 1) === (2147483647 + 1)) // -> 0

7、给回调函数传递参数

使用闭包

function callback(a, b) {
    return function() {
        console.log('sum = ', (a+b));
    }
}
var x = 1, y = 2;
document.getElementById('ele').addEventListener('click', callback(x, y));

另一种方法是使用bind

var alertText = function(text) {
    alert(text);
};
document.getElementById('ele').addEventListener('click', alertText.bind(this, 'hello'));

8、代码块性能测试

console.time("Array b 生成时间");
function shuffle(arr) {
    var i,j,temp;
    for (i = arr.length - 1; i > 0; i--) {
        j = Math.floor(Math.random() * (i + 1));
        temp = arr[i];
        arr[i] = arr[j];
        arr[j] = temp;
    }
    return arr;
};
var a = [1, 2, 3, 4, 5, 6, 7, 8];
var b = shuffle(a);
console.timeEnd("Array b 生成时间");

//Array b 生成时间: 0.132080078125ms

9、将节点列表转换成数组

var cls = document.getElementsByClassName("cls");
console.log(cls.constructor.name);//HTMLCollection
cls = Array.apply(null, cls);
console.log(cls.constructor.name);//Array

10、数组插入一个数据

1、结尾插入

arr.push 的更高性能的替代方法 arr[arr.length]=value

2、开头插入

arr.unshift 的更高性能的替代方法 [value].concat(arr)

11、利用a标签自动解析url

创建一个a标签然后将需要解析的URL赋值给a的href属性

var a = document.createElement('a');
a.href = 'http://www.xxx.com/xx/x/';
console.log(a.host);//www.xxx.com

12、数组去重

var list = [1,1,2,6,2,3,4,5,6,4,3,4,5,3];

方法一：

Array.prototype.unique1 = function () {
    var n = []; //一个新的临时数组
    for (var i = 0; i < this.length; i++) {
        //遍历当前数组
        //如果当前数组的第i已经保存进了临时数组，那么跳过，
        //否则把当前项push到临时数组里面
        if (n.indexOf(this[i]) == -1) n.push(this[i]);
    }
    return n;
};

方法二：

Array.prototype.unique2 = function() {
    var n = {},r=[]; //n为hash表，r为临时数组
    for(var i = 0; i < this.length; i++) {
        //遍历当前数组
        console.log(this[i], n[this[i]]);
        if (!n[this[i]]) {  //如果hash表中没有当前项
            n[this[i]] = true; //存入hash表
            r.push(this[i]); //把当前数组的当前项push到临时数组里面
        }
    }
    return r;
};

方法三：

Array.prototype.unique3 = function() {
    var n = [this[0]]; //结果数组
    for(var i = 1; i < this.length; i++) {
        //从第二项开始遍历
        //如果当前数组的第i项在当前数组中第一次出现的位置不是i，
        //那么表示第i项是重复的，忽略掉。否则存入结果数组
        if (this.indexOf(this[i]) == i) n.push(this[i]);
    }
    return n;
};

13、其他冷门

1、页面拥有ID的元素会创建全局变量

<div id="box"></div>
<script>
    console.log(box);//<div id="box"></div>
</script>

2、利用script标签保存任意信息

<script type="text" id="box">
    <h1>Sample Text</h1>
</script>
var text = document.getElementById('box').innerHTML

3、禁止以iframe加载页面

if (window.location != window.parent.location) window.parent.location = window.location;

4、console.table

var data = [{'品名': '杜雷斯', '数量': 4}, {'品名': '冈本', '数量': 3}];
console.table(data);