15个值得收藏的JavaScript函数

目录
  • 1、逆转数字
  • 2、获取数组中最大的n个数字
  • 3、计算阶乘
  • 4、判断当前运行环境是否为浏览器
  • 5、判断当前运行环境是否为Node.js
  • 6、获取url上的参数
  • 7、rgb(x,x,x)颜色表达方式格式转换成对象格式
  • 8、转义字符串以在 HTML 中使用
  • 9、Unescapes 转义 HTML 字符
  • 10、生成指定范围内的随机整数
  • 11、将波浪号路径转换为绝对路径
  • 12、获取不带任何参数或片段标识符的当前 URL
  • 13、以字节为单位返回字符串的长度
  • 14、随机获取数组中元素
  • 15、检查字符串是否为有效的 JSON

1、逆转数字

const reverseNumber = n =>
  parseFloat(`${n}`.split('').reverse().join('')) * Math.sign(n);

reverseNumber(123); // 321
reverseNumber(-200); // -2
reverseNumber(32.4); // 4.23
reverseNumber(-32.4); // -4.23

2、获取数组中最大的n个数字

const maxFromArray = (array, number = 1) => [...array]
  .sort((x, y) => y -x).slice(0, number);

maxFromArray([2, 1, 4, 3, 5, 6]); // [6]
maxFromArray([2, 1, 4, 3, 6, 6], 2); // [6, 6]

3、计算阶乘

const factorial = (number) =>
  number < 0
    ? (() => {
      throw new TypeError('类型错误');
    })()
    : number <= 1
    ? 1
    : number * factorial(number - 1);

factorial(4); // 24
factorial(10); // 3628800

4、判断当前运行环境是否为浏览器

const isBrowser = () => ![typeof window, typeof document].includes('undefined');

isBrowser(); // false (Node)
isBrowser(); // true (browser)

5、判断当前运行环境是否为Node.js

const isNode = () =>
  typeof process !== 'undefined' &&
  !!process.versions &&
  !!process.versions.node;

isNode(); // true (Node)
isNode(); // false (browser)

6、获取url上的参数

const getURLParams = url =>
  (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
    (a, v) => (
      (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a
    ),
    {}
  );

getURLParams('qq.com'); // {}
getURLParams('https://xx.com?name=tntweb&age=20');
// {name: 'tntweb', age: '20'}

7、rgb(x,x,x)颜色表达方式格式转换成对象格式

const toRGBObject = rgbStr => {
  const [red, green, blue] = rgbStr.match(/\d+/g).map(Number);
  return { red, green, blue };
};

toRGBObject('rgb(100, 150, 200)'); // {red: 100, green: 150, blue: 200}

8、转义字符串以在 HTML 中使用

const escapeHTML = str =>
  str.replace(
    /[&<>'"]/g,
    tag =>
      ({
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        "'": ''',
        '"': '&quot;'
      }[tag] || tag)
  );

escapeHTML('<a href="#" rel="external nofollow" >tntweb</a>');

9、Unescapes 转义 HTML 字符

const unescapeHTML = str =>
  str.replace(
    /&amp;|&lt;|&gt;|'|&quot;/g,
    tag =>
      ({
        '&amp;': '&',
        '&lt;': '<',
        '&gt;': '>',
        ''': "'",
        '&quot;': '"'
      }[tag] || tag)
  );

unescapeHTML('&lt;a href=&quot;#&quot;&gt;tntweb&lt;/a&gt;');

10、生成指定范围内的随机整数

const randomIntegerInRange = (min, max) =>
  Math.floor(Math.random() * (max - min + 1)) + min;

randomIntegerInRange(1, 7); // 1 - 7

11、将波浪号路径转换为绝对路径

const reversePath = str =>
  str.replace(/^~($|\/|\\)/, `${require('os').homedir()}$1`);

reversePath('~/web'); // '/Users/[userName]/web'

12、获取不带任何参数或片段标识符的当前 URL

const getBaseURL = url => url.replace(/[?#].*$/, '');

getBaseURL('https://xx.com/index?name=tntweb&company=tencent');
// https://xx.com/index

13、以字节为单位返回字符串的长度

const byteSize = str => new Blob([str]).size;

byteSize('🚗'); // 4
byteSize('Hello World'); // 11

14、随机获取数组中元素

const randomly = arr => arr[Math.floor(Math.random() * arr.length)];

randomly([1, 3, 5, 7, 9, 11]);

15、检查字符串是否为有效的 JSON

const isValidJSON = str => {
  try {
    JSON.parse(str);
    return true;
  } catch (e) {
    return false;
  }
};

isValidJSON('{"name":"tntweb","age":20}'); // true
isValidJSON('{"name":"tntweb",age:"20"}'); // false
isValidJSON(null); // true

到此这篇关于15个值得收藏的JavaScript函数的文章就介绍到这了,更多相关JavaScript函数内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • javascript函数式编程基础

    目录 一.引言 二.什么是函数式编程 三.纯函数(函数式编程的基石,无副作用的函数) 四.函数柯里化 五.函数组合 六.声明式和命令式代码 七.Point Free 八.示例应用 九.总结 一.引言 函数式编程的历史已经很悠久了,但是最近几年却频繁的出现在大众的视野,很多不支持函数式编程的语言也在积极加入闭包,匿名函数等非常典型的函数式编程特性.大量的前端框架也标榜自己使用了函数式编程的特性,好像一旦跟函数式编程沾边,就很高大上一样,而且还有一些专门针对函数式编程的框架和库,比如:RxJS.cy

  • JavaScript函数之call、apply以及bind方法案例详解

    总结 1.相同点 都能够改变目标函数执行时内部 this 的指向 方法的第一个参数用于指定函数执行时内部的 this 值 支持向目标函数传递任意个参数 若不向方法的第一个参数传值或者传递 undefined.null,则在 JavaScript 正常模式下,目标函数内部的 this 指向 window 对象,严格模式下,分别指向 undefined.null. 2.区别 apply() 方法可接收两个参数,而 call() 和 bind() 方法则可接收多个参数. apply() 方法向目标函数

  • JavaScript知识:构造函数也是函数

    目录 1.构造函数的定义与调用 2.new关键字的用途 3.构造函数的问题:浪费内存 总结 首先要明确的是构造函数也是函数 我经常使用构造函数来创建实例对象,例如对象和数组的实例化可以通过相应的构造函数Object()和Array()完成. 构造函数与普通函数在语法的定义上没有任何区别,主要的区别体现在以下3点. (1)构造函数的函数名的第一个字母通常会大写.按照惯例,构造函数名称的首字母都是要大写的,非构造函数则以小写字母开头.这是从面向对象编程语言那里借鉴的,有助于在ECMAScript中区

  • JavaScript中的50+个实用工具函数小结

    JavaScript可以做很多出色的事情,本篇文章给大家整理50+个实用工具函数,可以帮助你提高工作效率并可以帮助调试代码 1.isStatic: 检测数据是不是除了symbol外的原始数据. function isStatic(value) { return ( typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean' || typeof value === 'undefined'

  • 一篇文章教你JS函数继承

    目录 一. 前言: 二.原型链继承: 三.借用构造函数继承(对象伪装): 四.组合继承: 五.寄生组合继承: 六.class继承: 七.总结: 一. 前言: Hello,大家最近过得好吗,

  • JavaScript基础系列之函数和方法详解

    目录 一.函数和方法的区别 二.如何写好一个函数 2.1 命名准确 2.1.1 函数命名 2.1.2 参数命名 2.2 函数注释 2.2.1 参数注释 2.3  函数参数 2.3.1 参数默认值 2.3.2 对象参数 2.3.3 参数数量 2.3.4 参数类型防御 2.4 函数的返回 2.4.1 幂等函数 2.4.2 纯函数 2.4.3 return null 函数和方法的区别 总结 一.函数和方法的区别 函数(function):函数是带有名称和参数的 JavaScript 代码段,可以一次定

  • JS 函数的 call、apply 及 bind 超详细方法

    目录 JS 函数的 call.apply 及 bind 方法 一.call() 方法 1.call()方法的模拟实现 二.apply() 方法 1.apply()方法的模拟实现 三.bind() 方法 1.bind() 方法的模拟实现 四.总结 JS 函数的 call.apply 及 bind 方法 一.call() 方法 调用 call() 方法会立即执行目标函数,同时改变函数内部 this 的指向.this 指向由方法的第一个参数决定,后面逐个列举的任意个参数将作为目标函数的参数一一对应传入

  • JavaScript sleep睡眠函数的使用

    目录 1.sleep函数 2. setTimeout 3.Promise 4. async await 5. 1s后输出1 2s后输出2 3s后输出3 参考文章: 1.sleep函数 JavaScript是单线程运行的,没有内置的sleep函数,现在模拟实现sleep延迟执行的效果. 使用睡眠函数实现红绿灯代码,红灯2秒,黄灯1秒,绿灯3秒,循环改变颜色. 2. setTimeout 直接使用setTimeout实现sleep()的方法,兼容性最好,但是使用了回调函数的实现方式,代码的可读性和维

  • JavaScript中变量提升和函数提升实例详解

    js 执行 词法分析阶段:包括分析形参.分析变量声明.分析函数声明三个部分.通过词法分析将我们写的 js 代码转成可以执行的代码. 执行阶段 变量提升 只有声明被提升,初始化不会被提升 声明会被提升到当前作用域的顶端

  • JavaScript中箭头函数与普通函数的区别详解

    本文为大家讲解了JavaScript中箭头函数与普通函数的区别,供大家参考,具体内容如下 箭头函数: let fun = () => { console.log('lalalala'); } 普通函数: function fun() { console.log('lalla'); } 箭头函数相当于匿名函数,并且简化了函数定义.箭头函数有两种格式,一种只包含一个表达式,连{ ... }和return都省略掉了.还有一种可以包含多条语句,这时候就不能省略{ ... }和return. 箭头函数是匿

随机推荐