ES6常用技巧：数组去重、对象合并、必填参数与URL参数获取

前言

ES6发布已有数年，其众多新特性已在实际项目中得到巧妙应用。本文旨在梳理其中部分实用技巧，希望能为读者提供帮助。

若您掌握其他相关技巧，欢迎在评论区留言补充，我们将整理纳入。

ES6实用技巧汇总

es6有用的7个技巧

数组去重


var arr = [1, 2, 3, 3, 4];
console.log(...new Set(arr))
>> [1, 2, 3, 4]

过滤数组假值

利用Set数据结构实现数组去重。

有时需要过滤数组中值为 false 的元素，例如 (0, undefined, null, false)。您可能尚未掌握这一简便技巧。


var myArray = [1, 0 , undefined, null, false];
myArray.filter(Boolean);
> > [1]
//是不是很简单, 只需要传入一个 Boolean 函数即可.

创建纯净空对象

创建一个空对象

有时需要创建一个纯净对象，不包含原型链等属性。通常直接通过字面量 {} 创建空对象，但该对象仍保留指向 Object.prototype 的 proto 属性。


let dict = Object.create(null);
 
dict.__proto__ === "undefined"

合并多个对象

合并对象

在JavaScript开发中，合并多个对象的需求十分常见，例如在传递参数时，需将表单参数与分页参数合并后传递给后端接口。


const page = {
 current: 1,
 pageSize: 10
}
 
const form = {
 name: "",
 sex: ""
}
 
const params = {...form, ...page};
 
/*
 {
  name: "",
  sex: "",
  current: 1,
  pageSize: 10
 }
*

利用ES6提供的扩展运算符，对象合并操作变得极为简便。

强制函数参数

函数参数必须

ES6允许为参数指定默认值，这带来了诸多便利。若需检测某些参数为必传项，可采用如下方式实现。


const isRequired = () => { throw new Error('param is required'); };
 
const hello = (name = isRequired()) => { console.log(`hello ${name}`) };
 
// 这里将抛出一个错误,因为名字时必须
hello();
// 这也将抛出一个错误
hello(undefined);
 
// 正常
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查询参数

获取查询参数

多年来，我们常编写复杂的正则表达式来获取查询字符串值，但此类繁琐操作已成为历史；如今可通过 URLSearchParams API 便捷地获取查询参数。

在不使用 URLSearchParams 的情况下，我们曾通过正则方式完成查询参数获取，具体实现如下。


 function getQueryString(name) {
 var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
 var r = window.location.search.substr(1).match(reg);
 return r ? r[2] : null;
 }

使用 URLSearchParams 之后的效果。


// 假设地址栏中查询参数是这样 "?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"

相比之前的正则方式，现在的实现更加简便易用。

总结

以上即为本文的全部内容，希望这些技巧对您的学习或工作具有参考价值。感谢支持。

ES6实用技巧：数组去重、过滤与参数处理