17个JavaScript 单行程序

 更新时间:2022年01月11日 17:21:33   作者:刘星  
这篇文章主要介绍了17个JavaScript 单行程序 ,在 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([1, 2, 3], [1, 2, 3]); // true
isEqual([1, 2, 3], [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([1, 2, 3]); // 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', age: 20 },
  { name: 'Smith', age: 25 },
  { name: 'Peter', age: 30 },
],
'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({
  foo: null,
  bar: undefined,
  fuzz: 42
});
// { 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 单行程序 的文章就介绍到这了,更多相关JavaScript 单行程序 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 前端canvas中物体边框和控制点的实现示例

    前端canvas中物体边框和控制点的实现示例

    这篇文章主要为大家介绍了前端canvas中物体边框和控制点的实现示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • 一文详解Electron 快捷键使用技巧及示例

    一文详解Electron 快捷键使用技巧及示例

    这篇文章主要为大家介绍了Electron 中的快捷键使用技巧及示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • js解决移动端滚动穿透问题方案详解

    js解决移动端滚动穿透问题方案详解

    这篇文章主要为大家介绍了js解决移动端滚动穿透问题方案详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • 基于迁移学习的JS目标检测器构建过程详解

    基于迁移学习的JS目标检测器构建过程详解

    这篇文章主要为大家介绍了基于迁移学习的JS目标检测器构建过程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • 前端JavaScript中的class类

    前端JavaScript中的class类

    这篇文章主要介绍了前端JavaScript中的class,类是用于创建对象的模板,JavaScript中的Class更多的还是语法糖,本质上绕不开原型链,下面就来看看关于JavaScript class类的详细内容吧
    2021-10-10
  • 前端算法题解 leetcode50-Pow(x, n)

    前端算法题解 leetcode50-Pow(x, n)

    这篇文章主要为大家介绍了前端算法题解 leetcode50-Pow(x, n)示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • js前端架构Git commit提交规范

    js前端架构Git commit提交规范

    这篇文章主要为大家介绍了前端架构Git commit提交规范示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • 关于JavaScript 中 if包含逗号表达式

    关于JavaScript 中 if包含逗号表达式

    这篇文章主要介绍了 关于JavaScript 中 if包含逗号表达式,有时会看到JavaScript中if判断里包含英文逗号 “,”,这个是其实是逗号表达式。在if条件里,只有最后一个表达式起判断作用。下面来看看文章的具体介绍吧
    2021-11-11
  • 微信小程序之picker日期和时间选择器

    微信小程序之picker日期和时间选择器

    本篇文章主要介绍了微信小程序之picker选择器,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • 解决React中的re-render问题

    解决React中的re-render问题

    这篇文章主要介绍了解决React中的re-render问题,相信很多人都遇到过。接下来给大家具体讲讲这个问题,需要的朋友可以参考y一下,洗碗给对你有所帮助
    2022-01-01

最新评论