# note

**Repository Path**: chenc041/note

## Basic Information

- **Project Name**: note
- **Description**: 日常笔记
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2016-09-16
- **Last Updated**: 2021-11-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#常用工具函数整理
>日常收集的一些小的工具类函数，常用的工具函数有时候记不住，统一整理下

1. 利用Object toString() 判断数据类型

```
const checkType = function(ele){
    let s = Object.prototype.toString.call(ele);
    	return s.match(/\[object (.*?)\]/)[1].toLowerCase();
}
checkType('a');//string
```

2. 随机生成整数

```
function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
getRandomInt(1, 6);// 5
```

3.获取url参数

```
const GetQueryString = function(){
   let url = location.search; //获取url中"?"符后的字串
   let theRequest = {};
   if (url.indexOf("?") != -1) {
      var str = url.substr(1);
      strs = str.split("&");
      for(var i = 0; i < strs.length; i ++) {
         theRequest[strs[i].split("=")[0]]=(strs[i].split("=")[1]);
      }
   }
   return theRequest;
};
GetQueryString();//获取参数对象
```

4.生成限定长度的随机字符串
```
const randomStr = function(length) {
   let ALPHABET = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
       ALPHABET += 'abcdefghijklmnopqrstuvwxyz';
       ALPHABET += '0123456789-_';
       var str = '';
  for (let i=0; i < length; ++i) {
    let rand = Math.floor(Math.random() * ALPHABET.length);
    str += ALPHABET.slice(rand, rand + 1);
  }
  return str;
}
randomStr(6);//返回长度为6的随机字符串
```

5.手机端rem适配公式

```
const adapt = function(designWidth, rem2px){
	let d = window.document.createElement('div');
	d.style.width = '1rem';
	d.style.display = "none";
	let head = window.document.getElementsByTagName('head')[0];
	head.appendChild(d);
	let defaultFontSize = parseFloat(window.getComputedStyle(d, null).getPropertyValue('width'));
	d.remove();
	document.documentElement.style.fontSize = window.innerWidth / designWidth * rem2px / defaultFontSize * 100 + '%';
	let st = document.createElement('style');
	let portrait = "@media screen and (min-width: "+window.innerWidth+"px) {html{font-size:"+ ((window.innerWidth/(designWidth/rem2px)/defaultFontSize)*100) +"%;}}";
	let landscape = "@media screen and (min-width: "+window.innerHeight+"px) {html{font-size:"+ ((window.innerHeight/(designWidth/rem2px)/defaultFontSize)*100) +"%;}}"
	st.innerHTML = portrait + landscape;
	head.appendChild(st);
	return defaultFontSize
};
let defaultFontSize = adapt(640, 100);
```

6.DOM操作宽度整理

######6.1.网页总宽高

```
document.documentElement.offsetHeight
document.documentElement.scrollHeight
document.body.offsetHeight
document.body.scrollHeight

document.documentElement.offsetWidth
document.documentElement.scrollWidth
document.body.offsetWidth
document.body.scrollWidth
```

######6.2.视口宽高

```
包括滚动条
window.innerHeight
不包括滚动条
document.documentElement.clientHeight

包括滚动条
window.innerWidth
不包括滚动条
document.documentElement.clientWidth
```

######6.3.网页目前的滚动距离

```
网页滚动的水平距离
document.documentElement.scrollLeft

网页滚动的垂直距离
document.documentElement.scrollTop
```
######6.4.网页元素本身的高度和宽度（不含overflow溢出的部分）
```
网页元素的高度
Element.offsetHeight

网页元素的宽度
Element.offsetWidth
```

7.ES6 Array.from() 使用

```
let ArrayLike = {
    0:1,
    1:2,
    2:3,
    length:3
};
const toArray = (() =>
        Array.from ? Array.from : obj => [].slice.call(obj)
)();

toArray(ArrayLike) # [1,2,3]
```

7.1利用ES6 Array.from() 返回字符串的长度

######可以避免JavaScript将大于\uFFFF的Unicode字符，算作两个字符的bug。

```
const getStringLength = (string)=>Array.from(string).length;

getStringLength('hello world') # 11
```

8.数组去重（object hash）
```
Array.prototype.unique = function () {
　# 构建一个新数组存放结果
　let newArray = [];
　# 创建一个空对象
　let object = {};
　/** for循环时，每次取出一个元素与对象进行对比
　* 如果这个元素不重复，则将它存放到结果数中
　* 同时把这个元素的内容作为对象的一个属性，并赋值为1,
　*/ 存入到第2步建立的对象中
　for (var i = 0; i < this.length; i++){
　　# 检测在object对象中是否包含遍历到的元素的值
　　if(!object[typeof(this[i]) + this[i]]) {
　　  # 如果不包含，将存入对象的元素的值推入到结果数组中
　　　newArray.push(this[i]);
　　　# 如果不包含，存入object对象中该属性名的值设置为1
　　　object[typeof(this[i]) + this[i]] = 1;
　　}
　}
　return newArray;
}
```

9.自定义ajax方法 promise 简单运用
```
let ajax = function(obj) {
    let data = '';
    for(let i in obj.data){
        data += '&'+i+'='+encodeURIComponent(obj.data[i]);
    }
    data = data.slice(1);
    if(obj.type === 'get'){
        obj.url = obj.url+'?'+data;
    }
    let promise = new Promise(function(resolve, reject){
        let XHR = new XMLHttpRequest();
        XHR.open(obj.type, obj.url,obj.async);
        XHR.onreadystatechange = handler;
        XHR.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        XHR.send(data);
        function handler() {
            if (this.readyState !== 4) {
                return;
            }
            if (this.status === 200) {
                resolve(this.response);
            } else {
                reject(new Error(this.statusText));
            }
        };
    });
    return promise;
};
ajax({
    type:'post',
    url:'http://192.168.0.58',
    async:true,
    data:{
        name:'watermelonMan',
        age:18
    }
})
.then(res=>{
    console.log(res)
})
.catch(err=>{
    console.log(err)
});
```

10.设置默认值（es5）
```
function f(a) {
  (a !== undefined && a !== null) ? a = a : a = 1;
  return a;
}

f() // 1
f('') // ""
f(0)
```
> 保证 参数值不为undefined null 即可


11.数组求和 reduce
```
Array.prototype.sum = function (){
  return this.reduce(function (partial, value) {
    return partial + value;
  })
};

[3, 4, 5, 6, 10].sum()
```
> 在Array 对象上拓展了 sum方法

12.setTimeout 模拟 setInterval
```
function interval(func, wait){
    /**
     * 递归 调用本身
     */
    let inter = function(){
        func.call(window);
        setTimeout(inter, wait);
    };
    setTimeout(inter, wait);
}

interval(function(){
    console,log(2);
,1000})
```

13.防抖函数
```
function deBounce(fn, delay){
  var timer = null; // 声明计时器
  return function(){
    var context = this;
    var args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function(){
      fn.apply(context, args);
    }, delay);
  };
}
function log(){
    console.log(1)
}

window.addEventListener('scroll',deBounce(log,1000),false);
```