ES6/JavaScript 实用技巧:数组处理与语法简化

作者:代码拾荒

时间:2026-10-22

浏览:419

本文分享JavaScript开发中的实用技巧,包括利用ES6的Set数据结构进行数组去重,使用Object.assign合并对象,以及map、filter、some、every等数组遍历方法简化代码。此外还介绍了三元运算符和位运算符~~在简化逻辑判断与取整方面的应用,帮助提升编码效率。

文章目录

JavaScript 实用技巧概述

在编写JavaScript代码时,掌握一些高效的方法与技巧至关重要。尽管实现同一目标往往有多种路径,但选择最优解能显著提升开发效率。本文将介绍一些常被知晓却较少使用的实用技巧,供开发者参考。

以下是一些实用的JavaScript编码技巧。

ES6 数据结构与对象处理

1. 使用 new Set() 进行去重

对于数组去重,传统思维可能倾向于通过循环对比来实现。然而,ES6引入了新的数据结构Set,利用它可以轻松完成数组去重操作。例如:


let arr = [1,1, 2, 2, 3, 3];
let set = new Set(arr); //
let newArr = Array.from(set); // Array.from方法可以将 Set 结构转为数组。 
console.log(newArr); // [1, 2, 3]

2. 使用 Object.assign() 合并对象

Object.assign() 是ES6提供的对象扩展方法,主要用于对象的合并与拷贝。以往的对象合并操作较为繁琐,现在则变得简单许多。例如:


let obj1 = {a: 1};
let obj2 = {b: 2};
let obj3 = Object.assign({}, obj1, obj2);
console.log(obj3); // {a: 1, b: 2}

数组遍历与过滤方法

3. 使用 map() 转换数组

map方法用于遍历数组,它会返回一个新数组。该方法可以对原数组的每一项执行操作并生成新值,在某些场景下可以替代for循环或forEach,从而简化代码逻辑。例如:


let arr3 = [1, 2, 3, 4, 5];
let newArr3 = arr3.map((e, i) => e * 10); // 给数组每一项乘以10
console.log(newArr3); // [10, 20, 30, 40, 50]

4. 使用 filter() 过滤数组

filter方法同样用于遍历数组,顾名思义,它的作用是过滤数组元素。该方法会在每一项元素上触发回调函数,通过判断条件保留或移除当前项,最终返回一个新数组。例如:


let arr4 = [1, 2, 3, 4, 5];
let newArr4 = arr4.filter((e, i) => e % 2 === 0); // 取模,过滤余数不为0的数
console.log(newArr4); // [2,4]

5. 使用 some() 检查条件

some方法用于遍历数组,它会在每一项元素上触发回调函数。只要有一项满足条件,就返回true;若所有项均不满足,则返回false。其行为类似于逻辑或(||)比较。例如:


let arr5 = [{result: true}, {result: false}];
let newArr5 = arr5.some((e, i) => e.result); // 只要一个为true,即为true
console.log(newArr5); // true

6.every() //与5相反的

every方法与some相反,它用于遍历数组并在每一项上触发回调函数。只要有一项不满足条件,就返回false;若所有项均满足,则返回true。其行为类似于逻辑与(&&)比较。例如:


let arr6 = [{result: true}, {result: false}];
let newArr6 = arr6.every((e, i) => e.result); // 只要一个为false,即为false
console.log(newArr6); // false

语法简化与位运算技巧

7. 使用三元运算符简化判断

三元运算符是开发者较为熟悉的语法,在多数情况下可以简化if-else语句的写法。例如:


let e = true,
f = '';
if (e) {
f = 'aaa';
} else {
f = 'bbb';
}
// 等同于
f = e ? 'aaa' : 'bbb';

8. 使用 ~~ 运算符取整

在JavaScript中,~符号表示按位取反。~~即进行两次取反操作。由于位运算的操作数和结果都要求为整数,因此经过位运算的值会自动转换为整数。这可以巧妙地去除小数部分,效果类似于parseInt。例如:


let a = 1.23;
let b = -1.23;
console.log(~~a); // 1
console.log(~~b); // -1

总结

结语

本文仅列举了JavaScript语法中一些常见的、能提升开发效率的技巧。希望读者在巧学过程中,能够将这些知识灵活应用于实际开发中。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章