返回

远古时代?原来 JS 中还有如此有趣的 4 个特性

前端

在前端开发中,JavaScript 无疑是重要的组成部分。除了我们熟知的基本语法和常用函数之外,JavaScript 中还隐藏着许多鲜为人知的特性,这些特性不仅有趣,而且实用。本文将介绍 4 个这样的特性,希望能为你的前端开发带来新的思路和灵感。

1. 从 URL 中提取信息

有的时候我们需要从一个 URL 中提取域名、查询、变量参数值等,一般我们会自己去解析 URL 来获取这些内容。可是你或许不知道,JavaScript 中有一个内置对象 URL,它可以轻松地帮我们完成这项任务。

const url = new URL('https://www.example.com/path/to/page?key1=value1&key2=value2');

console.log(url.origin); // "https://www.example.com"
console.log(url.pathname); // "/path/to/page"
console.log(url.searchParams.get('key1')); // "value1"
console.log(url.searchParams.get('key2')); // "value2"

2. 使用 Object.fromEntries() 将键值对转换为对象

在 JavaScript 中,经常需要将键值对转换为对象。传统的方法是使用 Object.assign()Object.create(),但是这些方法比较复杂,而且不直观。

const keyValuePairs = [['name', 'John Doe'], ['age', 30]];

const object = Object.fromEntries(keyValuePairs);

console.log(object); // { name: 'John Doe', age: 30 }

3. 使用 Array.flat() 扁平化数组

在 JavaScript 中,数组可以包含其他数组,这种结构称为嵌套数组。如果我们需要将嵌套数组扁平化,也就是将多维数组转换为一维数组,可以使用 Array.flat() 方法。

const nestedArray = [1, 2, [3, 4, [5, 6]]];

const flatArray = nestedArray.flat();

console.log(flatArray); // [1, 2, 3, 4, 5, 6]

4. 使用 String.prototype.replaceAll() 替换所有匹配的子字符串

在 JavaScript 中,字符串是不可变的,这意味着我们不能直接修改字符串。但是,我们可以使用 String.prototype.replaceAll() 方法来替换字符串中所有匹配的子字符串。

const str = 'The quick brown fox jumps over the lazy dog.';

const newStr = str.replaceAll('the', 'THE');

console.log(newStr); // "THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG."

以上介绍的 4 个 JavaScript 特性,相信能够为你的前端开发带来新的思路和灵感。这些特性不仅有趣,而且实用,可以帮助你更轻松地解决问题,提高开发效率。