当前位置:   article > 正文

javascript常用的一些公共方法_公共js方法

公共js方法

获取当前时间

获取当前时间并补零的 JavaScript 方法:

function getCurrentDateTime() {
  const now = new Date();
  let year = now.getFullYear();
  let month = now.getMonth() + 1;
  let day = now.getDate();
  let hours = now.getHours();
  let minutes = now.getMinutes();
  let seconds = now.getSeconds();

  // 统一的补零方法
  const addZero = num => (num < 10 ? `0${num}` : num);

  // 补零操作
  month = addZero(month);
  day = addZero(day);
  hours = addZero(hours);
  minutes = addZero(minutes);
  seconds = addZero(seconds);

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

// 调用方法获取当前时间
const currentDateTime = getCurrentDateTime();
console.log(currentDateTime);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

说明:使用了 JavaScript 内置的 Math.random() 函数来获取 0 到 1 之间的随机数。我们直接返回这个随机数。

获取随机数

控制位数和小数个数的获取随机数的 JavaScript 方法:

function getRandomNumber(digits, decimals) {
  const max = Math.pow(10, digits) - 1;
  const min = Math.pow(10, digits - 1);
  let randomNumber = Math.random() * (max - min + 1) + min;

  if (decimals > 0) {
    const factor = Math.pow(10, decimals);
    randomNumber = Math.floor(randomNumber * factor) / factor;
  } else {
    randomNumber = Math.floor(randomNumber);
  }

  return randomNumber;
}

// 调用方法获取随机数
const randomNumber = getRandomNumber(4, 2); // 获取一个4位数,保留2位小数的随机数
console.log(randomNumber);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

说明:添加了 digitsdecimals 两个参数,分别用来控制返回的数的位数和保留的小数的个数。我们首先根据指定的位数计算出最大值和最小值,然后使用 Math.random() 函数生成一个在这个范围内的随机数。

同时,我们还判断了 decimals 参数的值,如果大于 0,说明需要保留小数,我们就使用一个因子将随机数放大一定倍数,然后取整,最后再除以因子来保留指定的小数位数。如果小于等于 0,就直接取整。

获取随机颜色

获取随机颜色的 JavaScript 方法:

function getRandomColor() {
  const letters = "0123456789ABCDEF"; // 16进制字符
  let color = "#";

  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }

  return color;
}

// 调用方法获取随机颜色
const randomColor = getRandomColor();
console.log(randomColor);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

说明:使用了 16 进制颜色表示法,颜色值由 6 个字符组成。我们定义了一个包含所有 16 进制字符的字符串,并使用循环随机选择 6 个字符,然后将这 6 个字符拼接起来,加上 # 号,就得到了一个随机颜色值。

数据处理

对传入数据进行处理的 JavaScript 公共方法:

function processData(data, decimals = 2, defaultValue = "-") {
  if (typeof data === "number") {
    return data.toFixed(decimals);
  } else if (!data && data !== 0) {
    return defaultValue;
  } else {
    return data;
  }
}

// 调用方法处理数据
const data1 = processData(3.14159); // 默认保留两位小数
const data2 = processData(3.14159, 3); // 保留三位小数
const data3 = processData(null); // 返回默认值“-”
const data4 = processData(undefined); // 返回默认值“-”
const data5 = processData("", 0); // 返回默认值“0”
const data6 = processData("hello"); // 返回原始值“hello”
console.log(data1);
console.log(data2);
console.log(data3);
console.log(data4);
console.log(data5);
console.log(data6);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

说明:首先判断传入的值是否为数字。如果是数字,就调用 toFixed() 方法保留指定的小数位数,并返回结果。如果不是数字,就判断是否为空、null、undefined,如果是,就返回一个默认值,否则就返回原始值。

查找属性值

根据某个属性值查找对象并返回另一个属性值的 JavaScript 方法:

function findObjectByProperty(arr, property, value, targetProperty) {
  const targetObj = arr.find(obj => obj[property] === value);
  return targetObj ? targetObj[targetProperty] : null;
}

// 示例数据
const arr = [
  {id: 1, name: 'Tom', age: 18},
  {id: 2, name: 'Jerry', age: 21},
  {id: 3, name: 'Alice', age: 25},
  {id: 4, name: 'Bob', age: 20},
  {id: 5, name: 'Lily', age: 23},
];

// 调用方法查找对象并返回对应属性值
const targetAge1 = findObjectByProperty(arr, 'id', 3, 'age');
const targetAge2 = findObjectByProperty(arr, 'name', 'Bob', 'age');
console.log(targetAge1); // 输出 25
console.log(targetAge2); // 输出 20
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

说明:使用 find() 方法查找数组中指定属性名称的对象,找到后返回该对象的目标属性值。如果没有找到,则返回 null。在调用方法时,我们可以根据需要提供数组、属性名称、属性值和目标属性名称等参数。

获取字符串中的数字

获取字符串中数字的 JavaScript 方法,支持获取字符串中的两个数字:

function getNumbersFromString(str) {
  const reg = /\d+/g;
  const matches = str.match(reg);
  return matches ? matches.map(num => parseInt(num)) : [];
}

// 示例字符串
const str = '这是一个带数字123和456的字符串';

// 调用方法获取字符串中数字
const numbers = getNumbersFromString(str);
console.log(numbers); // 输出 [123, 456]
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

说明:使用正则表达式 /\d+/g 匹配字符串中的数字,并将匹配结果保存在 matches 数组中。然后我们使用 map() 方法将匹配到的数字转换为数字类型,并返回该数组。

获取地址栏参数

获取地址栏参数的 JavaScript 方法:

function getUrlParam(key) {
  const reg = new RegExp('(^|&)' + key + '=([^&]*)(&|$)', 'i');
  const matches = window.location.search.substr(1).match(reg);
  return matches ? decodeURIComponent(matches[2]) : null;
}

// 示例 URL:https://www.example.com/?name=Tom&age=18

// 调用方法获取参数值
const name = getUrlParam('name');
const age = getUrlParam('age');
console.log(name); // 输出 "Tom"
console.log(age); // 输出 "18"
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

说明:使用正则表达式 (^|&) + key + '=([^&]*)(&|$)' 匹配地址栏中指定参数名称的参数值,并将匹配结果保存在 matches 数组中。然后我们使用 decodeURIComponent() 方法将匹配到的参数值进行解码,并返回该值。如果地址栏中没有指定参数,则返回 null。

分离对象属性

可用于将对象中的某些属性分离出来得到一个新的对象的公共 JavaScript 方法:

function extractProperties(obj, keys) {
  return keys.reduce((acc, key) => {
    if (obj.hasOwnProperty(key)) {
      acc[key] = obj[key];
    }
    return acc;
  }, {});
}

const obj = { name: '小明', age: 18, gender: 'male' };
const extractedObj = extractProperties(obj, ['name', 'age']);

console.log(extractedObj); // { name: '小明', age: 18 }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

说明:将传入的 obj 对象中指定的属性 keys 分离出来得到一个新的对象,并返回该新对象。其中,obj 为需要被处理的对象,keys 为一个数组,包含了需要被提取到新对象中的属性名。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/黑客灵魂/article/detail/794322
推荐阅读
相关标签
  

闽ICP备14008679号