7 个必须知道的 JavaScript 技巧和窍门🎈

让我们来看看世界上最流行的语言JavaScript中的7 个有价值的技巧和窍门。

1.带参数的解构

你可以在函数参数中使用对象解构。一个常见的用例是事件监听器，以及获取target事件对象属性的访问权限。

buttonElement.addEventListener("click", ({ target }) {
    // is the same as using e.target 👇
    console.log(target);
});

2.使用 JSON 进行深度复制

您可能听说过使用对象扩展或对对象Object.assign()进行浅拷贝，但您知道使用 JSON 进行深拷贝吗？

只需使用将对象转换为 JSON JSON.stringify()，然后使用重新解析它JSON.parse()即可创建深层副本。

请记住只对简单对象执行此操作，因为对大型对象执行此操作可能会引发性能问题。

const person = {
    name: "Dom",
    age: 28,
    skills: [
        "Programming",
        "Cooking",
        "Tennis"
    ]
};

const copied = JSON.parse(JSON.stringify(person));

// false 😎
console.log(person.skills === copied.skills);

3.使用 OR 轻松实现默认设置

我经常讨论这一点。基本上，你可以使用逻辑或运算符( ||) 来获取默认值，而不是使用if语句。

或者，为了进行更严格的比较，您可以利用空值合并运算符

旧代码（使用 if 语句 - 4 行）

let username = getUsername();

if (!username) {
    username = "Dom";
}

新代码（使用||- 1 行）

const username = getUsername() || "Dom";

新代码还意味着您可以const使用let。

4.高级数组搜索

暂且不论，indexOf()因为includes()还有另一种方法可以进行高级数组搜索，它被称为find()。

该find()方法允许你传入一个测试函数。数组中第一个传入测试函数的元素将被返回。

这使得数组搜索更加有用。

const occupations = [
    "Lawyer",
    "Doctor",
    "Programmer",
    "Chef",
    "Store Manager",
];

const result = occupations.find(o => o.startsWith("C"));

// "Chef" 🧑‍🍳
console.log(result);

5.删除数组重复项

您可能以前听说过这个，但是有一种非常简单的方法可以使用Set数据结构从数组中删除重复项。

基本上，Set不允许重复值。我们可以利用这一点，将数组转换为Set，然后再转换为数组。

const numbers = [5, 10, 5, 20];
const withoutDuplicates = Array.from(new Set(numbers));

// [5, 10, 20] 👇
console.log(withoutDuplicates);

6.自调用函数

这是经典的例子。自调用函数是指执行自身操作的函数。它们的一个常见用例是为需要复杂逻辑的变量或常量赋值。

const someComplexValue = (() => {
    const a = 10;
    const b = 20;

    if (a > b) {
        return a * b;
    }

    return b / a;
})();

当然，上面的例子很简单，但你可以想象在自调用函数中可能需要什么样的复杂代码。

7.使用 Spread 进行数组复制

最后一步是创建数组的浅...拷贝。我们可以使用 spread( ) 来实现。

const numbers = [5, 19, 24, 36];
const numbersCopy = [...numbers];

// false
console.log(numbers === numbersCopy);

希望你从这份清单中至少学到了一些新东西。想了解更多 JavaScript 内容，请访问我的 YouTube 频道dcode。

立即报名👉 JavaScript DOM 速成课程

如果您正在学习 Web 开发，您可以在以下链接中找到有关 JavaScript DOM 的完整课程 👇
https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1

文章来源：https://dev.to/dcodeyt/7-must-know-javascript-tips-tricks-2m8f