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

目录

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

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

筛选

排序

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

js截取字符串

数组元素的添加

字符判断

整除

object

将一个数组变成字典

合并两个object

合并两个array

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是否有空值

获取一组十位数的随机数

防重点击

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

加上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标题设置


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

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

  • 字符判断

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

  • 将一个数组变成字典

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]

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

引用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}
              />

13、限制只能输入大写字母,和英文;


  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事件

  • 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 = '自定义标题' 

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值