值得收藏的 15 个 JavaScript 语句

关注

发布于: 4 小时前

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")); // 100console.log(toNumber2("99")); // 99

复制代码

4. 数字转字符串

const toString = (num) => num + "";// 显式地将字符串转换为数字const toString2 = (num) => num.toString();
const number = 100.0;
console.log(typeof toString(number)); // stringconsole.log(typeof toString2(number)); // string

复制代码

5. 验证数组是否为空

可以使用 isArray 方法确定为数组然后检查数组的长度是否大于 0 。

const isNotEmpty = (arr) => Array.isArray(arr) && arr.length > 0;
console.log(isNotEmpty([6, 7, 8])); // trueconsole.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()); // #4fd21fconsole.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 ]

复制代码

发布于: 4 小时前阅读数: 6

原文链接:【http://xie.infoq.cn/article/921934ae517a90ec1f7dfc52b】。文章转载请联系作者。

devpoint

关注

细节的追求者 2011.11.12 加入

专注前端开发，用技术创造价值！

发布

暂无评论

创作场景

值得收藏的 15 个 JavaScript 语句

1. 两个日期间的天数

2. 首字母大写

3. 字符串转数字

4. 数字转字符串

5. 验证数组是否为空

6. 数组合并

7. 数组排序

8. 生成随机十六进制颜色

9. 获取 Cookie

10. 获取用户选择的文本

11. 变量值交换

12. 获取数组最后一项

13. 使用方括号动态设置对象的键

14. 使用 || 设置默认值

15. 使用 length 缩短数组

devpoint

评论

14. 使用 `||` 设置默认值