js开发小技巧

获取指定范围内的随机数

function getRadomNum(min,max){
    return  Math.floor(Math.random() * (max - min + 1)) + min;
}

随机获取数组中的元素

function getRadomFromArr(arr){
    return arr[Math.floor(Math.random()*arr.length)];
}

生成从0到指定值的数字数组

function getArray(len) {
    var arr = [],i = 1;
    for (; arr.push(i++) < len;);
    console.log(arr)
}
// 等同于
function getArray(len) {
    var arr = [],i = 1;
    for (; i < len; i++) {
        arr.push(i)
    }
    console.log(arr)
}

打乱数字数组的顺序

var arr = [1, 2, 3, 4, 5, 6, 7, 'a', 'dsfs', 8, 9, 'v'];
arr.sort(function() {
    return Math.random() - 0.5
});

对象转换为数组

//注意对象必须是以下格式的才可以通过此方式转化为数组
//获取的DOM集合，以及函数的arguments也可以通过此方式转化为数组
var obj = {
    0: 'qian',
    1: 'long',
    2: 'chu',
    3: 'tian',
    length: 4
 
}
var objArr = Array.prototype.slice.call(obj);
// var objArr = [].slice.call(obj);
// var objArr = Array.prototype.slice.apply(obj);
console.log(objArr)

验证是否为数组

function isArray(obj) {
    return Object.prototype.toString.call(obj) === '[object Array]';
}

获取数组中最大或者最小值

function maxAndMin(arr){
    return {
       max:Math.max.apply(null,arr.join(',').split(',')),
       min:Math.min.apply(null,arr.join(',').split(','))
    }
}

清空数组

//方式一 通过将长度设置为0
var arr = [1, 2, 3, 4, 5];
arr.length = 0;
 
//方式二 通过splice方法
var arr = [1, 2, 3, 4, 5];
arr.splice(0, arr.length);
 
//方式三 通过将空数组 [] 赋值给数组(严格意义来说这只是将ary重新赋值为空数组，之前的数组如果没有引用在指向它将等待垃圾回收。)
var arr = [1, 2, 3, 4, 5];
arr = [];

保留指定小数位

var num =4.345678;
num = num.toFixed(4);  // 4.3457 第四位小数位以四舍五入计算

生成指定长度的随机字母数字字符串

// 生成指定长度的随机字母数字字符串
/*写法一
function getRandomStr(len) {
    var str = "";
    for (; str.length < len; str += Math.random().toString(36).substr(2));
    return str.substr(0, len);
}
写法二
function getRandomStr(len) {
    var str = "";
    for (; str.length < len;) {
        str += Math.random().toString(36).substr(2);
    }
    return str.substr(0, len);
}*/
/*写法三*/
function getRandomStr(len) {
    for (var str = ''; str.length < len; str += Math.random().toString(36).substr(2));
    return str.substr(0, len)
}

找出数组中出现次数最的元素，并给出其出现过的位置

function getMaxAndIndex(arr) {
    var obj = {};
    arr.forEach(function(item, index) {
        if (!obj[item]) {
            obj[item] = {
                indexs: [index]
            }
        } else {
            obj[item]['indexs'].push(index);
        }
    });
    var num = 0; //记录出现次数最大值
    var str = ''; //记录出现次数最多的字符
    var reArr; //返回最大值的位置数组
    for (var attr in obj) {
        var temp = obj[attr]['indexs'];
        if (temp.length > num) {
            num = temp.length;
            str = attr;
            reArr = temp;
        }
    }
    return {
        maxStr: str,
        indexs: reArr
    }
}

简单一维数组的去重

方法一：双层循环去重

function uniqueArr(arr) {
    var result = [];
    for (var i = 0; i < arr.length; i++) {
        for (var j = i + 1; j < arr.length; j++) {
            if (arr[i] === arr[j]) {
                j = ++i;
            }
        }
        result.push(arr[i]);
    }
    return result;
}
方法二：利用对象的属性不能相同去重

function uniqueArr(arr) {
    var result = [];
    var obj = {};
    for (var i = 0; i < arr.length; i++) {
        if (!obj[arr[i]]) {
            obj[arr[i]] = 1;
            result.push(arr[i]);
        }
    }
    return result;
}
方法三：利用下标

function uniqueArr(arr) {
    var result = [arr[0]];
    for (var i = 1; i < arr.length; i++) {
        if (result.indexOf(arr[i]) == -1) {
            result.push(arr[i]);
        }
    }
    return result;
}
方法四：ES6去重

function uniqueArr(arr) {
    return Array.from(new Set(arr));
}

包含对象的二维数组去重

方法一：双重循环去除法

function uniqueArr(arr, key) {
    var newArr = [];
    for (var i = 0; i < arr.length; i++) {
        var flag = true;
        for (var j = 0; j < newArr.length; j++) {
            if (arr[i][key] == newArr[j][key]) {
                flag = false;
            }
        }
        if (flag) newArr.push(arr[i]);
    }
    return newArr;
}
方法二：利用reduce来实现

function uniqueArr(arr, key) {
    var hash = {};
    return arr.reduce(function(item, next) {
        hash[next[key]] ? '' : hash[next[key]] = true && item.push(next);
        return item
    }, []);
}
例子：

var arr = [{
        id: '001',
        name: 'Jack'
    },
    {
        id: '002',
        name: 'Eric'
    },
    {
        id: '003',
        name: 'Tom'
    },
    {
        id: '003',
        name: 'Lucy'
    },
    {
        id: '002',
        name: 'Lucy'
    },
    {
        id: '004',
        name: 'Jacky'
    },
]
uniqueArr(arr, 'id');

金钱格式化(12,000,000)

const formatNumber = str => str.replace(/\B(?=(\d{3})+(?!\d))/g, ',')

强制取反

let str = ''
console.log(!!str)

判断数据类型

function checkType(any) {
  return Object.prototype.toString.call(any).slice(8, -1)
}

数据深拷贝

// 判断数据类型
function checkType(any) {
  return Object.prototype.toString.call(any).slice(8, -1)
}

// 递归创建
function deepClone(any){
  if(checkType(any) === 'Object') { // 拷贝对象
    let o = {};
    for(let key in any) {
      o[key] = clone(any[key])
    }
    return o;
  } else if(checkType(any) === 'Array') { // 拷贝数组
    var arr = []
    for(let i = 0,leng = any.length;i<leng;i++) {
      arr[i] = clone(any[i])
    }
    return arr;
  } else if(checkType(any) === 'Function') { // 拷贝函数
    return new Function('return '+any.toString()).call(this)
  } else if(checkType(any) === 'Date') { // 拷贝日期
    return new Date(any.valueOf())
  } else if(checkType(any) === 'RegExp') { // 拷贝正则
    return new RegExp(any)
  } else if(checkType(any) === 'Map') { // 拷贝Map 集合
    let m = new Map()
    any.forEach((v,k)=>{
      m.set(k, clone(v))
    })
    return m
  } else if(checkType(any) === 'Set') { // 拷贝Set 集合
    let s = new Set()
    for(let val of any.values()) {
      s.add(clone(val))
    }
    return s
  }
  return any;
}

// 反转序列创建
// 优点：创建对象快
// 缺点：我们将源对象转换为字符串,再转换为新对象虽然解决了深层次拷贝的问题，但我们会发现对象中的Function和undefined 无法拷贝，并且将c: [Getter] 直接转换成了键值对 c:2。
function jsonClone(obj){
    return JSON.parse(JSON.stringify(obj))
}

js防抖节流

 // 防抖功能函数
    function debounce(fn,delay) {
      // 4、创建一个标记用来存放定时器的返回值
      let timeout = null;
      return function() {
        // 5、每次当用户点击/输入的时候，把前一个定时器清除
        clearTimeout(timeout);
        // 6、然后创建一个新的 setTimeout，
        // 这样就能保证点击按钮后的 interval 间隔内
        // 如果用户还点击了的话，就不会执行 fn 函数
        timeout = setTimeout(() => {
          fn.call(this, arguments);
        }, delay);
      };
    }

 	// 节流（1）
    function throttle(fn,delay) {
      // 4、通过闭包保存一个标记
      let canRun = true;
      return function() {
        // 5、在函数开头判断标志是否为 true，不为 true 则中断函数
        if(!canRun) {
          return;
        }
        // 6、将 canRun 设置为 false，防止执行之前再被执行
        canRun = false;
        // 7、定时器
        setTimeout( () => {
          fn.call(this, arguments);
          // 8、执行完事件（比如调用完接口）之后，重新将这个标志设置为 true
          canRun = true;
        }, delay);
      };
    }
	// 节流（2）推荐用时间戳做判断
 function throttle(fun, delay) {
        let last, deferTimer
        return function (args) {
            let that = this
            let _args = arguments
            let now = +new Date()
            if (last && now < last + delay) {
                clearTimeout(deferTimer)
                deferTimer = setTimeout(function () {
                    last = now
                    fun.apply(that, _args)
                }, delay)
            }else {
                last = now
                fun.apply(that,_args)
            }
        }
    }

	// 函数防抖和函数节流都是防止某一时间频繁触发，但是这两兄弟之间的原理却不一样。
	// 函数防抖是某一段时间内只执行一次，而函数节流是间隔时间执行。
	// 防抖规定时间内进入，重置执行函数的定时器，重新开辟最新的；节流设置开关变量标识，再特定条件或者时间达到才开启变量开关