代码块-Javascript

将内容复制到剪贴板

1
2
3

const copyToClipboard = (content) => navigator.clipboard.writeText(content)

copyToClipboard("Hello fatfish")

获取鼠标选择

1 2	const getSelectedText = () => window.getSelection().toString() getSelectedText()

打乱数组

1 2	const shuffleArray = array => array.sort(() => Math.random() - 0.5) shuffleArray([ 1, 2,3,4, -1, 0 ]) // [3, 1, 0, 2, 4, -1]

将 rgba 转换为十六进制

1 2	const rgbaToHex = (r, g, b) => "#" + [r, g, b].map(num => parseInt(num).toString(16).padStart(2, '0')).join('') rgbaToHex(0, 0 ,0) // #000000rgbaToHex(255, 0, 127) //#ff007f

将十六进制转换为 rgba

1
2

const hexToRgba = hex => {  const [r, g, b] = hex.match(/\w\w/g).map(val => parseInt(val, 16))  return `rgba(${r}, ${g}, ${b}, 1)`;}
hexToRgba('#000000') // rgba(0, 0, 0, 1)hexToRgba('#ff007f') // rgba(255, 0, 127, 1)

获取多个数字的平均值

使用 reduce 我们可以非常方便地获取一组数组的平均值。

1 2	const average = (...args) => args.reduce((a, b) => a + b, 0) / args.length average(0, 1, 2, -1, 9, 10) // 3.5

检查数字是偶数还是奇数

1 2	const isEven = num => num % 2 === 0 isEven(2) // trueisEven(1) // false

删除数组中的重复元素

1 2	const uniqueArray = (arr) => [...new Set(arr)] uniqueArray([ 1, 1, 2, 3, 4, 5, -1, 0 ]) // [1, 2, 3, 4, 5, -1, 0]

检查对象是否为空对象

1 2	const isEmpty = obj => Reflect.ownKeys(obj).length === 0 && obj.constructor === Object isEmpty({}) // trueisEmpty({ name: 'fatfish' }) // false

反转字符串

1 2	const reverseStr = str => str.split('').reverse().join('') reverseStr('fatfish') // hsiftaf

计算两个日期之间的间隔

1 2	const dayDiff = (d1, d2) => Math.ceil(Math.abs(d1.getTime() - d2.getTime()) / 86400000) dayDiff(new Date("2023-06-23"), new Date("1997-05-31")) // 9519

找出日期所在的年份

1 2	const dayInYear = (d) => Math.floor((d - new Date(d.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24) dayInYear(new Date('2023/06/23'))// 174

将字符串的首字母大写

1 2	const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1) capitalize("hello fatfish") // Hello fatfish

生成指定长度的随机字符串

1 2	const generateRandomString = length => [...Array(length)].map(() => Math.random().toString(36)[2]).join('') generateRandomString(12) // cysw0gfljoyxgenerateRandomString(12) // uoqaugnm8r4s

获取两个整数之间的随机整数

1 2	const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min) random(1, 100) // 27random(1, 100) // 84random(1, 100) // 55

指定数字四舍五入

1 2	const round = (n, d) => Number(Math.round(n + "e" + d) + "e-" + d) round(3.1415926, 3) //3.142round(3.1415926, 1) //3.1

1	const clearCookies = document.cookie.split(';').forEach(cookie => document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`))

检测是否为暗模式

1 2	const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches console.log(isDarkMode)

滚动到页面顶部

1 2	const goToTop = () => window.scrollTo(0, 0) goToTop()

确定是否为 Apple 设备

1 2	const isAppleDevice = () => /Mac\|iPod\|iPhone\|iPad/.test(navigator.platform) isAppleDevice()

随机布尔值

1 2	const randomBoolean = () => Math.random() >= 0.5 randomBoolean()

获取变量的类型

1
2

const typeOf = (obj) => Object.prototype.toString.call(obj).slice(8, -1).toLowerCase()
typeOf('')     // stringtypeOf(0)      // numbertypeOf()       // undefinedtypeOf(null)   // nulltypeOf({})     // objecttypeOf([])     // arraytypeOf(0)      // numbertypeOf(() => {})  // function

确定当前选项卡是否处于活动状态

1	const checkTabInView = () => !document.hidden

检查元素是否处于焦点

1	const isFocus = (ele) => ele === document.activeElement

随机 IP

const generateRandomIP = () => {  
  return Array.from({length: 4}, () => Math.floor(Math.random() * 256)).join('.');
}
generateRandomIP() // 220.187.184.113
generateRandomIP() // 254.24.179.151

async/await 实现异步程序的顺序执行

async function asyncFunction(item) {
  // 模拟异步操作，例如请求数据
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('处理：', item);
      resolve();
    }, (Math.floor(Math.random()*5 + 1))*1000);
  });
}

async function main() {
  const items = ['A', 'B', 'C', 'D'];

  for (const item of items) {
    // await 会保证等待返回。如果不加 await ，则输出顺序是随机的
    await asyncFunction(item);
  }
}

main();

// 输出
处理：A
处理：B
处理：C
处理：D

图片等比例缩放

			/**
 * 根据最大宽度和高度等比例缩放图片尺寸
 * @param {number} originalWidth 原始图片宽度
 * @param {number} originalHeight 原始图片高度
 * @param {number} maxWidth 允许的最大宽度
 * @param {number} maxHeight 允许的最大高度
 * @returns {Object} 包含缩放后的宽度和高度的对象 {width, height}
 */
function resizeImageProportionally(originalWidth, originalHeight, maxWidth, maxHeight) {
    let scaledWidth = originalWidth;
    let scaledHeight = originalHeight;

    // 计算宽度和高度的比例
    let widthRatio = maxWidth / originalWidth;
    let heightRatio = maxHeight / originalHeight;
    
    // 使用较小的比例来确保图片可以适应既定的最大宽度和高度
    let scalingFactor = Math.min(widthRatio, heightRatio);

    // 如果比例小于1，说明需要缩放
    if (scalingFactor < 1) {
        scaledWidth *= scalingFactor;
        scaledHeight *= scalingFactor;
    }

    return { width: Math.round(scaledWidth), height: Math.round(scaledHeight) };
}

// 使用示例
let originalWidth = 800;
let originalHeight = 600;
let maxWidth = 700;
let maxHeight = 500;

let resizedDimensions = resizeImageProportionally(originalWidth, originalHeight, maxWidth, maxHeight);
console.log(`Resized dimensions: Width = ${resizedDimensions.width}, Height = ${resizedDimensions.height}`);

获取网络图片

图片大小，单位 KB

async function getImageFileSize(url) {
    try {
        const response = await fetch(url, { method: 'HEAD' });
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const contentLength = response.headers.get('content-length');
        if (contentLength) {
            // 将字节大小转换为KB
            const fileSizeInKB = parseInt(contentLength, 10) / 1024;
            console.log(`Image size: ${fileSizeInKB.toFixed(2)} kB`);
            return fileSizeInKB.toFixed(2);
        } else {
            console.warn('Content-Length header not found.');
            return null;
        }
    } catch (error) {
        console.error(`Failed to fetch image size: ${error}`);
        return null;
    }
}

// 使用示例
getImageFileSize('http://example.com/image.jpg');

图片宽、高

function getImageSize(url, callback) {
    var img = new Image();
    img.onload = function() {
        callback(img.width, img.height);
    };
    img.onerror = function() {
        console.error('Failed to load image: ' + url);
        callback(null, null);
    };
    img.src = url;
}

// 使用示例
getImageSize('http://example.com/image.jpg', function(width, height) {
    if (width && height) {
        console.log('Image dimensions: ' + width + 'x' + height);
    } else {
        console.log('Unable to get image dimensions.');
    }
});

重复点击控制

// 防抖函数
function debounce(func, wait) {
    let timeout;
    return function() {
        const context = this;
        const args = arguments;
        clearTimeout(timeout);
        timeout = setTimeout(function() {
            func.apply(context, args);
        }, wait);
    };
}

// 实际的点击处理函数
function handleClick() {
    console.log("按钮被点击了");
    // 这里执行你的实际操作
}

// 获取按钮元素
const button = document.getElementById('yourButtonId');

// 为按钮添加防抖后的点击事件监听器
button.addEventListener('click', debounce(handleClick, 500)); // 500毫秒内连续点击只会执行一次 handleClick

清除浏览器缓存指定 KEY

1	window.localStorage.removeItem('abc')

三段式app版本更新判断

function bUpdate(client_version, server_version) {
	let flag_update = false
	let client = client_version.split('.').join('')
	let server = server_version.split('.').join('')
	if(parseInt(server) > parseInt(client)) {
		flag_update = true
	}
	return flag_update
}

根据Key 删除对象的元素

var json = {a: "123", b: "345"}
 
delete json.a
console.log(json) // {b: "345"}

delete json.b
console.log(json) // {}

当前站点信息

域名或IP地址-window.location.hostname

1 2	window.location.hostname // 192.168.0.200

域名或IP地址+端口号-window.location.host

1 2	window.location.host // 192.168.0.200:8080

随机值

10 位随机字母+数字组成的字符串

function id(){
  // a~z 0-9
  return Math.random().toString(36).substr(2,10)  // 0.cz2e64x70ndn 截取从小数位开始，10 位，最多 11 位
}

Date

1
2
3

let date = new Date()
//let date = new Date('2021-12-30 12:30:23')
let mils = date.getTime()

解析当前URL参数

function getUrlParamValue (key) {
    const paramsStr = window.location.search
    if(paramsStr) {
      const params = new URLSearchParams(paramsStr)
      return params.get(key)
    } else {
      let params = window.location.href.split('?')[1]
      let pArr = params.split('&')
      for (let i=0; i<pArr.length; i++) {
        let pair = pArr[i].split("=");
        if(pair[0] == key){
          return pair[1]
        }
      }
      return ""
    }
}

将对象或数组中key的值为 null 的转为空字符串

function null2str(data) {
  if (typeof data != 'object'|| data === null|| data ==='null') {
    data = '';
    return data;
  } else {
    for (let x in data) {
      if (data[x] === null || data[x] === 'null') { // 如果是null 把直接内容转为 ''
        data[x] = '';
      } else {
        if (Array.isArray(data[x])) { // 是数组遍历数组 递归继续处理
          data[x] = data[x].map(z => {
            console.log(z)
            return null2str(z);
          });
        }
        if(typeof(data[x]) === 'object'){ // 是json 递归继续处理
          data[x] = null2str(data[x])
        }
      }
    }
    return data;
  }
}

根据 label 过滤级联数据

let sourceData = [
  {
    value: "B04A05",
    label: "市容环境",
    children: [
      {
        value: "B04A05A02",
        label: "中华人民共和国固体废物污染环境防治法",
        children: [],
      },
      {
        value: "B04A05A03",
        label: "中华人民共和国大气污染防治法",
        children: [],
      },
      {
        value: "B04A05A04",
        label: "河北省大气污染防治条例",
        children: [],
      },
      {
        value: "B04A05A05",
        label: "中华人民共和国噪声污染防治法",
        children: [],
      },
      {
        value: "B04A05A06",
        label: "河北省城市市容和环境卫生条例",
        children: [],
      },
    ],
  },
  {
    value: "B04A06",
    label: "建筑、生活垃圾",
    children: [
      {
        value: "B04A06A01",
        label: "河北省城乡生活垃圾分类管理条例",
        children: [],
      },
      {
        value: "B04A06A02",
        label: "城市生活垃圾管理办法",
        children: [],
      },
      {
        value: "B04A06A03",
        label: "河北省餐厨废弃物管理办法",
        children: [],
      },
      {
        value: "B04A06A04",
        label: "城市建筑垃圾管理规定",
        children: [],
      },
    ],
  },
  {
    value: "B04A07",
    label: "市政交通",
    children: [
      {
        value: "B04A07A01",
        label: "城市道路管理条例",
        children: [
          {
            value: "B04A07A0101",
            label: "城市建筑垃圾规定",
            children: [],
          },
        ],
      },
    ],
  },
  {
    value: "B04A08",
    label: "燃气管理",
    children: [
      {
        value: "B04A08A01",
        label: "城镇燃气管理条例",
        children: [],
      },
      {
        value: "B04A08A02",
        label: "河北省燃气管理条例",
        children: [],
      },
    ],
  },
  {
    value: "B04A09",
    label: "园林绿化",
    children: [
      {
        value: "B04A09A01",
        label: "河北省绿化条例",
        children: [],
      },
    ],
  },
]

function filterByLabel(data, targetLabel) {
  function getLeafNodes(treeData) {
    function traverse(node, parentsValue = [], parentsLabel = []) {
      const valuesChain = [...parentsValue, node.value]
      const labelChain = [...parentsLabel, node.label]

      if (!node.children || node.children.length === 0) {
        // 如果当前节点没有子节点，则为末级节点，返回包含 label 和 values 的对象
        return [{ label: labelChain.join("/"), values: valuesChain }]
      }

      // 否则，继续遍历子节点
      const leafNodes = []
      for (const child of node.children) {
        leafNodes.push(...traverse(child, valuesChain, labelChain))
      }
      return leafNodes
    }

    let result = []
    treeData.forEach((node) => {
      result.push(...traverse(node))
    })
    return result
  }

  let allData = getLeafNodes(data)

  let result = []
  allData.forEach((obj) => {
    if (obj.label.includes(targetLabel)) {
      result.push(obj)
    }
  })
  return result
}

console.log("result: ", filterByLabel(sourceData, "环境"))
console.log("result: ", filterByLabel(sourceData, "管理"))

将内容复制到剪贴板

获取鼠标选择

打乱数组

将 rgba 转换为十六进制

将十六进制转换为 rgba

获取多个数字的平均值

检查数字是偶数还是奇数

删除数组中的重复元素

检查对象是否为空对象

反转字符串

计算两个日期之间的间隔

找出日期所在的年份

将字符串的首字母大写

生成指定长度的随机字符串

指定数字四舍五入

清除所有 cookie

检测是否为暗模式

滚动到页面顶部

确定是否为 Apple 设备

随机布尔值

获取变量的类型

确定当前选项卡是否处于活动状态

检查元素是否处于焦点

随机 IP

async/await 实现异步程序的顺序执行

图片等比例缩放

获取网络图片

图片大小，单位 KB

图片宽、高

重复点击控制

清除浏览器缓存指定 KEY

三段式app版本更新判断

根据Key 删除对象的元素

当前站点信息

域名或IP地址-window.location.hostname

域名或IP地址+端口号-window.location.host

随机值

Date

解析当前URL参数

将对象或数组中key的值为 null 的转为空字符串

根据 label 过滤级联数据