几个 JavaScript 实用小技巧
更容易的数组去重
var j = [...new Set([1, 2, 3, 3])] >> [1, 2, 3]
这里使用到了 Set
和 扩展运算符(...)
数组和布尔
关于如何过滤掉数组中的假值,有这样一个简单的技巧:
myArray .map(item => { // ... }) // Get rid of bad values .filter(Boolean);
只需要将 Boolean
传给 filter
函数即可过滤掉数组中的所有假值。
创建一个空对象
你可能会直接使用对象字面量 {}
去创建一个空对象,但是这个空对象仍然包含 __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", } */
扩展运算符(...
) 让这项工作变得异常简单。
获取 query 参数
曾经我们必需通过正则表达式的方式去获取 query 参数的值,但现在已经不需要了,可以使用 URLSearchParams
Web API:
// 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"