|
|
51CTO旗下网站
|
|
移动端

开发中常用的 25 个JavaScript 单行代码

本文为大家介绍我在开发中常用的30个JavaScript单行代码,没有特别的顺序。

作者:alentan来源:掘金|2019-06-26 10:08

1.强制布尔值

要将变量强制转换为布尔值而不更改其值:

  1. const myBoolean = !! myVariable; 
  2. !!null // false 
  3. !!undefined // false 
  4. !!false // false 
  5. !!ture // ture 
  6. !!"" // false 
  7. !!"string" // true 
  8. !!0 // false 
  9. !!1 // true 
  10. !!{} // true 
  11. !![] // true 

2.基于某个条件为对象设置属性

要使用spread运算符有条件地在对象上设置属性:

  1. const myObject = {... myProperty && {propName:myPoperty}}; 
  2. let myProperty = 'Jhon' 
  3. const myObject = {...myProperty && {propName: myProperty}}; // {propName: "Jhon"} 
  4. let myProperty = '' 
  5. const myObject = {...myProperty && {propName: myProperty}}; // {} 

如果myProperty结果为false,则 && 失败并且不设置新属性; 否则,如果不为空,&& 将设置新属性并覆盖原来的值。

3.合并对象

  1. const mergedObject = { ...objectOne, ...objectTwo }; 
  2. const mergedObject = { ...{name: 'Jhon', age: '18'}, ...{name1: 'jhon1', age1: '12'}}; 
  3. // {name: "Jhon", age: "18", name1: "jhon1", age1: "12"} 
  4. const mergedObject = { ...{name: 'Jhon', age: '18'}, ...{name: 'jhon1', age:'12'}}; 
  5. // {name: "jhon1", age: "12"} 

支持无限制合并,但如果对象之间存在相同属性,则后面属性会覆盖前面属性。*请注意,这仅适用于浅层合并。

4.交换变量

要在不使用中间变量的情况下交换两个变量的值:

  1. [varA,varB] = [varB,varA]; 
  2. let a = 1
  3. let b = 2
  4. [a, b] = [b, a] // a = 2 b = 1 

5.删除Boolean 为 false 值

  1. const clean = dirty.filter(Boolean); 
  2. const clean = [0falsetrue, undefined, null''1215].filter(Boolean); 
  3. // [true, 12, 15] 

这将删除值等于:null,undefined,false,0 和空字符串('')。

6.转换元素类型

要将Number元素转换为String元素:

  1. const stringArray = numberArray.map(String); 
  2. const stringArray = [123].map(String); 
  3. ["1""2""3"

如果数组包含字符串,字符串原样保留。 这也可以用于将String元素转换为Number类型:

  1. const numberArray = stringArray.map(Number); 
  2. const stringArray = ["1""2""3"].map(String); 
  3. // [1, 2, 3] 

7.格式化对象为JSON代码

要以可读的格式显示JSON代码:

  1. const formatted = JSON.stringify(myObj, null4); 
  2. const formatted = JSON.stringify({name: 'Jhon', age: 18, address: 'sz'}, null4); 
  3. /* 
  4. { 
  5.  "name": "Jhon", 
  6.  "age": 18, 
  7.  "address": "sz" 
  8. } 
  9. */ 

该字符串化命令有三个参数。第一个是Javascript对象。第二个是可选函数,可用于在JSON进行字符串化时对其执行操作。最后一个参数指示要添加多少空格作为缩进以格式化JSON。省略最后一个参数,JSON将返回一个长行。如果myObj中存在循环引用,则会格式失败。

8.快速创建数字数组

要创建一个数组并用数字填充它,索引为零:

  1. const numArray = Array.from(new Array(10), (x, i)=> i); 
  2. // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 

9.随机生成六位数字验证码

  1. const code = Math.floor(Math.random() * 1000000).toString().padStart(6"0"); 
  2. // 942377 

10.身份证正则

  1. 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(查询部分)进行转换

  1. const searchObj = search => JSON.parse(`{"${decodeURIComponent(search.substring(1)).replace(/"/g, '\"').replace(/&/g, '","').replace(/=/g, '":"')}"}`); 
  2. // 假如请求url为 
  3. // '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' 
  4. // 那么 window.location.search 就为: 
  5. 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' 
  6. searchObj(search) 

格式化查询字符串得到如下对象:

12. JS 对象转 url 查询字符串

  1. const objectToQueryString = (obj) => Object.keys(obj).map((key) => `${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`).join('&'); 
  2. objectToQueryString({name: 'Jhon', age: 18, address: 'beijing'}) 
  3. // name=Jhon&age=18&address=beijing 

13.获取数组交集

  1. const similarity = (arr, values) => arr.filter(v => values.includes(v)); 
  2. similarity([123], [124]); // [1,2] 

14.检测设备类型

使用正则表达式来检测 navigator.userAgent 属性判断设备是在移动设备还是在台式机/笔记本电脑打开。

  1. const detectDeviceType = () =>/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent) ? 'Mobile' : 'Desktop'

15. 将数字转化为千分位格式

  1. const toDecimalMark = num => num.toLocaleString('en-US'); 
  2. toDecimalMark(12305030388.9087); // "12,305,030,388.909" 

16 多维数组转一维数组

  1. const deepFlatten = arr => [].concat(...arr.map(v => (Array.isArray(v) ? deepFlatten(v) : v))); 
  2. deepFlatten([1, [2], [[3], 4], 5]); // [1,2,3,4,5] 

17.过滤对象数组

  1. const reducedFilter = (data, keys, fn) =>data.filter(fn).map(el =>keys.reduce((acc, key) => {acc[key] =el[key];return acc;}, {})); 
  2. const data = [ 
  3.  { 
  4.  id: 1
  5.  name: 'john'
  6.  age: 24 
  7.  }, 
  8.  { 
  9.  id: 2
  10.  name: 'mike'
  11.  age: 50 
  12.  } 
  13. ]; 
  14. let a = reducedFilter(data, ['id''name'], item => item.age > 24); // [{ id: 2, name: 'mike'}] 

18.驼峰字字符串格式化

转换驼峰拼写的字符串为特定格式。

使用 String.replace() 去除下划线,连字符和空格,并将驼峰拼写格式的单词转换为全小写。省略第二个参数 separator ,默认使用 _ 分隔符。

  1. 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(); 
  2. fromCamelCase('someDatabaseFieldName'' '); // 'some database field name' 
  3. fromCamelCase('someLabelThatNeedsToBeCamelized''-'); // 'some-label-that-needs-to-be-camelized' 
  4. fromCamelCase('someJavascriptProperty''_'); // 'some_javascript_property' 

19.是否为绝对地址

  1. const isAbsoluteURL = str => /^[a-z][a-z0-9+.-]*:/.test(str); 
  2. isAbsoluteURL('https://google.com'); // true 
  3. isAbsoluteURL('ftp://www.myserver.net'); // true 
  4. isAbsoluteURL('/foo/bar'); // false 

20.获取两个日期相差天数

  1. const getDaysDiffBetweenDates = (dateInitial, dateFinal) => (dateFinal - dateInitial) / (1000 * 3600 * 24); 
  2. getDaysDiffBetweenDates(new Date('2017-12-13'), new Date('2017-12-22')); // 9 

21.数组去重

  1. const deDupe = (myArray) => [... new Set(myArray)]; 
  2. deDupe([1121334]) 
  3. // [1, 2, 3, 4] 

22.数组对象去重

  1. const uniqueElementsBy = (arr, fn) =>arr.reduce((acc, v) => {if (!acc.some(x => fn(v, x))) acc.push(v);return acc;}, []); 
  2. uniqueElementsBy([{id: 1, name: 'Jhon'}, {id: 2, name: 'sss'}, {id: 1, name: 'Jhon'}], (a, b) => a.id == b.id) 
  3. // [{id: 1, name: 'Jhon'}, {id: 2, name: 'sss'}] 

23. RGB 颜色转 16进制颜色

  1. const RGBToHex = (r, g, b) => ((r << 16) + (g << 8) + b).toString(16).padStart(6'0'); 
  2. RGBToHex(2551651); // 'ffa501' 

24. 常用密码组合正则

  1. const passwordReg = /(?!^(d+|[a-zA-Z]+|[~!@#$%^&*?]+)$)^[w~!@#$%^&*?]{8,20}$/; 
  2. // -长度8~20位字符,支持大小写字母、数字、符号三种字符中任意两种字符的组合 

25. 判断dom元素是否具有某个className

  1. const hasClass = (el, className) => new RegExp(`(^|\s)${className}(\s|$)`).test(el.className); 

【编辑推荐】

  1. 微软 GitHub 收购一个付费代码工具,然后免费开放了
  2. FB加密货币引发全球担忧 美议员要求暂停开发产品接受听证
  3. Oracle 发布基于 VS Code 的开发者工具,轻松使用 Oracle 数据库
  4. Catalyst代码曝光:macOS或迎来全新的Messages和Shortcuts应用
  5. 2019 Vue开发指南:你都需要学点啥?
【责任编辑:张燕妮 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

订阅专栏+更多

这就是5G

这就是5G

5G那些事儿
共15章 | armmay

111人订阅学习

16招轻松掌握PPT技巧

16招轻松掌握PPT技巧

GET职场加薪技能
共16章 | 晒书包

369人订阅学习

20个局域网建设改造案例

20个局域网建设改造案例

网络搭建技巧
共20章 | 捷哥CCIE

753人订阅学习

读 书 +更多

数据挖掘:概念与技术

本书第1版曾被KDnuggets的读者评选为最受欢迎的数据挖掘专著,是一本可读性极佳的教材。它从数据库角度全面系统地介绍了数据挖掘的基本概念...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO官微