17 个拯救生命的 JavaScript 单行程序

共 4281字,需浏览 9分钟

 ·

2021-12-15 09:04

☝点击上方蓝字关注我们,编码不要畏惧变化,要拥抱变化。🧑‍💻


通常,在 JavaScript 代码的世界里,更少 === 更好 (注意: 保证代码易读性的前提下)。今天,我将展示 17 个杀手级的 JavaScript 单行程序🔥 。

▽ 正文

- DOM & BOM 相关

1、检查元素是否获得焦点

const hasFocus = (ele) => ele === document.activeElement;

2、获取元素的所有兄弟节点

const siblings = (ele) => [].slice.call(ele.parentNode.children).filter((child) => child !== ele);

// 或者
const siblings = (ele) => [...ele.parentNode.children].filter((child) => child !== ele);

3、获取选定的文本

const getSelectedText = () => window.getSelection().toString();

4、返回上一个页面

history.back();
// 或者
history.go(-1);

5、清除所有 cookie

const clearCookies = () => document.cookie
  .split(';')
  .forEach((c) =>(document.cookie = c.replace(/^ +/'')
  .replace(/=.*/`=;expires=${new Date().toUTCString()};path=/`)));

6、将 cookie 转换为对象

const cookies = document.cookie
  .split(';')
  .map((item) => item.split('='))
  .reduce((acc, [k, v]) => (acc[k.trim().replace('"''')] = v) && acc, {});

- 数组相关

7、比较两个数组

// `a` 和 `b` 是一个数组
const isEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b);
// 或者
const isEqual = (a, b) => a.length === b.length && a.every((v, i) => v === b[i]);

// 示例
isEqual([123], [123]); // true
isEqual([123], [1'2'3]); // false

8、将对象数组转换为对象

const toObject = (arr, key) => arr.reduce((a, b) => ({ ...a, [b[key]]: b }), {});
// 或者
const toObject = (arr, key) => Object.fromEntries(arr.map((it) => [it[key], it]));

// 示例
toObject([
  { id'1'name'Alpha'gender'Male' },
  { id'2'name'Bravo'gender'Male' },
  { id'3'name'Charlie'gender'Female' }],
'id');

/*
{
'1': { id: '1', name: 'Alpha', gender: 'Male' },
'2': { id: '2', name: 'Bravo', gender: 'Male' },
'3': { id: '3', name: 'Charlie', gender: 'Female' }
}
*/

9、按对象数组的属性计数

const countBy = (arr, prop) => arr.reduce((prev, curr) => ((prev[curr[prop]] = ++prev[curr[prop]] || 1), prev), {});

// 示例
countBy([
branch'audi'model'q8'year'2019' },
branch'audi'model'rs7'year'2020' },
branch'ford'model'mustang'year'2019' },
branch'ford'model'explorer'year'2020' },
branch'bmw'model'x7'year'2020' },
],
'branch');

// { 'audi': 2, 'ford': 2, 'bmw': 1 }

10、检查数组是否为空

const isNotEmpty = (arr) => Array.isArray(arr) && Object.keys(arr).length > 0;

// 示例
isNotEmpty([]); // false
isNotEmpty([123]); // true

- 对象相关

11、检查多个对象是否相等

const isEqual = (...objects) => objects.every((obj) => JSON.stringify(obj) === JSON.stringify(objects[0]));

// 示例
isEqual({ foo'bar' }, { foo'bar' }); // true
isEqual({ foo'bar' }, { bar'foo' }); // false

12、从对象数组中提取属性的值

const pluck = (objs, property) => objs.map((obj) => obj[property]);

// 示例
pluck([
  { name'John'age20 },
  { name'Smith'age25 },
  { name'Peter'age30 },
],
'name');

// ['John', 'Smith', 'Peter']

13、反转对象的键和值

const invert = (obj) => Object.keys(obj).reduce((res, k) => Object.assign(res, { [obj[k]]: k }), {});
// 或者
const invert = (obj) => Object.fromEntries(Object.entries(obj).map(([k, v]) => [v, k]));

// 示例
invert({ a'1'b'2'c'3' }); // { 1: 'a', 2: 'b', 3: 'c' }

14、从对象中删除所有空和未定义的属性

const removeNullUndefined = (obj) =>
  Object.entries(obj).reduce(
    (a, [k, v]) => (v == null ? a : ((a[k] = v), a)),
    {},
  );

// 或者
const removeNullUndefined = (obj) =>
  Object.entries(obj)
    .filter(([_, v]) => v != null)
    .reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {});

// 或者
const removeNullUndefined = (obj) =>
  Object.fromEntries(Object.entries(obj).filter(([_, v]) => v != null));

// 示例
removeNullUndefined({
  foonull,
  barundefined,
  fuzz42
});
// { fuzz: 42 }

15、按属性对对象进行排序

const sort = (obj) =>
  Object.keys(obj)
    .sort()
    .reduce((p, c) => ((p[c] = obj[c]), p), {});

// 示例
const colors = {
  white'#ffffff',
  black'#000000',
  red'#ff0000',
  green'#008000',
  blue'#0000ff',
};
sort(colors);
/*
{
  black: '#000000',
  blue: '#0000ff',
  green: '#008000',
  red: '#ff0000',
  white: '#ffffff',
}
*/

16、检查一个对象是否是一个 Promise

const isPromise = (obj) =>
  !!obj &&
  (typeof obj === 'object' || typeof obj === 'function') &&
  typeof obj.then === 'function';

17、检查对象是否为数组

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

亲爱的读者,

感谢你的时间。

如果你在评论区留下的想法

或是点赞、关注、在看,我会十分高兴。


往期精彩回顾:

Javascript 数组及其方法详解

8个必知的 SEO 优化重要元标签

HTML meta 标签详解

JavaScript中到底要不要加分号?

RESTful API 设计最佳实践

Git 工作流程及分支策略



左手代码右手砖,抛砖引玉

点赞,关注,在看

浏览 46
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报