JavaScript代码片段精选

今天,我在职坐标的微信公众号里面看到了关于  JavaScript代码片段精选 的 微信软文。在实际开发中，我们经常会使用的JS来实现某些功能。今天，就在此总结一下。

1.浮点数取整

const x = 123.4545;
x >> 0; // 123　　　　　　　　　　　　只适用于32个位整数,在负数处理上 和 Math.floor是不同的
~~x; // 123　　　　　　　　　　　　　  只适用于32个位整数,在负数处理上 和 Math.floor是不同的
x | 0; // 123                      只适用于32个位整数,在负数处理上 和 Math.floor是不同的
Math.floor(x); // 123

Math.floor(-12.53); // -13              向下取整
-12.53 | 0; // -12                      向上取整

2.生成6位数字的验证码

// 方法一
('000000' + Math.floor(Math.random() *  999999)).slice(-6);

// 方法二
Math.random().toString().slice(-6);

// 方法三
Math.random().toFixed(6).slice(-6);

// 方法四
'' + Math.floor(Math.random() * 999999);

3.16进制颜色代码生成

(function() {
    return '#'+('00000'+ (Math.random()*0x1000000<<0).toString(16)).slice(-6);
})();

4.驼峰命名装换成下划线

'componentMapModelRegistry'.match(/^[a-z][a-z0-9]+|[A-Z][a-z0-9]*/g).join('_').toLowerCase(); // component_map_model_registry

5.url查询参数转JSON格式

// ES6
const query = (search = '')
            => ((querystring = '')
            => (q
                => (querystring.split('&').forEach(item
                => (kv => kv[0] && (q[kv[0]] = kv[1]))(item.split('='))),q))
            ({}))(search.split('?')[1]);

// 对应ES5实现
var  query = function(search) {
    if(search === void 0) { search = ''; }
    return (function(querystring) {
        if(querystring === void 0) { querystring = ''; }
        return (function(q) {
            return (querystring.split('&').forEach(function(item) {
                return (function(kv) {
                    return kv[0] && (q[kv[0]] = kv[1]);
                })(item.split('='));
            }), q);
        })({});
    })(search.split('?')[1]);
};

query('?key1=value1&key2=value2'); // es6.html:14 {key1: "value1", key2: "value2"}

6.获取URL参数

function getQueryString(key){
    var reg = new RegExp("(^|&)"+ key +"=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if(r!=null){
        return unescape(r[2]);
    }
    return null;
}

7.n维数组展开成一维数组

var foo = [1, [2, 3], ['4',5,'6',,[]]], [910];

// 方法一
// 限制：数组项不能出现`,`，同时数组项全部变成了字符数字
foo.toString().split(','); // ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]

// 方法二
// 转换后数组项全部变成数字了
eval('[' + foo + ']'); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

// 方法三，使用ES6展开操作符
// 写法太过麻烦，太过死板
[1, ...[2, 3], ...['4', 5, ...['6',7,...[8]]], ...[9], 10]; // [1, 2, 3, "4", 5, "6", 7, 8, 9, 10]

// 方法四
JSON.parse(`[${JSON.stringify(foo).replace(/\[|]/g, '')}]`); // [1, 2, 3, "4", 5, "6", 7, 8, 9, 10]

// 方法五
const flatten = (ary) => ary.reduce((a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []);
flatten(foo);  // [1, 2, 3, "4", 5, "6", 7, 8, 9, 10]

// 方法六
function flatten(a) {
  return Array.isArray(a) ? [].concat(...a.map(flatten)) : a;
}
flatten(foo); // [1, 2, 3, "4", 5, "6", 7, 8, 9, 10]

8.日期格式化

// 方法一
function format1(x, y) {
    var z = {
        y: x.getFullYear(),
        M: x.getMonth() + 1,
        d: x.getDate(),
        h: x.getHours(),
        m: x.getMinutes(),
        s: x.getSeconds()
    };

    return y.replace(/(y+|M+|d+|h+|m+|s+)/g,function(v) {
        return ((v.length > 1 ? "0" : "") + eval('z.' + v.slice(-1))).slice(-(v.length > 2 ? v.length : 2))
    });
}
format1(new Date(), 'yy-M-d h:m:s'); // 17-10-14 22:14:41

// 方法二
Date.prototype.format = function(fmt) {
    var o = {
        "M+": this.getMonth() + 1, //月份
        "d+": this.getDate(), //日
        "h+": this.getHours(), //小时
        "m+: this.getMinutes(), //分
        "s+": this.getSeconds(), //秒
        "q+": .floor((this.getMonth() + 3) / 3), //季度
        "S": this.getMilliseconds() //毫秒
    };

    if (/(y+)/.test(fmt)){
        fmt = fmt.replace(RegExp.$1, (this."").substr(4 - RegExp.$1.length));
    }
    for (var k in o){
        if (new RegExp("(" + k + ")").test(fmt)){
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : ((" + o[k]).substr(("" + o[k]).length)));
        }
    }     

    return fmt;
}
new Date().format('yy-M-d h:m:s'); // 17-10-14 22:18:17

9.统计文字个数

function wordCount(data) {
    var pattern = /[a-zA-Z0-9_\u0392-\u03c9]+|[\u4E00-\u9FFF\u3400-\u4dbf\uf900-\ufaff\u3040-\u309f\uac00-\ud7af]+/g;
    var m = data.match(pattern);
    var count = 0;
    if( m === null) return count;
    for(var i = 0; i < m.length; i++) {
        if(m[i].charCodeAt(0) >= 0x4E00) {
            count += m[i].length;
        } else{
            count += 1;
        }
    }
    return count;
}
var text = '贷款买房，也意味着你能给自己的资产加杠杆，能够撬动更多的钱，来孳生更多的财务性收入。';
wordCount(text); // 38

10.特殊字符转义

function htmlspecialchars (str) {
    var str = str.toString()
                 .replace(/&/g, "&")
                 .replace(/</g, "&lt;")
                 .replace(/>/g, "&gt;")
                 .replaceg, '&quot;');
    return str;
}
htmlspecialchars('&jfkds<>'); // "&amp;jfkds&lt;&gt;"

11.动态插入JS

function injectScript(src) {
    var s, t;
    s = document.createElement('script');
    s.type = 'text/javascript';
    s.async = true;
    s.src = src;
    t = document.getElementsByTagName('script')[0];
    t.parentNode.insertBefore(s, t);
}

12.格式化数量

// 方法一
function formatNum (num, n) {
    if(typeof num == "number") {
        num = String(num.toFixed(n || 0));
        var re = /(-?\d+)(\d{3})/;
        while (re.test(num)) num = num.replace(re, "$1,$2");
        return num;
    }
    return  num;
}
formatNum(2313123, 3); // "2,313,123.000"

// 方法二
'2313123'.replace(/\B(?=(\d{3})+(?!\d))/g, ','); // "2,313,123"

// 方法三
function formatNum(str) {
    return str.split('').reverse().reduce((prev, next, index) => {
        return ((index % 3) ? next : (next + ',')) + prev
    });
}
formatNum('2313323'); // "2,313,323"

13.身份证验证

function chechCHNCardId(sNo) {
    if(!this.regExpTest(sNo,/^[0-9]{17}[X0-9]$/)) {
        return false;
    }
    sNo = sNo.toString();

    var a,b,c;
    a = parseInt(sNo.substr(0,1)) * 7 + parseInt(sNo.substr(1,1)) * 9 + parseInt(sNo.substr(2,1)) * 10;
    a = a + parseInt(sNo.substr(3,1)) * 5 + parseInt(sNo.substr(4,1)) * 8 + parseInt(sNo.substr(5,1)) * 4;
    a = a + parseInt(sNo.substr(6,1)) * 2 + parseInt(sNo.substr(7,1)) * 1 + parseInt(sNo.substr(8,1)) * 6;
    a = a + parseInt(sNo.substr(9,1)) * 3 + parseInt(sNo.substr(10,1)) * 7 + parseInt(sNo.substr(11,1)) * 9;
    a = a + parseInt(sNo.substr(12,1)) * 10 + parseInt(sNo.substr(13,1)) * 5 + parseInt(sNo.substr(14,1)) * 8;
    a = a + parseInt(sNo.substr(15,1)) * 4 + parseInt(sNo.substr(16,1)) * 2;
    b = a % 11;

    if(b ==2) {
        c = sNo.substr(17,1).toUpperCase();
    } else {
        c = parseInt(sNo.substr(17,1));
    }

    switch (b) {
    case 0 :
        if(c !=1) {
            returnfalse;
        }
        break;
    case 1 :
        if (c != 0) {
            return false;
        }
        break;
    case 2 :
        if c != "X") {
            return false;
        }
        break;
    case 3 :
        if(c != 9) {
            return false;
        }
        break;
    case 4 :
        if(c != 8) {
            return false;
        }
        break;
    case 5 :
        if(c != 7) {
            return false;
        }
        break;
    case 6 :
        if(c != 6) {
            return false;
        }
        break;
    case 7 :
        if(c != 5) {
            return false;
        }
        break;
    case 8 :
        if(c != 4) {
            return false;
        }
        break;
    case 9 :
        if(c != 3) {
            return false;
        }
        break;
    case 10 :
        if(c != 2) {
            return false;
        };
    }
    return true;
}

14.测试质数

function isPrime(n) {
  return !(/^.?$|^(..+?)\1+$/).test('1'.repeat(n))
}

15.统计字符串之间相同字符出现的次数

var arr =  'abcdaabc';
var info = arr
          .split('')
          .reduce((p, k) => (p[k]++ || (p[k] = 1), p), {});
console.log(info);
//{ a: 3, b: 2, c: 2, d: 1 }

16.使用void()来解决undefined被污染问题

undefined  =  1;
!! undefined; // true
!! void(0); // false

17.单行写一个评级组件

"★★★★★☆☆☆☆☆".slice(5 - rate,10 - rate); 

18.JavaScript错误处理的方式的正确做法

try{
    something
}
catch(e){
    window.location.href ="http://stackoverflow.com/search?q=[js]+"+e.message;
}

19.匿名函数自执行写法

(function() {}());
(function() {})();
[function() {} ()];

~ function() {} ();
! function() {} ();
+ function() {} ();
- function() {} ();

delete function() {} ();
typeof function() {} ();
void function() {} ();
new function() {} ();
new function() {};

var f = function() {} ();
1,function() {} ();
1 ^ function() {} ();
1 > function() {} ();

20.两个整数互换数值

var a = 20, b = 30;
a ^= b;
b ^= a;
a ^= b;
a; // 30
b; // 20

21.数字字符转换成数字

var a = '1';
+a; // 1

22.最短的代码实现数组去重

[...new Set([1,"1",2,1,1,3])];// [1, "1", 2, 3]

23.用最短的代码实现一个长度为 m(6) 且值为 n(8) 的数组

Array(6).fill(8); // [8, 8, 8, 8, 8, 8]

24.将 argruments 对象转换成数组

var argArray =  Array.prototype.slice.call(arguments);
// ES6：
var argArray = Array.from(arguments)
// 或者
var argArray = [...arguments];

25.获取日期时间缀

// 获取指定时间的时间缀
new Date().getTime();
(new Date ()).getTime();
(new Date).getTime();
// 获取当前的时间缀
Date.now();
// 日期显示转换为数字
+new Date();

26.简化JS的比较

var str = 'hello world';
//我们常用的方式
if(str.indexOf('lo') > -1) {

// ...
}
//简化
if(~str.indexOf('lo')) {

// ...
}

27.parseInt()与Number()的区别

28.+ 拼接操作

29.判断对象的实例

// 方法一: ES3
function Person(name, age) {
    if(!(this instanceof Person)) {
        return new Person(name, age);
    }

    this.name = name;
    this.age = age;
}
// 方法二: ES5
function Person(name, age) {
    var self = this instanceof Person ? this : Object.create(Person.prototype);

    self.name = name;
    self.age = age;

    return self;
}
// 方法三：ES6
function Person(name, age) {
    if(!new.target) {
        throw 'Peron must called with new';
    }

    this.name = name;
    this.age = age;
}

30.数据安全类型检查

 1 // 对象
 2 function isObject(value) {
 3     return Object.prototype.toString.call(value).slice(8,  -1) ==='Object' ';
 4 }
 5 // 数组
 6 function isArray(value) {
 7     return Object.prototype.toString.call(value).slice(8, -1) === 'Array';
 8 }
 9 // 函数
10 function isFunction(value) {
11     return Object.prototype.toString.call(value).slice(8, -1) === 'Function';
12 }

31.让数字表面看起来像对象

1 2.toString(); // Uncaught SyntaxError: Invalid or unexpected token
2 2..toString(); // 第二个点号可以正常解析
3 2 .toString(); // 注意点号前面的空格
4 (2).toString(); // 2先被计算

32.对象可计算属性名(仅在ES6)中

1 var suffix = ' name';
2 var person = {
3     ['first' + suffix]: 'Nicholas',
4     ['last' + suffix]: 'Zakas'
5 }
6 person['first name'];// "Nicholas"
7 person['last name'];// "Zakas"