# 神奇的JavaScript

**Repository Path**: xv700/magic_function

## Basic Information

- **Project Name**: 神奇的JavaScript
- **Description**: 一些精妙的JS函数
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2019-09-24
- **Last Updated**: 2022-09-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

  

### 一些精妙的JavaScript函数  
 

#### 介绍  
一些精妙的JavaScript函数,保存下来方便以后CV，总结经验，但是不要经验主义。


##### **1. UUID** 2019/09/24  

```javascript
UUID：可以产生一个随机的不重复的包含字符串和数字的函数
  
function UUID(){  
  return +new Date+Math.random().toString(36).substr(2);  
}  
```


```javascript
进阶版：在同步循环的时候UUID可能有很低概率出现重复，因为时间戳在1ms内不更新 
 
function UUID_plus(){  
  for(var i=0;i<Math.floor(Math.random()*13);i++){}  
  return +new Date+Math.random().toString(36).substr(2);  
}  
```

##### **2.eval替代**   2019/09/25    

```javascript
eval可能出现不安全和数据意外的情况

function evil(fn) {
var Fn = Function; //一个变量指向Function，防止有些前端编译工具报错
return new Fn('return ' + fn)();
}
```


##### **3. 万能时间格式化**

```javascript
可以为Date原型添加如下的方法：

Date.prototype.format = function(fmt) { 
     var o = { 
        "M+" : this.getMonth()+1,                 //月份 
        "d+" : this.getDate(),                    //日 
        "h+" : this.getHours(),                   //小时 
        "m+" : this.getMinutes(),                 //分 
        "s+" : this.getSeconds(),                 //秒 
        "q+" : Math.floor((this.getMonth()+3)/3), //季度 
        "S"  : this.getMilliseconds()             //毫秒 
    }; 
    if(/(y+)/.test(fmt)) {
            fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").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]) : (("00"+ o[k]).substr((""+ o[k]).length)));
         }
     }
    return fmt; 
}    

调用
var time1 = new Date().format("yyyy-MM-dd hh:mm:ss");
console.log(time1);
```
    

##### **4. 数组高效去重**  
```javascript
Array.prototype.unique=function(){ 
  var temp={};
  var arr1=[];
  var len=this.length;
  for(var i=0;i<len;i++){
   if(!temp[this[i]]){
       temp[this[i]]=true;  //等于任意一个为真的字符串就行， 利用内存KEY：VALUE，减少了一次循环
     arr1.push(this[i])
        
      }  
}
return arr1;

}

ES6
const nums = [1,2,3,4,3,2,1]

uniq1 = [...new Set(nums)]//方法一

uniq2 = Array.from(new Set(nums))//方法二
```

##### **4.1 数组的并集与交集**    

```javascript  
数组交集
var A=[1,2,3,4,5,6,7,8,9,NaN];
var B=[1,3,5,11,NaN];
var intersection = A.filter(val=>B.indexOf(val) > -1);
console.log(intersection); //[1, 3, 5]
//出现了BUG,NaN丢失，因为indexOf本质还是===判断
//改用:
var intersection = A.filter(val=>B.includes(val));
console.log(intersection); //[1, 3, 5, NaN]
```  

```javascript  
数组并集合  
var A=[1,2,3,4,5,6,7,8,9,NaN];  
var B=[1,3,5,11,NaN];  
var union = B.concat(A.filter(val=>!B.includes(val)));  
```   

https://blog.csdn.net/zxl1990_ok/article/details/109210576

##### **5. 快速查询数组内的最值**
 
```javascript
Math.max(10, 20,30);  最大值   

Math.max.call(null,10, 20,30); 
  
Math.max.apply(null,[10, 20,30]);    

利用ES6解构
const arr = [10, 20,30]
Math.max(...arr);
```  

##### **5.1 求数组中元素总和**    

```javascript
求数组中元素总和
eval([10, 20,30].join("+")) //60
```  


##### 6.消灭switch  

```javascript
//原来的switch
switch(n)
{
    case "a":
        console.log("执行代码块 1")
        break;
    case "b":
        console.log("执行代码块 2")
        break;
    case "c":
        console.log("执行代码块 3")
        break;
    default:
    console.log("与 case 1 和 case 2 不同时执行的代码")
        
}
```  

```javascript
 利用object
 let Aa={
    a: e => {
      console.log("执行代码块 1")
    },
    b: e => {
      console.log("执行代码块 2")
    },
    c: e => {
      console.log("执行代码块 3")
    },
    default:e=>{
       console.log("执行代码块 default")
    }
   
 }

 function newSwitch(item={},val){
   let worker = e=>{ }
   worker= item[val] || item["default"] || worker
   worker = worker()
   return worker
 }
newSwitch(Aa,"a")

```  
https://www.freesion.com/article/46831255234/

##### 7.setInterval替代  

https://zhuanlan.zhihu.com/p/87595858


##### 8.函数缓存    


#### 一些功能  

##### 1.BLOB  

```javascript  
{
  //blob下载
    var blob="666\setwert\r\nasdadadsa\r5464646\nasdadad";
    var lHtml = "<table border='1' style='width: 750px;height: 242px; border:1px solid ;border-collapse: collapse;border-color:#000;background-color:white;' align='center'><tr style='border: 0px;'><td colspan='5' style='height: 50px;font-size:21px;text-align: center;border: 0px;font-weight: bold;'>设备XXXXX报告</td></tr></table>"

    var tableHtml='<html><head><meta charset="UTF-8"></head><body>';
    tableHtml += lHtml;
    tableHtml += '</body></html>';
    if (window.navigator.msSaveOrOpenBlob) {
    navigator.msSaveBlob(blob, "download.xls");
    }else{
    const bdata = new Blob([tableHtml], { type: 'application/vnd.ms-excel,charset=UTF-8' });
    const link = document.createElement('a');
    link.href = window.URL.createObjectURL(bdata);
    link.download = "download.xls";
    document.body.append(link);
    link.click();
    window.URL.revokeObjectURL(link.href);
    document.body.removeChild(link);
    }
}
```  

https://gitee.com/xv700/BLOB

##### 2.分段下载    

##### 3.分段加密   

##### 4.防抖节流   

##### 5.网页消息通信 work 多线程
https://gitee.com/xv700/Message-communication-for-web


#### 算法