日常开发小技巧及工具整理

前言

将看到的一些好的方法收集整理,收录最新的版本,快速秒查!

数组求和、求最大值、最小值

数组求和:
array.reduce((a,b) => a+b);

数组最大值:

array.reduce((a,b) => a > b ? a : b);

Math.max(...array)

数组最小值:

array.reduce((a,b) => a < b ? a : b);

Math.min(...array)

 

过滤错误值

如果想过滤数组中的false、0、null、undefined等值,可以这样:

const array = [1, 0, undefined, 6, 7, '', false];

array.filter(Boolean);
// [1, 6, 7]

 

清空数组

如果想要清空一个数组,可以将数组的length置于0:

let array = ["A", "B", "C", "D", "E", "F"]
array.length = 0 
console.log(array)  // []

 

验证undefined和null

如果需要验证一个值如果等于null或者undefined时,需要执行一个操作时,可以使用空值合并运算符来简化上面的代码:

a ?? doSomething()

这样,只有a是undefined或者null时,才会执行控制合并运算符后面的代码。空值合并操作符(??)是一个逻辑操作符,当左侧的操作数为 null 或者 undefined 时,返回其右侧操作数,否则返回左侧操作数。

 

数组元素转化为数字

const array = ['12', '1', '3.1415', '-10.01'];
array.map(Number);  // [12, 1, 3.1415, -10.01]

 

缩短console.log()

每次进行调试时书写很多console.log()就会比较麻烦,可以使用以下形式来简化这个代码:

const c = console.log.bind(document) 
c(996) 
c("hello world")

 

检查对象是否为空

Object.keys()方法用于获取对象的 key,会返回一个包含这些key值的数组。如果返回的数组长度为0,那对象肯定为空

Object.keys({}).length  // 0
Object.keys({key: 1}).length  // 1

 

格式化 JSON 代码

JSON.stringify有三个参数:
value:将要序列化成 一个 JSON 字符串的值。
replacer 可选:如果该参数是一个函数,则在序列化过程中,被序列化的值的每个属性都会经过该函数的转换和处理;如果该参数是一个数组,则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中;如果该参数为 null 或者未提供,则对象所有的属性都会被序列化。
space 可选:指定缩进用的空白字符串,用于美化输出(pretty-print);如果参数是个数字,它代表有多少的空格;上限为10。该值若小于1,则意味着没有空格;如果该参数为字符串(当字符串长度超过10个字母,取其前10个字母),该字符串将被作为空格;如果该参数没有提供(或者为 null),将没有空格。
通常情况下,我们都写一个参数来将一个 JavaScript 对象或值转换为 JSON 字符串。可以看到它还有两个可选的参数,所以我们可以用这俩参数来格式化JSON代码:

console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, '\t'));

 

多行文本垂直居中

// display:table方案
.center-table {
  display: table;
  
}
.center-table p {
  display: table-cell;
  vertical-align: middle;
}

// flex 方案
display: flex;
flex-direction: column;
justify-content: center;

// 其他方案
上下padding,或者包括div,设置display:inline-block;vertical-align:middle

 

css文本省略号快记

// 单行
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

// 多行
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

 

如何快速对齐文字,首行不对齐

.demo{
    padding-left: 25px;
    text-indent: -25px;
}

 

数组解构

const {1:state1,2:state2} = [1,2,3,4,5,6]

state1 // 2
state2 // 3

 

快速获取时间戳

+new Date()

快速日期单数补0

('0'+ num).slice(-2)

样式调试技巧

document.designMode = ‘on’

向下取整

取反位运算去除浮点数原理,原理原文

~~num

动态多行文字显示

利用换行符\n,不再使用标签<br/>

<div>{{text}}</div>

const text = `one \n two`

div{
white-space:pre-line
}

字符串重复

'test '.repeat(5);

幂乘

2**4

文案替换

<div>{{['','text1','text2'][index]}}</div>

// index 为 1,2,
// 0缺位

once执行一次function

function once(fn) {
    let called = false;
    return function () {
        if (!called) {
            called = true;
            fn.apply(this, arguments);
        }
    };
}

function launchRocket() {
    console.log("我已经执行了");
}
const launchRocketOnce = once(launchRocket);
launchRocketOnce();
launchRocketOnce();
launchRocketOnce();

日期对比

原理: 字符串比较是逐位按字符的charCode字符码对比

// 日期格式需相同
if('2021-06-01 11:12:23'>'2021-06-02 11:12:23') {
'something'
}

去空格

//去左空格;
function ltrim(s){
    return s.replace(/(^\s*)/g, "");
}
//去右空格;
function rtrim(s){
    return s.replace(/(\s*$)/g, "");
}
//去左右空格;
function trim(s){
    return s.replace(/(^\s*)|(\s*$)/g, "");
}

设置对象属性

Object.defineProperty()描述符 函数方法,设置对象属性
		Object.defineProperty(window, 'lsConfig', {
			get: function() {
				return JSON.parse(localStorage.config || '{}');
			}
		});
第一个参数为目标对象,第二个为属性,第三个属性描述符,可以针对数据属性或访问器属性
第三个参数descriptor:有以下参数
value:属性的值,默认为undefined
writable:该属性是否可写
configurable:总开关,一旦为false,就不能设置(value,writable,configurable)
enumerable:定义对象属性是否可以在for..in或obiect.keys()中被枚举,
get:对定义的属性取值的时候会触发get对应的函数,返回结果
set:对定义的属性赋值的时候会触发set对应的函数

高德地图逆地址解析

//逆地理编码  
var geocoder;
var lnglatXY = new AMap.LngLat(113.3655111809422, 22.944263569914494);

//加载地理编码插件 
this.map.plugin(["AMap.Geocoder"],function(){  
geocoder=new AMap.Geocoder({ 
radius:1000, //以已知坐标为中心点,radius为半径,返回范围内兴趣点和道路信息 
extensions: "all"//返回地址描述以及附近兴趣点和道路信息,默认"base" 
}); 
//返回地理编码结果 
AMap . event . addListener(geocoder, "complete",function(data){
    var address;
    //返回地址描述
    address = data.regeocode.formattedAddress;
    console.log(address)
});
geocoder.getAddress(lnglatXY)
}); 

shim和polyfill的含义及区别

shim是一个库,它将一个新的api引入到一个旧的环境中,而且依靠旧环境已有的手段
polyfill就是一个用在浏览器上的shim,先检查当前浏览器是否支持某个api,如果不支持就加载对应的polyfill,这样新旧浏览器就都可以使用这个api

dpi ppi理解

1. dpi是dot per inch,每英寸多少点,ppi是 Pixel per inch,每英寸像素数,针对显示器的设计时,dpi=ppi。
ppi计算方法是长宽各自平方之和开方,除以对角线长度(单位英寸)。原理可以自己画个矩形勾股定理算一算。
2. ppi表示显示设备的点密度,dpi表示印刷品点密度。

 端口号被占用问题

项目端口号被占用Error: listen EADDRINUSE :::1002
打开cmd 输入netstat -ano找到占用端口号的pid然后tskill **即可

 drag相关api

标签元素设置draggable = ‘true'
dragstart事件、dragend拖拽结束、dragover拖拽在目标元素头上
dragstart拖拽效果:event.dataTransfer.effectAllowed = 'move'
dragover取消默认事件:event.preventDefault()
存数据:event.dataTransfer.setData('',xx)
取数据:event.dataTransfer.getData('')
drop:松开的时候
清除数据:event.dataTransfer.clearData('')

衍生对象按key排序算法

function objKeySort(obj){
	var newkey = Object.keys(obj).sort();
	var newObj = {};
	for(var i = 0;i<newkey.length;i++){
		newObj[newkey[i]] = obj[newkey[i]]
	}
	return newObj;
}

检测android chrome版本

navigator.userAgent.split('Chrome/')[1].slice(0,2)

z-index失效情况

z-index一般适用于position不为static的元素,包含absolute,fixed,relative

i++ 和++i

在for里没啥区别,赋值时:i++先应用i再+1,++i先加1,再自用var i,j = 1;i++ = 1;++j = 2

随机数生成速查

function(start,end){
var w = end - start;
n-m,包含n不包含m:parseInt(Math.randow()*w+start)
n-m,不包含n包含m:Math.floor(Math.randow()*w+start)+1
n-m,不包含n和m:Math.round(Math.randow()*w+start+1)
n-m,包含n和m:Math.round(Math.randow()*w+start)
}

加减乘除高精度计算

//加    
function floatAdd(arg1,arg2){    
     var r1,r2,m;    
     try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}    
     try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}    
     m=Math.pow(10,Math.max(r1,r2));    
     return (arg1*m+arg2*m)/m;    
}    
      
//减    
function floatSub(arg1,arg2){    
    var r1,r2,m,n;    
    try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}    
    try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}    
    m=Math.pow(10,Math.max(r1,r2));    
    //动态控制精度长度    
    n=(r1>=r2)?r1:r2;    
    return ((arg1*m-arg2*m)/m).toFixed(n);    
}    
       
//乘    
function floatMul(arg1,arg2)   {     
    var m=0,s1=arg1.toString(),s2=arg2.toString();     
    try{m+=s1.split(".")[1].length}catch(e){}     
    try{m+=s2.split(".")[1].length}catch(e){}     
    return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m);     
}     
      
      
//除   
function floatDiv(arg1,arg2){     
      var t1=0,t2=0,r1,r2;     
      try{t1=arg1.toString().split(".")[1].length}catch(e){}     
      try{t2=arg2.toString().split(".")[1].length}catch(e){}     
        
      r1=Number(arg1.toString().replace(".",""));  
   
      r2=Number(arg2.toString().replace(".",""));     
      return (r1/r2)*Math.pow(10,t2-t1);     
}

git对文件名大小写不敏感问题

git config core.ignorecase false 

正则大全

excel在线预览

在线预览excel

小数位的限制输入

clearNoNum (item, id, num) {
      num = num || 2
      item[id] = item[id].replace(/[\u4e00-\u9fa5]+/g, '')
      item[id] = item[id].replace(/[^\d.]/g, '')
      item[id] = item[id].replace(/^\./g, '')
      item[id] = item[id]
        .replace('.', '$#$')
        .replace(/\./g, '')
        .replace('$#$', '.')
      // eslint-disable-next-line no-useless-escape
      let reg = new RegExp(`^(\-)*(\\d+)\.(\\d{${num}}).*$`)
      item[id] = item[id].replace(reg, '$1$2.$3')
    }

 前端页面发布上线部署首页异常问题

注意替换root的正式路径。
location ~* \.(?:html)$ {
    root realu-rl;
    expires -1;
    add_header Pragma "no-cache";
    add_header Cache-Control "no-store, must-revalidate";
  }

 

版权声明:
作者:wuhou123
链接:https://wuhou.fun/50.html
来源:前端网
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>
文章目录
关闭
目 录