【JS】数据处理方法块 | 越努力越快乐

html 转义加密解密

html加密

let htmlEscape = function html2Escape(str) {
  return str.replace(/[<>&"]/g, function (c) {
    return {
      '<': '&lt;',
      '>': '&gt;',
      '&': '&amp;',
      '"': '&quot;'
    }[c];
  });
};
 
htmlEscape('<h1>test</h1>'); // '&lt;h1&gt;test&lt;/h1&gt;'

html解密

let escapeHtml = function escape2Html(str) {
  var arrEntities = {
    'lt': '<',
    'gt': '>',
    'nbsp': ' ',
    'amp': '&',
    'quot': '"'
  };
  return str.replace(/&(lt|gt|nbsp|amp|quot);/ig, function (all, t) {
    return arrEntities[t];
  });
};
 
escapeHtml('&lt;h1&gt;test&lt;/h1&gt;'); // '<h1>test</h1>'

正则表达式获取url中的域名

var str = "https://www.baidu.com/";
var reg = /^http(s|):\/\/\S*?\//
var domainName = str.match(reg)
console.log(domainName )

判断设备是不是移动端或者其他设备

function versions(params) {
  var u = navigator.userAgent;
  return {
    trident: u.indexOf('Trident') > -1, //IE内核
    presto: u.indexOf('Presto') > -1, //opera内核
    webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
    gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
    mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
    ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
    android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
    iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
    iPad: u.indexOf('iPad') > -1, //是否iPad
    webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
    weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
    qq: u.match(/\sQQ/i) == 'qq', //是否QQ
  };
}
// 获取设备信息
var browserVersions = versions();
// 判断
if (browserVersions.mobile || browserVersions.android || browserVersions.ios) {
  console.log('移动端');
}

将字符串的数组转为正常的数据'[[1,4,5],[23,54,75],[45,67,8]]'

eval('[[1,4,5],[23,54,75],[45,67,8]]')

toFixed方法设置小数点位数后再进行计算，数据出错问题

情况：

let num = 409600;
let total = 433927;
let percentData = (num / total).toFixed(3) * 100;
 
console.log(percentData) // 94.39999999999999

解决：

在括号里面先乘上100

let num = 409600; 
let total = 433927; 
let percentData = (num * 100 / total).toFixed(1); 
 
console.log(percentData) // 94.4

decodeURIComponent()和encodeURIComponent()

encodeURIComponent() 对 URI 进行编码

var uri="https://www.test.com/test?name=test&car=car";
// https%3A%2F%2Fwww.test.com%2Ftest%3Fname%3Dtest%26car%3Dcar
console.log(encodeURIComponent(uri))

decodeURIComponent() 对编码后的 URI 进行解码

var uri = "https%3A%2F%2Fwww.test.com%2Ftest%3Fname%3Dtest%26car%3Dcar"
// https://www.test.com/test?name=test&car=car
console.log(decodeURIComponent(uri))

export及export default的区别

export

导出：
export let str = “hello”；
export function myFun(){};
 
导入：
import { str, myFun } from 'demo1'

export default

导出：
export default let str = 'hello world'
 
导入：
import str from 'demo1' //导入的时候没有花括号

单位B大小转化MB的转化方法

function conver(limit){ 
    var size = "";
    if(limit === 0) return '0MB'
    return (limit / (1024 * 1024)).toFixed(2) + "MB";
}

查看字符串是否为 "Hello" 开头

var str = "Hello world, welcome to the Runoob."; 
var n = str.startsWith("Hello");
console.log(n) // true

复制文字

function copyText(content){
    if(content){
        const input = document.createElement('input')
        document.body.appendChild(input)
        input.setAttribute('value',content)
        input.select()
        if (document.execCommand('copy')) {
            document.execCommand('copy')
        }
        document.body.removeChild(input)
        alert('已复制到剪贴板')
    }
}

监听浏览器关闭或者刷新

window.onbeforeunload = e => {
    e = e || window.event;
    e.returnValue = "关闭提示";
}

时间属性一些应用

并获取当年当月的最后一日

let time = new Date();
let year = time.getFullYear();
let month = time.getMonth() + 1;
let day = new Date(year, month, 0);
// 拼接格式 2021-03-31
console.log(`${year}-${month > 10 ? month : '0'+month}-${day.getDate()> 10? day.getDate() : '0'+day.getDate()}`)

通过toLocaleDateString获取年月日

let start = new Date();
const startDate=start.toLocaleDateString().split('/'); 
const startMon= startDate[1]<10?`0${startDate[1]}`:startDate[1]; 
const startDay = startDate[2]<10?`0${startDate[2]}`:startDate[2]; 
// 拼接格式 2021-03-29 00:00:00
console.log(`${startDate[0]}-${startMon}-${startDay}` + " " + "00:00:00")

设置时间为前一个月的最后一天

let end = new Date();
let year = end.getFullYear();
let month = end.getMonth()
let day = new Date(year, month, 0)
end.setMonth(end.getMonth() - 1,day.getDate());
console.log(end)

处理后端返回的文件流并下载文件

html标签

<a style="display:none;" ref="download"></a>

js代码

res.data为后端接口返回的文件流数据

记得接口在请求时候设置responseType: 'blob'

const fileName = decodeURI(res.headers['content-disposition'].split('filename=')[1]);// 获取文件名称
this.$refs.download.innerHTML = fileName;
this.$refs.download.download = fileName;
this.$refs.download.href = URL.createObjectURL(res.data);
this.$refs.download.click();

怎么把字符串数组转换成整型数组

var strData="1,2,3,4,5,6";//原始字符串  
var strArrData=strData.split(",");//分割成字符串数组  
var intArrData=[];//保存转换后的整型字符串  
  
//方法一  
strArrData.forEach(function(data,index,arr){  
   intArrData.push(+data);  
});  
console.log(intArrData);// [1, 2, 3, 4, 5, 6]
  
//方法二  
intArrData=strArrData.map(function(data){  
    return +data;  
});  
console.log(intArrData);// [1, 2, 3, 4, 5, 6]

sessionStorage存储数组

设置：

sessionStorage.setItem('att', JSON.stringify(arr));

取值：

JSON.parse(sessionStorage.getItem('att'))

++i和++i的区别

int i = 2, K;
如果
K = i++;
那么先取i的值赋值给K，于是K值为2，i值再自加，i=3。
如果
K = ++i;
那么i先自加，得到i=3，然后再取i值计算，K值为3.

怎样查看window和document上绑定的事件

// window
getEventListeners(window)
 
// document
getEventListeners(document)

JS打开一个新页面

window.open('https://www.baidu.com', '_blank') // 新窗口打开外链接

js修改对象数组里的对象属性名

let data=[
  { desc: '描述',thumb:'1' },
  { desc: '描述',thumb:'2' },
]
 
let data2 = data.map(item=>{return {name: item.desc,value: item.thumb}})
// data2 : [{name: "描述", value: "1"},{name: "描述", value: "2"}]

获取 url 中的参数

function getURLParameters(url) {
  return url
    .match(/([^?=&]+)(=([^&]*))/g)
    .reduce((a, v) => (
        (a[v.slice(0, v.indexOf("="))] = v.slice(v.indexOf("=") + 1)), a
      ),
      {}
    );
}
getURLParameters('nihao?nihao=123')
// {nihao: "123"}
getURLParameters('nihao?nihao=123&&nihao2=456')
// {nihao: "123", nihao2: "456"}

防抖和节流

防抖：设置时间为3秒，持续滚动了15秒停下，只执行一次。如百度输入框
节流：设置时间为3秒，持续滚动了15秒停下，执行了五次。如秒杀按钮

字符串分割/r/n

let str = 'one\r\ntwo\r\nthree' ;
let splitArr = str.split(/[\r\n]+/);
console.log(splitArr); // ["one", "two", "three"]

页面滚动到指令的DOM节点位置

// 有纵向滚动条
document.querySelector('#test').scrollIntoView({
  block: 'start',
  behavior: 'smooth'
})

动态监听DOM元素改变大小

// 动态监听
const MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
const element = document.querySelector('#Ccode-mirror-move .ivu-modal-body');
this.observer = new MutationObserver(() => {
  // 变化后出发的函数
  const width = getComputedStyle(element).getPropertyValue('width'); // 宽度
  const height = getComputedStyle(element).getPropertyValue('height'); // 高度
});
this.observer.observe(element, {
  attributes: true,
  attributeFilter: ['style'],
  attributeOldValue: true,
});

删除对象的空值字段

const reqData = {data:1,name: '',age:null}
for (const key in reqData) {
  if (reqData[key] === '' || reqData[key] === undefined || reqData[key] === null) {
      delete reqData[key]
  }
}
console.log(reqData); // {data:1}

删除数组中的empty

let arr = new Array(3); // [empty × 3]
arr[0] = 3; // [3, empty × 2]
arr =arr.filter(currentValue => currentValue !== ''); // 去除
console.log(arr); // [3]

判断是不是元素节点对象

isElementNode(node){
    return node.nodeType === 1;
}

去除字符串空格

let trim = function(str){
return str.replace(/\s*/g,"");
}
str.replace(/\s*/g,""); //去除字符串内所有的空格
str.replace(/^\s*|\s*$/g,""); //去除字符串内两头的空格
str.replace(/^\s*/,""); //去除字符串内左侧的空格
str.replace(/(\s*$)/g,""); //去除字符串内右侧的空格

判断是不是字符串

function isString(obj){ //判断对象是否是字符串
  return Object.prototype.toString.call(obj) === "[object String]";
}
 
console.log(isString('我是字符串')); // true

修改数组中对象的属性名

/**
 *  把[{ id: 1 }, { id: 2 }] 转为 [{ adsid: 1 }, { adsid: 2 }]
 */
const arr = [{ id: 1 }, { id: 2 }];
const hasAdsArr = [];
 
//赋值克隆对象
function cloneObjectFn(obj) { // 对象复制
    return JSON.parse(JSON.stringify(obj))
}
 
for (let i = 0; i < arr.length; i++) {
    // 将数组中的每一项的id属性改成adsid
    let objCopy = cloneObjectFn(arr[i]);
    objCopy.adsid = objCopy.id;
    delete objCopy.id;
    hasAdsArr.push(objCopy);
}
 
console.log(hasAdsArr);

关于三目运算符多个判断条件的写法

数据结构

1、如果a等于0的话赋值为-2

2、如果a不等0的话进入判断a是否等于1

3、a === 1 ? 0 : -1 --> 形成新的三目运算符去判断

a ===0 ? -2:a === 1 ? 0:-1

复杂度加深

1、判断detailData.userRoleFlag是否等于1

2、detailData.userRoleFlag等于1 ---> ((item.userRoleFlag === 1 || item.userRoleFlag === 2) ? true : false)

3、detailData.userRoleFlag不等于1 ---> detailData.userRoleFlag === 2

4、判断detailData.userRoleFlag是否等于2

3、detailData.userRoleFlag等于2 ---> ((item.userRoleFlag === 0 || item.userRoleFlag === 2) ? true : false)

4、detailData.userRoleFlag不等于2 ---> false

detailData.userRoleFlag === 1 ?
((item.userRoleFlag === 1 || item.userRoleFlag === 2) ? true : false): 
detailData.userRoleFlag === 2 ?
((item.userRoleFlag === 0 || item.userRoleFlag === 2) ? true : false) : false"

注意，三目运算符中"?"和":"是成对出现的，最起码数量上，有几个"?"就会有几个":"

split分割并保留分隔符(火狐浏览器不支持)

您可以使用Lookahead和Lookbehind。像这样：

"a;b;c;d".split(/(?<=;)/g)));
"a;b;c;d".split(/(?=;)/g)));
"a;b;c;d".split(/((?<=;)|(?=;))/g)));

你会得到：

[a;, b;, c;, d]
[a, ;b, ;c, ;d]
[a, ;, b, ;, c, ;, d]

最后一个是你想要的。

((?<=;)|(?=;))等于在;之前或;之后选择一个空字符。

正则匹配以1或者2或者861或者862开头的数字

let makeData  = '6666';
let reg = /^(1|2|861|862)/;
    if (!(reg.test(makeData))) {
       console.log('号码必须以[1、2、861、862]其中某个数字为开头！');
    }else {
       console.log('匹配成功');
    }

本文作者为gengboxb，转载请注明。