掌握前端基础，一招搞定JS深拷贝、箭头函数、事件监听等

前端

2023-01-24 16:36:09

掌握前端基础，在编程世界中如鱼得水

在当今快节奏的技术世界中，前端开发已成为必不可少的技能。前端开发人员负责创建用户与网站或应用程序交互的界面。为了成为一名成功的前端开发人员，掌握基本知识至关重要，这些知识将使你在编程领域如鱼得水。

深入剖析 JS 深拷贝

JavaScript 中的深拷贝是复制对象副本而不改变原始对象的过程。这与浅拷贝不同，浅拷贝只复制对象的引用，而不复制其属性值。深拷贝在以下情况下至关重要：

当你想要修改副本而不影响原始对象时
当你想要在不破坏原始对象的情况下传递对象时
当你想要存储对象的永久记录时

有两种常见的方法可以进行深拷贝：

使用 JSON.parse() 和 JSON.stringify()： 这种方法将对象转换为 JSON 字符串，然后将其解析回一个新的对象。

const originalObject = { name: "John", age: 30 };
const copiedObject = JSON.parse(JSON.stringify(originalObject));

// 修改 copiedObject 的属性值
copiedObject.name = "Jane";

// 输出结果
console.log(originalObject); // { name: "John", age: 30 }
console.log(copiedObject); // { name: "Jane", age: 30 }

使用递归函数： 这种方法通过遍历对象并为每个属性递归地创建副本来工作。

function deepCopy(obj) {
  if (typeof obj !== "object" || obj === null) {
    return obj;
  }

  const copiedObject = Array.isArray(obj) ? [] : {};

  for (const key in obj) {
    copiedObject[key] = deepCopy(obj[key]);
  }

  return copiedObject;
}

const originalObject = { name: "John", age: 30 };
const copiedObject = deepCopy(originalObject);

// 修改 copiedObject 的属性值
copiedObject.name = "Jane";

// 输出结果
console.log(originalObject); // { name: "John", age: 30 }
console.log(copiedObject); // { name: "Jane", age: 30 }

箭头函数：简洁的函数语法

箭头函数是 ES6 中引入的新语法，它使用箭头（=>）替代了 function，使函数更加简洁。箭头函数还有以下优点：

隐式返回： 如果函数体只有一行，则可以省略 return 语句。
词法作用域： 箭头函数使用词法作用域，这意味着它们继承了定义它们的函数的作用域。
绑定 this： 箭头函数不绑定自己的 this，而是继承定义它们的上下文的 this。

以下是如何编写箭头函数的示例：

// 使用 function 定义函数
function add(a, b) {
  return a + b;
}

// 使用箭头函数定义函数
const add = (a, b) => {
  return a + b;
};

// 进一步简化箭头函数
const add = (a, b) => a + b;

// 调用函数
const result = add(1, 2);

// 输出结果
console.log(result); // 3

事件监听：响应用户交互

事件监听是 JavaScript 中非常重要的概念，它允许网页对用户交互做出响应。通过添加事件监听器，你可以指定在发生特定事件时应执行的函数。

以下是如何为元素添加事件监听器的示例：

// 为元素添加 click 事件监听器
const button = document.getElementById("button");

button.addEventListener("click", () => {
  alert("Button clicked!");
});

// 为元素添加 keydown 事件监听器
const input = document.getElementById("input");

input.addEventListener("keydown", (event) => {
  console.log(`Key pressed: ${event.key}`);
});

冒泡和捕获：事件传递的两种方式

当发生事件时，它会通过 DOM 树向上或向下传递，具体取决于事件监听器是使用冒泡还是捕获添加的。

冒泡： 事件从最内层的元素开始传递，然后逐级向外传递，直到到达最外层的元素。
捕获： 事件从最外层的元素开始传递，然后逐级向内传递，直到到达最内层的元素。

以下是如何在捕获阶段添加事件监听器的示例：

// 为元素添加 click 事件监听器，使用捕获
const button = document.getElementById("button");

button.addEventListener("click", (event) => {
  alert("Button clicked!");
}, true);

// 为元素添加 keydown 事件监听器，使用冒泡
const input = document.getElementById("input");

input.addEventListener("keydown", (event) => {
  console.log(`Key pressed: ${event.key}`);
}, false);