对每个前端程序员都适用的 21 个 JavaScript 代码片段

随风发布于2021-02-051293 次阅读

以下是一些有用的 JavaScript 代码片段，任何前端/web 开发人员都可以将其添加到其应用程序中并在日常开发中使用。

许多片段都是单线的，易于理解，可以添加到任何 web 开发前端项目中。

随着 JavaScript 的不断变化，创建可重复使用的方法是很重要的，所以如果有任何变化，你只需要在一个地方改变它。希望下面的列表中至少有一个可以帮助您创建一些自己的可重用方法!

1. 获取作为数字的输入值

const checkMyValueType = (event) = > {
    console.log(typeof event.target.value) // string
    console.log(typeof event.target. * * valueAsNumber * * ) // number
}

2. 将输入复制到剪贴板

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

3. 检查浏览器的 tab 是否在视图中

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

4. 将 bool 类型的值更改为相反的值

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

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

5. 检查给定数字是否为偶数

const isEven = num : num % 2 === 0;

console.log(isEven(2)) // true
console.log(isEven(3)) // false

6. 检查日期是否为工作日

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)

7. 向日期添加天数

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'

8. 从日期中获取时间

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"

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

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

10. 检查是否启用了本地存储

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

isLocalStorageEnabled(); // true, 如果 localStorage 可使用

11. 检查某件事花了多长时间

var startTime = performance.now();
anyMethodOrCode();

const endTime = performance.now();

console.log(endTime - startTime + " milliseconds."); // (Time in milliseconds)

12. 捕捉右点击

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

13. 仅触发事件侦听器一次

const myButton = document.getElementById("myBtn");

const myClickFunction = () : {
  console.log('this click will only get called once')
}

myButton.addEventListener('click', myClickHandler, {
  once: true,
});

14. 滚动到页面顶部

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


scrollToTopOfDocument();

15. 检查字符串是否为大写

const isUpperCase = str : str === str.toUpperCase();

console.log(isUpperCase("string")); // false
console.log(isUpperCase("STRING")); // true
console.log(isUpperCase("5TR1NG")); // true

16. 检查给定元素是否处于焦点

const elementIsInFocus = el : (el === document.activeElement);

elementIsInFocus(anyElement)// 如果处于处于焦点 就是 true，否则 false

17. 查找数组之间的差异

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]

18. 从元素中删除事件监听器

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);

// 调用 remove 方法
removeEventOffElement(document.body, 'click', fn);

19. 用 Hex 格式产生随机颜色

const generateRandomColour = () :   "#" + Math.floor(Math.random()*16777215).toString(16);

//EXAMPLE
document.getElementsByTagName("body")[0].style.color = generateRandomColour();

20.查找非 null 的第一个定义参数

const getFirstValidValue = (...values) : values.find(v : ![undefined, null].includes(v));

console.log(getFirstValidValue(null, undefined, 'Hey', null); // 'Hey'

21. 监听指定元素之外的点击

const onClickOutsideElement = (element, callback) : {
  document.addEventListener('click', e : {
    if (!element.contains(e.target)) callback();
  });
};

onClickOutside('#some-element', () : console.log('Hey you missed'));