JavaScript 可以处理很多事情，从复杂的框架到API的处理，需要学习的东西太多了。今天来分享 15 个简单且可能常用到函数语句。
1. 两个日期间的天数
这个是一个常见的功能，在涉及统计相关的需求中基本都需要使用。
const diffDays = (startDate, endDate) => Math.ceil( Math.abs(new Date(startDate) - new Date(endDate)) / (1000 * 60 * 60 * 24) ); console.log(diffDays("2021-06-01", "2021-06-23")); // 22
2. 首字母大写
使用此函数，可以轻松将一串字符串的第一个字母大写。
const capitalize = (strContent) => `${strContent.charAt(0).toUpperCase()}${strContent.slice(1)}`; console.log(capitalize("devPoint")); // DevPoint
3. 字符串转数字
在与后台API交互数据，通常在From表单中输入的数字一般为数字字符串，在提交到后台前需要转为数字。而使用类型强制将字符串转换为数字是最直接的方法。
const toNumber = (str) => +str; // 显式地将字符串转换为数字 const toNumber2 = (str) => Number(str); console.log(toNumber("100")); // 100 console.log(toNumber2("99")); // 99
4. 数字转字符串
const toString = (num) => num + ""; // 显式地将字符串转换为数字 const toString2 = (num) => num.toString(); const number = 100.0; console.log(typeof toString(number)); // string console.log(typeof toString2(number)); // string
5. 验证数组是否为空
可以使用 isArray 方法确定为数组然后检查数组的长度是否大于 0 。
const isNotEmpty = (arr) => Array.isArray(arr) && arr.length > 0; console.log(isNotEmpty([6, 7, 8])); // true console.log(isNotEmpty([])); // false
6. 数组合并
合并数组有很多种不同的方式，如 concat 方法、扩展操作符 …。如果需要考虑去重，则可以考虑 Set 。
const mergeArray = (a, b) => a.concat(b); const mergeBySpread = (a, b) => [...a, ...b]; const mergeBySet = (a, b) => [...new Set(a.concat(b))]; const arr1 = [6, 7, 8, "b"]; const arr2 = ["a", 7, 8, "b"]; console.log(mergeArray(arr1, arr2)); // [6, 7, 8, 'b','a', 7, 8, 'b'] console.log(mergeBySpread(arr1, arr2)); // [6, 7, 8, 'b','a', 7, 8, 'b'] console.log(mergeBySet(arr1, arr2)); // [ 6, 7, 8, 'b', 'a' ]
7. 数组排序
JavaScript 的内置排序方法很不好用，它不能很好地处理数字，所以这个函数是一种对数组进行排序的简单方法。
const sort = (arr) => arr.sort((a, b) => a - b); console.log(sort([10, 8, 2, 68, 3])); // [ 2, 3, 8, 10, 68 ]
8. 生成随机十六进制颜色
生成RGB颜色稍微简单一点，但创建随机的十六进制颜色可能会有点复杂。这个函数将可以生成一个随机的十六进制颜色。
const randomColor = () => `#${Math.random().toString(16).slice(2, 8).padStart(6, "0")}`; const randomColor2 = () => `#${(~~(Math.random() * (1 << 24))).toString(16)}`; console.log(randomColor()); // #4fd21f console.log(randomColor2()); // #2c456b
9. 获取Cookie
前端通过 document.cookie 获取当前页面的 cookie ，然后检索置顶名称的 cookie 值并将它返回。
const getCookie = (name, strCookie) => `; ${strCookie}`.split(`; ${name}=`).pop().split(";").shift(); console.log(getCookie("_ga", document.cookie)); // GA1.2.918318285.1606740576
10. 获取用户选择的文本
当用户使用光标选择文本时，可以使用 window 对象上的 getSelection 方法来获取。
const getSelectedText = () => window.getSelection().toString(); console.log(getSelectedText());
11. 变量值交换
有时，需要交换 2 个变量的值，或者面试过程常见，如何在没有第三个变量的情况下交换两个变量的值。下面代码可以简单做到：
let a = 1; let b = 2; [a, b] = [b, a]; console.log(a, b); // 2 1
12. 获取数组最后一项
通常获取数组最后一项是通过数组长度来获取，这里介绍 slice 方法的妙用。
const getLast = (arr) => arr.slice(-1)[0]; const arrTest = [1, 2, 3, 4, 5]; console.log(getLast(arrTest)); // 5
13. 使用方括号动态设置对象的键
有些时候，在创建对象时，希望根据特定的条件或变量更改对象的属性名，就可以借助方括号 [] 。
const dynamic = "url"; const item = { brand: "DevPoint", [dynamic]: "devpoint.cn", }; console.log(item); // { brand: 'DevPoint', url: 'devpoint.cn' }
14. 使用 || 设置默认值
为变量设置默认值，避免无法处理的数据出现异常。
const getTitle = (obj)=>obj.title || "";
15. 使用 length 缩短数组
缩短数组的简单方法是重新定义它的长度属性，不过这样会更改数组，意味着将丢失数组中其他值。
const shortenArray = (arr, count) => { arr.length = count; return arr; }; const array = [0, 1, 2, 3, 4, 5, 6, 6, 8, 9]; const shortArr = shortenArray(array, 4); console.log(array); // [ 0, 1, 2, 3 ] console.log(shortArr); // [ 0, 1, 2, 3 ] // 修改后 const shortenArray = (arr, count) => { const arrTemp = [...arr]; arrTemp.length = count; return arrTemp; }; const array = [0, 1, 2, 3, 4, 5, 6, 6, 8, 9]; const shortArr = shortenArray(array, 4); console.log(array); // [0, 1, 2, 3, 4, 5, 6, 6, 8, 9] console.log(shortArr); // [ 0, 1, 2, 3 ]
