记录--JavaScript 中有趣的 9 个常用编码套路

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

1️⃣ set对象：数组快速去重

常规情况下，我们想要筛选唯一值，一般会想到遍历数组然后逐个对比，或者使用成熟的库比如lodash之类的。

不过，ES6带来了一个新玩意儿！它引入了一个全新的对象类型：Set！而且，如果结合上...展开运算符，我们可以超级快速地创建一个已经去重的全新数组！

const arr = [10, 10, 10, 20, 20, 30, 40, 40, 50, 60, 60, 70];

const uniArr = [...new Set(array)];

console.log(uniArr);

// [10, 20, 30, 40, 50, 60, 70]

这个技巧只适用于包含基本类型的数组，比如undefined、null、boolean、string和number。

但是要记住哦，如果数组里面还有对象、函数或其他数组的话，就不能用这个方法了！

2️⃣ include方法：简化（ `||` 或）条件判断

当我们使用逻辑运算符||进行条件判断时，如果有很多可选值，代码会变得冗长。

不过，我们可以使用includes方法来简化对数组的遍历操作，方便地判断数组是否包含某个特定的元素。

这样一来，我们就可以更简洁地列出可选值，而不必写一长串的条件判断语句。includes方法可以帮助我们轻松判断数组中是否存在指定的元素

const myNum = '3';

const numArr = ['1', '2', '3'];



// 使用 ||

if (myNum === '1' || myNum === '2' || myNum === '3') {

    //……

}



// 使用 include

if (numArr.includes(myNum)) {

    //……

}

3️⃣ 截断数组：改变length就可以

操作数组时，我们通常会优先使用array对象中的高级函数。

不过，我这里要介绍一种更简单的方法来改变数组长度，我喜欢它的原因是它非常直观且易读。

只需使用length属性并传递一个数字，就可以改变数组的长度。这样做非常方便！

let array = ['1', '2', '3', '4'];

array.length = 2;

console.log(array); // ['1', '2']

当然，如果你更注重性能，还是请使用 array.slice()

4️⃣ 数字分割符：提高数字可读性

若要提高数字的可读性，你可以使用下划线作为分隔符来更好地区分数字的各个部分。这样做可以让数字更易读，让人一目了然

const num = 1_000_000_000;



console.log(num); // 1000000000

5️⃣ 控制台打印：用对象包裹更清晰

在使用console.log()时，你可以将参数括在大括号中，这样可以在控制台输出时同时显示变量的名称和值。这种方式非常方便，让你更清晰地了解每个变量的内容

const name = "道长王jj";

console.log({ name });



// {

//     "name": "道长王jj"

// }

6️⃣ 短路运算：简化条件判断

if...else条件判断是代码过程中最常用的，几乎在任何情况下，我们都会快速地敲下它来控制逻辑流程。

不过，有时候我们也希望代码更加简洁、快速，不占那么多篇幅。我们想尽可能地简洁且快速，于是就会用到三元运算符：

const num = 75;

const result1 = num > 100 ? '大于100' : '小于100';

但是我在这里并不是推荐使用“三元运算”，其实有时候三元运算符可能会让代码逻辑变得有点复杂哦！比如这样：

const result2 = num > 100 ? (num > 200 ? '大于200' : '介于100和200之间') : '小于100';

这个时候，使用 && 和 || 这类逻辑运算符反而能更简洁的表达算式。

举个例子：

// 假设，我们有三个已经打过分的相亲对象必须选择一个来当女朋友，使用 `&&` 可以很好的帮我们做出选择。

const one = 8;

const two = 9;

const three = 10;

// 返回10

console.log(one && two && three);

// 返回0

console.log(0 && null);

// 当然，如果你足够独特~~（变态）~~，就是不要女朋友，如果选只选最差的，你可以使用 `||` 来帮你做吹选择。

const one = 8;

const two = 9;

const three = 10;

// 返回8

console.log(one || two || three);

// 返回null

console.log(0 || null);

哦，这个情况在工作场景中确实很常见。

假设我们想返回变量的 length ，但我们不确定接口会不会给我们需要的类型。

这个时候我们就可以使用 if/else 语句来检查是可接受的类型，但它会让我们的代码非常臃肿。

这时候，我们可以使用短路运算来简化代码，而且有极高的健壮性：

// 使用if

let temp = getArray();



if (!temp) {

    tempLength = 0;

} else {

    tempLength = temp.length

}



// 使用 ||

// 如果变量 tempArray 为真，则将返回该变量。否则，将返回 []

const temp = (tempArray || []).length;

7️⃣ 可选链：更加安全地访问对象属性

你有没有遇到过访问嵌套对象属性的困扰？

就是有时候你根本不确定这个对象或者它的子属性到底存不存在，结果就报错了！以至于程序崩溃无法运行

console.log(abc.ss)

// ceError: abc is not defined

//     at <anonymous>:1:1

// (匿名) @ VM190795

为了不让报错阻止我们的程序运行，我们通常会将它包装在一个if……else代码块中：

if (abc.ss) {

  console.log(abc.ss);

} else {

  console.log('没有abc这个变量喏~');

}



// 还可以用短路运算

console.log(abc && abc.ss)

8️⃣ 巧用运算符：快速类型转换

在这之前需要科普一些小知识：

除了常规的true和false之外，其他变量也可以被当成true 或者 false。

除了0、""(空字符串)、null、undefined、NaN、false 之外呢，JavaScript中的所有其他值都是"真的"哦！

所以呢，基于这个认知。

我们可以使用负运算符 ! ，将类型转换为 "boolean" 。

const x = Boolean(expression);     // 推荐

const x = !!(expression);          // 推荐

const x = new Boolean(expression); // 不太好

我们可以使用连接运算符 + 后跟一组空引号 ''，将类型转换为 "string" 。

const value = 12 + '';

console.log(value); // '12'

我们可以使用加法运算符 +，将类型转换为 "number" 。

const value = '12';

value = value + 1;

console.log(value); // 13



// 当然也可以转换 Boolean 变成 Number

// 工作中不推荐这样用！！！！

console.log(+true); // 1

console.log(+false); // 0

9️⃣ 快速运算：更快更简洁的数学运算操作符

以前我们在使用JavaScript进行数学运算时，总是要借助Math库进行运算。

很奇怪的是，但是很多教程并没有提醒我们，ES7其实带来的全新运算符

如果想示乘方操作，通常我们会调用Math.pow(5, 7)这个方法。但是现在我们可以使用幂运算符**了，而且性能更快更好。

console.log(5 ** 7); // 78125

如果想将浮点数转换为整数，通常我们会使用Math.floor()、Math.ceil()或Math.round()这些方法。不过，其实可以使用 | 将浮点数直接截断为整数。这个技巧可以让你的代码更简洁高效哦！

// 正数，则向下舍入

console.log(34.9 | 0);  // Result: 34

// 负数，则向上舍入

console.log(-12.9 | 0); // Result: -12

以前我们只取千分位需要进行类型转换后才能进行取数

let str = "33545";

Number(str.substring(0, str.length - 3)); // 33

但是我们可以更优雅地这样做：

console.log(33545 / 1000 | 0)  // Result: 33

本文转载于:

https://juejin.cn/post/7239895900297740344

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。