本文汇总了25个常用的JavaScript单行代码技巧，涵盖类型转换、对象操作、数组处理、正则匹配及DOM检测等场景。通过简洁的代码实现布尔值强制转换、对象属性条件设置、变量交换、JSON格式化及URL参数解析等功能，帮助开发者提升编码效率与代码可读性。
类型转换与变量操作
1. 强制布尔值
若需将变量转换为布尔类型且保持原值不变，可使用双非运算符（!!）进行强制转换。
const myBoolean = !! myVariable;
!!null // false
!!undefined // false
!!false // false
!!ture // ture
!!"" // false
!!"string" // true
!!0 // false
!!1 // true
!!{} // true
!![] // true
对象属性与合并技巧
2. 基于条件设置对象属性
利用展开运算符（spread operator）结合逻辑与运算符，可有条件地向对象添加属性。
const myObject = {... myProperty && {propName：myPoperty}};
let myProperty = 'Jhon'
const myObject = {...myProperty && {propName: myProperty}}; // {propName: "Jhon"}
let myProperty = ''
const myObject = {...myProperty && {propName: myProperty}}; // {}
当 myProperty 计算结果为 false 时，逻辑与运算失败，新属性不会被设置；若结果非空，则逻辑与运算成功，新属性将被设置并覆盖原有同名属性。
3. 合并对象
const mergedObject = { ...objectOne, ...objectTwo };
const mergedObject = { ...{name: 'Jhon', age: '18'}, ...{name1: 'jhon1', age1: '12'}};
// {name: "Jhon", age: "18", name1: "jhon1", age1: "12"}
const mergedObject = { ...{name: 'Jhon', age: '18'}, ...{name: 'jhon1', age:'12'}};
// {name: "jhon1", age: "12"}
数组处理与格式化
该方法支持无限层级对象的合并，但若多个对象存在同名属性，后出现的属性值将覆盖先前的值。需注意，此方法仅适用于浅层合并（shallow merge）。
4. 交换变量
若要在不使用中间变量的情况下交换两个变量的值，可采用解构赋值的方式实现。
[varA，varB] = [varB，varA];
let a = 1;
let b = 2;
[a, b] = [b, a] // a = 2 b = 1
5.删除Boolean 为 false 值
const clean = dirty.filter(Boolean);
const clean = [0, false, true, undefined, null, '', 12, 15].filter(Boolean);
// [true, 12, 15]
此操作将过滤掉值为 null、undefined、false、0 以及空字符串（''）的元素。
6. 转换元素类型
若需将 Number 类型的元素转换为 String 类型，可使用 map 方法配合 String 构造函数。
const stringArray = numberArray.map(String);
const stringArray = [1, 2, 3].map(String);
["1", "2", "3"]
若数组中包含字符串，这些字符串将保持原样不变。该方法同样适用于将 String 元素转换为 Number 类型。
const numberArray = stringArray.map(Number);
const stringArray = ["1", "2", "3"].map(String);
// [1, 2, 3]
7. 格式化对象为 JSON 代码
若需以易读的格式展示 JSON 代码，可使用 JSON.stringify 方法。
const formatted = JSON.stringify(myObj, null, 4);
const formatted = JSON.stringify({name: 'Jhon', age: 18, address: 'sz'}, null, 4);
/*
{
"name": "Jhon",
"age": 18,
"address": "sz"
}
*/
该字符串化命令包含三个参数：第一个为 JavaScript 对象；第二个为可选函数，用于在 JSON 字符串化过程中对值执行操作；第三个参数指定用于缩进的空白字符数量。若省略最后一个参数，JSON 将以单行长字符串形式返回。若 myObj 中存在循环引用，格式化将失败。
8. 快速创建数字数组
若需创建一个数组并用从 0 开始的索引数字填充，可使用 Array.from 方法。
const numArray = Array.from(new Array(10), (x, i)=> i);
// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
其他常用单行代码
9. 随机生成六位数字验证码
const code = Math.floor(Math.random() * 1000000).toString().padStart(6, "0");
// 942377
10. 身份证正则表达式
const IDReg= /(^[1-9]d{5}(18|19|([23]d))d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)d{3}[0-9Xx]$)|(^[1-9]d{5}d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)d{2}[0-9Xx]$)/;
11. 将 window.location.search 转换为 JS 对象
有时我们需要对 URL 的查询参数（即问号 (?) 之后的部分）进行转换处理。
const searchObj = search => JSON.parse(`{"${decodeURIComponent(search.substring(1)).replace(/"/g, '\"').replace(/&/g, '","').replace(/=/g, '":"')}"}`);
// 假如请求url为
// 'https://www.baidu.com?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=js&rsv_pq=a86b5e5f0007bceb&rsv_t=1e1fAVan%2BVlnkhJHFB0BIGLdLM2slszYMJBTTfFkmyyBUzBpw0ggeuVDE50&rqlang=cn&rsv_enter=0&inputT=1287&rsv_sug3=5&rsv_sug1=3&rsv_sug7=101&rsv_sug2=0&rsv_sug4=1907'
// 那么 window.location.search 就为：
let search = '?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=js&rsv_pq=a86b5e5f0007bceb&rsv_t=1e1fAVan%2BVlnkhJHFB0BIGLdLM2slszYMJBTTfFkmyyBUzBpw0ggeuVDE50&rqlang=cn&rsv_enter=0&inputT=1287&rsv_sug3=5&rsv_sug1=3&rsv_sug7=101&rsv_sug2=0&rsv_sug4=1907'
searchObj(search)
格式化后的查询字符串将转换为如下对象形式。
12. 将 JS 对象转换为 URL 查询字符串
const objectToQueryString = (obj) => Object.keys(obj).map((key) => `${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`).join('&');
objectToQueryString({name: 'Jhon', age: 18, address: 'beijing'})
// name=Jhon&age=18&address=beijing 13. 获取数组交集
const similarity = (arr, values) => arr.filter(v => values.includes(v));
similarity([1, 2, 3], [1, 2, 4]); // [1,2] 14. 检测设备类型
通过正则表达式检测 navigator.userAgent 属性，以判断当前设备是移动设备还是台式机/笔记本电脑。
const detectDeviceType = () =>/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent) ? 'Mobile' : 'Desktop'; 15. 将数字转化为千分位格式
const toDecimalMark = num => num.toLocaleString('en-US');
toDecimalMark(12305030388.9087); // "12,305,030,388.909" 16. 多维数组转一维数组
const deepFlatten = arr => [].concat(...arr.map(v => (Array.isArray(v) ? deepFlatten(v) : v)));
deepFlatten([1, [2], [[3], 4], 5]); // [1,2,3,4,5] 17. 过滤对象数组
const reducedFilter = (data, keys, fn) =>data.filter(fn).map(el =>keys.reduce((acc, key) => {acc[key] =el[key];return acc;}, {}));
const data = [
{
id: 1,
name: 'john',
age: 24
},
{
id: 2,
name: 'mike',
age: 50
}
];
let a = reducedFilter(data, ['id', 'name'], item => item.age > 24); // [{ id: 2, name: 'mike'}]
18. 驼峰字字符串格式化
将驼峰拼写的字符串转换为特定格式。
使用 String.replace() 方法去除下划线、连字符和空格，并将驼峰拼写格式的单词转换为全小写。若省略第二个参数 separator，默认使用下划线（_）作为分隔符。
const fromCamelCase = (str, separator = '_') =>str.replace(/([a-zd])([A-Z])/g, '$1' + separator + '$2').replace(/([A-Z]+)([A-Z][a-zd]+)/g, '$1' + separator + '$2').toLowerCase();
fromCamelCase('someDatabaseFieldName', ' '); // 'some database field name'
fromCamelCase('someLabelThatNeedsToBeCamelized', '-'); // 'some-label-that-needs-to-be-camelized'
fromCamelCase('someJavascriptProperty', '_'); // 'some_javascript_property' 19. 判断是否为绝对地址
const isAbsoluteURL = str => /^[a-z][a-z0-9+.-]*:/.test(str);
isAbsoluteURL('https://google.com'); // true
isAbsoluteURL('ftp://www.myserver.net'); // true
isAbsoluteURL('/foo/bar'); // false 20. 获取两个日期相差天数
const getDaysDiffBetweenDates = (dateInitial, dateFinal) => (dateFinal - dateInitial) / (1000 * 3600 * 24);
getDaysDiffBetweenDates(new Date('2017-12-13'), new Date('2017-12-22')); // 9 21. 数组去重
const deDupe = (myArray) => [... new Set(myArray)];
deDupe([1, 1, 2, 1, 3, 3, 4])
// [1, 2, 3, 4]
22. 数组对象去重
const uniqueElementsBy = (arr, fn) =>arr.reduce((acc, v) => {if (!acc.some(x => fn(v, x))) acc.push(v);return acc;}, []);
uniqueElementsBy([{id: 1, name: 'Jhon'}, {id: 2, name: 'sss'}, {id: 1, name: 'Jhon'}], (a, b) => a.id == b.id)
// [{id: 1, name: 'Jhon'}, {id: 2, name: 'sss'}]
23. RGB 颜色转 16进制颜色
const RGBToHex = (r, g, b) => ((r << 16) + (g << 8) + b).toString(16).padStart(6, '0');
RGBToHex(255, 165, 1); // 'ffa501' 24. 常用密码组合正则
const passwordReg = /(?!^(d+|[a-zA-Z]+|[~!@#$%^&*?]+)$)^[w~!@#$%^&*?]{8,20}$/;
// -长度8~20位字符，支持大小写字母、数字、符号三种字符中任意两种字符的组合
25. 判断 dom 元素是否具有某个 className
const hasClass = (el, className) => new RegExp(`(^|\s)${className}(\s|$)`).test(el.className);
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。