【js】前端 js/jquery 常用代码和实践

1.获取某天后几天的日期

//d为传入的日期  days为d后面的几天
function getAfterDate(d,days){
　　var dd = new Date(d);
　　dd.setDate(dd.getDate()+days);
　　var y = dd.getFullYear();
　　var m = dd.getMonth()+1;
　　var d = dd.getDate();
　　return y+"-"+m+"-"+d;
}
alert(getAfterDate('2019-02-28',1))  //打印出2019-03-01

2.检测浏览器是否支持canvas

function isSupportCanvas() {
        return document.createElement('canvas').getContext ? true : false;
}
// 测试
alert(isSupportCanvas());  //true

 3.根据日期计算年龄

function getAge(dateString) {
        var today = new Date();
        var birthDate = new Date(dateString);
        var todayDateYear = today.getFullYear();
        var birthDateYear = birthDate.getFullYear();
        var age = todayDateYear - birthDateYear;
        var m = today.getMonth() - birthDate.getMonth();
        if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
            age--;
        }
        return age;
}

 4.求两个有序数组的交集

function arrayIntersection(a, b){
        var a_index=0, b_index=0;
        var result = new Array();

        while( a_index < a.length && b_index < b.length )
        {
            if (a[a_index] < b[b_index] )  {
                a_index++;
            } else if (a[a_index] > b[b_index] ) {
                b_index++;
            } else {
                //相等
                result.push(a[a_index]);
                a_index++;
                b_index++;
            }
        }
        return result;
}
alert(arrayIntersection([1,2,3],[1,3,4,5,6,9]));//[1,3]

5.根据后端返回的值 选中select

$("#select_id option[value='"+后端返回的值+"']").attr("selected","selected");

6.获取数组中的键

var arr = ["aa", "bb", "cc", "dd"];
var keys_arr = arr.keys(); //[object Array Iterator]

 7.数组合并

var arr1 = [ 1, 2, 3, 4, 5 ];
var arr2 = [ "aa", "bb", "cc"];
var arr3 = arr1.concat(arr2);    //concat不会去除重复的值

8.去重数组的值

function uniqueArr(array) {
    var r = [];
    //alert(array.length);  9
    for (var i = 0, l = array.length; i < l; i++) {
        for (var j = i + 1; j < l; j++){
            //j = i++;    j=0
            //j = ++i;    j=1
            if (array[i] === array[j]) {
                j = ++i;
            }
        }
        r.push(array[i]);
    }
    return r;
}
alert(uniqueArr( [1, 2, 3 , '1', 2, '4',3, ,'6']));  //1,1,2,4,3,,6

9.对象的深拷贝

function deepCloneObj(initalObj, finalObj) {
    var obj = finalObj || {};
    for (var i in initalObj) {
        var prop = initalObj[i];
        //避免相互引用对象导致死循环,如initalObj.cloumn = initalObj的情况
        if(prop === obj) {
            continue;
        }
        if (typeof prop === 'object') {
            obj[i] = (prop.constructor === Array) ? [] : Object.create(prop);
        } else {
            obj[i] = prop;
        }
    }
    return obj;
}

var obj = {
    a: {
        a: "aaa",
        b: "bbb"
    }
}
var cloneObj = deepCloneObj(obj);
cloneObj.a.a = "changed";
alert(cloneObj.a.a);  //changed

js深拷贝还可以用JSON.stringfy()和JSON.parse()实现  ：  JSON.parse(JSON.stringify(obj))  ，jQuery.extend()也实现了对象的深拷贝。

10.判断对象是否存在该属性

var map = {
   'key': ''
};
alert('key' in map); //true

 11.判断浏览器是否支持map和set

'use strict';
var m = new Map();
var s = new Set();
alert('该浏览器支持map和set');   //如果不报错输出这句话说明支持

 12.jquery取消绑定事件

$(document).off("click", "div");

 13.生成范围随机数

//生成从min到max的随机数
function randomNum(min,max){
    switch(arguments.length){
        case 1:
            return parseInt(Math.random()*min+1,10);
        break;
        case 2:
            return parseInt(Math.random()*(max-min+1)+min,10);
        break;
            default:
                return 0;
            break;
    }
}
alert(randomNum(12));

Math.round(Math.random());//获取0到1的随机整数。
Math.random() 生成 [0,1) 的数，所以 Math.random()*10 生成 {0,10) 的数
parseInt() 和 Math.floor() 结果都是向下取整,所以要加1

14.函数柯里化

    柯里化其实将需要多个参数的一个函数转换成一系列函数去执行。举个例子如下：

function add(a, b) {
    return a + b;
}

//函数只能传一个参数时候实现加法
function curry(a) {
    return function(b) {
        return a + b;
    }
}
var add2 = curry(5); //add2也就是第一个参数为5的add版本
alert(add2(5));     //输出8

可以看看这篇博客 https://github.com/mqyqingfeng/Blog/issues/42

15.节流 (不管怎么触发，都按照指定的间隔来执行)

function throttle(func, wait) {
  var timer
  return function() {
    var context = this
    var args = arguments
    if (!timer) {
      timer = setTimeout(function () {
        timer = null
        func.apply(context, args)
      }, wait)
    }
  }
}

 16.javascript中的LHS与RHS

      LHS(Left-hand Side)引用和RHS(Right-hand Side)引用，表示对变量赋值和取变量值的不同操作方式。

17.javascript的Event Loop

　　JavaScript是单线程，就是同一个时间只能做一件事,　JavaScript所有任务任务被分为Task（又称为MacroTask,宏任务）和MicroTask（微任务）两种，都是在两个地方执行：执行栈和任务队列。前者是存放同步任务；后者是异步任务有结果后，就在其中放入一个事件。
　　执行顺序：先跑执行栈里的同步任务，然后再跑任务队列的异步任务。

 18.查找一个字符串在另一个字符串中出现了几次

function countInstances(Str, findStr){
        var count = 0;
        var offset = 0;
        while(offset != -1){
            offset = Str.indexOf(findStr, offset);//返回findStr在Str中首次出现的位置
            if(offset != -1) {
                count++;
                offset += findStr.length;
            }
        }
        return count;
 }
 alert(countInstances('aas"a"aasd','aa'));  //2

19.相对当前域名链接跳转

self.location.href = '/employee/approval/Salary/myApprovalIndex'

 20.调用浏览器打印

window.print();

 21.去除字符串换行

function formatStr(str){
       return str.replace(/[\r\n]/g,"");
}