JS 10个 经常使用的技巧和不为人知的特性

做者：Euel Duran
来源： Dev
译者：前端小智

---

阿里云最近在作活动，低至2折，有兴趣能够看看：
https://promotion.aliyun.com/...

---

JS是一门发展迅速的语言，正因如此，有些新的特性和功能，我们没有办法在第时间内知道。在这篇文章中，我们主要探讨一些少有人知道的特性还有一些经常使用技巧。

获取查询字符串参数

URLSearchParams 是接口定义了一些实用的方法来处理 URL 的查询字符串，它已经存在了好几年了，但它在开发人员中并不流行，有点让人惊讶，我们来看看如何使用它

var paramsString = "q=URLUtils.searchParams&topic=api";
var searchParams = new URLSearchParams(paramsString);

//Iterate the search parameters.
for (let p of searchParams) {
  console.log(p);
}

searchParams.has("topic") === true; // true
searchParams.get("topic") === "api"; // true
searchParams.getAll("topic"); // ["api"]
searchParams.get("foo") === null; // true
searchParams.append("topic", "webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
searchParams.set("topic", "More webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
searchParams.delete("topic");
searchParams.toString(); // "q=URLUtils.searchParams"

使用 Set 对象建立一个唯一的元素列表

用JS建立唯一列表是一项常见的任务，一般经过filters或for循环来实现，可是还有另外一种方法能够利用Set对象来实现这一点。

const list = [1, 2, 3, 5, 2, 5, 7];
const uniqueList = [...new Set(list)];

将原始值数组传递给Set对象，它建立一组唯一值，而后使用展开操做符语法和数组字面量将这些值转回数组。

将原始值列表转换为另外一种类型

有时候，后台或 DOM 中处理过的数据不是我们须要的类型，我在处理数据集的属性时看到过这种状况。假设有如下列表：

const naiveList = ['1500', '1350', '4580'];

想要计算数组中全部元素的和，在JS中，字符串的相加把两个字符串拼接起来，像'1' + '2'它们会链接起来为 ‘12’，一般，要解决这个问题，我们会使用parseInt函数，但还有另外一种方法;我们能够将数组中的元素转换为所需的基本类型

const castedList = naiveList.map(Number);
console.log(castedList) // [1500, 1350, 4580]

castedList如今包含具备正确Number类型的值。

扁平嵌套的数组

随着单页应用程序体系结构(如Redux)和前端数据规范化等概念的兴起，这种“数据规范化”趋势有时意味着全部元素的 id 都须要放在同一级别。

假设有下面的列表，我们想扁平它：

const nestedList = [133, 235, 515, [513, 15]];
const flattenList = nestedList.flat();
console.log(flattenList) //  [133, 235, 515, 513, 15]

就像这样，我们的id数组被扁平了。

使用 object .freeze 避免对象被改变

随着函数式x编程的兴起，数据不可变也愈来愈重要，我们可使用 Object.freeze 来防止对象被更改。

const immutableObject = {
    name: '前端小智',
    url: 'https://小智66.com'
};
Object.freeze(immutableObject);

immutableObject.wechat = 'qq449245884'
immutableObject.name = '王大治' 
console.log(immutableObject) // {name: "前端小智", url: "https://小智66.com"}

使用 Object.seal 建立受控对象

Object.seal() 方法封闭一个对象，阻止添加新属性并将全部现有属性标记为不可配置。当前属性的值只要可写就能够改变，Object.freeze 是啥都不能作，Object.seal() 能够改变属性的值。

const controlledObject = {
    name: '前端小智'
};
Object.seal(controlledObject);
controlledObject.name = '王大冶';
controlledObject.hero = '英雄';  

console.log(controlledObject) // {name: "王大冶"}

确保数组值

使用 grid ，须要从新建立原始数据，而且每行的列长度可能不匹配， 为了确保不匹配行之间的长度相等，可使用Array.fill方法。

let array = Array(5).fill('');
console.log(array); // outputs (5) ["", "", "", "", ""]

数组 map 的方法 (不使用Array.Map)

另外一种数组 map 的实现的方式，不用 Array.map。

Array.from 还能够接受第二个参数，做用相似于数组的map方法，用来对每一个元素进行处理，将处理后的值放入返回的数组。以下：

const cities = [
    { name: 'Paris', visited: 'no' },
    { name: 'Lyon', visited: 'no' },
    { name: 'Marseille', visited: 'yes' },
    { name: 'Rome', visited: 'yes' },
    { name: 'Milan', visited: 'no' },
    { name: 'Palermo', visited: 'yes' },
    { name: 'Genoa', visited: 'yes' },
    { name: 'Berlin', visited: 'no' },
    { name: 'Hamburg', visited: 'yes' },
    { name: 'New York', visited: 'yes' }
];

const cityNames = Array.from(cities, ({ name}) => name);
console.log(cityNames);
// outputs ["Paris", "Lyon", "Marseille", 
// "Rome", "Milan", "Palermo", "Genoa", "Berlin", "Hamburg", "New York"]

有条件的对象属性

再也不须要根据一个条件建立两个不一样的对象，可使用展开运算符号来处理。

nst getUser = (emailIncluded) => {
  return {
    name: 'John',
    surname: 'Doe',
    ...emailIncluded && { email : 'john@doe.com' }
  }
}

const user = getUser(true);
console.log(user); // outputs { name: "John", surname: "Doe", email: "john@doe.com" }

const userWithoutEmail = getUser(false);
console.log(userWithoutEmail); // outputs { name: "John", surname: "Doe" }

动态属性名

早期，若是属性名须要是动态的，咱们首先必须声明一个对象，而后分配一个属性。这些日子已通过去了，有了ES6特性，咱们能够作到这一点。

const dynamic = 'email';
let user = {
    name: 'John',
    [dynamic]: 'john@doe.com'
}
console.log(user); // outputs { name: "John", email: "john@doe.com" }

代码部署后可能存在的BUG无法实时知道，过后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。

原文： https://dev.to/duranenmanuel/...

每次整理文章，通常都到2点才睡觉，一周4次左右，挺苦的，还望支持，给点鼓励

交流（欢迎加入群，群工做日都会发红包，互动讨论技术）

阿里云最近在作活动，低至2折，有兴趣能够看看：https://promotion.aliyun.com/...

干货系列文章汇总以下，以为不错点个Star，欢迎 加群 互相学习。

https://github.com/qq44924588...

由于篇幅的限制，今天的分享只到这里。若是你们想了解更多的内容的话，能够去扫一扫每篇文章最下面的二维码，而后关注我们的微信公众号，了解更多的资讯和有价值的内容。