In the first two articles, 127 common JS code fragments can be understood in 30 seconds (1) and 127 common JS code fragments can be understood in 30 seconds (2). I shared the first 42 pieces of code, and today I will continue to share the third part, hoping to help you in your daily work.

43, getColonTimeFromDate

This code gets the current time from the Date object.

const getColonTimeFromDate = date= > date.toTimeString().slice(0.8);
getColonTimeFromDate(new Date()); / / "08:38:00"Copy the code

44, getDaysDiffBetweenDates

This code returns the number of days between the two dates

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

45, getStyle

This code returns the corresponding attribute value of the DOM element node.

const getStyle = (el, ruleName) = > getComputedStyle(el)[ruleName];

getStyle(document.querySelector('p'), 'font-size'); // '16px'Copy the code

46, getType

The main function of this code is to return the type of data.

const getType = v= >
  v === undefined ? 'undefined' : v === null ? 'null' : v.constructor.name.toLowerCase();
  
getType(new Set([1.2.3])); // 'set'Copy the code

47, hasClass

This code returns whether the DOM element contains the specified Class style.

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

48, head,

This code prints the first element of the array.

const head = arr= > arr[0];

head([1.2.3]); / / 1Copy the code

49, hide

This code hides the specified DOM element.

const hide = (. el) = > [...el].forEach(e= > (e.style.display = 'none'));

hide(document.querySelectorAll('img')); // Hides all <img> elements on the pageCopy the code

50, httpsRedirect

What this code does is redirect HTTP addresses to HTTPS addresses.

const httpsRedirect = (a)= > {
  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.comCopy the code

51, indexOfAll

This code can return all index values corresponding to a value in the array, or an empty array if the value is not included.

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); / / []Copy the code

52, initial

This code returns all elements in the array except the last element

const initial = arr= > arr.slice(0.- 1);

initial([1.2.3]); // [1,2]const initial => arr.slice(0, -1);
initial([1.2.3]); / / [1, 2]Copy the code

53, insertAfter

The main function of this code is to insert new node content after a given DOM node

const insertAfter = (el, htmlString) = > el.insertAdjacentHTML('afterend', htmlString);

insertAfter(document.getElementById('myId'), '<p>after</p>'); // 
      
       ... 
      
 afterCopy the code

54, insertBefore

The main function of this code is to insert new node content before a given DOM node

const insertBefore = (el, htmlString) = > el.insertAdjacentHTML('beforebegin', htmlString);

insertBefore(document.getElementById('myId'), '<p>before</p>'); // before 
      
       ... 
      Copy the code

55, intersection computes

This code returns the intersection of two array elements.

const intersection = (a, b) = > {
  const s = new Set(b);
  return a.filter(x= > s.has(x));
};

intersection([1.2.3], [4.3.2]); / / [2, 3]Copy the code

56, intersectionBy

Process the array elements to be compared according to the given function, then find the intersection according to the processed array, and finally print the corresponding element from the first array.

const intersectionBy = (a, b, fn) = > {
  const s = new Set(b.map(fn));
  return a.filter(x= > s.has(fn(x)));
};

intersectionBy([2.1.1.2], [2.3.3.4].Math.floor); / / [2.1]Copy the code

57, intersectionBy

Compare the difference between the two arrays according to the given function, find the intersection, and finally print the corresponding element from the first array.

const intersectionWith = (a, b, comp) = > a.filter(x= > b.findIndex(y= >comp(x, y)) ! = =- 1);

intersectionWith([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]Copy the code

58, is

This code determines whether the data is of the specified data type and returns true if so.

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)); // trueCopy the code

59, isAfterDate

Accepts arguments of two date types to determine whether the former date is later than the latter.

const isAfterDate = (dateA, dateB) = > dateA > dateB;

isAfterDate(new Date(2010.10.21), new Date(2010.10.20)); // trueCopy the code

60, isAnagram

Used to test if two words are similar.

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'); // trueCopy the code

61, isArrayLike

This code is used to check whether the object is an array-like object and whether it is iterable.

const isArrayLike = obj= >obj ! =null && typeof obj[Symbol.iterator] === 'function';

isArrayLike(document.querySelectorAll('.className')); // true
isArrayLike('abc'); // true
isArrayLike(null); // falseCopy the code

62, isBeforeDate

Accepts arguments of two date types to determine whether the former date precedes the latter.

const isBeforeDate = (dateA, dateB) = > dateA < dateB;

isBeforeDate(new Date(2010.10.20), new Date(2010.10.21)); // trueCopy the code

63, isBoolean

This code checks if the parameter is of a Boolean type.

const isBoolean = val= > typeof val === 'boolean';

isBoolean(null); // false
isBoolean(false); // trueCopy the code

section

Thank you for your reading. If you like my sharing, please pay attention, like and forward. Your support is the motivation for my sharing.

Fatos Morina

Source: Medium

Note: Not a literal translation

reading

127 common JS code snippets, each code can be read in 30 seconds.

127 common JS code snippets, each code can be understood in 30 seconds (2)

127 common JS code snippets, each code can be understood in 30 seconds (3)

127 common JS code snippets, each code can be understood in 30 seconds (4)

More exciting content, please pay attention to the wechat “front-end talent” public number!