7个实用的JavaScript开发技巧

作者:半夏时间:2026-10-23 06:58:39浏览:525

本文介绍了七个实用的JavaScript开发技巧,涵盖数组去重、过滤假值、创建纯净对象、合并对象、强制参数、解构别名及URL参数处理。通过ES6语法特性,如扩展运算符和URLSearchParams API,提升代码简洁性与执行效率,帮助开发者优化日常编码工作。

前言

与所有其他编程语言类似,JavaScript提供了多种方法来完成简单或复杂的任务。部分技巧广为人知,而另一些则可能令人耳目一新。以下介绍七个您可以立即投入使用的JavaScript技巧。

原文链接:davidwalsh.name/javascript-…

数组去重与过滤假值

数组去重

实现数组去重可能比预期更简单:


var j = [...new Set([1, 2, 3, 4, 4])]
>> [1, 2, 3, 4]

实现方式非常简洁。

过滤假值

如果需要从数组中移除假值(如0、undefined、null、false等),可以使用以下技巧:


let res = [1,2,3,4,0,undefined,null,false,''].filter(Boolean);
>> 1,2,3,4

创建空对象

虽然可以使用{}创建看似空的对象,但该对象仍继承__proto__及hasOwnProperty等默认方法。若需创建一个纯粹的“字典”对象,可采用以下方式:

创建纯净对象与合并对象


let dict = Object.create(null);

// dict.__proto__ === "undefined"
// No object properties exist until you add them

通过这种方式创建的对象是纯净的,不包含任何预设属性或方法,结构更加干净。

合并对象

在JavaScript中,合并多个对象的需求十分常见,特别是在通过选项创建类和小部件时:


const person = { name: 'David Walsh', gender: 'Male' };
const tools = { computer: 'Mac', editor: 'Atom' };
const attributes = { handsomeness: 'Extreme', hair: 'Brown', eyes: 'Blue' };

const summary = {...person, ...tools, ...attributes};
/*
Object {
 "computer": "Mac",
 "editor": "Atom",
 "eyes": "Blue",
 "gender": "Male",
 "hair": "Brown",
 "handsomeness": "Extreme",
 "name": "David Walsh",
}
*/

扩展运算符(...)使这一任务变得更加轻松。

强制函数参数

虽然JavaScript支持为函数参数设置默认值,但以下技巧可用于强制要求传递特定参数:

强制参数与解构别名


const isRequired = () => { throw new Error('param is required'); };

const hello = (name = isRequired()) => { console.log(`hello ${name}`) };

// This will throw an error because no name is provided
hello();

// This will also throw an error
hello(undefined);

// These are good!
hello(null);
hello('David');

解构添加别名

解构赋值是JavaScript中广受欢迎的特性,但有时我们希望使用不同的名称来引用属性,此时可以利用别名机制:


const obj = { x: 1 };

// Grabs obj.x as { x }
const { x } = obj;

// Grabs obj.x as { otherName }
const { x: otherName } = obj;

这有助于避免与现有变量发生命名冲突。

获取查询字符串参数

以往获取URL参数或追加查询字符串通常依赖正则表达式,而现在可以使用新的API,以更简单的方式处理URL。

例如,面对如下URL:“?post=1234&action=edit”,我们可以利用以下技巧进行处理:

处理URL查询参数


// Assuming "?post=1234&action=edit"

var urlParams = new URLSearchParams(window.location.search);

console.log(urlParams.has('post')); // true
console.log(urlParams.get('action')); // "edit"
console.log(urlParams.getAll('action')); // ["edit"]
console.log(urlParams.toString()); // "?post=1234&action=edit"
console.log(urlParams.append('active', '1')); // "?post=1234&action=edit&active=1"

这比过去使用的方法更加简便。

多年来JavaScript发生了巨大变化,但最令人欣喜的是语言改进的速度。尽管JavaScript动态多变,掌握这些实用技巧并将其存入工具箱,以便在需要时调用,依然至关重要。

您最喜欢的JavaScript技巧是什么?

总结

以上就是本文的全部内容,希望这些内容对您的学习或工作具有参考价值,感谢支持。

作者最新文章