开发中常用的 25 个JavaScript 单行代码
发布时间：2024-07-13 点击：46
1.强制布尔值要将变量强制转换为布尔值而不更改其值：
const?myboolean?=?!!?myvariable;?!!null?//?false?!!undefined?//?false?!!false?//?false?!!ture?//?ture?!!?//?false?!!string?//?true?!!0?//?false?!!1?//?true?!!{}?//?true?!![]?//?true?2.基于某个条件为对象设置属性要使用spread运算符有条件地在对象上设置属性：
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}?支持无限制合并，但如果对象之间存在相同属性，则后面属性会覆盖前面属性。*请注意，这仅适用于浅层合并。
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元素：
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代码：
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。省略最后一个参数，json将返回一个长行。如果myobj中存在循环引用，则会格式失败。
8.快速创建数字数组要创建一个数组并用数字填充它，索引为零：
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的查询参数即从问号 (?)后 开始的 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?<
最好的设计网站公司需要具备什么要素
如何做好网络营销的定位？
企业为什么要做SEO，它的重要性有哪些？
企业网络推广如何做
10个seo入门精通小技巧分享
建设一个营销型网站需要注意哪些内容？
SEO网站单页面优化策略
如何判断核心关键词竞争难度？
const?myboolean?=?!!?myvariable;?!!null?//?false?!!undefined?//?false?!!false?//?false?!!ture?//?ture?!!?//?false?!!string?//?true?!!0?//?false?!!1?//?true?!!{}?//?true?!![]?//?true?2.基于某个条件为对象设置属性要使用spread运算符有条件地在对象上设置属性：
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}?支持无限制合并，但如果对象之间存在相同属性，则后面属性会覆盖前面属性。*请注意，这仅适用于浅层合并。
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元素：
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代码：
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。省略最后一个参数，json将返回一个长行。如果myobj中存在循环引用，则会格式失败。
8.快速创建数字数组要创建一个数组并用数字填充它，索引为零：
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的查询参数即从问号 (?)后 开始的 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?<
最好的设计网站公司需要具备什么要素
如何做好网络营销的定位？
企业为什么要做SEO，它的重要性有哪些？
企业网络推广如何做
10个seo入门精通小技巧分享
建设一个营销型网站需要注意哪些内容？
SEO网站单页面优化策略
如何判断核心关键词竞争难度？