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

随机推荐

CQOI2013vp记
新Nim游戏因为第一次操作与其它操作不同,考虑拿出来单独做,剩下的操作就变成了 Nim游戏了. 回忆一下 Nim游戏先手必胜的条件是什么,是所有数的异或和不为 $0$,那么这题就转化为求原集 ...
从七个方面聊聊linux到底强在哪
从事计算机相关行业的同学不难发现,身边总有一些朋友在学习linux,有的开发同学甚至自己的电脑就是它.经常听他们说linux如何好用等等.那么linux到底好在那里,能让大家如此喜欢.这也是我经常问自 ...
2022-07-27：小红拿到了一个长度为N的数组arr，她准备只进行一次修改，可以将数组中任意一个数arr[i]，修改为不大于P的正数（修改后的数必须和原数不同)，并使得所有数之和为X的倍数。
2022-07-27:小红拿到了一个长度为N的数组arr,她准备只进行一次修改, 可以将数组中任意一个数arr[i],修改为不大于P的正数(修改后的数必须和原数不同), 并使得所有数之和为X的倍数. ...
uni-app介绍
"优你"框架 uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS.Android.Web(响应式).以及各种小程序(微信/支付宝/ ...
GRPC与 ProtoBuf 的理解与总结
转载请注明出处: 1.GRPC 官网:https://www.grpc.io/ gRPC 官方文档中文版:http://doc.oschina.net/grpc RPC 框架的目标就是让远程服务调用更 ...
# 代码随想录算法训练营Day4|24.两两交换链表中的节点 19.删除链表的倒数第N个节点面试题02.07.链表相交 142.环形链表Ⅱ
24.两两交换链表中的节点题目链接:24.两两交换链表中的节点总体思路: 两两交换链表中的节点使用虚拟头节点可以更方便地进行交换,这样头节点和普通节点可以以同一种方式进行. 虚拟头结点的建设代码: ...
qq飞车端游最全按键指法教学
目录起步篇超级起步弹射起步段位起步基础篇点飘撞墙漂移撞墙点喷进阶篇双喷叠喷断位漂移段位双喷侧身漂移快速出弯 CW WCW CWW 牵引甩尾点飘甩尾漂移右侧卡左侧卡 ...
sqlmap工具学习
tryhackme:sqlmap github:https://github.com/sqlmapproject/sqlmap kali集成参数介绍 sqlmap -h ___ __H__ ___ ...
函数接口（Functional Interfaces）
定义首先,我们先看看函数接口在<Java语言规范>中是怎么定义的: 函数接口是一种只有一个抽象方法(除Object中的方法之外)的接口,因此代表一种单一函数契约.函数接口的抽象方法可以是 ...
前端vue uni-app多图片上传组件，支持单个文件，多个文件上传步骤条step使用
快速实现多图片上传组件,支持单个文件,多个文件上传步骤条step使用; 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=1274 ...

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代码片段精选的更多相关文章

随机推荐

热门专题