JavaScript开发的七个实用小技巧(很有用)

 更新时间:2022年04月24日 10:27:07   作者:Jimmy  
日常开发中,我们经常需要编写大量的js代码,下面这篇文章主要给大家介绍了关于JavaScript开发的七个实用小技巧,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

本文译文,采用意译。

下面这些方法对于我来说很有作用,自从我发现了这些操作。

1. 数组求和

假设你有下面的数字数组:let numbers = [2,52,55,5]

计算求和,我们会想到使用 for,是吧。

但是我们可以使用这行代码完成let sum = numbers.reduce((x,y) => return x+y)。如下:

let numbers = [2, 52, 55, 5];
let sum = numbers.reduce((x, y) => x + y);
console.log(sum); // 114

2. 使用 length 属性更改数组

我们可以更改数组的大小,通过更改 length 属性。

我们看下下面的操作。

let array = [11,12,12,122,1222];
console.log(array.length); // 5
array.length = 2;
console.log(array); // [11, 12]

3. 数组元素随机打乱

我们总会需要得到随机的数据,但是我们需要从特定的数据中的获取。

那么你可以使用下面的小技巧:

let array = [11, 12, 13, 14, 150, 15, 555, 556, 545];
let randomArray = array.sort(function() {
  return Math.random() - 0.5
});
console.log(randomArray); // [150, 545, 15, 14, 11, 12, 13, 556, 555]
// 当然,生成的随机值,你每次运行代码都会有有所不同,上面的 console.log 我只是取了其中一种

4. 过滤唯一值

有时我们需要获取唯一的值。比如:我们在社交媒体上有公共的朋友,我们需要把他们筛选出来。(译者加)简单来说,类似求交集。

对于这种情况,我们可以使用 sets。

set 是定义明确的数据集合,即元素非空,不同且唯一。

let array = [11, 12, 12, 222];
const unique = [...new Set(array)];
console.log(unique); // [11, 12, 222]

5. 逗号运算符

逗号运算符 (,) 从左到右执行每个运算,返回最后一个操作数。

比如:

let x = 1;
x = (x++, x);
console.log(x); // 2

x = (2, 3);
console.log(x); // 3

6. 使用数组解构交换数据元素

交换数据从来没有像现在这样容易,我们一般交换数据元素会先命名一个临时变量,就比如下面:

let temporary = b;
b = a;
a = temporary;

这样有些繁琐,而且看着不舒服。那么替代的优化方案来了,你可以使用数组解构的方式,如下:

let x = 5;
let y = 10;
[x, y] = [y, x];
console.log(x); // 10
console.log(y); // 5

7. 使用 && 代替 If 条件判断为真的条件

&& 操作符,我们平时很好用,但是你了解后,相信你之后会常用。

// 使用 if 的条件判断
if(twitter) {
  followme("adarsh____gupta")
}

// 你可以替换成这样
twiiter && followme("adarsh____gupta")

总结

我们讲解了一些少听说 JavaScript 的技巧,这些技巧能够帮你节省时间,提高生产力。

原文链接请戳:https://blog.bitsrc.io/2-3-javascript-tricks-that-you-should-know-bfb9827fd835。

到此这篇关于JavaScript开发的七个实用小技巧的文章就介绍到这了,更多相关JS开发小技巧内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 原生JS实现京东查看商品点击放大

    原生JS实现京东查看商品点击放大

    这篇文章主要为大家详细介绍了原生JS实现京东查看商品点击放大,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • JS技巧动手实现红包兔子雨效果示例详解

    JS技巧动手实现红包兔子雨效果示例详解

    这篇文章主要为大家介绍了JS技巧动手实现红包兔子雨效果示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • Underscore.js 的模板功能介绍与应用

    Underscore.js 的模板功能介绍与应用

    Underscore是一个非常实用的JavaScript库,提供许多编程时需要的功能的支持,他在不扩展任何JavaScript的原生对象的情况下提供很多实用的功能,需要了解的朋友可以详细参考下
    2012-12-12
  • js 针对html DOM元素操作等经验累积

    js 针对html DOM元素操作等经验累积

    这篇文章主要介绍了js 针对html DOM元素操作等经验累积,需要的朋友可以参考下
    2014-03-03
  • jquery及原生js获取select下拉框选中的值示例

    jquery及原生js获取select下拉框选中的值示例

    有一id=test的下拉框,怎么拿到选中的那个值呢?本文将采用javascript原生的方法及jquery方法(前提是已经加载了jquery库)来简单实现下
    2013-10-10
  • 分析uniapp如何动态获取接口域名

    分析uniapp如何动态获取接口域名

    本文主要介绍了uniapp如何动态获取接口域名,感兴趣的同学,可以参考下,并且试验一下。
    2021-06-06
  • 处理JavaScript浮点数精度问题的解决方案

    处理JavaScript浮点数精度问题的解决方案

    在开发过程中,特别是涉及到金额计算或需要精确比较的场景,浮点数精度问题是一个常见而重要的挑战,本文将介绍在JavaScript中如何识别、理解和解决这些问题,并提供一些实用的技巧和建议,需要的朋友可以参考下
    2024-06-06
  • JS实现小球的弹性碰撞效果

    JS实现小球的弹性碰撞效果

    这篇文章主要介绍了JS实现小球的弹性碰撞效果 ,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-11-11
  • JavaScript 学习小结(适合新手参考)

    JavaScript 学习小结(适合新手参考)

    JavaScript常量又称字面常量,是固化在程序代码中的信息。变量的主要作用是存取数据,提供一个存取信息的容器。
    2009-07-07
  • Javascript Echarts空气质量地图效果详解

    Javascript Echarts空气质量地图效果详解

    这篇文章主要介绍了详解Javascript利用echarts画空气质量地图,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-10-10

最新评论