JS代码片段（Type、Utility）

Type

getType

返回值的原生类型。
返回值小写的构造函数名称，如果值为undefined或null，则返回undefined或null。

const getType = v =>
  v === undefined ? 'undefined' : v === null ? 'null' : v.constructor.name.toLowerCase();

getType(new Set([1, 2, 3])); // 'set'

is

检查提供的值是否属于指定类型。
使用array.prototype.includes()确保该值不是undefined或null，并将该值的构造函数属性与类型进行比较，以检查提供的值是否属于指定的类型。

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

isArray

检查给定的参数是否是一个数组。
使用Array.isArray()来检查一个值是否为一个数组。

const isArray = val => Array.isArray(val);

isArray([1]); // true

isArrayLike

检查提供的参数是否是类数组（即可迭代）。
检查提供的参数是否不为空，以及其symbol.iterator属性是否为函数。

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

isArrayLike(document.querySelectorAll('.className')); // true
isArrayLike('abc'); // true
isArrayLike(null); // false

isBoolean

检查给定的参数是否是一个原生的布尔值。
使用typeof来检查一个值是否为一个布尔值。

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

isBoolean(null); // false
isBoolean(false); // true

isEmpty

如果值为空对象、集合、没有可枚举属性或是任何不被视为集合的类型，则返回true。
检查提供的值是否为空或其长度是否等于0。

const isEmpty = val => val == null || !(Object.keys(val) || val).length;

isEmpty([]); // true
isEmpty({}); // true
isEmpty(''); // true
isEmpty([1, 2]); // false
isEmpty({ a: 1, b: 2 }); // false
isEmpty('text'); // false
isEmpty(123); // true - type is not considered a collection
isEmpty(true); // true - type is not considered a collection

isFunction

检查给定的参数是否是一个函数。
使用typeof来检查一个值是否为一个函数。

const isFunction = val => typeof val === 'function';

isFunction('x'); // false
isFunction(x => x); // true

isNil

如果指定的值为空或未定义，则返回true，否则返回false。

const isNil = val => val === undefined || val === null;

isNil(null); // true
isNil(undefined); // true

isNull

如果指定的值为null，则返回true；否则返回false。
使用严格等号运算符来检查val值是否等于null。

const isNull = val => val === null;

isNull(null); // true

isNumber

检查给定的参数是否是一个数字。
使用typeof来检查一个值是否为一个数字。

const isNumber = val => typeof val === 'number' && val === val;

isNumber(1); // true
isNumber('1'); // false
isNumber(NaN); // false

isObject

如果传递的值是一个对象，则返回一个布尔值。
使用Object构造函数为给定值创建对象包装。 如果该值为null或undefined，则创建并返回一个空对象。否则，返回一个对应于给定值的类型的对象。

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

其他方法：

const isObject = obj => obj !== null && (typeof obj === 'object' || typeof obj === 'function');

isObjectLike

检查值是否类对象。

const isObjectLike = val => val !== null && typeof val === 'object';

isObjectLike({}); // true
isObjectLike([1, 2, 3]); // true
isObjectLike(x => x); // false
isObjectLike(null); // false

isPlainObject

检查提供的值是否是由对象构造函数创建的对象。

const isPlainObject = val => !!val && typeof val === 'object' && val.constructor === Object;

isPlainObject({ a: 1 }); // true
isPlainObject(new Map()); // false

isPrimitive

返回一个布尔值，确定传递的值是否为原始值。

const isPrimitive = val => Object(val) !== val;

isPrimitive(null); // true
isPrimitive(50); // true
isPrimitive('Hello!'); // true
isPrimitive(false); // true
isPrimitive(Symbol()); // true
isPrimitive([]); // false

其他方法：

const isPrimitive = val => {
  return typeof val === 'string' ||
    typeof val === 'number' ||
    typeof val === 'boolean' ||
    typeof val === 'undefined' ||
    typeof val === 'symbol' ||
    val === null
}

isPromiseLike

如果一个对象看起来像一个Promise，则返回true，否则返回false 。
检查对象是不为null，它的typeof是否匹配object或function ，如果它有.then属性，这也是一个function 。

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

isString

检查给定的参数是否是一个字符串。
使用typeof来检查一个值是否为一个字符串。

const isString = val => typeof val === 'string';

isString('10'); // true

isSymbol

检查给定的参数是否是一个symbol。
使用typeof来检查一个值是否为一个symbol。

const isSymbol = val => typeof val === 'symbol';

isSymbol(Symbol('x')); // true

isUndefined

检查给定的参数是否是一个undefined。
使用严格等号运算符来检查val值是否等于undefined。

const isUndefined = val => val === undefined;

isUndefined(undefined); // true

isValidJSON

检查提供的参数是否是有效的JSON。
使用JSON.parse()和try... catch块来检查提供的参数是否是有效的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

Utility

castArray

如果提供的值不是数组，则将其强制转换为数组。
使用array.prototype.isarray()确定val是一个数组，并将其按原样返回，或相应地封装在数组中。

const castArray = val => (Array.isArray(val) ? val : [val]);

castArray('foo'); // ['foo']
castArray([1]); // [1]

cloneRegExp

克隆一个正则表达式。
使用new RegExp()，RegExp.source和RegExp.flags来克隆给定的正则表达式。

const cloneRegExp = regExp => new RegExp(regExp.source, regExp.flags);

const regExp = /lorem ipsum/gi;
const regExp2 = cloneRegExp(regExp); // /lorem ipsum/gi

coalesce

返回第一个非null/undefined的参数。

const coalesce = (...args) => args.find(_ => ![undefined, null].includes(_));

coalesce(null, undefined, '', NaN, 'Waldo'); // ""

coalesceFactory

返回自定义的coalesce函数，该函数返回从提供的参数验证函数返回true的第一个参数。
使用Array.find()返回从提供的参数验证函数返回true的第一个参数。

const coalesceFactory = valid => (...args) => args.find(valid);

const customCoalesce = coalesceFactory(_ => ![null, undefined, '', NaN].includes(_));
customCoalesce(undefined, null, NaN, '', 'Waldo'); // "Waldo"

extendHex

将3位数的颜色代码扩展为6位数的颜色代码。
使用Array.map(), String.split()和Array.join()加入映射数组，将3位RGB十六进制颜色代码转换为6位数形式。Array.slice()用于从字符串开始删除#，因为输出中已经默认添加了。

const extendHex = shortHex =>
  '#' +
  shortHex
    .slice(shortHex.startsWith('#') ? 1 : 0)
    .split('')
    .map(x => x + x)
    .join('');

extendHex('#03f'); // '#0033ff'
extendHex('05a'); // '#0055aa'

getURLParameters

返回包含当前URL参数的对象。
通过适当的正则表达式，使用String.match()来获得所有的键值对，Array.reduce()来映射和组合成一个单一的对象。将location.search作为参数传递给当前url。

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

getURLParameters('http://url.com/page?name=Adam&surname=Smith'); // {name: 'Adam', surname: 'Smith'}
getURLParameters('google.com'); // {}

httpGet

向传递的URL发出一个 GET 请求。
使用XMLHttpRequest web API向给定的url发出get请求。 通过调用给定的callback和responseText来处理onload事件。 通过运行提供的err函数，处理onerror事件。省略第四个参数err，默认将错误记录到控制台的error流。

const httpGet = (url, callback, err = console.error) => {
  const request = new XMLHttpRequest();
  request.open('GET', url, true);
  request.onload = () => callback(request.responseText);
  request.onerror = () => err(request);
  request.send();
};

httpGet(
  'https://jsonplaceholder.typicode.com/posts/1',
  console.log
);

httpPost

对传递的URL发出一个POST请求。
使用XMLHttpRequest web api对给定的url发出一个post请求。 用setRequestHeader方法设置HTTP请求头的值。通过调用给定的callback和responseText来处理onload事件。 通过运行提供的err函数，处理onerror事件。 省略第三个参数data，不发送数据到提供的url 。 省略第四个参数err，默认将错误记录到控制台的error流。

const httpPost = (url, data, callback, err = console.error) => {
  const request = new XMLHttpRequest();
  request.open('POST', url, true);
  request.setRequestHeader('Content-type', 'application/json; charset=utf-8');
  request.onload = () => callback(request.responseText);
  request.onerror = () => err(request);
  request.send(data);
};

const newPost = {
  userId: 1,
  id: 1337,
  title: 'Foo',
  body: 'bar bar bar'
};
const data = JSON.stringify(newPost);
httpPost(
  'https://jsonplaceholder.typicode.com/posts',
  data,
  console.log
);
httpPost(
  'https://jsonplaceholder.typicode.com/posts',
  null, // does not send a body
  console.log
);

isBrowser

确定当前运行时环境是否为浏览器。

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

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

parseCookie

解析HTTP Cookie标头字符串并返回所有cookie的name-value对的对象。
使用String.split(';')将键值对彼此分开。 使用Array.map()和String.split('=')将键与每对中的值分开。使用Array.reduce()和decodeURIComponent()创建一个包含所有键值对的对象。

const parseCookie = str =>
  str
    .split(';')
    .map(v => v.split('='))
    .reduce((acc, v) => {
      acc[decodeURIComponent(v[0].trim())] = decodeURIComponent(v[1].trim());
      return acc;
    }, {});

parseCookie('foo=bar; equation=E%3Dmc%5E2'); // { foo: 'bar', equation: 'E=mc^2' }

prettyBytes

将字节数转换为可读的字符串。
根据存取字节数常用的单位构建一个数组字典。使用Number.toPrecision()将数字截断为一定数量的数字。将构建、美化好的字符串返回，并考虑提供的选项以及是否为负值。省略第二个参数precision，使用默认精度为3的数字。省略第三个参数addSpace，默认情况下在数字和单位之间添加空格。

const prettyBytes = (num, precision = 3, addSpace = true) => {
  const UNITS = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
  if (Math.abs(num) < 1) return num + (addSpace ? ' ' : '') + UNITS[0];
  const exponent = Math.min(Math.floor(Math.log10(num < 0 ? -num : num) / 3), UNITS.length - 1);
  const n = Number(((num < 0 ? -num : num) / 1000 ** exponent).toPrecision(precision));
  return (num < 0 ? '-' : '') + n + (addSpace ? ' ' : '') + UNITS[exponent];
};

prettyBytes(1000); // "1 KB"
prettyBytes(-27145424323.5821, 5); // "-27.145 GB"
prettyBytes(123456789, 3, false); // "123MB"

randomHexColorCode

生成一个随机的十六进制颜色代码。
使用Math.random生成一个随机的24位（6x4位）十六进制数。使用位操作符，然后使用toString(16)将其转换为十六进制字符串。

const randomHexColorCode = () => {
  let n = (Math.random() * 0xfffff * 1000000).toString(16);
  return '#' + n.slice(0, 6);
};

randomHexColorCode(); // "#e34155"

RGBToHex

将RGB值转换为颜色代码。
使用按位左移运算符(<<)和toString(16)将给定的RGB参数转换为十六进制字符串，然后使用String.padStart(6,'0')得到一个6位的十六进制值。

const RGBToHex = (r, g, b) => ((r << 16) + (g << 8) + b).toString(16).padStart(6, '0');

RGBToHex(255, 165, 1); // 'ffa501'

serializeCookie

将一个cookie name-value对序列化为Set-Cookie头字符串。
使用模板字面量和encodeURIComponent()来创建合适的字符串。

const serializeCookie = (name, val) => `${encodeURIComponent(name)}=${encodeURIComponent(val)}`;

serializeCookie('foo', 'bar'); // 'foo=bar'

timeTaken

计算一个函数执行的时间。
使用console.time()和console.timeEnd()来测量开始和结束时间之间的差，以确定回调执行的时间。

const timeTaken = callback => {
  console.time('timeTaken');
  const r = callback();
  console.timeEnd('timeTaken');
  return r;
};

timeTaken(() => Math.pow(2, 10)); 
// 1024, (logged): timeTaken: 0.02099609375ms
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 214,875评论 6赞 496
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,569评论 3赞 389
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 160,475评论 0赞 350
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,459评论 1赞 288
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,537评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,563评论 1赞 293
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,580评论 3赞 414
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,326评论 0赞 270
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,773评论 1赞 307
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,086评论 2赞 330
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,252评论 1赞 343
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,921评论 5赞 338
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,566评论 3赞 322
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,190评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,435评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,129评论 2赞 366
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,125评论 2赞 352