7个实用的JavaScript开发技巧
本文介绍了七个实用的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技巧是什么?
总结
以上就是本文的全部内容,希望这些内容对您的学习或工作具有参考价值,感谢支持。
JavaScript闭包与类(Class)的区别及适用场景对比
2026-11-05 15:48:57
JavaScript入门要学ES6吗?let与箭头函数等新特性解析
2026-11-05 14:49:16
JavaScript 8种数据类型详解:基本类型与引用类型的区别
2026-11-05 14:25:15
怎么在JavaScript中使用async/await优化Ajax异步流程
2026-11-05 13:56:15
JavaScript replace回调函数实现动态正则替换逻辑
2026-11-05 13:52:13
