web建站教程

  1. 首页
  2. vuejs
  3. js
  4. 好玩
  5. seo教程
  6. 前端知识
  7. 百度echarts
  8. php入门
    nodejs
    mockjs
    mysql
    织梦cms
    帝国cms
    git教程

20个JavaScript开发小技巧

103 ℃

下面web建站教程为大家介绍一下20个JavaScript开发小技巧

1. 初始化数组

如果想要初始化一个指定长度的一维数组,并指定默认值,可以这样:

const array = Array(6).fill(''); 
// ['', '', '', '', '', '']

如果想要初始化一个指定长度的二维数组,并指定默认值,可以这样:

const matrix = Array(6).fill(0).map(() => Array(5).fill(0)); 
// [[0, 0, 0, 0, 0],
//  [0, 0, 0, 0, 0],
//  [0, 0, 0, 0, 0],
//  [0, 0, 0, 0, 0],
//  [0, 0, 0, 0, 0],
//  [0, 0, 0, 0, 0]]

2. 数组求和、求最大值、最小值

const array  = [5,4,7,8,9,2];

数组求和:

array.reduce((a,b) => a+b);

数组最大值:

array.reduce((a,b) => a > b ? a : b);

Math.max(...array)

数组最小值:

array.reduce((a,b) => a < b ? a : b);

Math.min(...array)

使用数组的reduce方法可以解决很多数组的求值问题。

3. 过滤错误值

如果想过滤数组中的false、0、null、undefined等值,可以这样:

const array = [1, 0, undefined, 6, 7, '', false];

array.filter(Boolean);
// [1, 6, 7]

4. 使用逻辑运算符

如果有一段这样的代码:
if(a > 10) {
    doSomething(a)
}

可以使用逻辑运算符来改写:

a > 10 && doSomething(a)

5. 判断简化

如果有下面的这样的一个判断:

if(a === undefined || a === 10 || a=== 15 || a === null) {
    //...
}

就可以使用数组来简化这个判断逻辑:

if([undefined, 10, 15, null].includes(a)) {
    //...
}

这样代码就会简洁很多,并且便于扩展,如果还有需要等于a的判断,直接在数组中添加即可。

6. 清空数组

如果想要清空一个数组,可以将数组的length置于0:

let array = ["A", "B", "C", "D", "E", "F"]
array.length = 0 
console.log(array)  // []

7. 计算代码性能

可以使用以下操作来计算代码的性能:

const startTime = performance.now(); 
// 某些程序
for(let i = 0; i < 1000; i++) {
    console.log(i)
}
const endTime = performance.now();
const totaltime = endTime - startTime;
console.log(totaltime); // 30.299999952316284

8. 拼接数组

如果我们想要拼接几个数组,可以使用扩展运算符:

const start = [1, 2] 
const end = [5, 6, 7] 
const numbers = [9, ...start, ...end, 8] // [9, 1, 2, 5, 6, 7 , 8]

或者使用数组的concat()方法:

const start = [1, 2, 3, 4] 
const end = [5, 6, 7] 
start.concat(end); // [1, 2, 3, 4, 5, 6, 7]

但是使用concat()方法时,如果需要合并的数组很大,那么concat() 函数会在创建单独的新数组时消耗大量内存。这时可以使用以下方法来实现数组的合并:

Array.push.apply(start, end)

通过这种方式就能在很大程度上较少内存的使用。

9. 对象验证方式

如果我们有一个这样的对象:

const parent = {
    child: {
      child1: {
        child2: {
          key: 10
      }
    }
  }
}

很多时候我们会这样去写,避免某一层级不存在导致报错:

parent && parent.child && parent.child.child1 && parent.child.child1.child2

这样代码看起来就会很臃肿,可以使用JavaScript的可选链运算符:

parent?.child?.child1?.child2

这样实现和效果和上面的一大长串是一样的。

可选链运算符同样适用于数组:

const array = [1, 2, 3];
array?.[5]

10. 验证undefined和null

如果有这样一段代码:

if(a === null || a === undefined) {
    doSomething()
}

也就是如果需要验证一个值如果等于null或者undefined时,需要执行一个操作时,可以使用空值合并运算符来简化上面的代码:

a ?? doSomething()

11. 数组元素转化为数字

如果有一个数组,想要把数组中的元素转化为数字,可以使用map方法来实现:

const array = ['12', '1', '3.1415', '-10.01'];
array.map(Number);  // [12, 1, 3.1415, -10.01]

通过这种方式,map会在遍历数组时,对数组的每个元素执行Number构造函数并返回结果。

12. 类数组转为数组

可以使用以下方法将类数组arguments转化为数组:

Array.prototype.slice.call(arguments);

除此之外,还可以使用扩展运算符来实现:

[...arguments]

13. 对象动态声明属性

如果想要给对象动态声明属性,可以这样:

const dynamic = 'color';
var item = {
    brand: 'Ford',
    [dynamic]: 'Blue'
}
console.log(item); 
// { brand: "Ford", color: "Blue" }

14. 缩短console.log()

每次进行调试时书写很多console.log()就会比较麻烦,可以使用以下形式来简化这个代码:

const c = console.log.bind(document) 
c(996) 
c("hello world")

这样每次执行c方法就行了。

15. 获取查询参数

如果我们想要获取URL中的参数,可以使用window对象的属性:

window.location.search

如果在想获取到其中某一个参数,可以这样:

let type = new URLSearchParams(location.search).get('type');

16. 数字取整

如果有一个数字包含小数,我们想要去除小数,通过会使用math.floor、math.ceil或math.round方法来消除小数。其实可以使用~~运算符来消除数字的小数部分,它相对于数字的那些方法会快很多。

~~3.1415926

实这个运算符的作用有很多,通常是用来将变量转化为数字类型的,不同类型的转化结果不一样:
如果是数字类型的字符串,就会转化为纯数字;
如果字符串包含数字之外的值,就会转化为0;
如果是布尔类型,true会返回1,false会返回0;

除了这种方式之外,我们还可以使用按位与来实现数字的取整操作,只需要在数字后面加上|0即可:

23.9 | 0   // 23
-23.9 | 0   // -23

这个操作也是直接去除数字后面的小数。这个方法和上面方法类似,使用起来性能都会比JavaScript的的API好很多。

17. 删除数组元素

const array = ["a", "b", "c", "d"] 
array.splice(0, 2) // ["a", "b"]

18. 检查对象是否为空

如果我们想要检查对象是否为空,可以使用以下方式:

Object.keys({}).length  // 0
Object.keys({key: 1}).length  // 1

Object.keys()方法用于获取对象的 key,会返回一个包含这些key值的数组。如果返回的数组长度为0,那对象肯定为空了。

19. 使用 switch case 替换 if/else

switch case 相对于 if/else 执行性能更高,代码看起来会更加清晰。

if (1 == month) {days = 31;}
else if (2 == month) {days = IsLeapYear(year) ? 29 : 28;}
else if (3 == month) {days = 31;}
else if (4 == month) {days = 30;} 
else if (5 == month) {days = 31;} 
else if (6 == month) {days = 30;} 
else if (7 == month) {days = 31;} 
else if (8 == month) {days = 31;} 
else if (9 == month) {days = 30;} 
else if (10 == month) {days = 31;} 
else if (11 == month) {days = 30;} 
else if (12 == month) {days = 31;} 

使用switch...case来改写:

switch(month) {
	case 1: days = 31; break;
	case 2: days = IsLeapYear(year) ? 29 : 28; break;
	case 3: days = 31; break;
	case 4: days = 30; break;
	case 5: days = 31; break;
	case 6: days = 30; break;
	case 7: days = 31; break;
	case 8: days = 31; break;
	case 9: days = 30; break;
	case 10: days = 31; break;
	case 11: days = 30; break;
	case 12: days = 31; break;
	default: break;
}

20. 获取数组中的最后一项

如果想获取数组中的最后一项,很多时候会这样来写:

const arr = [1, 2, 3, 4, 5];
arr[arr.length - 1]  // 5

其实我们还可以使用数组的slice方法来获取数组的最后一个元素:

arr.slice(-1)

当我们将slice方法的参数设置为负值时,就会从数组后面开始截取数组值,如果我们想截取后两个值,参数传入-2即可。

js从指定数组中删除另一个数组中存在的元素并输出

js删除多维数组指定参数名

js把一个数组根据相同名字合并成到子数组里

js数组中将有父子关系的平行数组转换成树形数据

上面是“20个JavaScript开发小技巧”的全面内容,想了解更多关于 js 内容,请继续关注web建站教程。

当前网址:https://ipkd.cn/webs_1513.html

声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!

前端MD5加密源码(md5.js)

1、引入md5.js

2、直接调用:md5(需要加密的内容)

var hexcase = 0;  
var b64pad  = ""; 
var chrsz   = 8;  
function md5(s){ return binl2hex(core_md5(str2binl(s), s.length * chrsz));}
function b64_md5(s){ return binl2b64(core_md5(str2binl(s), s.length * chrsz));}
function hex_hmac_md5(key, data) { return binl2hex(core_hmac_md5(key, data)); }
function b64_hmac_md5(key, data) { return binl2b64(core_hmac_md5(key, data)); }
function calcMD5(s){ return binl2hex(core_md5(str2binl(s), s.length * chrsz));}

function md5_vm_test()
{
  return md5("abc") == "900150983cd24fb0d6963f7d28e17f72";
}

function core_md5(x, len)
{

  x[len >> 5] |= 0x80 << ((len) % 32);
  x[(((len + 64) >>> 9) << 4) + 14] = len;
  var a =  1732584193;
  var b = -271733879;
  var c = -1732584194;
  var d =  271733878;
  for(var i = 0; i < x.length; i += 16)
  {
    var olda = a;
    var oldb = b;
    var oldc = c;
    var oldd = d;

    a = md5_ff(a, b, c, d, x[i+ 0], 7 , -680876936);
    d = md5_ff(d, a, b, c, x[i+ 1], 12, -389564586);
    c = md5_ff(c, d, a, b, x[i+ 2], 17,  606105819);
    b = md5_ff(b, c, d, a, x[i+ 3], 22, -1044525330);
    a = md5_ff(a, b, c, d, x[i+ 4], 7 , -176418897);
    d = md5_ff(d, a, b, c, x[i+ 5], 12,  1200080426);
    c = md5_ff(c, d, a, b, x[i+ 6], 17, -1473231341);
    b = md5_ff(b, c, d, a, x[i+ 7], 22, -45705983);
    a = md5_ff(a, b, c, d, x[i+ 8], 7 ,  1770035416);
    d = md5_ff(d, a, b, c, x[i+ 9], 12, -1958414417);
    c = md5_ff(c, d, a, b, x[i+10], 17, -42063);
    b = md5_ff(b, c, d, a, x[i+11], 22, -1990404162);
    a = md5_ff(a, b, c, d, x[i+12], 7 ,  1804603682);
    d = md5_ff(d, a, b, c, x[i+13], 12, -40341101);
    c = md5_ff(c, d, a, b, x[i+14], 17, -1502002290);
    b = md5_ff(b, c, d, a, x[i+15], 22,  1236535329);
    a = md5_gg(a, b, c, d, x[i+ 1], 5 , -165796510);
    d = md5_gg(d, a, b, c, x[i+ 6], 9 , -1069501632);
    c = md5_gg(c, d, a, b, x[i+11], 14,  643717713);
    b = md5_gg(b, c, d, a, x[i+ 0], 20, -373897302);
    a = md5_gg(a, b, c, d, x[i+ 5], 5 , -701558691);
    d = md5_gg(d, a, b, c, x[i+10], 9 ,  38016083);
    c = md5_gg(c, d, a, b, x[i+15], 14, -660478335);
    b = md5_gg(b, c, d, a, x[i+ 4], 20, -405537848);
    a = md5_gg(a, b, c, d, x[i+ 9], 5 ,  568446438);
    d = md5_gg(d, a, b, c, x[i+14], 9 , -1019803690);
    c = md5_gg(c, d, a, b, x[i+ 3], 14, -187363961);
    b = md5_gg(b, c, d, a, x[i+ 8], 20,  1163531501);
    a = md5_gg(a, b, c, d, x[i+13], 5 , -1444681467);
    d = md5_gg(d, a, b, c, x[i+ 2], 9 , -51403784);
    c = md5_gg(c, d, a, b, x[i+ 7], 14,  1735328473);
    b = md5_gg(b, c, d, a, x[i+12], 20, -1926607734);
    a = md5_hh(a, b, c, d, x[i+ 5], 4 , -378558);
    d = md5_hh(d, a, b, c, x[i+ 8], 11, -2022574463);
    c = md5_hh(c, d, a, b, x[i+11], 16,  1839030562);
    b = md5_hh(b, c, d, a, x[i+14], 23, -35309556);
    a = md5_hh(a, b, c, d, x[i+ 1], 4 , -1530992060);
    d = md5_hh(d, a, b, c, x[i+ 4], 11,  1272893353);
    c = md5_hh(c, d, a, b, x[i+ 7], 16, -155497632);
    b = md5_hh(b, c, d, a, x[i+10], 23, -1094730640);
    a = md5_hh(a, b, c, d, x[i+13], 4 ,  681279174);
    d = md5_hh(d, a, b, c, x[i+ 0], 11, -358537222);
    c = md5_hh(c, d, a, b, x[i+ 3], 16, -722521979);
    b = md5_hh(b, c, d, a, x[i+ 6], 23,  76029189);
    a = md5_hh(a, b, c, d, x[i+ 9], 4 , -640364487);
    d = md5_hh(d, a, b, c, x[i+12], 11, -421815835);
    c = md5_hh(c, d, a, b, x[i+15], 16,  530742520);
    b = md5_hh(b, c, d, a, x[i+ 2], 23, -995338651);
    a = md5_ii(a, b, c, d, x[i+ 0], 6 , -198630844);
    d = md5_ii(d, a, b, c, x[i+ 7], 10,  1126891415);
    c = md5_ii(c, d, a, b, x[i+14], 15, -1416354905);
    b = md5_ii(b, c, d, a, x[i+ 5], 21, -57434055);
    a = md5_ii(a, b, c, d, x[i+12], 6 ,  1700485571);
    d = md5_ii(d, a, b, c, x[i+ 3], 10, -1894986606);
    c = md5_ii(c, d, a, b, x[i+10], 15, -1051523);
    b = md5_ii(b, c, d, a, x[i+ 1], 21, -2054922799);
    a = md5_ii(a, b, c, d, x[i+ 8], 6 ,  1873313359);
    d = md5_ii(d, a, b, c, x[i+15], 10, -30611744);
    c = md5_ii(c, d, a, b, x[i+ 6], 15, -1560198380);
    b = md5_ii(b, c, d, a, x[i+13], 21,  1309151649);
    a = md5_ii(a, b, c, d, x[i+ 4], 6 , -145523070);
    d = md5_ii(d, a, b, c, x[i+11], 10, -1120210379);
    c = md5_ii(c, d, a, b, x[i+ 2], 15,  718787259);
    b = md5_ii(b, c, d, a, x[i+ 9], 21, -343485551);

    a = safe_add(a, olda);
    b = safe_add(b, oldb);
    c = safe_add(c, oldc);
    d = safe_add(d, oldd);
  }
  return Array(a, b, c, d);
  
}

function md5_cmn(q, a, b, x, s, t)
{
  return safe_add(bit_rol(safe_add(safe_add(a, q), safe_add(x, t)), s),b);
}
function md5_ff(a, b, c, d, x, s, t)
{
  return md5_cmn((b & c) | ((~b) & d), a, b, x, s, t);
}
function md5_gg(a, b, c, d, x, s, t)
{
  return md5_cmn((b & d) | (c & (~d)), a, b, x, s, t);
}
function md5_hh(a, b, c, d, x, s, t)
{
  return md5_cmn(b ^ c ^ d, a, b, x, s, t);
}
function md5_ii(a, b, c, d, x, s, t)
{
  return md5_cmn(c ^ (b | (~d)), a, b, x, s, t);
}

function core_hmac_md5(key, data)
{
  var bkey = str2binl(key);
  if(bkey.length > 16) bkey = core_md5(bkey, key.length * chrsz);

  var ipad = Array(16), opad = Array(16);
  for(var i = 0; i < 16; i++) 
  {
    ipad[i] = bkey[i] ^ 0x36363636;
    opad[i] = bkey[i] ^ 0x5C5C5C5C;
  }

  var hash = core_md5(ipad.concat(str2binl(data)), 512 + data.length * chrsz);
  return core_md5(opad.concat(hash), 512 + 128);
}

function safe_add(x, y)
{
  var lsw = (x & 0xFFFF) + (y & 0xFFFF);
  var msw = (x >> 16) + (y >> 16) + (lsw >> 16);
  return (msw << 16) | (lsw & 0xFFFF);
}

function bit_rol(num, cnt)
{
  return (num << cnt) | (num >>> (32 - cnt));
}

function str2binl(str)
{
  var bin = Array();
  var mask = (1 << chrsz) - 1;
  for(var i = 0; i < str.length * chrsz; i += chrsz)
    bin[i>>5] |= (str.charCodeAt(i / chrsz) & mask) << (i%32);
  return bin;
}

function binl2hex(binarray)
{
  var hex_tab = hexcase ? "0123456789ABCDEF" : "0123456789abcdef";
  var str = "";
  for(var i = 0; i < binarray.length * 4; i++)
  {
    str += hex_tab.charAt((binarray[i>>2] >> ((i%4)*8+4)) & 0xF) +
           hex_tab.charAt((binarray[i>>2] >> ((i%4)*8  )) & 0xF);
  }
  return str;
}

function binl2b64(binarray)
{
  var tab = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
  var str = "";
  for(var i = 0; i < binarray.length * 4; i += 3)
  {
    var triplet = (((binarray[i   >> 2] >> 8 * ( i   %4)) & 0xFF) << 16)
                | (((binarray[i+1 >> 2] >> 8 * ((i+1)%4)) & 0xFF) << 8 )
                |  ((binarray[i+2 >> 2] >> 8 * ((i+2)%4)) & 0xFF);
    for(var j = 0; j < 4; j++)
    {
      if(i * 8 + j * 6 > binarray.length * 32) str += b64pad;
      else str += tab.charAt((triplet >> 6*(3-j)) & 0x3F);
    }
  }
  return str;
}
点击阅读全文
上一篇:echarts地图给每个区域添加不同颜色
下一篇:前端常用的49个JavaScript方法