2020 年 7 个 JavaScript 技巧 1. 时间测量/性能跟踪 2. 表格日志记录 3. 扩展语法 4. 展平（多维）数组 5. 短路 6. 模板字面量 6. 使用 .filter()、.map() 和 .reduce() 的循环

2025-06-07

2020 年的 7 个 JavaScript 技巧

1. 时间测量/绩效跟踪

2. 表日志记录

3. 扩展语法

4. 扁平化（多维）数组

5. 短路

6. 模板字符串

6. 使用 .filter()、.map() 和 .reduce() 循环

JavaScript 已经发生了巨大的变化，几乎没有办法绕过它。了解一两个技巧可以让你的开发工作更轻松一些。

我们从简单的事情开始吧。当然，console.log()这对你来说并不新鲜。很长一段时间里，我只是简单地使用console.log()，然后输入我想看的对象。当我发现可以在对象前面输入标签时，我松了一口气。

const hero = {
    name: 'Spiderman',
    firstName: 'Peter',
    lastName: 'Parker',
    city: 'New York City'
};

console.log(hero);

console.log('hero', hero);
Enter fullscreen mode Exit fullscreen mode

带有标签的 console.log()

1. 时间测量/绩效跟踪

当然，这没什么大不了的。但是控制台的日志记录功能已经进化了。最近我需要优化一个应用程序的性能。与其创建一个Date对象并用它来计算时间，不如直接使用console.time()。

用console.time('myTimer')可以启动计时器。用console.timeLog('myTimer')可以记录当前时间，用 可以console.timeEnd('myTimer')结束计时器并显示已用时间。非常简洁。

console.time('factorial');

const number = 10;
let result = 1;
for (let i = 1; i <= number; i++) {
    result *= i;
    console.timeLog('factorial');
}

console.log('factorial result', result);
console.timeEnd('factorial');
Enter fullscreen mode Exit fullscreen mode

使用 console.time() 计算阶乘

2. 表日志记录

除了记录已用时间之外，我还发现了另一个很有用的函数，那就是console.table()。您很可能从服务调用中获取数据并希望将其显示在控制台中。如果所述数据是具有相同属性的对象数组，则可以将它们显示为表格。这样可以更好地概览，也更容易调试。

const heroes = [
    {
        name: 'Spiderman',
        firstName: 'Peter',
        lastName: 'Parker',
        city: 'New York City'
    }, {
        name: 'Iron Man',
        firstName: 'Tony',
        lastName: 'Stark',
        city: 'New York City'
    }];

console.table(heroes);
Enter fullscreen mode Exit fullscreen mode

替代文本

3. 扩展语法

接下来是展开语法。本质上，它是三个句点后跟一个对象或数组。你可以在任何需要任意数量的参数或元素的地方使用此表达式。

乘法

function multiply(x, y, z) {
    return x * y * z;
}

const numbers = [2, 3, 4];

console.log(multiply(...numbers));
Enter fullscreen mode Exit fullscreen mode

扩展语法乘法

该函数需要三个参数，但我们也可以给它一个包含三个数字的数组。我们仍然可以使用扩展运算符调用该函数并查看正确的结果。

集合（提取唯一值）

另一个有用的功能是从数组中提取唯一值。假设我们有一个包含名称或数字的数组。使用扩展运算符和 type Set，我们可以分别仅返回唯一名称或数字。

const names = ['Tony', 'Peter', 'Bruce', 'Bruce', 'Peter', 'Peter'];
var unique_names = [...new Set(names)];
console.log(unique_names);

var entries = [1, 1, 2, 3, 3, 4, 5, 6, 6, 7, 7, 8, 9, 9, 9, 10];
var unique_entries = [...new Set(entries)];
console.log(unique_entries);
Enter fullscreen mode Exit fullscreen mode

放

向对象添加属性并附加数组

另一个例子是向对象添加属性。我们不需要逐行添加属性，而是可以使用扩展运算符来“覆盖”给定的对象，添加属性。

let batman = { name: 'Batman' };
// batman.firstName = "Bruce";
// batman.lastName = "Wayne";
console.log(batman);

batman = { ...batman, firstName: 'Bruce', lastName: 'Wayne' };
console.log(batman);
Enter fullscreen mode Exit fullscreen mode

向对象添加属性并附加数组
在我们的例子中，蝙蝠侠有名字和姓氏。

附加数组

我们可以用同样的方法将更多元素添加到数组中。我们不需要使用push()来添加元素，而是用三个句点来完成这项工作，这样蝙蝠侠就加入了超级英雄俱乐部。

let superHeroes = ['Spiderman', 'Iron Man'];
console.log(superHeroes);

superHeroes = [...superHeroes, 'Batman'];
console.log(superHeroes);
Enter fullscreen mode Exit fullscreen mode

附加数组

4. 扁平化（多维）数组

您可能想要展平多维数组。使用该flat()方法很容易实现。

这里我们有两个超级英雄数组，flat()一个包含另一个超级英雄，另一个包含同一级别的所有英雄。

let heroes = [
    ['Superman', 'Batman', 'Wonderwoman'],
    ['Spiderman', 'Iron Man', 'Hulk']
]

console.log(heroes.flat());
Enter fullscreen mode Exit fullscreen mode

展平数组

需要注意的是，该方法flat()只会展平第一层。如果数组嵌套更深，可以将层数传递给该方法。或者，也可以直接传递该参数Infinity来展平所有层级。

let heroes = [
    ['Superman', 'Batman', 'Wonderwoman'],
    [
        ['Spiderman', 'Amazing Spiderman'],
        'Iron Man', 'Hulk'
    ]
]

console.log(heroes.flat());
console.log(heroes.flat(Infinity));
Enter fullscreen mode Exit fullscreen mode

将数组展平至无穷大

5. 短路

短路很好，但应小心使用，因为它可能难以读取。

本质上，您可以缩短导致调用另一个函数的简单 if 语句。

假设你是蝙蝠侠，你想向全世界大声宣布自己是蝙蝠侠。下面的函数就是实现这个功能的，但使用短路，你可以在一行代码中完成这个功能，也就是说，检查你是否是蝙蝠侠，如果是，就告诉所有人。

const isBatman = true;

function printBatman() {
    console.log("I'm Batman!");
}

if (isBatman) {
    printBatman();
}

isBatman && printBatman();

isBatman && console.log("I'm Batman!");
Enter fullscreen mode Exit fullscreen mode

短路

6. 模板字符串

模板字面量是在字符串中使用变量的绝佳方式。过去，你可能先用大量加号 (+) 构建字符串，然后添加变量，再添加另一个字符串，如此反复。

使用模板文字，您可以使用反引号，然后使用美元符号和花括号来为字符串提供一个完整且可读的语句。

const hero = { name: 'Batman' };

console.log("I'm " + hero.name + "!");

console.log(`I'm ${hero.name}!`);
Enter fullscreen mode Exit fullscreen mode

模板字符串

6. 使用 .filter()、.map() 和 .reduce() 循环

作为一名开发人员，你显然必须经常使用循环。有了这些方法filter()，你map()就reduce()可以省去 for 循环，只用一行代码就能操作数据。

我们从 开始filter()。顾名思义，它可以过滤数组中的元素。在这个例子中，我们筛选了漫威和 DC 的英雄。如果我们只想查看漫威英雄，可以filter()这样使用：

const heroes = [
    { name: 'Spiderman', universe: 'Marvel' },
    { name: 'Iron Man', universe: 'Marvel' },
    { name: 'Hulk', universe: 'Marvel' },
    { name: 'Batman', universe: 'DC' },
    { name: 'Superman', universe: 'DC' },
    { name: 'Wonder Woman', universe: 'DC' },
]

const marvel = heroes.filter(h => h.universe === 'Marvel');

console.table(marvel);
Enter fullscreen mode Exit fullscreen mode

筛选（）

该函数map()抓取数组中的每个元素，并使用该元素执行给定的表达式。例如，我们可以为漫威英雄添加 team 属性。在我们的例子中，他们都是复仇者联盟的成员。

marvel.map(h => h.team = 'Avengers');

console.table(marvel);
Enter fullscreen mode Exit fullscreen mode

地图（）
如果我们有一个数字数组，我们可以将每个数字与其自身相乘，然后将结果存储在一个新数组中。

const numbers = [2, 4, 6, 8];
const multi = numbers.map(n => n * n);
console.log('numbers', multi);
Enter fullscreen mode Exit fullscreen mode

带有数字的 map()

最后同样重要的是reduce()。使用reduce()，我们可以对数组的所有数字执行表达式。在此示例中，我们传递一个累加器和数组的当前值。累加器是整个表达式的当前结果，而当前值是函数当前正在处理的单个值。这意味着我们将每个元素与数组的下一个元素相乘，即 2 * 4 * 6 * 8。

console.log(numbers.reduce((acc,cur) => acc * cur));
Enter fullscreen mode Exit fullscreen mode

减少（）

就是这样！虽然很短，但希望很有用。

您还可以在此视频中观看实际的代码：

编码愉快！

但请稍等，还有更多！

文章来源：https://dev.to/_patrickgod/7-javascript-hacks-for-2020-1jg8
Devto 翻译
PREV
如何找到你的导师
NEXT
程序员如何开始保持身体健康的 6 种方法