devpoint.cn

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 ]