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

更新日期: 2023-06-07阅读: 1.2k标签: 技巧

这篇文章是面向新手的,但如果幸运的话,希望能给各位大佬们带来一些小小的启发。


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)

不过,ES6的可选链可以让我们彻底抛弃掉上面的写法了,我们可以直接这样做:

console.log(abc?.ss?.aa?.bb?.cc)

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" 。

感谢 @hhhyyymmm 指正,我之前这里使用了加法运算符。
let myValue = '12';
myValue = myValue - 1;
console.log(myValue); // 11

// 当然也可以转换 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

希望本文能够帮助到你, 虽然真的很基础很基础。

作者:道长王jj
链接:https://juejin.cn/post/7239895900297740344

链接: https://fly63.com/article/detial/12505

微信小程序技巧_你需要知道的小程序开发技巧

一直以来进行了比较多的微信小程序开发... 总会接触到一些和官方组件或 api 相关或其无法解决的需求,于是决定在这里小小的整理一下微信小程序开发的一些技巧

微信小程序分享到朋友圈方法与技巧

小程序提供onShareAppMessage 函数,此函数只支持分享给我微信朋友,小程序如何分享到朋友圈呢?使用canvas绘制一张图片,并用wx.previewImage预览图片,然后长按图片保存图片到手机。

前端新手程序员不知道的 20个小技巧

前端新手程序员不知道的 20个小技巧:作为前端开发者,使用双显示器能大幅提高开发效率、学编程最好的语言不是PHP,是English、东西交付之前偷偷测试一遍、问别人之前最好先自己百度,google一下、把觉得不靠谱的需求放到最后做,很可能到时候需求就变了...

小技巧:检查你本地及公共 IP 地址

本地的 IP 地址是分配给你计算机上的内部硬件或虚拟网卡的本地/私有 IP 地址。根据你的 LAN 配置,上述 IP 地址可能是静态或动态的。公共的 IP 地址是你的 Internet 服务提供商(ISP)为你分配的公共/外部 IP 地址。

12 个 CSS 高级技巧汇总

使用 :not() 在菜单上应用/取消应用边框;给body添加行高;所有一切都垂直居中;逗号分隔的列表;使用负的 nth-child 选择项目;对图标使用SVG;优化显示文本;对纯CSS滑块使用 max-height;继承 box-sizing

26 个 jQuery使用技巧

禁用右键点击;禁用搜索文本框;新窗口打开链接;检测浏览器;预加载图片;样式筛选;列高度相同;字体大小调整;返回页面顶部;获取鼠标的xy坐标;验证元素是否为空;替换元素

提高网站加载速度的一些小技巧

为你网站的用户留下良好的第一印象是非常必要的。随着商业领域的竞争,拥有一个吸引人的网站可以帮助你脱颖而出。研究表明,如果加载时间超过3秒,会有 40% 的用户放弃访问你的网站

《CSS世界》中提到的实用技巧

清除浮动主要用于子元素浮动(float)之后,父元素无法撑起高度和宽度。文字少时居中,多时靠左因为div嵌套着p,所以p的尺寸并不会超过div。但是要注意,当p的内容为英文单词组成的时候

不常被提及的JavaScript小技巧

这次我们主要来分享11个在日常教程中不常被提及的JavaScript小技巧,他们往往在我们的日常工作中经常出现,但是我们又很容易忽略。Set类型是在ES6中新增的,它类似于数组,但是成员的值都是唯一的

CSS-in-JS 库 styled-class

为什么要在JavaScript里写CSS?避免命名全局污染,条件和动态样式(比如选择主题色之类的),在框架层面进行限制或补充(比如补全供应商前缀),避免业务人员使用奇技淫巧

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!