JavaScript代码片段精选

浮点数取整

const x = 123.456;
console.log(x >> 0);  // 123
console.log(~~x);     // 123
console.log(x | 0);   // 123
console.log(Math.floor(x));  // 123

注意：它们都是向下取整，前三种方法只适用于32整数，对于负数的处理上和 Math.floor 不同。

Math.floor(-12.53); // -13
-12.53 | 0; // -12

生成六位数字验证码

('000000' + Math.floor(Math.random() * 999999)).slice(-6)
Math.random().toString().slice(-6)
Math.random().toFixed(6).slice(-6)

十六进制颜色生成

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

驼峰命名转下划线

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

N维数组转为一维数组

var foo = [1,[2,3],['4',5,['6',7,[8]]],[9],10];
// 全部变成字符数字
foo.toString().split(',')
// 全部变成数字
eval('[' + foo + ']')
// ES6字符串模板拼接，并使用字符串替换数组括号为空字符 (不改变元素类型)
JSON.parse(`[${JSON.stringify(foo).replace(/\[|]/g,'')}]`)
// 递归  不改变元素类型
const flatten = (arr) => {
    return arr.reduce((a,b) => {
        return a.concat(Array.isArray(b) ? flatten(b) : b)  
    },[])
}
// ES6 map 不改变元素类型
function flatten(a){
    return Array.isArray(a) ? [].concat(...a.map(flatten)) : a;
}

日期格式化

function format(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){
        // console.log(v);
        return ((v.length > 1 ? '0' : '') + eval('z.' + v.slice(-1))).slice(-(v.length > 2 ? v.length : 2));
    })
}
console.log(format(new Date(),'yy-MM-d hh:mm:ss'));

统计文字个数

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;
        }
    }
    return count;
}

特殊字符转义

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

动态引入外部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);
}

格式化数量（数字千分位转换）

function formatNum(str){
    return str.toString().split('').reverse().reduce((prev,next,index) => {
        return ((index % 3) ? next : (next + ',')) + prev;
    })
}
// 或者
str.replace(/\d{1,3}(?=(\d{3})+$)/g,function(s){ return s+',' })
//或者
Number.parseFloat(1234567.1234).toLocaleString() // 四舍五入，并且保留三位小数 toLocaleString默认转换 en-US

// 实现保留两位小数千分位
let num = 1234567890.1234.toFixed(2);
let index = num.toString().indexOf('.');
let str = num.toString().slice(index);
let intNum = num.toString().slice(0,index);
let value = intNum.replace(/\d{1,3}(?=(\d{3})+$)/g,function(s){ return s+',' }) + str;
console.log(value); // 1,234,567,890.12

统计字符串中相同字符出现的次数

let str = 'abcabcabcdeca';
var info = str.split('').reduce((p,k) => {
    p[k] ? p[k]++ : p[k] = 1;
    return p;
},{});

// 或者
function findStrNum (str){
    let obj = {}, 
        value = 0,  // 出现最多的字符出现次数
        string = ''; // 出现次数最多的字符
    str = str.split('')  // 将字符串转为数组
    // 将每个字符串作为obj的属性
    for(var i = 0; i < str.length; i ++){
        if (!obj[str[i]]) {
            obj[str[i]] = 1;
        } else {
            obj[str[i]] += 1;
        }
    }
    // 寻找出现次数最多的字符
    for (var key in obj) {
        if(obj[key] > value){
            value = obj[key];
            string = key;
        }
    }
    return {value,string};
}

JavaScript 错误处理的方式

try {
  something
} catch (e){
  window.location.href = '错误页面 + e.message'
}

匿名函数自执行

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

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

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

两个整数交换数值

let a = 20,b = 30;
// 方式一：
a ^= b;
b ^= a;
a ^= b;
// 方式二：
let t;
t = a;
a = b;
b = t;
// 方式三：
a += b;
b = a - b;
a -= b;
// 方式四：
a = {a: b,b: a};
b = a.b;
a = a.a;
// 方式五：
a = [a,b];
b = a[0];
a = a[1];
// 方式六：
a = [b, b = a] [0];
// 方式七：
[a,b] = [b,a];

最短的数组去重

[... new Set([1,'1',2,3,4,1,2,1])]

用最短的代码实现一个长度为6且值都为8

Array(6).fill(8);

将arguments对象转为数组

var argArray = Array.prototype.slice.call(arguments);
var argArray = Array.from(arguments);
var argArray = [... arguments]

parseInt() 和 Number()

parseInt允许字符串中包含非数字字符，会从左到右解析，如果遇到非数字字符就停止解析。第二参数用于指定转换的基数，ES5默认为10进制
Number不允许出现非数字字符，否则会失败并返回NaN

var a = '520';
var b = '520px';
console.log(Number(a));  // 520
console.log(parseInt(a));  // 520
console.log(Number(b));  // NaN
console.log(parseInt(b));  // 520

数据安全类型检查

// 对象
function isObject(value){
  return Object.prototype.toString.call(value).slice(8,-1) === 'Object';
}
// 数组
function isArray(value){
  return Object.prototype.toString.call(value).slice(8,-1) === 'Array';
}
// 函数
function isFunction(value){
  return Object.prototype.toString.call(value).slice(8,-1) === 'Function';
}