7 个 JavaScript 开发小技巧

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

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第23天,点击查看活动详情


本文译文,采用意译。


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


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 的技巧,这些技巧能够帮你节省时间,提高生产力。



相关文章
|
21天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
402 1
|
1月前
|
JavaScript 前端开发 NoSQL
深入浅出Node.js后端开发
本文将引导你了解Node.js的基础知识,包括安装、运行环境搭建以及简单的代码示例。通过阅读本文,你将学会如何利用Node.js进行后端开发,并理解异步编程和事件驱动模型的核心概念。文章还将介绍一些实用的库和框架,帮助你快速开始Node.js项目。
56 4
|
1月前
|
JavaScript 前端开发 开发者
VUE 开发——Node.js学习(一)
VUE 开发——Node.js学习(一)
51 3
|
25天前
|
JavaScript 前端开发 安全
TypeScript的优势与实践:提升JavaScript开发效率
【10月更文挑战第8天】TypeScript的优势与实践:提升JavaScript开发效率
|
25天前
|
JavaScript 前端开发 IDE
深入理解TypeScript:提升JavaScript开发的利器
【10月更文挑战第8天】 深入理解TypeScript:提升JavaScript开发的利器
28 0
|
3天前
|
Web App开发 存储 JavaScript
深入浅出Node.js后端开发
【10月更文挑战第31天】本文将引导你进入Node.js的奇妙世界,探索其如何革新后端开发。通过浅显易懂的语言和实际代码示例,我们将一起学习Node.js的核心概念、搭建开发环境,以及实现一个简单但完整的Web应用。无论你是编程新手还是希望拓展技术的开发者,这篇文章都将为你打开一扇通往高效后端开发的大门。
|
3天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
【10月更文挑战第30天】本文将通过一个Node.js的简单示例,引导你进入Node.js的世界。我们将从基础概念讲起,然后一步步深入到代码实现,最后总结Node.js在后端开发中的优势和应用场景。无论你是前端开发者还是后端新手,这篇文章都将为你打开一扇了解Node.js的大门。
11 2
|
12天前
|
开发框架 JavaScript 前端开发
HarmonyOS UI开发:掌握ArkUI(包括Java UI和JS UI)进行界面开发
【10月更文挑战第22天】随着科技发展,操作系统呈现多元化趋势。华为推出的HarmonyOS以其全场景、多设备特性备受关注。本文介绍HarmonyOS的UI开发框架ArkUI,探讨Java UI和JS UI两种开发方式。Java UI适合复杂界面开发,性能较高;JS UI适合快速开发简单界面,跨平台性好。掌握ArkUI可高效打造符合用户需求的界面。
54 8
|
10天前
|
JavaScript 前端开发
javascript开发的简单的弹幕插件
这是一个原生javascript开发的简单的弹幕插件,具有美观、易用,占用的资源较低等特点,可以给弹幕设置内容、颜色、头像、链接地址等属性,鼠标悬停等,简单实用,欢迎下载!
29 5
|
1月前
|
前端开发 JavaScript 关系型数据库
前端的全栈之路:基于 Vue3 + Nest.js 全栈开发的后台应用
这篇文章介绍了一个名为Vue3Admin的全栈后台应用,前端基于SoybeanAdmin二次开发,后端基于Nest.js。主要使用了Vue3.5、AntDesignVue、UnoCSS、Pinia等前端技术栈,以及Nest.js、PostgreSQL、Prisma等后端技术栈。文章详细描述了系统的功能设计,包括动态国际化语言配置、登录用户操作日志、用户和角色权限映射、动态路由菜单、消息公告发布及前端业务功能等。同时,也提供了项目运行所需的环境和依赖,以及如何拉取代码、安装依赖和启动项目的方法。最后,文章展示了项目的演示图,并对项目进行了总结,指出项目未经严格测试,仅供学习交流使用。
前端的全栈之路:基于 Vue3 + Nest.js 全栈开发的后台应用