js小技巧

var textReg = /(.{10}).*/
var text = "控制文字的长度，其余用***表示"

text.replace(textReg, '$1***')


var mobileReg = /^(d{3}).*(d{4})$/  //可以匹配手机号和座机等
var mobile = "13590244124"

mobile.replace(mobileReg, '$1****$2')

()代表的是 分组，即小括号里面的小正则 捕获到的内容。($1--$9 是RegExp 自带的)

2.浮点数运算

function mul() {//乘法
      arguments = Array.from(arguments)//arguments不是真的数组，用不了concat方法
      var m = 0,
        arg = arguments.concat(),
        result = 1;
      arg.forEach((item, index) => {
        arg[index] = item.toString()// item = item.toString()改变不了原数组，如果是对象的就可以直接修改（js的基本类型 按值传递，对象类型按 共享传递）
        try {
              if (arg[index].indexOf('.') > -1)
                m += arg[index].split(".")[1].length;
        }catch (e) {
        }
      })
      arg.forEach(item => {
        result *= parseFloat(item.replace(".", ""))
      })
      return result / Math.pow(10, m);
}

function div () {//除法
    arguments = Array.from(arguments)
    var m = 0,
        arg = arguments.concat(),
        pow = [],
        result = 1;
    arg.forEach((item, index) => {
        arg[index] = item.toString()
        if(index === 0){
            result *= parseFloat(arg[index].replace(".", ""))
        }
        try {
            if (arg[index].indexOf('.') > -1)
                   pow[index] = arg[index].split(".")[1].length;
        }catch (e) {
        }
    })
     arg.forEach( (item, index) => {
        if(index > 0)
            result /= parseFloat(item.replace(".", ""))
    })
    pow.forEach( (item, index) => {
        if(index === 0 && item){
            m -= item
        }else if(index > 0 && item){
            m += item
        }
    })
    return mul(result, Math.pow(10, m));
}

function add() {//加法
    arguments = Array.from(arguments)
    var m = 0,
        arg = arguments.concat(),
        pow = [],        
        result = 0;
    arg.forEach((item, index) => {
        arg[index] = item.toString()
        try {
            if (arg[index].indexOf('.') > -1)
                pow[index] = arg[index].split(".")[1].length;
        }catch (e) {
        }
    })
    m = Math.pow(10, Math.max(...pow))
    arg.forEach(item => {
        result += mul(item, m)
    })
    return result / m
}

function sub() {//减法
    arguments = Array.from(arguments)
    var m = 0,
        arg = arguments.concat(),
        pow = [],        
        result = 0;
    arg.forEach((item, index) => {
        arg[index] = item.toString()
        try {
            if (arg[index].indexOf('.') > -1)
                pow[index] = arg[index].split(".")[1].length;
        }catch (e) {
        }
    })
    m = Math.pow(10, Math.max(...pow))
    arg.forEach((item, index) => {
    if(index === 0){
        result += mul(item, m)
    }else{
        result -= mul(item, m)
    }
    })
    return result / m
}

 3.encodeURIComponent和decodeURIComponent

对于IE浏览器，query参数传中文字符串最好encodeURIComponent编码，不然IE9及以下浏览器可能出现乱码问题；

一个字符串，里面不包含‘%’（有调用decodeURIComponent会报错），可多次调用decodeURIComponent进行解码，内容一致；（%  编码成 %25）

4. null*1 === 0

//根据C语言的传统，null被设计成可以自动转为0
 typeof null === 'object'

//null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。

5 + undefined 为 NaN

//null表示"没有对象"，即该处不应该有值。典型用法是：
//作为对象原型链的终点。

Object.getPrototypeOf(Object.prototype) === null

5. 左移运算符,右移运算符运用

2.3>>1  //1
-2.3>>1 //-1

//对于左运算，类似于先舍弃小数部分再乘于2的n次方向下取整
2.7<<2   可以理解成2*2^2

//对于右运算，类似于先舍弃小数部分再除于2的n次方向下取整
-12.7>>2   可以理解成-12/(2^2) 为-3
-15.9>>2   可以理解成-15/(2^2) 为-4

 6. 关于谷歌弹出默认选择密码框的问题

//当input的type为password的时候会自动弹出默认密码选择框

//方法一：初始化的时候设置type为text，然后监听onChange事件
//当value不为空时置type为password
// 弊端，浏览器自动填充密码的时候会明文

//方法二：设置为readOnly,当获得焦点的时候，延迟设置e.target.readOnly=false
// 当失去焦点的时候，重新设置e.target.readOnly=true

7. 选用浏览器的密码填充后，会出现默认的背景色

&:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #272789 inset;//背景色
    -webkit-text-fill-color: #FFF;//填充文字颜色
    caret-color: #FFF;//鼠标颜色
}

 8. 避免浏览器缓存get请求

request.interceptors.request.use(function (config) {
  // let token = window.localStorage.getItem('token') || ''
  // if(token){
  //   config.headers['Authorization'] = 'bearer ' + token
  // }

  if(config.method.toLowerCase() === 'get'){
    if (!config['params']) { //如果这个请求本身不带参数
      Object.assign(config, {   //给options这个对象添加一个params的参数，属性为_,值为时间戳
        params: {
          _: new Date().getTime()
        }
      })
    } else {
      Object.assign(config.params, { //如果get请求本身带有参数，给options.params 再添加一个key值_,值为时间戳
        _: new Date().getTime()
      })
    }
  }

  return config;
}, function (error) {
  // Do something with request error
  return Promise.reject(error);
});

 9. 判断是否为IE

isIE = () => {
    // return window.navigator.userAgent.indexOf('MSIE') > -1; //ie 11 失效
    if (!!window.ActiveXObject || "ActiveXObject" in window){
      return true;
    }else {
      return false;
    }
  }

10 window.open(url) 和window.open(url, '__blank') 的区别

区别在于从主页面window.open(url) 永远都是新开个标签页，window.open(url, '__blank')会检测如果已经从主页面新开标签页，会复用

原因：

window.open(strUrl, strWindowName, [strWindowFeatures]);

//strWindowName 新窗口的名称。该字符串可以用来作为超链接 <a> 或表单 <form> 元素的目标属性值。字符串中不能含有空白字符。注意：strWindowName 并不是新窗口的标题。

这里之所以复用新标签页，是因为'__blank'，只是单独的一个名称，而非'_blank'

如果已经存在以 strWindowName 为名称的窗口，则不再打开一个新窗口，而是把 strUrl 加载到这个窗口中。在这种情况下，方法的返回值是这个已经打开的窗口，并忽略参数 strWindowFeatures 。如果要在每次调用 window.open()时都打开一个新窗口，则要把参数 strWindowName 设置为 _blank。如果要在本标签页打开，则设置为_self

 11. 深度合并对象以及深度合并对象的某些属性

function deepExtend(obj1, obj2) {
  if (Object.prototype.toString.call(obj1) === '[object Object]' && Object.prototype.toString.call(obj2) === '[object Object]') {
    for (let prop2 in obj2) {//obj1无值,都有取obj2
      if (!obj1[prop2]) {
        obj1[prop2] = obj2[prop2];
      } else {//递归赋值
        obj1[prop2] = deepExtend(obj1[prop2], obj2[prop2]);
      }
    }
  } else if (Object.prototype.toString.call(obj1) === '[object Array]' && Object.prototype.toString.call(obj2) === '[object Array]') {
    // 两个都是数组，简单进行替换
    // obj1 = obj2;
    for (let prop2 in obj2) {//obj1无值,都有取obj2
      if (!obj1[prop2]) {
        obj1[prop2] = obj2[prop2];
      } else {//递归赋值
        obj1[prop2] = deepExtend(obj1[prop2], obj2[prop2]);
      }
    }
  } else {//其他情况，取obj2的值
    obj1 = obj2;
  }
  return obj1;

}

function deepExtendSomeAttrs(obj1, obj2, attrs, prop) {
  if (Object.prototype.toString.call(obj1) === '[object Object]' && Object.prototype.toString.call(obj2) === '[object Object]') {
    for (let prop2 in obj2) {//obj1无值,都有取obj2
      if (!obj1[prop2]) {
        if(attrs && attrs.includes(prop2)){
          obj1[prop2] = obj2[prop2];
        }
        if(!attrs){
          obj1[prop2] = obj2[prop2];
        }
      } else {//递归赋值
        obj1[prop2] = deepExtendSomeAttrs(obj1[prop2], obj2[prop2], attrs, prop2);
      }
    }
  } else if (Object.prototype.toString.call(obj1) === '[object Array]' && Object.prototype.toString.call(obj2) === '[object Array]') {
      if(attrs && attrs.includes(prop)){
        if(obj1.length < obj2.length){
          obj1 = obj2;
        }
      }
      if(!attrs){
        for (let prop2 in obj2) {//obj1无值,都有取obj2
          if (!obj1[prop2]) {
              if(attrs && attrs.includes(prop2)){
              obj1[prop2] = obj2[prop2];
              }
              if(!attrs){
              obj1[prop2] = obj2[prop2];
              }
          } else {//递归赋值
              obj1[prop2] = deepExtendSomeAttrs(obj1[prop2], obj2[prop2], attrs, prop2);
          }
        }
      }

  } else {//其他情况，取obj2的值
    if(attrs && attrs.includes(prop)){
      obj1 = obj2;
    }
    if(!attrs){
      obj1 = obj2;
    }
  }
  return obj1;

}