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, "&amp;")

                 .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"

JavaScript代码片段精选的更多相关文章

精心收集的 48 个 JavaScript 代码片段，仅需 30 秒就可理解！
原文:https://github.com/Chalarangelo/30-seconds-of-code#anagrams-of-string-with-duplicates 作者:Chalaran ...
精心收集的 48 个 JavaScript 代码片段，仅需 30 秒就可理解
原文:Chalarangelo 译文:IT168 https://github.com/Chalarangelo/30-seconds-of-code#anagrams-of-string-with ...
精心收集的48个JavaScript代码片段，仅需30秒就可理解
源文链接 :https://github.com/Chalarangelo/30-seconds-of-code#anagrams-of-string-with-duplicates 该项目来自于 G ...
超实用的 JavaScript 代码片段（ ES6+ 编写）
Array 数组 Array concatenation (数组拼接) 使用 Array.concat() ,通过在 args 中附加任何数组和/或值来拼接一个数组. const ArrayCon ...
精彩 JavaScript 代码片段
1. 根据给定的条件在原有的数组上,得到所需要的新数组. ——<JavaScript 王者归来> var a = [-1,-1,1,2,-2,-2,-3,-3,3,-3]; functio ...
一些非常有用的html,css,javascript代码片段(持久更新)
1.判断设备是否联网 if (navigator.onLine) { //some code }else{ //others code } 2.获取url的指定参数 function getStrin ...
前端面试题 10 个「有用」JavaScript 代码片段
携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第16天,点击查看活动详情降低阅读负担,启发创作心智,轻松学习 JavaScript 技巧,日拱一卒,jym,冲~ 注:本篇可能更 ...
JavaScript 代码片段
1.无题 if (i && i.charAt(i.length - 1) == "/") { i = i.substr(0, i.length - 1) } 2.无 ...
常用javascript代码片段集锦
常用方法的封装根据类名获取DOM元素 var $$ = function (className, element) { if (document.getElementsByClassName) { ...
javascript代码片段
DOMReady函数,只要DOM结构加载完成即可,不必等待所有资源加载完成,节约时间,"DOMContentLoaded"在H5中被标准化 var DOMReady=functio ...

随机推荐

为什么 Go for-range 的 value 值地址每次都一样？
原文链接: 为什么 Go for-range 的 value 值地址每次都一样? 循环语句是一种常用的控制结构,在 Go 语言中,除了 for 关键字以外,还有一个 range 关键字,可以使用 fo ...
讯飞星火大模型与New Bing实测对比
昨天科大讯飞发布了讯飞星火认知大模型,在发布会现场实测大模型的7种核心能力,并发布了它在教育.办公.汽车.数字员工领域的应用成果.科大讯飞董事长刘庆峰表示:认知大模型展示了通用人工智能的曙光,讯飞星火 ...
2023-04-19：给定一个非负数组arr 任何两个数差值的绝对值，如果arr中没有，都要加入到arr里然后新的arr继续，任何两个数差值的绝对值，如果arr中没有，都要加入到arr里一直到ar
2023-04-19:给定一个非负数组arr 任何两个数差值的绝对值,如果arr中没有,都要加入到arr里然后新的arr继续,任何两个数差值的绝对值,如果arr中没有,都要加入到arr里一直到ar ...
2020-10-19：golang里defer为什么要逆序执行？顺序执行不是更符合人的习惯吗？
福哥答案2020-10-19: 后面定义的函数可能会依赖前面的资源,所以要先执行.如果前面先执行,释放掉这个依赖,那后面的函数就不能找到它的依赖了.***[评论](https://user.qzone ...
Django4全栈进阶之路16 项目实战（用户管理）：user_list.html用户列表画面设计
首先在template模板文件夹中新建account子文件夹,用于存放用户管理相关模块页面. 下面开始正式的设计: 1.模块代码设计 {% extends 'base.html' %} {% bloc ...
2013年蓝桥杯C／C++大学B组省赛真题(马虎的算式)
题目描述: 小明是个急性子,上小学的时候经常把老师写在黑板上的题目抄错了. 有一次,老师出的题目是:36 x 495 = ? 他却给抄成了:396 x 45 = ? 但结果却很戏剧性,他的答案竟然是 ...
java（方法定义、调用、重载）
1.方法 Java方法是语句的集合,它们在一起执行一个功能方法是解决一类问题的步骤的有序组合方法包含于类或对象中方法在程序中被创建,在其他地方被引用设计方法的原则:就是一个方法只完成一个功能, ...
Galaxy Release (v 21.05)，众多核心技术栈变更
2021年6月初,Galaxy Project 正式发布了 release 21.05 版本:随后6月中旬,发布该版本的 announcement 文档.这里总结一下该版本一些主要的更新内容,为关注和 ...
深入探索C++对象模型(Inside the C++ object model) -- 摘阅笔记（关于对象 - esp 1）
Object Lessons 关于对象在C语言中,"数据"和"处理数据的操作(函数)"是分开声明的,也就是说 ,语言本身并没有支持"数据和函数&qu ...
binfmt_misc
一:binfmt_misc是什么 binfmt_misc是内核中的一个功能,它能将非本机的二进制文件与特定的解析器自动匹配起来,进行二进制解析. 例如,在x86上解析arm64架构的二进制. 通过bi ...

JavaScript代码片段精选

1.浮点数取整

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

3.16进制颜色代码生成

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

5.url查询参数转JSON格式

6.获取URL参数

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

8.日期格式化

9.统计文字个数

10.特殊字符转义

11.动态插入JS

12.格式化数量

13.身份证验证

14.测试质数

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

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

17.单行写一个评级组件

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

19.匿名函数自执行写法

20.两个整数互换数值

21.数字字符转换成数字

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

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

24.将 argruments 对象转换成数组

25.获取日期时间缀

26.简化JS的比较

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

28.+ 拼接操作

29.判断对象的实例

30.数据安全类型检查

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

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

JavaScript代码片段精选的更多相关文章

随机推荐

热门专题