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

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

方法一:使用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()

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]]]]);//将一个或多个新元素插入到数组的指定位置，插入位置的元素自动后移，返回""。

字符判断

方法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：

<script type="text/javascript">
    $("#validate").click(function(){
        if(isSimplePwd($("#password").val())<3){
            alert("密码过于简单！");
        }
    })
    /**
    *简单验证密码强度
    *必须包含数字、小写字母、大写字母、特殊字符 其三
    *如果返回值小于3 则说明密码过于简单 
    */
    function isSimplePwd(s){
        if(s.length<6){
            return 0;
        }
        var ls = 0;
        if(s.match(/([a-z])+/)){
            ls++;
        }
        if(s.match(/([0-9])+/)){
            ls++;
        }
        if(s.match(/([A-Z])+/)){
            ls++;
        }
        if(s.match(/[^a-zA-Z0-9]+/)){
            ls++;
        }
        return ls;
    }
</script>

匹配为电话号码

componentDidMount(){
    // this.judgeText("030-4557777")
    this.judgeText("1234567890")
  }
  judgeText=(text)=>{
    var value = text;
    console.log("value",value)
    var reg0 = /^1[3456789]\d{9}/; // 长度为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)

`v-for` 与对象

你也可以使用 v-for 来遍历一个对象的所有属性。遍历的顺序会基于对该对象调用 Object.values() 的返回值来决定。

const myObject = reactive({
  title: 'How to do lists in Vue',
  author: 'Jane Doe',
  publishedAt: '2016-04-10'
})

<ul>
  <li v-for="value in myObject">
    {{ value }}
  </li>
</ul>

可以通过提供第二个参数表示属性名 (例如 key)：

<li v-for="(value, key) in myObject">
  {{ key }}: {{ value }}
</li>

第三个参数表示位置索引：

<li v-for="(value, key, index) in myObject">
  {{ index }}. {{ key }}: {{ value }}
</li>

将一个数组变成字典

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
1. 使用展开运算符（...）

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

记住新的一定要放在后面

const object1 = { a: 1, b: 2 };
const object2 = { b: 3, c: 4 };

// 使用展开运算符合并对象
const mergedObject = {...object1,...object2 };

console.log(mergedObject);

2.使用 `Object.assign()` 方法

const object1 = { a: 1, b: 2 };
const object2 = { b: 3, c: 4 };

// 使用 Object.assign() 合并对象
const target = {};
Object.assign(target, object1, object2);

console.log(target);

3. 使用 `lodash` 库的 `merge` 方法（适用于更复杂的对象合并，包括嵌套对象）

如果你的对象包含嵌套对象，简单的展开运算符或 Object.assign() 可能无法满足需求，这时可以使用 lodash 库的 merge 方法。

首先，你需要安装 lodash：npm install lodash

const _ = require('lodash');

const object1 = { a: 1, b: { c: 2 } };
const object2 = { b: { d: 3 }, e: 4 };

// 使用 lodash 的 merge 方法合并对象
const merged = _.merge({}, object1, object2);

console.log(merged);

_.merge() 方法会递归地合并对象，对于嵌套对象也能正确处理，而不会简单地覆盖。

合并两个array

1. 使用展开运算符（`...`）

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

记住新的一定要放在后面.

展开运算符可以将一个数组的元素展开，并合并到另一个数组中，从而创建一个新的数组，不会修改原始数组。

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

// 使用展开运算符合并数组
const mergedArray = [...array1,...array2];

console.log(mergedArray);

在这个例子中，array1 和 array2 的元素被展开并合并到了 mergedArray 中。

2. 使用 `concat()` 方法

concat() 方法用于合并两个或多个数组。它不会改变现有的数组，而是返回一个新的数组。

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

// 使用 concat() 方法合并数组
const mergedArray = array1.concat(array2);

console.log(mergedArray);

concat() 方法可以接受多个数组作为参数，将它们依次合并。

3. 使用 `push()` 方法（会修改原始数组）

push() 方法可以将一个或多个元素添加到数组的末尾。虽然它主要用于添加元素，但也可以用来合并数组，不过会修改原始数组。

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

// 使用 push() 方法合并数组（会修改 array1）
array1.push(...array2);

console.log(array1);

这里通过展开 array2，将 array2 的所有元素依次添加到 array1 的末尾，array1 被修改。

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

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

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

// [1, 2, 3, 4]

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

引用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]{14}$/

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

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

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

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

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位电话都可以

9、限制18位字母或者数字，并且不包含某几个特定字符。同时，将输入框的小写字母转成大写字母

        <Form.Item
          label="统一信用代码"
          name="code"
          rules={[
            { required: true, message: '请输入统一信用代码' },
            ({ getFieldValue }) => ({
              validator(_, value) {
                if (value) {
                  let reg = /^[0-9a-zA-Z]{18}/g;
                  if (
                    reg.test(value) &&
                    !value.toUpperCase().includes('I') &&
                    !value.toUpperCase().includes('O') &&
                    !value.toUpperCase().includes('Z') &&
                    !value.toUpperCase().includes('S') &&
                    !value.toUpperCase().includes('V')
                  ) {
                    return Promise.resolve();
                  }
                  return Promise.reject(new Error('请输入正确的统一信用代码'));
                } else {
                  return Promise.resolve();
                }
              },
            }),
          ]}
        >
          <Input
            maxLength={18}
            placeholder="请输入"
            style={{ width: '468px', textTransform: 'uppercase' }}
          />
        </Form.Item>

10、校验身份证号码

reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;

11、限制最多只能输入四位小数

  //限制输入框只能输入四位小数
  const limitDecimals = (value) => {
    if (value) {
      let reg = /^\d+(\.\d{0,4})?$/;
      if (reg.test(value)) {
        return value;
      } else {
        let integersValue = value.split('.')[0];
        let decimalsValue = value.split('.')[1];
        if (integersValue && decimalsValue) {
          return Number(integersValue + '.' + decimalsValue.slice(0, 4));
        } else {
          return '';
        }
      }
    } else {
      return '';
    }
  };
 
 
//内容区域
                <InputNumber
                  min={0}
                  max={999999}
                  value={record.max}
                  step={0.01}
                  onChange={(e) => onChange(e, record.key)}
                  formatter={limitDecimals}
                  parser={limitDecimals}
                />

12、限制输入框只能输入整数、限制输入框只能输入四位小数

  //限制输入框只能输入整数
  const onlyIntegers = (value) => {
    return value.replace(/[^\d]/g, '');
  };
 
  //限制输入框只能输入四位小数
  const limitDecimals = (value) => {
    return value.replace(/^(\-)*(\d+)\.(\d\d\d\d).*$/, '$1$2.$3');
  };
 
 
 
<InputNumber
                key={record.key}
                min={minDefaultValue}
                max={maxDefaultValue}
                value={text}
                onChange={(e) => onChange(e, record.key)}
                step={maxDefaultValue == 9999 ? 1 : 0.01}
                stringMode
                formatter={maxDefaultValue == 1 ? limitDecimals : onlyIntegers}
                parser={maxDefaultValue == 1 ? limitDecimals : onlyIntegers}
                disabled={record.key == '13' ? true : false}
              />

3、限制只能输入大写字母，和英文;

 
  function onChangeText(e, field) {
    let newValue = e.replace(/([^a-zA-Z;])/g, '')
    let paramsData = _.cloneDeep(tableData);
    paramsData?.forEach((item) => {
      if (item?.fieldName === field) {
        item.fieldValue = newValue.toUpperCase();
      }
    });
    setTableData(paramsData);
  }
 
            <Input
              style={{ width: 120 }}
              value={record.fieldValue}
              onChange={(e) => onChangeText(e.target.value, record.fieldName)}
              maxLength={50}
            />

14、限制第一位只能是1-9，最后一位只能是数字。中间9位可以是数字或者.

        <Form.Item
          label="版本号"
          name="appVersion"
          rules={[
            { required: true, message: '请输入版本号！' },
            { pattern: /^[1-9][0-9\.]{9}[0-9]$/, message: '版本号格式为:数字+"."+数字+"."+数字' },
          ]}
        >
          <Input placeholder="请输入版本号" maxLength={11} />
        </Form.Item>

15、限制只能输入汉字、数字、字母，不能输入符号

let reg = /^[\u4e00-\u9fa50-9A-Za-z]+$/;
if (reg.test(value)) {
    return Promise.resolve();
}
return Promise.reject(new Error('请输入正确的小程序名称'))

16、限制不能输入表情包

      // utf8mb4 正则
      const utf8mb4Reg = /[^\u0000-\uFFFF]/g; // eslint-disable-line
      // emoji 表情正则
      const emojiReg =
        /(\ud83c[\udf00-\udfff])|(\ud83d[\udc00-\ude4f])|(\ud83d[\ude80-\udeff])/g;
      // 包含 utf8mb4 的 4 字节
      const isUTF8MB4 = utf8mb4Reg.test(message);
      // 包含 emoji 表情
      const isEmoj = emojiReg.test(message);
 
      // 校验特殊字符 并删除
      isUTF8MB4 && (message = message.replace(utf8mb4Reg, ''));
      isEmoj && (message = message.replace(emojiReg, ''));

17、去除空格

var that = this;
var str = that.data.title;
 
//去除首尾空格
str.replace(/(^\s*)|(\s*$)/g, "");
 
//去除左边空格
str.replace(/(^\s*)/g, "");
 
//去除右边空格
str.replace(/(\s*$)/g, "");

金额元到分的精度问题

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

限制只能输入正数字和一位小数点，并且小数只能输入两位

<input class="input" v-model="price" type="digit" placeholder="请输入商品价格" @input="onLimitPrice" maxlength="20"/>
 
 
 
methods: {
            
            onLimitNumber(value) {
                value = value.replace(/[^\d.]/g,"");//清除"数字"和"."以外的字符
                value = value.replace(/^\./g,"");//验证第一个字符是数字而不是字符
                value = value.replace(/\.{2,}/g,".");//只保留第一个.清除多余的
                value = value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
                //value = value.replace(/^(\-)*(\d+)\.(\d).*$/, '$1$2.$3'); //只能输入一个小数
                value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');//只能输入两个小数
                //去除负号（限定输入正数）
                if(value.indexOf('-')>=0){
                    value = value.replace(/-/g,'')
                }
                return value;
            },
            onLimitPrice(event) {
                let value = event.detail.value;
                let newValue = this.onLimitNumber(value)
                setTimeout(() => { 
                    this.price = newValue
                    this.formData.sell_price = this.yuantofen(this.price)
                }, 0)
            },
}

限制只能输入正负数字和一位小数点，并且小数只能输入两位

<input class="input" v-model="price" type="digit" placeholder="请输入商品价格" @input="onLimitPrice" maxlength="20"/>
 
 
 
methods: {
            
            onLimitNumber(value) {
                value = value.replace(/[^\d.-]/g,"");//清除"数字"和"."和"-"以外的字符
                value = value.replace(/^\./g,"");//验证第一个字符是数字而不是字符
                value = value.replace(/\.{2,}/g,".");//只保留第一个.清除多余的
                value = value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
                //value = value.replace(/^(\-)*(\d+)\.(\d).*$/, '$1$2.$3'); //只能输入一个小数
                value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');//只能输入两个小数
                // 检查是否有多个负号，将除首位外的负号替换为空
    if (value.indexOf('-') !== value.lastIndexOf('-')) {
        value = value.replace(/-/g, function(match, offset) {
            return offset === 0 ? '-' : '';
        });
    }
                return value;
            },
            onLimitPrice(event) {
                let value = event.detail.value;
                let newValue = this.onLimitNumber(value)
                setTimeout(() => { 
                    this.price = newValue
                    this.formData.sell_price = this.yuantofen(this.price)
                }, 0)
            },
}

判断传进来的object是否有空值，判断传进来的Array是否有空值

// 判断传进来的object是否有空值
export function isObjectEmpty(value) {
  let obj = Object.keys(value);
  let news = [];
  obj.map((e) => {
    if (value[e] === null || value[e] === undefined || value[e] === '' || value[e] === ' ') {
      news.push(true);
    } else {
      if (typeof value[e] == 'object') {
        news.push(isObjectEmpty(value[e]));
      }
    }
  });
  if (news.indexOf(true) >= 0 || JSON.stringify(value) === '{}') {
    return true;
  } else {
    return false;
  }
}
 
// 判断传进来的Array是否有空值
export function isArrayEmpty(value) {
    let news = []
    value.map(item => {
        if (item === null || item === undefined || item === "") {
            news.push(true)
        } else {
            if (typeof(item) == "object") {
                news.push(isObjectEmpty(item))
            }
        }
    })
    if (news.indexOf(true) >= 0) {
        return true
    } else {
        return false
    }
 
}

获取一组十位数的随机数

// 获取一组十位数的随机数
export function RndNum() {
    var rnd="";
    for(var i=0;i<10;i++)
        rnd+=Math.floor(Math.random()*10);
    return rnd;
}

防重点击

export const NoDoublePress = {
  lastPressTime: 1,
  onClick(callback) {
    let curTime = new Date().getTime();
    if (curTime - this.lastPressTime > 2000) {
      this.lastPressTime = curTime;
      callback();
    }
  },
};

import { NoDoublePress } from "../../../../../utils/common";
 
<a onClick={async () => {
              NoDoublePress.onClick(async () => {
                ...
              });
            }}>
              模板下载
            </a>

通过后端返回的接口下载文件

            <a onClick={async () => {
              NoDoublePress.onClick(async () => {
                const data = await getExcelTmpPath({ ... });
                if (data.code === '000000') {
                  message.success('开始下载文件');
                  console.log(data.data)
                  window.location.href = data.data
                } else {
                  message.error(data.msg);
                }
              });
            }}>
              模板下载
            </a>

<img >加上crossOrigin="anonymous"之后导致图片无法显示

给url加上时间戳是有效的，是因为cdn 配置缓存了数据：image.src = url + '?time=' + new Date().valueOf();

  let image = new Image()
  image.setAttribute('crossOrigin', 'anonymous')
  image.src = url + '?time=' + new Date().valueOf();
  let that = this;
  image.onload = () => {
    // ... do something
  }
  image.onerror = (err) => {
    console.log(err)
  };

JSON.parse报错问题

切记我们在使用JSON.parse方法的时候，请先用JSON.stringify方法

JSON.parse(JSON.stringify(data))

JSON数据的key与value必须使用双引号""包裹

将string转为json

// string转为json
export function toJson(str) {
  //格式应该为：{'T_PAY_WAY': 'WX'}
  let newStr = {};
  if (str && typeof str == 'string') {
    let newReplace = str.replace(/'/g, '"');
    newStr = JSON.parse(newReplace);
    return newStr;
  }
}

json转为map

// json转为map
export function jsonToMap(obj) {
  if (obj) {
    let strMap = new Map();
    for (let k of Object.keys(obj)) {
      strMap.set(k, obj[k]);
    }
    return strMap;
  }
}

map转为json

// map转为json
export function mapToJson(strMap) {
  if (strMap) {
    let obj = Object.create(null);
    for (let [k, v] of strMap) {
      obj[k] = v;
    }
    return obj;
  }
}

获取object第一个key，key的第一个value

      newTableData?.forEach((item, i) => {
        //获取第一个key
        item.fieldExplain = Object.keys(item)[0]
        //获取第一个value
        item.fieldValue = item[Object.keys(item)[0]]
      });

pc和h5通讯方式：iframe跨域消息通信(postMessage和message事件)

iframe跨域消息通信(postMessage和message事件)_胖鹅68的博客-CSDN博客_message事件

https://blog.csdn.net/hbiao68/article/details/112693419

let of与let in

for(let i in arrObj){
  console.log("i:", i);   // i: 0        i: 1          i: 2
}
for(let i of arrObj){
  console.log("i:", i);   // i: {name: 'aaa', age: 11}         i: {name: 'bbb', age: 22}         i: {name: 'ccc', age: 33}
}

实现下载

实现将file格式的文件转成Url

URL.createObjectURL(file格式的文件)

校验手机号

const phoneRules = (rule,value,callback) =>{
    if(!value){
        callback(new Error('请输入用户手机号'))
    }else{
        const reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/
        if(reg.test(value)){
            callback()
        }else{
            return callback(new Error('请输入正确的用户手机号'))
        }
    }
}

手机号脱敏

export const dealPhone = (num:string) =>{
    return num.slice(0,3) + '****' + num.slice(num.length - 4 ,num.length)
}

判断一个对象内属性key是否有重复的

可以通过遍历对象的属性，将属性名存入一个数组中，再用数组的某些方法进行判断，比如用Set对象去重后判断长度是否相等。
 
示例代码：
 
```javascript
function hasDuplicatedKeys(obj) {
  const keys = [];
  for (const key in obj) {
    if (keys.includes(key)) {
      return true;
    }
    keys.push(key);
  }
  return false;
}
 
const obj1 = { a: 1, b: 2, c: 3 };
console.log(hasDuplicatedKeys(obj1)); // false
 
const obj2 = { a: 1, b: 2, c: 3, d: 4, a: 5 };
console.log(hasDuplicatedKeys(obj2)); // true
```

在线预览office文件

const previewHandle = (url:any) =>{
    let url = encodeURIComponent(url)
    let officeUrl = 'http://view.officeapps.live.com/op/view.aspx?src=' + hurl
    window.open(officeUrl,'_target')
}

video标签点击全屏播放声音，点击退出全屏静音

import _ from "lodash";
import { useState, useEffect } from 'react'
function Home() {
  const [fullscreen, setFullscreen] = useState(false)
  const handleClick = _.debounce(() => {
      const element  = document.getElementById('video')
      if(fullscreen){
          element.muted = true //使视频静音
          //退出全屏
          console.log('exit')
          if (document?.exitFullscreen){
              document.exitFullscreen
          }else if (document?.webkitCancelFullScreen){
              document.webkitCancelFullScreen
          }else if (document?.mozCancelFullScreen){
              document.mozCancelFullScreen
          }else if (document?.msExitFulIscreen){
              document.msExitFulIscreen
          }
      }else{
          element.muted = false //取消视频静音
          //全屏
          if (element?.requestFullscreen){
              element.requestFullscreen
          }else if (element?.webkitRequestFul1Screen){
              element.webkitRequestFul1Screen
          }else if (element?.mozRequestFullScreen){
              element.mozRequestFullScreen
          }else if (element?.msRequestFulIscreen){
              // IE11
              element.msRequestFulIscreen
          }
      }
      setFullscreen(!fullscreen)
  },300)
  return (
    <div className="Home">
         <video id="video" onTouchEnd={handleClick} className="swiper-video" autoPlav loop muted style= {{ obiectFit:"fill" }}>
            <source src='' type="video/mp4"></source>
        </video>
 
    </div>
  );
}
 
export default Home;

HTML5标题设置

window.document.title = '自定义标题'

发布后去除缓存

· 多个if else优化【当有很多条件需要判断的时候，可以优化】

主要是针对if else做的一个优化方法策略的整理总结，在做项目中，难免会出现越来越多的判断情况，而我们也需要根据这些判断数值来做选择，两个三个分支选择还好，如果选择多了起来，那么我们可能就会出现这样的情况：

https://blog.csdn.net/weixin_43970890/article/details/115437720?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-2-115437720-blog-84852780.235%5Ev43%5Epc_blog_bottom_relevance_base4&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-2-115437720-blog-84852780.235%5Ev43%5Epc_blog_bottom_relevance_base4&utm_relevant_index=4

const ifOperation = (status) => {
  if(status === 1){
    consoleLog('one');
    consoleRun('oneEvent');
  } else if(status === 2){
    consoleLog('two');
    consoleRun('TwoEvent');
  } else if(status === 222){
    consoleLog('two');
    consoleRun('TwoEvent');
  } else if(status === 3){
    consoleLog('three');
    consoleRun('ThreeEvent');
  } else if(status === 4){
    consoleLog('four');
    consoleRun('FourEvent');
  } else {
    consoleLog('other');
    consoleRun('OtherEvent');
  }
}

优化一、虽然只有六个分支，但是已经看起来臃肿不堪了，可能我们可以把某一个else if变得厚重一下？

const ifOperation = (status) => {
  if(status === 1){
    consoleLog('one');
    consoleRun('oneEvent');
  } else if(status === 2 || status === 222){
    consoleLog('two');
    consoleRun('TwoEvent');
  } else if(status === 3){
    consoleLog('three');
    consoleRun('ThreeEvent');
  } else if(status === 4){
    consoleLog('four');
    consoleRun('FourEvent');
  } else {
    consoleLog('other');
    consoleRun('OtherEvent');
  }
}

优化二、看起来可能好一些，不过更多的人应该会选择switch case，那么它就会变成：

const switchOperation = (status) => {
  switch(status){
    case 1:
      consoleLog('one');
      consoleRun('oneEvent');
      break;
    case 2:
    case 222:
      consoleLog('two');
      consoleRun('TwoEvent');
      break;
    case 3:
      conosleLog('three');
      consoleRun('ThreeEvent');
      break;
    case 4:
      consoleLog('four');
      consoleRun('FourEvent');
      break;
    default:
      consoleLog('other');
      consoleRun('OtherEvent');
      break;
  }
}

优化三、在工作中其实这种已经是我们的常态了，不过我们可以更进一步，借助其他数据类型帮助我们简化代码，比如用个对象存储if else的各种情况：

const obj = {
  1 : ['one','oneEvent'],
  2 : ['two','TwoEvent'],
  3 : ['three','ThreeEvent'],
  4 : ['four','FourEvent'],
  222 : ['two','TwoEvent'],
  'default' : ['other', 'OtherEvent']
}
const consoleLog = (status) => {
  console.log(status);
}
const consoleRun = (status) => {
  console.log(status);
}
const objOperation = (status) => {
  let operation = obj[status] || obj['default'];
  consoleLog(operation[0]);
  consoleRun(operation[1])
}
objOperation('222')

优化四、这样就清爽很多了，比如我在做播放录音点击修改倍速时候可以写的更加精简，比如：

// 设置点击修改倍速条件
const obj = {
    1: [1.5],
    1.5: [2],
    2: [0.5],
    0.5: [1],
};
const objOperation = (status) => {
    const operation = obj[status];
    const speedChoose = operation[0];
    setSpeed(speedChoose);
};
objOperation(speed);

优化五、当然，如果你不想用Object表示，你还可以用Map来表示呀：

const map = new Map([
  [1 , ['one','oneEvent']],
  [2 , ['two','TwoEvent']],
  [3 , ['three','ThreeEvent']],
  [4 , ['four','FourEvent']],
  [222 , ['two','TwoEvent']],
  ['default' , ['other', 'OtherEvent']]
])
const consoleLog = (status) => {
  console.log(status);
}
const consoleRun = (status) => {
  console.log(status);
}
const mapOperation = (status) => {
  let operation = map.get(status) || map.get('default');
  consoleLog(operation[0]);
  consoleRun(operation[1])
}
mapOperation(222)

高考预报名中曾这样使用

 let mark = {
      fuqin: 0,
      muqin: 0,
      zufu: 0,
      zumu: 0,
      waizufu: 0,
      waizumu: 0
    }
    let relationMap = {
      fuqin: '父亲',
      muqin: '母亲',
      zufu: '祖父',
      zumu: '祖母',
      waizufu: '外祖父',
      waizumu: '外祖母'
    };
    // 存储值为 0 的亲属称谓
    let missingRelations = [];

  // 遍历 mark 对象
      for (let key in mark) {
        if (mark[key] === 0) {
          missingRelations.push(relationMap[key]);
        }
      }
      if (missingRelations.length > 0) {
        text = `填写家庭关系时，必须填写 
   ${missingRelations.join('、')}的信息，请核对是否已填写完整。`;
        //showNotify({ type: 'danger', message: text });
      }

JavaScript中如何检测一个变量是一个String类型？

typeof(obj) === "string"
typeof obj === "string"
obj.constructor === String

请用js去除字符串空格？

方法一：使用replace正则匹配的方法
去除所有空格: str = str.replace(/\s*/g,"");

去除两头空格: str = str.replace(/^\s*|\s*$/g,"");

去除左空格： str = str.replace( /^\s*/, “”);

去除右空格： str = str.replace(/(\s*$)/g, “”);

str为要去除空格的字符串，实例如下：

var str = " 23 23 “;
var str2 = str.replace(/\s*/g,”");
console.log(str2); // 2323
方法二：使用str.trim()方法
str.trim()局限性：无法去除中间的空格，实例如下：

var str = " xiao ming ";
var str2 = str.trim();
console.log(str2); //xiao ming
同理，str.trimLeft()，str.trimRight()分别用于去除字符串左右空格。

方法三：使用jquery,$.trim(str)方法
$.trim(str)局限性：无法去除中间的空格，实例如下：

var str = " xiao ming ";
var str2 = $.trim(str)
console.log(str2); // xiao ming

接口返回的数据，非空判断的方法

GetKaoSheng().then(res => {
        kaoSheng.value = res.data.result;

        if (kaoSheng.value.kaoShengXinXi == null) {
            kaoSheng.value.kaoShengXinXi = {
                isFeiDi: false
            };
        }

    })

或

GetKaoSheng().then(res => {
    kaoSheng.value = res.data.result;

    // 使用短路逻辑同时判断 null 和 undefined
    if (!kaoSheng.value.kaoShengXinXi) {
        kaoSheng.value.kaoShengXinXi = {
            isFeiDi: false
        };
    }

}).catch(err => {
    console.log(err);
});

原文链接：https://blog.csdn.net/qq_37815596/article/details/84852780

posted @ 2025-04-29 09:16 Shimily 阅读(19) 评论(0) 收藏举报

刷新页面返回顶部

Shimily

学而不思则罔，思而不学则殆

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

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

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

筛选

排序

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

js截取字符串

数组元素的添加

字符判断

整除

object

v-for 与对象

将一个数组变成字典

合并两个object

1. 使用展开运算符（...）

2.使用 Object.assign() 方法

3. 使用 lodash 库的 merge 方法（适用于更复杂的对象合并，包括嵌套对象）

合并两个array

1. 使用展开运算符（...）

2. 使用 concat() 方法

3. 使用 push() 方法（会修改原始数组）

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

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

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

将两个数组的值做映射

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

js如何更新值

判断是否为空值

常用正则

金额元到分的精度问题

js浮点数精度

限制只能输入正数字和一位小数点，并且小数只能输入两位

限制只能输入正负数字和一位小数点，并且小数只能输入两位

判断传进来的object是否有空值，判断传进来的Array是否有空值

获取一组十位数的随机数

防重点击

通过后端返回的接口下载文件

<img >加上crossOrigin="anonymous"之后导致图片无法显示

JSON.parse报错问题

json转为map

map转为json

获取object第一个key，key的第一个value

pc和h5通讯方式：iframe跨域消息通信(postMessage和message事件)

let of与let in

实现下载

实现将file格式的文件转成Url

校验手机号

手机号脱敏

判断一个对象内属性key是否有重复的

在线预览office文件

video标签点击全屏播放声音，点击退出全屏静音

HTML5标题设置

发布后去除缓存

· 多个if else优化【当有很多条件需要判断的时候，可以优化】

JavaScript中如何检测一个变量是一个String类型？

请用js去除字符串空格？

接口返回的数据，非空判断的方法

`v-for` 与对象

1. 使用展开运算符（`...`）

2.使用 `Object.assign()` 方法

3. 使用 `lodash` 库的 `merge` 方法（适用于更复杂的对象合并，包括嵌套对象）

1. 使用展开运算符（`...`）

2. 使用 `concat()` 方法

3. 使用 `push()` 方法（会修改原始数组）