17個JavaScript?單行程序
更新時間：2022年01月11日 17:21:33 作者：劉星
這篇文章主要介紹了17個JavaScript?單行程序?，在?JavaScript?代碼的世界里，在保證代碼易讀性的前提下更少等于更好，下面文章將為大家分享17?個?JavaScript?單行程序代碼，希望能幫助到大家
一、DOM & BOM 相關
1、檢查元素是否獲得焦點
const hasFocus = (ele) => ele === document.activeElement;
2、獲取元素的所有兄弟節(jié)點
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, {});
二、數(shù)組相關
7、比較兩個數(shù)組
// `a` 和 `b` 是一個數(shù)組 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、將對象數(shù)組轉換為對象
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、按對象數(shù)組的屬性計數(shù)
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、檢查數(shù)組是否為空
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、從對象數(shù)組中提取屬性的值
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、檢查對象是否為數(shù)組
const isArray = (obj) => Array.isArray(obj);
到此這篇關于JavaScript 單行程序 的文章就介紹到這了,更多相關JavaScript 單行程序 內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家介紹了前端canvas中物體邊框和控制點的實現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要為大家介紹了Electron?中的快捷鍵使用技巧及示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
這篇文章主要為大家介紹了js解決移動端滾動穿透問題方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
這篇文章主要為大家介紹了基于遷移學習的JS目標檢測器構建過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
這篇文章主要介紹了前端JavaScript中的class,類是用于創(chuàng)建對象的模板，JavaScript中的Class更多的還是語法糖，本質上繞不開原型鏈，下面就來看看關于JavaScript class類的詳細內容吧2021-10-10
這篇文章主要為大家介紹了前端算法題解?leetcode50-Pow(x,?n)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要為大家介紹了前端架構Git?commit提交規(guī)范示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了?關于JavaScript?中?if包含逗號表達式，有時會看到JavaScript中if判斷里包含英文逗號?“,”，這個是其實是逗號表達式。在if條件里，只有最后一個表達式起判斷作用。下面來看看文章的具體介紹吧2021-11-11
本篇文章主要介紹了微信小程序之picker選擇器，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要介紹了解決React中的re-render問題,相信很多人都遇到過。接下來給大家具體講講這個問題,需要的朋友可以參考y一下，洗碗給對你有所幫助2022-01-01