![值得收藏的15个JavaScript语句]()
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 ]
