js中常用到的一些解决问题方法（整理一些真正有效能够使用到项目中的方法）（等待不断更新积累）

柔光的暖阳◎ 2022-04-11 12:19 181阅读 0赞

*  将字符串中某个字符串删除

方法一*:*使用*replace*函数替换(比较建议使用

//去除字符串中含有的-
    var str = '178-1980';
    //注意：此处不可写作：str.replace('-', '');要写作：str = str.replace('-', '');
    // replace：返回新的字符串，一定要重新接收，不然替换不了
    str = str.replace('-', '')//最后获得的是1781980

方法二:使用字符串分割函数再聚合

var str = "189-1909";
    var a = str.split("-");//会得到一个数组，数组中包括利用-分割后的多个字符串（不包括-）
    var newStr = a.join("");//数组转成字符串,元素是通过指定的分隔符进行分隔的。此时以空串分割：即直接连接//最后获得1891909

*  **includes**()** **方法用于判断一个字符串是否包含在另一个字符串中，根据情况返回 true 或 false。

下面代码判断a中是否包含'-'

a.includes('-')

*  筛选

函数Array.prototype.filter()

var words = ['1234', '12345', '123456', '1234567'];
    const result = words.filter(word => word.length > 6);
    console.log(result);//> 打印出数组["1234567"]

*  排序

单个条件

function compareboxId(a, b) {
      if (a.boxId < b.boxId) return -1;
      if (a.boxId > b.boxId) return 1;
      return 0;
    }

多个条件：将多个条件拼接成一个新的Key值，然后对这个key值进行排序

function compareRegistered(a, b) { 
      const akey = a.registered+a.boxId; 
      const bkey = b.registered+b.boxId;  
      if (akey > bkey) return -1; 
      if (akey > bkey) return 1; 
      return 0;
    }

当排序时，要求必须等于某个字符串时

方法一：

sort = (array) =>{
            let newArrayAll = [];
            let newArray = [];
            let newArrayApp = [];
            let newArrayEmpty = [];
            for(var i=0;i<array.length;i++){
                if(array[i].channelType==='aaa'||array[i].channelType==="abb"){
                    newArray.push(array[i])
                }else if(array[i].channelType==='bbb'){
                    newArrayApp.push(array[i])
                }else{
                    newArrayEmpty.push(array[i])
                }
            }
            newArrayAll = newArray.concat(newArrayApp).concat(newArrayEmpty);
            return newArrayAll;
        }

方法二：

sort = (arr) =>{
            let flightArr1 = arr.filter((ele) => {
                console.log("===ele",ele.channelType)
                return ele.channelType==='基地办公系统'||ele.channelType==='办公网'; 
              });
              let flightArr2 = arr.filter((ele) => {
                return ele.channelType==='手机APP'; 
              });
            let  Flights = [...flightArr1, ...flightArr2];
              return Flights;
        }

方法三：

sort = (arr) =>{
            arr.sort((a,b)=>{
                        return a.channelType -b.channelType
            })
            return arr;
    }

*  控制页面内所有console.log是否在控制台打印出数据

const debugSwitch = false;//true是打印
    if (!debugSwitch) {
      console.log = () => {};
    }

*  js截取字符串

stringObject.split("url")\[1\]   这个方法可以用来截取url中特定字符串

*  数组元素的添加

arrayObj. push(\[item1 \[item2 \[. . . \[itemN \]\]\]\]);// 将一个或多个新元素添加到数组结尾，并返回数组新长度  
arrayObj.unshift(\[item1 \[item2 \[. . . \[itemN \]\]\]\]);// 将一个或多个新元素添加到数组开始，数组中的元素自动后移，返回数组新长度  
arrayObj.splice(insertPos,0,\[item1\[, item2\[, . . . \[,itemN\]\]\]\]);//将一个或多个新元素插入到数组的指定位置，插入位置的元素自动后移，返回""。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70][]

*  字符判断

方法1：

var p = /\[0-9\]/; var b = p.test(string);//true,说明有数字  
var p = /\[a-z\]/i; var b = p.test(string);//true,说明有英文字母  
var p = /\[0-9a-z\]/i; var b = p.test(string);//true,说明有英文字母或数字

方法2：

匹配为电话号码

componentDidMount(){
        // this.judgeText("030-4557777")
        this.judgeText("1234567890")
      }
      judgeText=(text)=>{
        var value = text;
        console.log("value",value)
        var reg0 = /\d{10,11}/; // 长度为10-11的数字
        var reg1 = /^((0\d{2,3})-)?(\d{7,8})(-(\d{3,}))?$/; // 固定电话
        if ( reg0.test(value) || reg1.test(value) ) {
          console.log("电话号码")
        } else {
          console.log("不是电话号码")
         return ;
        }
      }

*  整除

//求余数
          document.write(1%4);
          document.write(6%4);
          //求商
          console.info(1/4);
          console.info(6/4);
          //求商，取整
          console.info(parseInt(1/4));
          console.info(parseInt(6/4));
          console.info('----');
          //天花板取整
          console.info(Math.ceil(1/4));
          //地板取整
          console.info(Math.floor(1/4));

*  object

获取object的key:Object.keys(对应的object)

获取object的value:Object.values(对应的object)

*  将一个数组变成字典

let webglObjectParamsArray = webglObjectParams?.map(item=>{
            console.log('==========item====',item)
            return [item?.code,item.value]
          });
          console.log('========webglObjectParamsArray=====',webglObjectParamsArray)
          let webglObjectParamsJson = Object.fromEntries(webglObjectParamsArray);
          console.log('========webglObjectParamsJson=====',webglObjectParamsJson)

*  合并两个object

let obj = ｛...old,...new｝

记住新的一定要放在后面

*  合并两个array

let obj = \[...old,...new\]

记住新的一定要放在后面

*  es6数组的flat()，flatMap()函数

作用：处理获取一个数组内的数组

`[1, 2, [3, 4]].flat()`

`// [1, 2, 3, 4]`

*  将一个数组有共同部分放一起

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 1][]

引用lodash，使用groupBy

console.log('======kds',\_.groupBy(mesh, 'code'));

*  js立即执行函数：方便我们在react代码的return下面定义函数

箭头函数

{
        (()=>{
           let newGroupList = [];
           if(!_.isEmpty(groupList)){
           for (let key in groupList) {
              newGroupList = groupList[key];
           } 
        }
        return(
          <div></div>
        )
    })}()

也可以类似定义命名函数

(function (x) {
        console.log('x + x = ', x + x);
    })(5) // x + x = 10

*  将两个数组的值做映射

params1 = [{code: "boost", d_type: "float"},{code: "test",         d_type: "text"}]
    params2 = [{code: "boost", sortorder: 0},{code: "test", sortorder: 1}]
    let groupByParams1 = _.groupBy(params1, 'code');
    let groupByParams2 = _.groupBy(params2, 'code');
    let mergeParams = _.merge(groupByParams1, groupByParams2);
    let newParams = [];
    for(let key in mergeParams){
        newParams.push(mergeParams[key][0]);
    }

*  将一个object内，具有某个特性的值放一起。比如values = \{min1:"1",min1:"3",max1:2,max1:"4",price:5,\}，将min1和max1的值放到同一个数组，将min2和max2的值放到同一个数组，最后的效果是\[\[1,2\],\[3,4\]\]

//原数组
    let values = {min1:"1",min1:"3",max1:2,max1:"4",price:5,}
    //将object转化为数组
    let valuesArray = Object.entries(values);
    //filter出包含max和min
    let valuesFilter = valuesArray?.filter(([key])=>["min","max"].includes(key.slice(0,3)));
    //将共同部分放一起
    let groupValues = _.groupBy(valuesFilter,([key])=>key[3]);
    let passArray = [];
          for(let key in groupValues){
            let valueItem = groupValues[key];
            let combineRange = [];
            for(let i=0;i<valueItem?.length;i++){
              combineRange.push(valueItem[i][1]);
            }
            passArray.push(combineRange);
          }

*  js如何更新值

引入lodash
    Import _ from ‘lodash’;
    var users = [
      { 'user': 'barney',  'active': false },
      { 'user': 'fred',    'active': false },
      { 'user': 'pebbles', 'active': true }
    ];
     
    _.findIndex(users, function(o) { return o.user == 'barney'; });
    // => 0
    Let newValue = { 'user': 'barney2’,  'active': false },
    users[_.findIndex(users, function(o) { return o.user == 'barney'; })] = newValue;

*  判断是否为空值

Lodash的\_.isEmpty(value): 如果 value 为null ,0,1,或 undefined，那么返回 true，否则返回 false。

\_.isNil(value): 如果 value 为null 或 undefined，那么返回 true，否则返回 false。

*  常用正则

let str = 'a234'
    let reg=/(^[a-zA-Z0-9_]{6}$)|(^[a-zA-Z0-9_]{4}$)/;    
    if(!reg.test(str)){    
       alert("不正确!");
    }else{
      alert("正确!");
    }

1、15位或18位字母数字

(^\[a-zA-Z0-9\_\]\{6\}$)|(^\[a-zA-Z0-9\_\]\{4\}$)

2、JY加14位数字或字母的证件号码

/^JY\[a-zA-Z0-9\]\{16\}$/

3、沪餐证字+16位数字或字母

/^沪餐证字\[a-zA-Z0-9\]\{16\}$/

4、QS加12位数字字母或SC加14位数字字母的证件号码

/(^QS\[a-zA-Z0-9\]\{14\}$)|(^QS\[a-zA-Z0-9\]\{12\}$)/

5、SP加16位数字或字母的证件号码

/^SP\[a-zA-Z0-9\]\{16\}$/

6、验证手机号码为11位，且以1开头

^1\[0-9\]\{10\}$

7、验证邮箱

以数字字母开头，中间可以是多个数字字母下划线或“-”，

然后是“@”符号，后面是数字字母，

然后是“.”符号加2-4个字母结尾

/^(\[a-zA-Z\]|\[0-9\])(\\w|\\-)+@\[a-zA-Z0-9\]+\\.(\[a-zA-Z\]\{2,4\})$/

8、固定电话

/(\d{4}-)?\d{6,8}/
    区号-电话号码，或者可以不输入区号，6位，7位，8位电话都可以

*  金额元到分的精度问题

yuantofen(val) {
    				console.log('==========val',val)
    			    var s = val.toString().split(".")
    			    var yuan = parseInt(s[0]) * 100;
    			    var fen = 0;
    			    if (s.length > 1) {
    			        let fenVal = (parseInt(s[1].substr(0, 1))) * 10;
    			        fen += fenVal;
    			        if (s[1].length > 1) {
    						fen += parseInt(s[1].substr(1, 1));
    					}
    			    }
    			    var fee = yuan + fen;
    			    return fee;
    			}
    ,
    			async pay(id, orderNo) {
    this.yuantofen(this.totalPrice)
    }

*  js浮点数精度

1、数据展示类

当你拿到 1.4000000000000001 这样的数据要展示时，建议使用 toPrecision 凑整并 parseFloat 转成数字后再显示，如下：

parseFloat(1.4000000000000001.toPrecision(12)) === 1.4  // True

封装成方法就是：

function strip(num, precision = 12) {
      return +parseFloat(num.toPrecision(precision));
    }

2、数据运算类  
对于运算类操作，如 +-\*/，就不能使用 toPrecision 了。正确的做法是把小数转成整数后再运算。以加法为例：

/**
     * 精确加法
     */
    function add(num1, num2) {
      const num1Digits = (num1.toString().split('.')[1] || '').length;
      const num2Digits = (num2.toString().split('.')[1] || '').length;
      const baseNum = Math.pow(10, Math.max(num1Digits, num2Digits));
      return (num1 * baseNum + num2 * baseNum) / baseNum;
    }

具体解释可查看链接：[JavaScript 浮点数陷阱及解法 · Issue \#9 · camsong/blog · GitHub][JavaScript _ _ Issue _9 _ camsong_blog _ GitHub]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70]: /images/20220411/a05cd848d1524e87ab047cd0e4079f2e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 1]: /images/20220411/1c95e2c94a544299924fb9c38ac0ec67.png
[JavaScript _ _ Issue _9 _ camsong_blog _ GitHub]: https://github.com/camsong/blog/issues/9