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

前言

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

简单暗黑模式方案

html {
  filter: invert(1) hue-rotate(180deg);
  img {
    filter: invert(1) hue-rotate(180deg);
  }
}

平滑锚点

document.getelementbyid(id). scrollintoview({{behavior:'smooth'})

数组去重

数组去重方法，filter , reduce , map , set 等方法

// reduce 
reduce 4个参数，累计值，当前值，当前索引，当前数组，如果初始值没设置，则用数组第一项 
注意要return，如果不return，累计值会拿不到后面的值,为undefined 
const arr = [1,1,1,2,3] 
arr.reduce((pre,current) => { return pre.includes(current) ? pre : pre.concat(current) }, [] ) 

// filter 
const arr = [1,1,1,2,3] 
arr.filter((v,index) => arr.indexOf(v) == index) 

// map 
const arr = [1,1,1,2,3] 
let mapArr = new Map() 
arr.filter((v)=>!mapArr.has(v)&&mapArr.set(v,1)) 

// set 
const arr = [1,1,1,2,3] 
const newArr = [...new Set(arr)]

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

数组求和：
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的含义及区别

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('')

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;
}

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

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 config core.ignorecase false 

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";
  }