21个用于日常开发的有用JavaScript片段有时开发人员会发现自己在一次又一次地创建相同的东西，希望上面的一些代码片

输入值数字化

const checkMyValueType = (event) => {
  console.log(typeof event.target.value) // string
  console.log(typeof event.target.valueAsNumber) // number
}
<input type="number" onkeyup="checkMyValueType(event)" />

复制输入框值到粘贴板

function copyToClipboard(inputID){
    navigator.clipboard.writeText(document.querySelector(inputID).value);
}

检查窗口是否可见

const isBrowserTabInView = () => document.hidden;
isBrowserTabInView(); // returns true or false depending if tab is in view / focus

布尔值取反

let myBool = false;
myBool = !myBool;
console.log(myBool); // true
myBool = !myBool;
console.log(myBool); // false

检查值是否是偶数

const isEven = num => num % 2 === 0;
console.log(isEven(2)) // true
console.log(isEven(3)) // false

检查日期是否是工作日

const isWeekday = d => d.getDay() % 6 !== 0;
console.log(isWeekday(new Date(2021, 0, 11))); // true (Monday)
console.log(isWeekday(new Date(2021, 0, 10))); // false (Sunday)

日期加减

const addDaysToDate = (date, n) => {
  date.setDate(date.getDate() + n);
  return date.toISOString().split('T')[0];
};
addDaysToDate('2021-0-10', 10); // "2021-01-20"
addDaysToDate('2021-0-10', -10); // '2020-12-31'

获取时分秒

const timeFromDate = date => date.toTimeString().slice(0, 8);
console.log(timeFromDate(new Date(2021, 0, 10, 17, 30, 0))); 
// "17:30:00"
console.log(timeFromDate(new Date(2021, 0, 10, 5, 56, 44)));
// "05:56:44"

计算两个日期之间的工作日数

const countWeekDaysBetween = (startDate, endDate) =>
  Array
    .from({ length: (endDate - startDate) / (1000 * 3600 * 24) })
    .reduce(count => {
      if (startDate.getDay() % 6 !== 0) {
        count++;
      }
     startDate = new Date(startDate.setDate(startDate.getDate() + 1));
      return count;
    }, 0);
countWeekDaysBetween(new Date(2021, 0, 10), new Date(2021, 0, 20)); // 7
countWeekDaysBetween(new Date(2021, 1, 10), new Date(2021, 2, 18)); // 26

检查localstorage是否可用

const isLocalStorageEnabled = () => {
  try {
    const key = `__storage__test`;
    window.localStorage.setItem(key, null);
    window.localStorage.removeItem(key);
    return true;
  } catch (e) {
    return false;
  }
};
isLocalStorageEnabled(); // true, if localStorage is accessible

计算函数等花费时间

 startTime = performance.now();
anyMethodOrCode();
const endTime = performance.now();
console.log(endTime - startTime + " milliseconds."); // (Time in milliseconds)

捕获右键点击

window.oncontextmenu = () => {
  console.log('right click');
}

只触发一次事件

const myButton = document.getElementById("myBtn");
const myClickFunction = () => {
  console.log('this click will only get called once')
}
myButton.addEventListener('click', myClickHandler, {
  once: true,
});

滚动到顶部

const scrollToTopOfDocument = () => {
  const c = document.documentElement.scrollTop || document.body.scrollTop;
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    window.scrollTo(0, c - c / 8);
  }
};
scrollToTopOfDocument();

检查字符串是否大写

const isUpperCase = str => str === str.toUpperCase();
console.log(isUpperCase("string")); // false
console.log(isUpperCase("STRING")); // true
console.log(isUpperCase("5TR1NG")); // true

检查元素是否处于focus状态

const elementIsInFocus = el => (el === document.activeElement);
elementIsInFocus(anyElement)// returns true if in focus, false if not in focus

查找数组间不同元素

const differenceInArrays = (array1, array2) =>  {  
    const set = new Set(array2);  
    return array1.filter(x => !set.has(x));
}; 
differenceInArrays(["apple", "orange", "banana"], ["apple", "orange", "mango"]); // ["banana"]
differenceInArrays([10, 12, 5], [66, 10, 6]); // [12, 5]

移除事件监听

const removeEventOffElement = (el, evt, fn, opts = false) => el.removeEventListener(evt, fn, opts);
const testFunction = () => console.log('My function has been called');
document.body.addEventListener('click', testFunction);
// Call remove method
removeEventOffElement(document.body, 'click', fn);

随机生成HEX值

const generateRandomColour = () =>   "#" + Math.floor(Math.random()*16777215).toString(16);
//EXAMPLE
document.getElementsByTagName("body")[0].style.color = generateRandomColour();

查找第一个定义的非空参数

const getFirstValidValue = (...values) => values.find(v => ![undefined, null].includes(v));
console.log(getFirstValidValue(null, undefined, 'Hey', null); // 'Hey'

元素外部监听事件

const onClickOutsideElement = (element, callback) => {
  document.addEventListener('click', e => {
    if (!element.contains(e.target)) callback();
  });
};
onClickOutside('#some-element', () => console.log('Hey you missed'));
// Will log "Hey you missed" everytime a click that was not "some-element" was clicked

总结

有时开发人员会发现自己在一次又一次地创建相同的东西，希望上面的一些代码片段可以在在开发中重用。最新的JavaScript特性和浏览器api是很重要的。

本篇文章由一文多发平台ArtiPub自动发布