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



相关文章
|
18天前
|
开发框架 JavaScript 安全
js开发:请解释什么是Express框架,以及它在项目中的作用。
【4月更文挑战第24天】Express是Node.js的Web开发框架,简化路由管理,支持HTTP请求处理。它包含中间件系统用于日志、错误处理和静态文件服务,集成多种模板引擎如EJS、Jade、Pug。框架还提供安全中间件提升应用安全,并具有良好的可扩展性,便于项目功能扩展和开发效率提升。
25 3
|
18天前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可以是任意类型且有序,与对象的字符串或符号键不同;Set存储唯一值,无重复。两者皆可迭代,支持for...of循环。Map有get、set、has、delete等方法,Set有add、delete、has方法。示例展示了Map和Set的基本操作。
21 3
|
18天前
|
JavaScript 前端开发
js开发:请解释什么是ES6的async/await,以及它如何解决回调地狱问题。
ES6的async/await是基于Promise的异步编程工具,简化了代码并提高可读性。它避免回调地狱,将异步操作转化为Promise,使得代码同步化。错误处理更直观,无需嵌套回调或.then()。
18 1
|
18天前
|
JavaScript 前端开发 编译器
js开发: 请解释什么是Babel,以及它在项目中的作用。
**Babel是JavaScript编译器,将ES6+代码转为旧版JS以保证兼容性。它用于前端项目,功能包括语法转换、插件扩展、灵活配置和丰富的生态系统。Babel确保新特性的使用而不牺牲浏览器支持。** ```markdown - Babel: JavaScript编译器,转化ES6+到兼容旧环境的JS - 保障新语法在不同浏览器的运行 - 支持插件,扩展编译功能 - 灵活配置,适应项目需求 - 富强的生态系统,多样化开发需求 ```
19 4
|
19天前
|
JavaScript 前端开发
js开发:请解释原型继承和类继承的区别。
JavaScript中的原型继承和类继承用于共享对象属性和方法。原型继承通过原型链实现共享,节省内存,但不支持私有属性。
19 0
|
19天前
|
JavaScript 前端开发
js开发:请解释事件冒泡和事件捕获。
JavaScript中的事件处理有冒泡和捕获两种方式。事件冒泡是从子元素向上级元素传递,而事件捕获则从外层元素向内层传递。`addEventListener`的第三个参数可设定事件模式,`false`或不设为冒泡,`true`为捕获。示例代码展示了如何设置。
24 2
|
11天前
|
开发框架 JavaScript 前端开发
【JavaScript 与 TypeScript 技术专栏】TypeScript 在 Web 开发中的前沿应用
【4月更文挑战第30天】TypeScript在Web开发中日益重要,以其强大的类型系统提升代码质量,支持组件化开发,与React、Vue、Angular等框架良好集成。在大型项目管理中,TypeScript助于代码组织和优化,提高团队协作效率。此外,它提升开发体验,提供智能提示和错误检测。众多成功案例证明其前沿应用,未来将在Web开发领域持续发挥关键作用。
|
11天前
|
JavaScript 前端开发 IDE
【JavaScript与TypeScript技术专栏】TypeScript在JavaScript库与框架开发中的作用
【4月更文挑战第30天】TypeScript,微软开发的JavaScript超集,以其强类型和面向对象特性,正成为提升Web项目质量和效率的关键工具,尤其在库和框架开发中。它通过类型系统减少运行时错误,提供内置文档,便于重构,增强IDE支持,以及支持模块化。流行框架如React、Angular已支持TypeScript,未来有望成为开发高质量库和框架的标准语言。随着社区增长,TypeScript将在Web开发领域扮演更重要角色。
|
11天前
|
JavaScript 前端开发 IDE
【TypeScript技术专栏】TypeScript与Node.js后端开发
【4月更文挑战第30天】TypeScript在Node.js后端开发中日益重要,作为JavaScript超集,它提供静态类型检查和面向对象编程,增强代码可靠性和维护性。集成TypeScript能带来类型安全、更好的IDE体验、易于维护的代码以及增强工具支持。通过安装TypeScript编译器、编写TypeScript文件、配置TSconfig,开发者可以在Node.js项目中利用其高级特性,提高代码质量和开发效率。实践案例显示,TypeScript能确保路由处理器的类型正确,降低错误率。随着社区发展,TypeScript成为提升Node.js开发体验的推荐选择。
|
11天前
|
JavaScript 前端开发 API
如何使用JavaScript进行桌面应用开发?
【4月更文挑战第30天】如何使用JavaScript进行桌面应用开发?
26 0