你可能不知道 JavaScript 原生可以做的 6 件事

最初发布于Enmascript.com

#您知道吗？这是 Enmascript 的一个新系列，我们在其中对我们认为可能相关或被低估的主题进行简短而简洁的解释，如果您正在寻找更完整深入的文章，请查看我们的其他系列。

JavaScript 是一门发展迅速的语言；因此，有时很难掌握它的所有特性和功能。在这篇短文中，我们将探讨一些你可能还不知道的特性。

获取查询字符串参数

URLSearchParams是一个允许我们处理查询字符串参数的接口，它已经存在好几年了，但你可能会惊讶地发现它在开发人员中并不那么流行，让我们看看如何使用它：

// to get the query strings from the current url use window.location.search
const queryStrings = new URLSearchParams('?browser=chrome&action=redirect');
queryStrings.get('browser');
queryStrings.has('action');

很简单，这里有更多关于完整 API 的信息，以防您对完整的功能感兴趣。

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

在 javascript 中创建唯一列表是一项常见任务，这通常是通过应用过滤器或 for 循环来实现的，但还有另一种方法可以利用Set对象来实现这一点。

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

我们将原始值数组传递给Set对象；它创建一个唯一值的集合，然后使用扩展运算符语法和数组文字将其转换为列表。

将原始值列表转换为其他类型

有时，DOM 中的端点或处理后的数据不会返回我们需要的值类型，我见过这种情况，尤其是在处理数据集属性时。假设我们有以下列表：

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

我们希望对数组中的所有元素求和，在 JavaScript 中，如果你对两个字符串进行“求和”，就像'1' + '2'它们会连接起来一样，一般来说，为了解决这个问题，我们会利用parseInt函数，但还有另一种方法；我们可以将数组中的元素转换为我们需要的原始类型：

const castedList = naiveList.map(Number);

castedList现在包含具有正确类型的值Number。

展平嵌套数组值

随着 Redux 等单页应用程序架构的兴起以及前端数据规范化等概念变得越来越流行，这种“数据规范化”趋势的一部分有时意味着将所有元素的 ID 列在同一级别。

假设我们有以下列表并且我们想要将其展平：

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

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

使用 Object.freeze 避免对象突变

当谈论函数式代码时，我被问到最多的事情之一就是如何阻止对象变异，这个问题的答案总是一样的：冻结它们：

const immutableObject = {
    name: 'Enmascript',
    url: 'https://enmascript.com'
};
Object.freeze(immutableObject);
immutableObject.twitter = 'https://twitter.com/duranenmanuel';
immutableObject.name = 'Another name';
// immutableObject is still { name: "Enmascript", url: "https://enmascript.com" }

使用 Object.seal 创建受控对象

作用相同，Object.freeze但它允许您更改对象中已定义的属性的值，这将使您能够控制对象中声明的属性，但不能控制定义：

const controlledObject = {
    name: 'Barry Allen'
};
Object.seal(controlledObject);
controlledObject.name = 'Clark Kent';
controlledObject.hero = 'Superman';
// controlledObject will return { name: "Clark Kent" }

您还知道其他一些可能不流行但很有用的 JavaScript 功能吗？请与我们分享。