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

目录
  • 1. 数组求和
  • 2. 使用 length 属性更改数组
  • 3. 数组元素随机打乱
  • 4. 过滤唯一值
  • 5. 逗号运算符
  • 6. 使用数组解构交换数据元素
  • 7. 使用 && 代替 If 条件判断为真的条件
  • 总结

本文译文，采用意译。

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

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开发小技巧内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JavaScript调试技巧之console.log()详解

    JavaScript调试技巧之console.log()详解

    一.什么是console.log()?除了一些很老版本的浏览器,现今大多数浏览器都自带调试功能:即使没有调试功能,也可以通过安装插件来进行补充.比如,老版本的Firefox没有自带调试工具,在这种情况下可以通过安装Firebug插件来添加调试功能.在具备调试功能的浏览器上,window对象中会注册一个名为console的成员变量,指代调试工具中的控制台.通过调用该console对象的log()函数,可以在控制台中打印信息.比如,以下代码将在控制台中打印"Sample log": 复制代

  • Javascript技巧之不要用for in语句对数组进行遍历

    一,为什么不要用for in语句 jqModal这个jquery插件估计很多人都使用过,在jqModal源码内部,有一个函数为hs,其中有个嵌套循环如下, 复制代码 代码如下: for(var i in {jqmShow:1,jqmHide:1}) for(var s in this[i]) if(H[this[i][s]]) H[this[i][s]].w[i](this); return F; } 第一个for in遍历的目标是个匿名对象,没有问题. 第二个for in遍历,根据上下文确认t

  • JavaScript截取、切割字符串的技巧

    对于字符串的切割截取平时所用可能不是特别多,而且分的比较细,所以自备自查.有备无患. 由于之前所有均在一个demo测试,若是哪里打错了,敬请谅解.一些其余属性找时间继续添加. 1.函数:split() 功能:使用一个指定的分隔符把一个字符串分割存储到数组 例子: str="jpg|bmp|gif|ico|png"; arr=str.split("|"); //arr是一个包含字符值"jpg"."bmp"."gif&q

  • JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)

    本文实例总结了JS数组排序技巧.分享给大家供大家参考,具体如下: ① 冒泡排序 bubbleSort:function(array){ var i = 0, len = array.length, j, d; for(; i<len; i++){ for(j=0; j<len; j++){ if(array[i] < array[j]){ d = array[j]; array[j] = array[i]; array[i] = d; } } } return array; } ② js

  • 必备的JS调试技巧汇总

    必备的JS调试技巧汇总

    前言:任何一个编程者都少不了要去调试代码,不管你是高手还是菜鸟,调试程序都是一项必不可少的工作.一般来说调试程序是在编写代码之后或测试期修改Bug 时进行的,往往在调试代码期间更加能够体现出编程者的水平高低以及分析问题的准确度.不少初学者在寻找错误原因时,总是不得要领,花费了大量时间却无法解决一些最终证明是相当简单的Bug.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今天,如何在前端开发中降低开发成本,

  • javascript小技巧 超强推荐第1/5页

    事件源对象  event.srcElement.tagName  event.srcElement.type  捕获释放  event.srcElement.setCapture();   event.srcElement.releaseCapture();   事件按键  event.keyCode  event.shiftKey  event.altKey  event.ctrlKey  事件返回值  event.returnValue  鼠标位置  event.x  event.y  窗体

  • JS调试必备的5个debug技巧

    JS调试必备的5个debug技巧

    1. debugger; 我以前也说过,你可以在JavaScript代码中加入一句debugger;来手工造成一个断点效果.需要带有条件的断点吗?你只需要用if语句包围它: 复制代码 代码如下: if (somethingHappens) { debugger; } 但要记住在程序发布前删掉它们. 2. 设置在DOM node发生变化时触发断点 有时候你会发现DOM不受你的控制,自己会发生一些奇怪的变化,让你很难找出问题的根源. 谷歌浏览器的开发工具里有一个超级好用的功能,专门可以对付这种情况,

  • JS截取与分割字符串常用技巧总结

    本文实例讲述了JS截取与分割字符串的常用方法.分享给大家供大家参考,具体如下: JS截取字符串可使用 substring()或者slice()   函数:substring() 定义:substring(start,end)表示从start到end之间的字符串,包括start位置的字符但是不包括end位置的字符. 功能:字符串截取,比如想从"MinidxSearchEngine"中得到"Minidx"就要用到substring(0,6) 例子: var src=&q

  • js中字符替换函数String.replace()使用技巧

    定义和用法 replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串. 语法 stringObject.replace(regexp/substr,replacement)参数 描述 regexp/substr 必需.规定子字符串或要替换的模式的 RegExp 对象. 请注意,如果该值是一个字符串,则将它作为要检索的直接量文本模式,而不是首先被转换为 RegExp 对象.   replacement 必需.一个字符串值.规定了替换文本或生成替换文本的函数.

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

    目录 1. 数组求和 2. 使用 length 属性更改数组 3. 数组元素随机打乱 4. 过滤唯一值 5. 逗号运算符 6. 使用数组解构交换数据元素 7. 使用 && 代替 If 条件判断为真的条件 总结 本文译文,采用意译. 下面这些方法对于我来说很有作用,自从我发现了这些操作. 1. 数组求和 假设你有下面的数字数组:let numbers = [2,52,55,5]. 计算求和,我们会想到使用 for,是吧. 但是我们可以使用这行代码完成let sum = numbers.red

  • JavaScript编程的10个实用小技巧

    在这篇文章中,我将列出10个Javascript实用小技巧,主要面向Javascript新手和中级开发者.希望每个读者都能至少从中学到一个有用的技巧. 1.变量转换 看起来很简单,但据我所看到的,使用构造函数,像Array()或者Number()来进行变量转换是常用的做法.始终使用原始数据类型(有时也称为字面量)来转换变量,这种没有任何额外的影响的做法反而效率更高. 复制代码 代码如下: var myVar   = "3.14159",str     = ""+ m

  • Kotlin开发的一些实用小技巧总结

    前言 随着Google I/O大会的召开,Google宣布将支持Kotlin作为Android的开发语言,最近关于Kotlin的文章.介绍就异常的活跃. 本文主要给大家介绍了关于Kotlin开发的一些实用小技巧,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 1.Lazy Loading(懒加载) 延迟加载有几个好处.延迟加载能让程序启动时间更快,因为加载被推迟到访问变量时. 这在使用 Kotlin 的 Android 应用程序而不是服务器应用程序中特别有用.对于 Androi

  • JavaScript前端开发时数值运算的小技巧

    1.格式化金钱值 const ThousandNum = num => num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); const money = ThousandNum(20190214); // money => "20,190,214" 2.取整代替正数的Math.floor(),代替负数的Math.ceil() const num1 = ~~ 1.69; const num2 = 1.6

  • Android Jetpack Compose开发实用小技巧

    Android Jetpack Compose开发实用小技巧

    目录 前言 实用小技巧 如何移除View点击阴影 Text文本如何垂直居中 如何移除Button的点击阴影 Dialog宽度如何全屏 如何提升编码效率 前言 在Compose开发的过程中,我们会经常遇到一些看起来很简单却不知道如何处理的小问题,比如去除点击阴影.Dialog全屏等问题,本文记录了这些常见小问题的处理方式.如有更好方案欢迎大佬们交流探讨- 实用小技巧 如何移除View点击阴影 这里的View指的是除了Button系列的之外,如Button.TextButton等,也就是自身没有on

  • jQuery实用小技巧_输入框文字获取和失去焦点的简单实例

    jQuery实用小技巧_输入框文字获取和失去焦点的简单实例 <input id="txt" class="text1" type="text" /> <script src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(function () { $("inp

  • python 提高开发效率的5个小技巧

    很多时候学习是一种难者不会,会者不难的事情. 下面的5个python技巧是性价比极高的知识点,一学就会,不难但是相当管用. 使用交互模式 使用python -i xxxx.py可以直接进入python的交互模式,可以很方便的调用xxxx.py中定义的方法和函数,特别适合调试没有main()方法的文件,强力推荐. 使用pdb进行调试 很多从c++/java转到python的同学可能对python没有断点功能相当失望. 其实python自带的pdb库就可以解决这个问题. 看这个例子. def sum

  • 关于Go你不得不知道的一些实用小技巧

    目录 Go 箴言 Go 之禅 代码 使用 go fmt 格式化 多个 if 语句可以折叠成 switch 用 chan struct{} 来传递信号, chan bool 表达的不够清楚 30 * time.Second 比 time.Duration(30) * time.Second 更好 用 time.Duration 代替 int64 + 变量名 按类型分组 const 声明,按逻辑和/或类型分组 var 不要在你不拥有的结构上使用 encoding/gob 不要依赖于计算顺序,特别是在

  • 总结MySQL建表、查询优化的一些实用小技巧

    MySQL建表阶段是非常重要的一个环节,表结构的好坏.优劣直接影响着后续的管理维护,赶在明天上班前分享总结个人MySQL建表.MySQL查询优化积累的一些实用小技巧. 技巧一.数据表冗余记录添加时间与更新时间 我们用到的很多数据表大多情况下都会有表记录的"添加时间(add_time)",我建议大家再新增一个记录"更新时间(update_time)"字段,在我的工作里需要为市场部.运营部等建立各种报表,而很多报表里的数据都是需要到大记录表里去查询的,如果直接查询大表的

  • 常用的10个Python实用小技巧

    大家好,都说追女孩方法大于态度,学Python也是,今天就给大家分享的是我在用Python编写程序时常用的一些小技巧. 1.多次打印同一个字符 在Python中,不用特地写一个函数来重复打印同一个字符,直接使用Print就可以 tem = 'I Love Python ' print(tem * 3) I Love Python I Love Python I Love Python 2.在函数内部使用生成器 在写Python程序时,我们可以在函数内部直接使用生成器,这样可以使代码更简洁. su

随机推荐