耀极客论坛

 找回密码
 立即注册
查看: 3229|回复: 0

17个JavaScript 单行程序

[复制链接]

336

主题

318

帖子

22万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
220555
发表于 2022-5-9 02:23:27 | 显示全部楼层 |阅读模式
  这篇文章主要介绍了17个JavaScript 单行程序 ,在 JavaScript 代码的世界里,在保证代码易读性的前提下更少等于更好,下面文章将为大家分享17 个 JavaScript 单行程序代码,希望能帮助到大家

一、DOM & BOM 相关

1、检查元素是否获得焦点
  1. const hasFocus = (ele) => ele === document.activeElement;
复制代码
2、获取元素的所有兄弟节点
  1. const siblings = (ele) => [].slice.call(ele.parentNode.children).filter((child) => child !== ele);
  2. // 或者
  3. const siblings = (ele) => [...ele.parentNode.children].filter((child) => child !== ele);
复制代码
3、获取选定的文本
  1. const getSelectedText = () => window.getSelection().toString();
复制代码
4、返回上一个页面
  1. history.back();
  2. // 或者
  3. history.go(-1);
复制代码
5、清除所有 cookie
  1. const clearCookies = () => document.cookie
  2.   .split(';')
  3.   .forEach((c) =>(document.cookie = c.replace(/^ +/, '')
  4.   .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、比较两个数组
  1. // `a` 和 `b` 是一个数组
  2. const isEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b);
  3. // 或者
  4. const isEqual = (a, b) => a.length === b.length && a.every((v, i) => v === b[i]);
  5. // 示例
  6. isEqual([1, 2, 3], [1, 2, 3]); // true
  7. isEqual([1, 2, 3], [1, '2', 3]); // false
复制代码
8、将对象数组转换为对象
  1. const toObject = (arr, key) => arr.reduce((a, b) => ({ ...a, [b[key]]: b }), {});
  2. // 或者
  3. const toObject = (arr, key) => Object.fromEntries(arr.map((it) => [it[key], it]));
  4. // 示例
  5. toObject([
  6.   { id: '1', name: 'Alpha', gender: 'Male' },
  7.   { id: '2', name: 'Bravo', gender: 'Male' },
  8.   { id: '3', name: 'Charlie', gender: 'Female' }],
  9. 'id');
  10. /*
  11. {
  12. '1': { id: '1', name: 'Alpha', gender: 'Male' },
  13. '2': { id: '2', name: 'Bravo', gender: 'Male' },
  14. '3': { id: '3', name: 'Charlie', gender: 'Female' }
  15. }
  16. */
复制代码
9、按对象数组的属性计数
  1. const countBy = (arr, prop) => arr.reduce((prev, curr) => ((prev[curr[prop]] = ++prev[curr[prop]] || 1), prev), {});
  2. // 示例
  3. countBy([
  4. { branch: 'audi', model: 'q8', year: '2019' },
  5. { branch: 'audi', model: 'rs7', year: '2020' },
  6. { branch: 'ford', model: 'mustang', year: '2019' },
  7. { branch: 'ford', model: 'explorer', year: '2020' },
  8. { branch: 'bmw', model: 'x7', year: '2020' },
  9. ],
  10. 'branch');
  11. // { 'audi': 2, 'ford': 2, 'bmw': 1 }
复制代码
10、检查数组是否为空
  1. const isNotEmpty = (arr) => Array.isArray(arr) && Object.keys(arr).length > 0;
  2. // 示例
  3. isNotEmpty([]); // false
  4. isNotEmpty([1, 2, 3]); // true
复制代码
三、对象相关

11、检查多个对象是否相等
  1. const isEqual = (...objects) => objects.every((obj) => JSON.stringify(obj) === JSON.stringify(objects[0]));
  2. // 示例
  3. isEqual({ foo: 'bar' }, { foo: 'bar' }); // true
  4. isEqual({ foo: 'bar' }, { bar: 'foo' }); // false
复制代码
12、从对象数组中提取属性的值
  1. const pluck = (objs, property) => objs.map((obj) => obj[property]);
  2. // 示例
  3. pluck([
  4.   { name: 'John', age: 20 },
  5.   { name: 'Smith', age: 25 },
  6.   { name: 'Peter', age: 30 },
  7. ],
  8. 'name');
  9. // ['John', 'Smith', 'Peter']
复制代码
13、反转对象的键和值
  1. const invert = (obj) => Object.keys(obj).reduce((res, k) => Object.assign(res, { [obj[k]]: k }), {});
  2. // 或者
  3. const invert = (obj) => Object.fromEntries(Object.entries(obj).map(([k, v]) => [v, k]));
  4. // 示例
  5. invert({ a: '1', b: '2', c: '3' }); // { 1: 'a', 2: 'b', 3: 'c' }
复制代码
14、从对象中删除所有空和未定义的属性
  1. const removeNullUndefined = (obj) =>
  2.   Object.entries(obj).reduce(
  3.     (a, [k, v]) => (v == null ? a : ((a[k] = v), a)),
  4.     {},
  5.   );
  6. // 或者
  7. const removeNullUndefined = (obj) =>
  8.   Object.entries(obj)
  9.     .filter(([_, v]) => v != null)
  10.     .reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {});
  11. // 或者
  12. const removeNullUndefined = (obj) =>
  13.   Object.fromEntries(Object.entries(obj).filter(([_, v]) => v != null));
  14. // 示例
  15. removeNullUndefined({
  16.   foo: null,
  17.   bar: undefined,
  18.   fuzz: 42
  19. });
  20. // { fuzz: 42 }
复制代码
15、按属性对对象进行排序
  1. const sort = (obj) =>
  2.   Object.keys(obj)
  3.     .sort()
  4.     .reduce((p, c) => ((p[c] = obj[c]), p), {});
  5. // 示例
  6. const colors = {
  7.   white: '#ffffff',
  8.   black: '#000000',
  9.   red: '#ff0000',
  10.   green: '#008000',
  11.   blue: '#0000ff',
  12. };
  13. sort(colors);
  14. /*
  15. {
  16.   black: '#000000',
  17.   blue: '#0000ff',
  18.   green: '#008000',
  19.   red: '#ff0000',
  20.   white: '#ffffff',
  21. }
  22. */
复制代码
16、检查一个对象是否是一个 Promise
  1. const isPromise = (obj) =>
  2.   !!obj &&
  3.   (typeof obj === 'object' || typeof obj === 'function') &&
  4.   typeof obj.then === 'function';
复制代码
17、检查对象是否为数组
  1. const isArray = (obj) => Array.isArray(obj);
复制代码
  到此这篇关于JavaScript 单行程序 的文章就介绍到这了,更多相关JavaScript 单行程序 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-12-10 02:57 , Processed in 0.069116 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表