If the articles and notes can help you or inspire you, please do not stingy with your likes and collections, you must be the biggest motivation for me to move forward 😁

Attached notes link, read articles can walk past more high quality view, love can give me encouraged thumb up: https://github.com/Wscats/CV/issues/32

An Array of Array

Array to heavy

function noRepeat(arr) {
  return [...new Set(arr)];
}

Find the largest array

function arrayMax(arr) { return Math.max(... arr); }

Find the smallest array

function arrayMin(arr) { return Math.min(... arr); }

Returns the size of the original array divided by the size of the array

function chunk(arr, size = 1) {
  return Array.from(
    {
      length: Math.ceil(arr.length / size),
    },
    (v, i) => arr.slice(i * size, i * size + size)
  );
}

Checks the number of occurrences of an element in an array

function countOccurrences(arr, value) {
  return arr.reduce((a, v) => (v === value ? a + 1 : a + 0), 0);
}

Flatten the array

Default depth all expands

function flatten(arr, depth = -1) { if (depth === -1) { return [].concat( ... arr.map((v) => (Array.isArray(v) ? this.flatten(v) : v)) ); } if (depth === 1) { return arr.reduce((a, v) => a.concat(v), []); } return arr.reduce( (a, v) => a.concat(Array.isArray(v) ? this.flatten(v, depth - 1) : v), [] ); }

Compare two arrays and return the different elements in them

function diffrence(arrA, arrB) { return arrA.filter((v) => ! arrB.includes(v)); }

Returns the same element in both arrays

function intersection(arr1, arr2) {
  return arr2.filter((v) => arr1.includes(v));
}

Delete n elements from the right

function dropRight(arr, n = 0) {
  return n < arr.length ? arr.slice(0, arr.length - n) : [];
}

Truncates the first qualifying element and subsequent elements

function dropElements(arr, fn) { while (arr.length && ! fn(arr[0])) arr = arr.slice(1); return arr; }

Returns the element of an array with subscript interval NTH

function everyNth(arr, nth) {
  return arr.filter((v, i) => i % nth === nth - 1);
}

Returns the NTH element in the array

Support negative

function nthElement(arr, n = 0) {
  return (n >= 0 ? arr.slice(n, n + 1) : arr.slice(n))[0];
}

Returns the array header element

function head(arr) {
  return arr[0];
}

Returns the last element of an array

function last(arr) {
  return arr[arr.length - 1];
}

Array random row

function shuffle(arr) {
  let array = arr;
  let index = array.length;

  while (index) {
    index -= 1;
    let randomInedx = Math.floor(Math.random() * index);
    let middleware = array[index];
    array[index] = array[randomInedx];
    array[randomInedx] = middleware;
  }

  return array;
}

Browser object BOM

Determines whether the browser supports CSS properties

@param {String} key - CSS property, which is the name of the property, / / function validateClasKey (key) {const jsKey = toCamelCase(key); / / some CSS properties is a hyphen number to form the if (jsKey in the document. The documentElement. Style) {the return key. } let validKey = ""; // Webkit const PrefixMap = {Webkit: "-webkit-", Moz: "-moz-", ms: "-ms-", O: "-o-", }; for (const jsPrefix in prefixMap) { const styleKey = toCamelCase(`${jsPrefix}-${jsKey}`); if (styleKey in document.documentElement.style) { validKey = prefixMap[jsPrefix] + key; break; } } return validKey; Function toCamelCase(value) {return value. Replace (/-(\w)/g, (matched,); letter) => { return letter.toUpperCase(); }); } /** * Check if the browser supports a CSS property value (ES6 version) * @param {String} key - the name of the CSS property to be checked * @param {String} value - the value of the CSS property to be checked (without prefix) * */ function valiatecssValue (key, value) {const prefix = ["-o-", "-ms-", "-moz-", "-moz-", "-moz-", "-moz-", "-moz-", "-webkit-", ""]; const prefixValue = prefix.map((item) => { return item + value; }); const element = document.createElement("div"); const eleStyle = element.style; // apply every prefix, and finally apply no prefix, as well. ForEach ((item) => {elStyle [key] = item; // The last element in the prefix would be "prefixValue.foreach ((item) => {elStyle [key] = item; }); return eleStyle[key]; } /** * Check if the browser supports a CSS property value * @Param {String} key - the name of the CSS property to be checked * @Param {String} value - the value of the CSS property to be checked (without prefixes) * @Returns */ function valiatecssValue (key, value) {var prefix = ["-o-", "-ms-", "-moz-", "-webkit-", ""]; var prefixValue = []; for (var i = 0; i < prefix.length; i++) { prefixValue.push(prefix[i] + value); } var element = document.createElement("div"); var eleStyle = element.style; for (var j = 0; j < prefixValue.length; j++) { eleStyle[key] = prefixValue[j]; } return eleStyle[key]; } function validCss(key, value) { const validCss = validateCssKey(key); if (validCss) { return validCss; } return valiateCssValue(key, value); }

From https://juejin.im/post/5e58f398f265da574a1eb569

Returns the current web page address

function currentURL() {
  return window.location.href;
}

Gets the scroll bar position

function getScrollPosition(el = window) { return { x: el.pageXOffset ! == undefined ? el.pageXOffset : el.scrollLeft, y: el.pageYOffset ! == undefined ? el.pageYOffset : el.scrollTop, }; }

Gets the parameters in the URL

function getURLParameters(url) {
  return url
    .match(/([^?=&]+)(=([^&]*))/g)
    .reduce(
      (a, v) => (
        (a[v.slice(0, v.indexOf("="))] = v.slice(v.indexOf("=") + 1)), a
      ),
      {}
    );
}

Page jump, whether to record in history

function redirect(url, asLink = true) {
  asLink ? (window.location.href = url) : window.location.replace(url);
}

Scroll back to the top animation

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

Copy the text

function copy(str) { const el = document.createElement("textarea"); el.value = str; el.setAttribute("readonly", ""); el.style.position = "absolute"; el.style.left = "-9999px"; el.style.top = "-9999px"; document.body.appendChild(el); const selected = document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false; el.select(); document.execCommand("copy"); document.body.removeChild(el); if (selected) { document.getSelection().removeAllRanges(); document.getSelection().addRange(selected); }}

Type of testing equipment

function detectDeviceType() {
  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
    navigator.userAgent
  )
    ? "Mobile"
    : "Desktop";
}

Cookie

increase

function setCookie(key, value, expiredays) {
  var exdate = new Date();
  exdate.setDate(exdate.getDate() + expiredays);
  document.cookie =
    key +
    "=" +
    escape(value) +
    (expiredays == null ? "" : ";expires=" + exdate.toGMTString());
}

delete

function delCookie(name) { var exp = new Date(); exp.setTime(exp.getTime() - 1); var cval = getCookie(name); if (cval ! = null) { document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString(); }}

check

function getCookie(name) { var arr, reg = new RegExp("(^| )" + name + "=([^;] (*). | $) "); if ((arr = document.cookie.match(reg))) { return arr[2]; } else { return null; }}

The Date of the Date

The timestamp is converted to time

Default is the current time conversion result
ISMS is whether the timestamp is millisecond

function timestampToTime(timestamp = Date.parse(new Date()), isMs = true) { const date = new Date(timestamp * (isMs ? 1:1000)); return `${date.getFullYear()}-${ date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1 }-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`; }

Document Object DOM

Fixed scroll bar

/** * let scrollTop = 0; /** * let scrollTop = 0; /** * let scrollTop = 0; Function preventScroll() {// Stores the current scroll position scrollTop = window.scrolly; Document.body. Style ["overflow-y"] = "hidden"; document.body. Style ["overflow-y"] = "hidden"; document.body.style.position = "fixed"; document.body.style.width = "100%"; document.body.style.top = -scrollTop + "px"; // document.body.style['overscroll-behavior'] = 'none' } function recoverScroll() { document.body.style["overflow-y"] = "auto"; document.body.style.position = "static"; // document.querySelector('body').style['overscroll-behavior'] = 'none' window.scrollTo(0, scrollTop); }

Determines whether the current position is at the bottom of the page

Returns true/false

function bottomVisible() {
  return (
    document.documentElement.clientHeight + window.scrollY >=
    (document.documentElement.scrollHeight ||
      document.documentElement.clientHeight)
  );
}

Determines if the element is in visual range

PartiallyVisible means whether it is fully visible

function elementIsVisibleInViewport(el, partiallyVisible = false) { const { top, left, bottom, right } = el.getBoundingClientRect(); return partiallyVisible ? ((top > 0 && top < innerHeight) || (bottom > 0 && bottom < innerHeight)) && ((left > 0 && left < innerWidth) || (right >  0 && right < innerWidth)) : top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth; }

Gets the element CSS style

function getStyle(el, ruleName) {
  return getComputedStyle(el, null).getPropertyValue(ruleName);
}

Enter the full screen

function launchFullscreen(element) { if (element.requestFullscreen) { element.requestFullscreen(); } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if (element.msRequestFullscreen) { element.msRequestFullscreen(); } else if (element.webkitRequestFullscreen) { element.webkitRequestFullScreen(); } } launchFullscreen(document.documentElement); launchFullscreen(document.getElementById("id")); // An element goes to full screen

Exit full screen

function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  }
}

exitFullscreen();

Full screen event

Document. The addEventListener (" fullscreenchange ", function (e) {if (document. FullscreenElement) {the console. The log (" into full screen "); } else {console.log(" Exit full screen "); }});

Digital Number

Numbers are divided into thousandths

function commafy(num) { return num.toString().indexOf(".") ! = = 1? num.toLocaleString() : num.toString().replace(/(\d)(? = (? :\d{3})+$)/g, "$1,"); }

Generating random numbers

function randomNum(min, max) { switch (arguments.length) { case 1: return parseInt(Math.random() * min + 1, 10); case 2: return parseInt(Math.random() * (max - min + 1) + min, 10); default: return 0; }}

communication

Sync continuously updated, the articles included in https://github.com/Wscats/art… Welcome your attention and exchange 😁

Thirty-six snippets of JavaScript functions commonly used at work