新闻资讯

新闻资讯 行业动态

127个常用的JS代码片段,每段代码花30秒就能看懂(二)

编辑:006     时间:2020-03-14
43、getColonTimeFromDate

此段代码从Date对象里获取当前时间。

    const getColonTimeFromDate = date => date.toTimeString().slice(0, 8);
    getColonTimeFromDate(new Date()); // "08:38:00"

44、getDaysDiffBetweenDates

此段代码返回两个日期之间相差多少天

    const getDaysDiffBetweenDates = (dateInitial, dateFinal) =>
      (dateFinal - dateInitial) / (1000 * 3600 * 24);
      
    getDaysDiffBetweenDates(new Date('2019-01-13'), new Date('2019-01-15')); // 2

45、getStyle

此代码返回DOM元素节点对应的属性值。

    const getStyle = (el, ruleName) => getComputedStyle(el)[ruleName];
     
    getStyle(document.querySelector('p'), 'font-size'); // '16px'

46、getType

此段代码的主要功能就是返回数据的类型。

    const getType = v =>
      v === undefined ? 'undefined' : v === null ? 'null' : v.constructor.name.toLowerCase();
      
    getType(new Set([1, 2, 3])); // 'set'

47、hasClass

此段代码返回DOM元素是否包含指定的Class样式。

    const hasClass = (el, className) => el.classList.contains(className);
    hasClass(document.querySelector('p.special'), 'special'); // true

48、head

此段代码输出数组的第一个元素。

    const head = arr => arr[0];
     
    head([1, 2, 3]); // 1

49、hide

此段代码隐藏指定的DOM元素。

    const hide = (...el) => [...el].forEach(e => (e.style.display = 'none'));
     
    hide(document.querySelectorAll('img')); // Hides all <img> elements on the page

50、httpsRedirect

此段代码的功能就是将http网址重定向https网址。

    const httpsRedirect = () => {
      if (location.protocol !== 'https:') location.replace('https://' + location.href.split('//')[1]);
    };
     
    httpsRedirect(); // If you are on http://mydomain.com, you are redirected to https://mydomain.com

51、indexOfAll

此代码可以返回数组中某个值对应的所有索引值,如果不包含该值,则返回一个空数组。

    const indexOfAll = (arr, val) => arr.reduce((acc, el, i) => (el === val ? [...acc, i] : acc), []);
     
    indexOfAll([1, 2, 3, 1, 2, 3], 1); // [0,3]
    indexOfAll([1, 2, 3], 4); // []

52、initial

此段代码返回数组中除最后一个元素的所有元素

    const initial = arr => arr.slice(0, -1);
     
    initial([1, 2, 3]); // [1,2]const initial = arr => arr.slice(0, -1);
    initial([1, 2, 3]); // [1,2]

53、insertAfter

此段代码的功能主要是在给定的DOM节点后插入新的节点内容

    const insertAfter = (el, htmlString) => el.insertAdjacentHTML('afterend', htmlString);
     
    insertAfter(document.getElementById('myId'), '<p>after</p>'); // <div id="myId">...</div> <p>after</p>

54、insertBefore

此段代码的功能主要是在给定的DOM节点前插入新的节点内容

    const insertBefore = (el, htmlString) => el.insertAdjacentHTML('beforebegin', htmlString);
     
    insertBefore(document.getElementById('myId'), '<p>before</p>'); // <p>before</p> <div id="myId">...</div>

55、interp

此段代码返回两个数组元素之间的交集。

    const interp = (a, b) => {
      const s = new Set(b);
      return a.filter(x => s.has(x));
    };
     
    interp([1, 2, 3], [4, 3, 2]); // [2, 3]

56、interpBy

按照给定的函数处理需要对比的数组元素,然后根据处理后的数组,找出交集,最后从第一个数组中将对应的元素输出。

    const interpBy = (a, b, fn) => {
      const s = new Set(b.map(fn));
      return a.filter(x => s.has(fn(x)));
    };
     
    interpBy([2.1, 1.2], [2.3, 3.4], Math.floor); // [2.1]

57、interpBy

按照给定的函数对比两个数组的差异,然后找出交集,最后从第一个数组中将对应的元素输出。

    const interpWith = (a, b, comp) => a.filter(x => b.findIndex(y => comp(x, y)) !== -1);
     
    interpWith([1, 1.2, 1.5, 3, 0], [1.9, 3, 0, 3.9], (a, b) => Math.round(a) === Math.round(b)); // [1.5, 3, 0]

58、is

此段代码用于判断数据是否为指定的数据类型,如果是则返回true。

    const is = (type, val) => ![, null].includes(val) && val.constructor === type;
     
    is(Array, [1]); // true
    is(ArrayBuffer, new ArrayBuffer()); // true
    is(Map, new Map()); // true
    is(RegExp, /./g); // true
    is(Set, new Set()); // true
    is(WeakMap, new WeakMap()); // true
    is(WeakSet, new WeakSet()); // true
    is(String, ''); // true
    is(String, new String('')); // true
    is(Number, 1); // true
    is(Number, new Number(1)); // true
    is(Boolean, true); // true
    is(Boolean, new Boolean(true)); // true

59、isAfterDate

接收两个日期类型的参数,判断前者的日期是否晚于后者的日期。

    const isAfterDate = (dateA, dateB) => dateA > dateB;
     
    isAfterDate(new Date(2010, 10, 21), new Date(2010, 10, 20)); // true

60、isAnagram

用于检测两个单词是否相似。

    const isAnagram = (str1, str2) => {
      const normalize = str =>
        str
          .toLowerCase()
          .replace(/[^a-z0-9]/gi, '')
          .split('')
          .sort()
          .join('');
      return normalize(str1) === normalize(str2);
    };
     
    isAnagram('iceman', 'cinema'); // true

61、isArrayLike

此段代码用于检测对象是否为类数组对象,是否可迭代。

    const isArrayLike = obj => obj != null && typeof obj[Symbol.iterator] === 'function';
     
    isArrayLike(document.querySelectorAll('.className')); // true
    isArrayLike('abc'); // true
    isArrayLike(null); // false

62、isBeforeDate

接收两个日期类型的参数,判断前者的日期是否早于后者的日期。

    const isBeforeDate = (dateA, dateB) => dateA < dateB;
     
    isBeforeDate(new Date(2010, 10, 20), new Date(2010, 10, 21)); // true

63、isBoolean

此段代码用于检查参数是否为布尔类型。

    const isBoolean = val => typeof val === 'boolean';
     
    isBoolean(null); // false
    isBoolean(false); // true
64、getColonTimeFromDate

用于判断程序运行环境是否在浏览器,这有助于避免在node环境运行前端模块时出错。

    const isBrowser = () => ![typeof window, typeof document].includes('undefined');
     
    isBrowser(); // true (browser)
    isBrowser(); // false (Node)

65、isBrowserTabFocused

用于判断当前页面是否处于活动状态(显示状态)。

    const isBrowserTabFocused = () => !document.hidden;
    isBrowserTabFocused(); // true

66、isLowerCase

用于判断当前字符串是否都为小写。

    const isLowerCase = str => str === str.toLowerCase();
     
    isLowerCase('abc'); // true
    isLowerCase('a3@$'); // true
    isLowerCase('Ab4'); // false

67、isNil

用于判断当前变量的值是否为 null 或 undefined 类型。

    const isNil = val => val === undefined || val === null;
     
    isNil(null); // true
    isNil(undefined); // true

68、isNull

用于判断当前变量的值是否为 null 类型。

    const isNull = val => val === null;
     
    isNull(null); // true

69、isNumber

用于检查当前的值是否为数字类型。

    function isNumber(n) {
        return !isNaN(parseFloat(n)) && isFinite(n);
    }
     
    isNumber('1'); // false
    isNumber(1); // true

70、isObject

用于判断参数的值是否是对象,这里运用了Object 构造函数创建一个对象包装器,如果是对象类型,将会原值返回。

    const isObject = obj => obj === Object(obj);
     
    isObject([1, 2, 3, 4]); // true
    isObject([]); // true
    isObject(['Hello!']); // true
    isObject({ a: 1 }); // true
    isObject({}); // true
    isObject(true); // false

71、isObjectLike

用于检查参数的值是否为null以及类型是否为对象。

    const isObjectLike = val => val !== null && typeof val === 'object';
     
    isObjectLike({}); // true
    isObjectLike([1, 2, 3]); // true
    isObjectLike(x => x); // false
    isObjectLike(null); // false

72、isPlainObject

此代码段检查参数的值是否是由Object构造函数创建的对象。

    const isPlainObject = val => !!val && typeof val === 'object' && val.constructor === Object;
     
    isPlainObject({ a: 1 }); // true
    isPlainObject(new Map()); // false

73、isPromiseLike

用于检查当前的对象是否类似Promise函数。

    const isPromiseLike = obj =>
      obj !== null &&
      (typeof obj === 'object' || typeof obj === 'function') &&
      typeof obj.then === 'function';
      
    isPromiseLike({
      then: function() {
        return '';
      }
    }); // true
    isPromiseLike(null); // false
    isPromiseLike({}); // false

74、isSameDate

用于判断给定的两个日期是否是同一天。

    const isSameDate = (dateA, dateB) => dateA.toISOString() === dateB.toISOString();
     
    isSameDate(new Date(2010, 10, 20), new Date(2010, 10, 20)); // true

75、isString

用于检查当前的值是否为字符串类型。

    const isString = val => typeof val === 'string';
     
    isString('10'); // true

76、isSymbol

用于判断参数的值是否是 Symbol 类型。

    const isSymbol = val => typeof val === 'symbol';
     
    isSymbol(Symbol('x')); // true

77、isUndefined

用于判断参数的类型是否是 Undefined 类型。

    const isUndefined = val => val === undefined;
     
    isUndefined(undefined); // true

78、isUpperCase

用于判断当前字符串的字母是否都为大写。

    const isUpperCase = str => str === str.toUpperCase();
     
    isUpperCase('ABC'); // true
    isLowerCase('A3@$'); // true
    isLowerCase('aB4'); // false

79、isValidJSON

用于判断给定的字符串是否是 JSON 字符串。

    const isValidJSON = str => {
      try {
        JSON.parse(str);
        return true;
      } catch (e) {
        return false;
      }
    };
     
    isValidJSON('{"name":"Adam","age":20}'); // true
    isValidJSON('{"name":"Adam",age:"20"}'); // false
    isValidJSON(null); // true

80、last

此函数功能返回数组的最后一个元素。

    const last = arr => arr[arr.length - 1];
     
    last([1, 2, 3]); // 3

81、matches

此函数功能用于比较两个对象,以确定第一个对象是否包含与第二个对象相同的属性与值。

    onst matches = (obj, source) =>
      Object.keys(source).every(key => obj.hasOwnProperty(key) && obj[key] === source[key]);
      
    matches({ age: 25, hair: 'long', beard: true }, { hair: 'long', beard: true }); // true
    matches({ hair: 'long', beard: true }, { age: 25, hair: 'long', beard: true }); // false

82、maxDate

此代码段查找日期数组中最大的日期进行输出。

    const maxDate = (...dates) => new Date(Math.max.apply(null, ...dates));
     
    const array = [
      new Date(2017, 4, 13),
      new Date(2018, 2, 12),
      new Date(2016, 0, 10),
      new Date(2016, 0, 9)
    ];
    maxDate(array); // 2018-03-11T22:00:00.000Z

83、maxN

此段代码输出数组中前 n 位最大的数。

    const maxN = (arr, n = 1) => [...arr].sort((a, b) => b - a).slice(0, n);
     
    maxN([1, 2, 3]); // [3]
    maxN([1, 2, 3], 2); // [3,2]

84、minDate

此代码段查找日期数组中最早的日期进行输出。

    const minDate = (...dates) => new Date(Math.min.apply(null, ...dates));
     
    const array = [
      new Date(2017, 4, 13),
      new Date(2018, 2, 12),
      new Date(2016, 0, 10),
      new Date(2016, 0, 9)
    ];
    minDate(array); // 2016-01-08T22:00:00.000Z

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

回复列表

相关推荐