30分钟全看懂127个常用的JS程序片段

2021-04-02 07:26

阅读:626

标签:element   classname   底部   isarray   ebe   def   uniq   url   api   

本文参考原文-http://bjbsair.com/2020-03-22/tech-info/2077/

技术图片

JavaScript 是目前最流行的编程语言之一,正如大多数人所说:“如果你想学一门编程语言,请学JavaScript。”

FreeCodeCamp的创始人 Quincy Larson 在最近的一次采访中被问到哪种语言开发人员应该首先学习。他回答:“ JavaScript。”:

“软件正在吞噬世界,JavaScript正在吞噬软件。JavaScript每年都在变得越来越占主导地位,而且没人知道最终会取代它的是什么。" 如果您没有充分的理由学习一种新语言(例如您的工作要求您维护非JavaScript代码库),那么我的建议是着重于提高JavaScript的水平。”

听我说这么多,你是不是很激动呢。这里有127端常用的JS代码片段,方便你学习和使用。

1、all

如果数组所有元素满足函数条件,则返回true。调用时,如果省略第二个参数,则默认传递布尔值。

const all = (arr, fn = Boolean) => arr.every(fn);  

all([4, 2, 3], x => x > 1); // true  
all([1, 2, 3]); // true复制代码

2、allEqual

判断数组中的元素是否都相等

const allEqual = arr => arr.every(val => val === arr[0]);  

allEqual([1, 2, 3, 4, 5, 6]); // false  
allEqual([1, 1, 1, 1]); // true复制代码

3、approximatelyEqual

此代码示例检查两个数字是否近似相等,差异值可以通过传参的形式进行设置

const approximatelyEqual = (v1, v2, epsilon = 0.001) => Math.abs(v1 - v2) 

4、arrayToCSV

此段代码将没有逗号或双引号的元素转换成带有逗号分隔符的字符串即CSV格式识别的形式。

const arrayToCSV = (arr, delimiter = ‘,‘) =>  
  arr.map(v => v.map(x => `"${x}"`).join(delimiter)).join(‘\n‘);  

arrayToCSV([[‘a‘, ‘b‘], [‘c‘, ‘d‘]]); // ‘"a","b"\n"c","d"‘  
arrayToCSV([[‘a‘, ‘b‘], [‘c‘, ‘d‘]], ‘;‘); // ‘"a";"b"\n"c";"d"‘复制代码

5、arrayToHtmlList

此段代码将数组元素转换成

  • 标记,并将此元素添加至给定的ID元素标记内。
    const arrayToHtmlList = (arr, listID) =>  
      (el => (  
        (el = document.querySelector(‘#‘ + listID)),  
        (el.innerHTML += arr.map(item => `
  • ${item}
  • `).join(‘‘)) ))(); arrayToHtmlList([‘item 1‘, ‘item 2‘], ‘myListID‘);复制代码

    6、attempt

    此段代码执行一个函数,将剩余的参数传回函数当参数,返回相应的结果,并能捕获异常。

    const attempt = (fn, ...args) => {  
      try {  
        return fn(...args);  
      } catch (e) {  
        return e instanceof Error ? e : new Error(e);  
      }  
    };  
    var elements = attempt(function(selector) {  
      return document.querySelectorAll(selector);  
    }, ‘>_>‘);  
    if (elements instanceof Error) elements = []; // elements = []复制代码

    7、average

    此段代码返回两个或多个数的平均数。

    const average = (...nums) => nums.reduce((acc, val) => acc + val, 0) / nums.length;  
    average(...[1, 2, 3]); // 2  
    average(1, 2, 3); // 2复制代码

    8、averageBy

    一个 map()函数和 reduce()函数结合的例子,此函数先通过 map() 函数将对象转换成数组,然后在调用reduce()函数进行累加,然后根据数组长度返回平均值。

    const averageBy = (arr, fn) =>  
      arr.map(typeof fn === ‘function‘ ? fn : val => val[fn]).reduce((acc, val) => acc + val, 0) /  
      arr.length;  
    
    averageBy([{ n: 4 }, { n: 2 }, { n: 8 }, { n: 6 }], o => o.n); // 5  
    averageBy([{ n: 4 }, { n: 2 }, { n: 8 }, { n: 6 }], ‘n‘); // 5复制代码

    9、bifurcate

    此函数包含两个参数,类型都为数组,依据第二个参数的真假条件,将一个参数的数组进行分组,条件为真的放入第一个数组,其它的放入第二个数组。这里运用了Array.prototype.reduce() 和 Array.prototype.push() 相结合的形式。

    const bifurcate = (arr, filter) =>  
      arr.reduce((acc, val, i) => (acc[filter[i] ? 0 : 1].push(val), acc), [[], []]);  
    bifurcate([‘beep‘, ‘boop‘, ‘foo‘, ‘bar‘], [true, true, false, true]);   
    // [ [‘beep‘, ‘boop‘, ‘bar‘], [‘foo‘] ]复制代码

    10、bifurcateBy

    此段代码将数组按照指定的函数逻辑进行分组,满足函数条件的逻辑为真,放入第一个数组中,其它不满足的放入第二个数组 。这里运用了Array.prototype.reduce() 和 Array.prototype.push() 相结合的形式,基于函数过滤逻辑,通过 Array.prototype.push() 函数将其添加到数组中。

    const bifurcateBy = (arr, fn) =>  
      arr.reduce((acc, val, i) => (acc[fn(val, i) ? 0 : 1].push(val), acc), [[], []]);  
    
    bifurcateBy([‘beep‘, ‘boop‘, ‘foo‘, ‘bar‘], x => x[0] === ‘b‘);   
    // [ [‘beep‘, ‘boop‘, ‘bar‘], [‘foo‘] ]复制代码

    11、bottomVisible

    用于检测页面是否滚动到页面底部。

    const bottomVisible = () =>  
      document.documentElement.clientHeight + window.scrollY >=  
      (document.documentElement.scrollHeight || document.documentElement.clientHeight);  
    
    bottomVisible(); // true复制代码

    12、byteSize

    此代码返回字符串的字节长度。这里用到了Blob对象,Blob(Binary Large Object)对象代表了一段二进制数据,提供了一系列操作接口。其他操作二进制数据的API(比如File对象),都是建立在Blob对象基础上的,继承了它的属性和方法。生成Blob对象有两种方法:一种是使用Blob构造函数,另一种是对现有的Blob对象使用slice方法切出一部分。

    const byteSize = str => new Blob([str]).size;  
    
    byteSize(‘‘); // 4  
    byteSize(‘Hello World‘); // 11复制代码

    13、capitalize

    将字符串的首字母转成大写,这里主要运用到了ES6的展开语法在数组中的运用。

    const capitalize = ([first, ...rest]) =>  
      first.toUpperCase() + rest.join(‘‘);  
    
    capitalize(‘fooBar‘); // ‘FooBar‘  
    capitalize(‘fooBar‘, true); // ‘FooBar‘复制代码

    14、capitalizeEveryWord

    将一个句子中每个单词首字母转换成大写字母,这里中要运用了正则表达式进行替换。

    const capitalizeEveryWord = str => str.replace(/\b[a-z]/g, char => char.toUpperCase());  
    
    capitalizeEveryWord(‘hello world!‘); // ‘Hello World!‘复制代码

    15、castArray

    此段代码将非数值的值转换成数组对象。

    const castArray = val => (Array.isArray(val) ? val : [val]);  
    
    castArray(‘foo‘); // [‘foo‘]  
    castArray([1]); // [1]复制代码

    16、compact

    将数组中移除值为 false 的内容。

    const compact = arr => arr.filter(Boolean);  
    
    compact([0, 1, false, 2, ‘‘, 3, ‘a‘, ‘e‘ * 23, NaN, ‘s‘, 34]);   
    // [ 1, 2, 3, ‘a‘, ‘s‘, 34 ]复制代码

    17、countOccurrences

    统计数组中某个值出现的次数

    const countOccurrences = (arr, val) => arr.reduce((a, v) => (v === val ? a + 1 : a), 0);  
    countOccurrences([1, 1, 2, 1, 2, 3], 1); // 3复制代码

    18、Create Directory

    此代码段使用 existSync() 检查目录是否存在,然后使用 mkdirSync() 创建目录(如果不存在)。

    const fs = require(‘fs‘);  
    const createDirIfNotExists = dir => (!fs.existsSync(dir) ? fs.mkdirSync(dir) : undefined);  
    createDirIfNotExists(‘test‘);   
    // creates the directory ‘test‘, if it doesn‘t exist复制代码

    19、currentURL

    返回当前访问的 URL 地址。

    const currentURL = () => window.location.href;  
    
    currentURL(); // ‘https://medium.com/@fatosmorina‘复制代码

    20、dayOfYear

    返回当前是今年的第几天

    const dayOfYear = date =>  
      Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);  
    
    dayOfYear(new Date()); // 272复制代码

    21、decapitalize

    将字符串的首字母转换成小写字母

    const decapitalize = ([first, ...rest]) =>  
      first.toLowerCase() + rest.join(‘‘)  
    
    decapitalize(‘FooBar‘); // ‘fooBar‘

    技术图片

    22、deepFlatten

    通过递归的形式,将多维数组展平成一维数组。

    const deepFlatten = arr => [].concat(...arr.map(v => (Array.isArray(v) ? deepFlatten(v) : v)));  
    
    deepFlatten([1, [2], [[3], 4], 5]); // [1,2,3,4,5]复制代码

    23、default

    去重对象的属性,如果对象中含有重复的属性,以前面的为准。

    const defaults = (obj, ...defs) => Object.assign({}, obj, ...defs.reverse(), obj);  
    
    defaults({ a: 1 }, { b: 2 }, { b: 6 }, { a: 3 }); // { a: 1, b: 2 }复制代码

    24、defer

    延迟函数的调用,即异步调用函数。

    const defer = (fn, ...args) => setTimeout(fn, 1, ...args);  
    
    defer(console.log, ‘a‘), console.log(‘b‘); // logs ‘b‘ then ‘a‘复制代码

    25、degreesToRads

    此段代码将标准的度数,转换成弧度。

    const degreesToRads = deg => (deg * Math.PI) / 180.0;  
    
    degreesToRads(90.0); // ~1.5708复制代码

    26、difference

    此段代码查找两个给定数组的差异,查找出前者数组在后者数组中不存在元素。

    const difference = (a, b) => {  
      const s = new Set(b);  
      return a.filter(x => !s.has(x));  
    };  
    
    difference([1, 2, 3], [1, 2, 4]); // [3]复制代码

    27、differenceBy

    通过给定的函数来处理需要对比差异的数组,查找出前者数组在后者数组中不存在元素。

    const differenceBy = (a, b, fn) => {  
      const s = new Set(b.map(fn));  
      return a.filter(x => !s.has(fn(x)));  
    };  
    
    differenceBy([2.1, 1.2], [2.3, 3.4], Math.floor); // [1.2]  
    differenceBy([{ x: 2 }, { x: 1 }], [{ x: 1 }], v => v.x); // [ { x: 2 } ]复制代码

    28、differenceWith

    此段代码按照给定函数逻辑筛选需要对比差异的数组,查找出前者数组在后者数组中不存在元素。

    const differenceWith = (arr, val, comp) => arr.filter(a => val.findIndex(b => comp(a, b)) === -1);  
    
    differenceWith([1, 1.2, 1.5, 3, 0], [1.9, 3, 0], (a, b) => Math.round(a) === Math.round(b));   
    // [1, 1.2]复制代码

    29、digitize

    将输入的数字拆分成单个数字组成的数组。

    const digitize = n => [...`${n}`].map(i => parseInt(i));  
    
    digitize(431); // [4, 3, 1]复制代码

    30、distance

    计算两点之间的距离

    const distance = (x0, y0, x1, y1) => Math.hypot(x1 - x0, y1 - y0);  
    
    distance(1, 1, 2, 3); // 2.23606797749979复制代码

    31、drop

    此段代码将给定的数组从左边开始删除 n 个元素

    const drop = (arr, n = 1) => arr.slice(n);  
    
    drop([1, 2, 3]); // [2,3]  
    drop([1, 2, 3], 2); // [3]  
    drop([1, 2, 3], 42); // []复制代码

    32、dropRight

    此段代码将给定的数组从右边开始删除 n 个元素

    const dropRight = (arr, n = 1) => arr.slice(0, -n);  
    
    dropRight([1, 2, 3]); // [1,2]  
    dropRight([1, 2, 3], 2); // [1]  
    dropRight([1, 2, 3], 42); // []复制代码

    33、dropRightWhile

    此段代码将给定的数组按照给定的函数条件从右开始删除,直到当前元素满足函数条件为True时,停止删除,并返回数组剩余元素。

    const dropRightWhile = (arr, func) => {  
      while (arr.length > 0 && !func(arr[arr.length - 1])) arr = arr.slice(0, -1);  
      return arr;  
    };  
    
    dropRightWhile([1, 2, 3, 4], n => n 

    34、dropWhile

    按照给的的函数条件筛选数组,不满足函数条件的将从数组中移除。

    const dropWhile = (arr, func) => {  
      while (arr.length > 0 && !func(arr[0])) arr = arr.slice(1);  
      return arr;  
    };  
    
    dropWhile([1, 2, 3, 4], n => n >= 3); // [3,4]复制代码

    35、elementContains

    接收两个DOM元素对象参数,判断后者是否是前者的子元素。

    const elementContains = (parent, child) => parent !== child && parent.contains(child);  
    
    elementContains(document.querySelector(‘head‘), document.querySelector(‘title‘)); // true  
    elementContains(document.querySelector(‘body‘), document.querySelector(‘body‘)); // false复制代码

    36、filterNonUnique

    移除数组中重复的元素

    const filterNonUnique = arr => [ …new Set(arr)];  
    filterNonUnique([1, 2, 2, 3, 4, 4, 5]); // [1, 2, 3, 4, 5]复制代码

    37、findKey

    按照给定的函数条件,查找第一个满足条件对象的键值。

    const findKey = (obj, fn) => Object.keys(obj).find(key => fn(obj[key], key, obj));  
    
    findKey(  
      {  
        barney: { age: 36, active: true },  
        fred: { age: 40, active: false },  
        pebbles: { age: 1, active: true }  
      },  
      o => o[‘active‘]  
    ); // ‘barney‘复制代码

    38、findLast

    按照给定的函数条件筛选数组,将最后一个满足条件的元素进行删除。

    const findLast = (arr, fn) => arr.filter(fn).pop();  
    
    findLast([1, 2, 3, 4], n => n % 2 === 1); // 3复制代码

    39、flatten

    按照指定数组的深度,将嵌套数组进行展平。

    const flatten = (arr, depth = 1) =>  
      arr.reduce((a, v) => a.concat(depth > 1 && Array.isArray(v) ? flatten(v, depth - 1) : v), []);  
    
    flatten([1, [2], 3, 4]); // [1, 2, 3, 4]  
    flatten([1, [2, [3, [4, 5], 6], 7], 8], 2); // [1, 2, 3, [4, 5], 6, 7, 8]复制代码

    40、forEachRight

    按照给定的函数条件,从数组的右边往左依次进行执行。

    const forEachRight = (arr, callback) =>  
      arr  
        .slice(0)  
        .reverse()  
        .forEach(callback);  
    
    forEachRight([1, 2, 3, 4], val => console.log(val)); // ‘4‘, ‘3‘, ‘2‘, ‘1‘复制代码

    41、forOwn

    此段代码按照给定的函数条件,支持三个参数作为输入(值、键、对象本身),进行迭代对象。

    const forOwn = (obj, fn) => Object.keys(obj).forEach(key => fn(obj[key], key, obj));  
    forOwn({ foo: ‘bar‘, a: 1 }, v => console.log(v)); // ‘bar‘, 1复制代码

    42、functionName

    此段代码输出函数的名称。

    const functionName = fn => (console.debug(fn.name), fn);  
    
    functionName(Math.max); // max (logged in debug channel of console)

    技术图片

    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  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‘), ‘

    after

    ‘); //
    ...

    after

    复制代码

    54、insertBefore

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

    const insertBefore = (el, htmlString) => el.insertAdjacentHTML(‘beforebegin‘, htmlString);  
    
    insertBefore(document.getElementById(‘myId‘), ‘

    before

    ‘); //

    before

    ...
    复制代码

    55、intersection

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

    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]复制代码

    56、intersectionBy

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

    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]复制代码

    57、intersectionBy

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

    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]复制代码

    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 

    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

    小节

    今天的内容就和大家分享到这里,感谢你的阅读,如果你喜欢我的分享,麻烦给个关注、点赞加转发哦,你的支持,就是我分享的动力,后续会持续分享剩余的代码片段,欢迎持续关注。未完

    30分钟全看懂127个常用的JS程序片段

    标签:element   classname   底部   isarray   ebe   def   uniq   url   api   

    原文地址:https://blog.51cto.com/14744108/2481168


  • 评论


    亲,登录后才可以留言!