JavaScript基础操作与精度处理：数组、对象、数值与页面响应-优快云博客

1.map直接生成一个数组

imgMap() {
  return new Map([
    ["公共安全", require("../../../public/images/18.png")],
    ["公共服务", require("../../../public/images/21.png")],
    ["公共管理", require("../../../public/images/22.png")],
    ["安全事件", require("../../../public/images/23.png")],
  ]);
}

2.parseInt和Math.floor

Math.floor(): 任意值向下取整
parseInt(): 把任意字符串转换为整数（必须以数字开头）

3.数组转换格式

let arr = ['1', '2', '3', '4','10','45']

let newArr = []
function foo() {
    let obj = {
        start: '',
        end: ''
    }
    arr.forEach((item, index) => {
        const num = index + 1
        if (num % 2 === 0) {
            obj.end = item
            newArr.push(JSON.parse(JSON.stringify(obj)))
        } else {
            obj.start = item
        }
    })
}
foo()
console.log(newArr)  //  [{start: "1",end:"2"},{start: "1", end: "2"}]

4.获取对象的key 值和 value 值

单独获取对象的key值：
Object.keys(obj) 方法返回一个数组，这个数组包含 obj 对象中的所有 key 值
const data = { '2022-11-18': '10', '2022-11-19': '17', '2022-11-20': '21', '2022-11-21': '7' };
console.log(Object.keys(data)); // ["2022-11-18", "2022-11-19", "2022-11-20", "2022-11-21"];

单独获取对象的value值：
Object.value(obj) 方法返回一个数组，这个数组包含 obj 对象中的所有 value 值
const data = { '2022-11-18': '10', '2022-11-19': '17', '2022-11-20': '21', '2022-11-21': '7' };
console.log(Object.values(data)); // ["10", "17", "21", "7"];

同时获取key值和value值：

将[{章谷镇：0}, {巴底镇： 0}]转换成[{value:0,name: "章谷镇"},{value:0,name:"巴底镇"}]
let list = [{章谷镇:0}, {巴底镇:0}]
let arr = []
list.forEach(item => {
  let obj = {}
  for(let key in item) {
     console.log(key, item[key]);
     obj.value = item[key]
     obj.name = key
  }
  arr.push(obj)
})
 console.log(arr);

5.object如何判空

isEmpty1(obj) {
  return JSON.stringify(obj) === '{}';
},
isEmpty2(obj) {
  return Object.keys(obj).length === 0;
},
isEmpty3(obj) {
  return Object.getOwnPropertyNames(obj).length === 0
},
isEmpty4(obj) {
  let flag = true
  for(const key in obj) {
    if(key) {
       flag = false
       break;
    }
  }
  return flag
}
 // 当变量使用Symbol声明时此方法判空不会出错，使用其余方法会判断错误
// vue3使用此方法不会出现错误，vue2使用可能在某些场景下会出现错误
isEmpty5(obj) {
   return Reflect.ownKeys(obj).length === 0
}

6.字符串转数组

let time = "[2023-02-09, 2023-02-21]"
let times = time.replace('[','')
let _time = times.replace(']','')
let timess = _time.split(",")
console.log(timess) //['2023-02-09', ' 2023-02-21']

7.模板字符串加动态样式

formatter: (data) => {
  return `<div style="display:flex;align-items: center;font-size:16px;margin:5px 20px;">
    <div style="width:8px;height:8px;border-radius:50%;margin-right:5px;background:${data[0].color}"></div>                           ${data[0].name}: &nbsp;&nbsp; ${data[0].value}件 <br>
    </div>`
  return `<div> <img :src="${require('../../../../../public/img/dong/icon10.png')}"></img></div>`
}

8.监听页面宽度变化

addEventListener('resize', () => {
  let mains = document.getElementsByClassName("main")
  // console.log(window.innerWidth);
  if (window.innerWidth < 1466){
     mains[1].style.paddingBottom = "20px"
  }else{
    mains[1].style.paddingBottom = "0px"
  }
})

9.快速填充数组

tableData: new Array(20).fill({
  a: '8654236548964712',
  b: '川V·v3264',
  c: '蓝色白字',
  d: '2023-01-01 15:30',
  e:'2023-01-01 15:30',
  f:'66km/h',
  g:"66km/h",
  h:'80km/h',
  i:'正常',
  j:'附近风险点信息',
  k:'已完成',
})

10.路由页面刷新

当前页路由更新路由传参值，不打开新页面直接刷新页面

if (this.$route.path.startsWith("/scheduling/evengFish/detail")) {
  window.location.href =
    "/#/scheduling/evengFish/detail/" +
    data.businessId +
    "?type=insMsg";
} else {
  console.log("2323");
  this.$router.push(
    "/scheduling/evengFish/detail/" + data.businessId + "?type=insMsg"
  );
}

11.字符串编码

fileEncode(str) {
  // 对字符串进行编码
  let encode = encodeURI(str);
  // 对编码的字符串转化base64
  let base64 = btoa(encode);
  return base64;
}

12.小数校验

大于0的正整数：/^\+?[1-9][0-9]*$/
大于0的数字（包含小数）：/^([1-9]\d*(\.\d*[1-9])?)|(0\.\d*[1-9])$/    
大于0的数字（两位小数）/^[0-9]+\.{0,1}[0-9]{0,2}$/    
大于0的数字（包含0，但不能出现多个0）：/^(0|[1-9]\d*)(\.\d+|\.0+)?$/.test(value)

13. 3*0.6!==1.8

由于js浮点数精度问题，所以加减乘除都会有问题，需要我们去预处理

Math.round(parseFloat(num)*10)/10   //保留1位小数
Math.round(parseFloat(num)*100)/100   //保留两位小数

14.生成随机数

const getRandom = (min, max) => {
  const floatRandom = Math.random()
  const difference = max - min
  // 介于 0 和差值之间的随机数
  const random = Math.round(difference * floatRandom)
  const randomWithinRange = random + min
  return randomWithinRange
}
console.log(getRandom(10, 15))

15.pc全屏模式

const fullScreen = () => {
  //DOM对象里面的一个属性，用户来判断当前是不是全屏模式，true为全屏，false反之
  let full = document.fullscreenElement
  if(!full) {
    //文档根节点的方法requestFullscreen,实现全屏模式
    document.documentElement.requestFullscreen();
  }else{
    //变为不是全屏模式->退出全屏模式
    document.exitFullscreen();
  }
};