JavaScript 手写功能入门：掌握 10 个关键技巧，让你的代码更优雅！

2023-11-24 03:34:30

前言

JavaScript 作为一种强大的编程语言，在前端开发领域有着广泛的应用。然而，要想写出高质量的 JavaScript 代码，仅仅掌握语言的语法和基本功能是远远不够的。还需要掌握一些实用的手写功能，才能让你的代码更具可读性、可维护性和可扩展性。

10 个常见的前端手写功能

1. 字符串操作

字符串操作是 JavaScript 中最常用的功能之一。我们可以使用各种方法来操作字符串，包括连接、分割、查找、替换等等。例如：

// 连接两个字符串
const str1 = "Hello";
const str2 = "World";
const str3 = str1 + str2; // "HelloWorld"

// 分割字符串
const str4 = "1,2,3,4,5";
const arr = str4.split(","); // ["1", "2", "3", "4", "5"]

// 查找字符串
const str5 = "JavaScript is a powerful programming language";
const index = str5.indexOf("powerful"); // 10

// 替换字符串
const str6 = "This is a sample string";
const str7 = str6.replace("sample", "great"); // "This is a great string"

2. 数组操作

数组是 JavaScript 中另一种常用的数据结构。我们可以使用各种方法来操作数组，包括添加、删除、查找、排序等等。例如：

// 添加元素到数组
const arr1 = [1, 2, 3];
arr1.push(4); // [1, 2, 3, 4]

// 删除数组中的元素
const arr2 = [1, 2, 3, 4, 5];
arr2.pop(); // [1, 2, 3, 4]

// 查找数组中的元素
const arr3 = [1, 2, 3, 4, 5];
const index2 = arr3.indexOf(3); // 2

// 排序数组
const arr4 = [5, 3, 1, 2, 4];
arr4.sort(); // [1, 2, 3, 4, 5]

3. 对象操作

对象是 JavaScript 中的另一种重要数据结构。我们可以使用各种方法来操作对象，包括添加、删除、查找、合并等等。例如：

// 添加属性到对象
const obj1 = {
  name: "John",
  age: 30
};
obj1.email = "john@example.com";

// 删除对象的属性
const obj2 = {
  name: "John",
  age: 30,
  email: "john@example.com"
};
delete obj2.email;

// 查找对象中的属性
const obj3 = {
  name: "John",
  age: 30,
  email: "john@example.com"
};
const value = obj3.email; // "john@example.com"

// 合并两个对象
const obj4 = {
  name: "John",
  age: 30
};
const obj5 = {
  email: "john@example.com",
  phone: "123-456-7890"
};
const obj6 = Object.assign({}, obj4, obj5); // { name: "John", age: 30, email: "john@example.com", phone: "123-456-7890" }

4. 函数操作

函数是 JavaScript 中的重要概念之一。我们可以使用各种方法来操作函数，包括定义、调用、传递参数等等。例如：

// 定义函数
function greet(name) {
  console.log(`Hello, ${name}!`);
}

// 调用函数
greet("John"); // "Hello, John!"

// 传递参数
function sum(a, b) {
  return a + b;
}
const result = sum(1, 2); // 3

5. 闭包

闭包是 JavaScript 中的一项重要特性。闭包是指函数内部可以访问其父函数作用域内的变量，即使该函数已经执行完毕。例如：

function outer() {
  let count = 0;

  function inner() {
    count++;
    console.log(count);
  }

  return inner;
}

const innerFunction = outer();

innerFunction(); // 1
innerFunction(); // 2
innerFunction(); // 3

6. 事件处理

事件处理是 JavaScript 中的一个重要方面。我们可以使用各种方法来处理事件，包括添加、删除、触发等等。例如：

// 添加事件监听器
const button = document.getElementById("myButton");
button.addEventListener("click", function() {
  console.log("Button clicked!");
});

// 删除事件监听器
button.removeEventListener("click", function() {
  console.log("Button clicked!");
});

// 触发事件
const event = new Event("click");
button.dispatchEvent(event);

7. AJAX

AJAX（Asynchronous JavaScript and XML）是一种用于在网页和服务器之间进行异步通信的技术。我们可以使用 AJAX 来获取数据、发送数据、更新网页内容等等。例如：

const xhr = new XMLHttpRequest();

xhr.open("GET", "https://example.com/api/data");

xhr.onload = function() {
  if (xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};

xhr.send();

8. 正则表达式

正则表达式是 JavaScript 中用来匹配字符串的强大工具。我们可以使用正则表达式来查找、替换、分割字符串等等。例如：

// 查找字符串中的单词
const str = "Hello, world!";
const regex = /world/;
const match = str.match(regex); // ["world"]

// 替换字符串中的单词
const str2 = "Hello, world!";
const regex2 = /world/;
const replaced = str2.replace(regex2, "JavaScript"); // "Hello, JavaScript!"

// 分割字符串
const str3 = "1,2,3,4,5";
const regex3 = /,/g;
const parts = str3.split(regex3); // ["1", "2", "3", "4", "5"]

9. JSON

JSON（JavaScript Object Notation）是一种用于在网页和服务器之间传输数据的轻量级数据格式。我们可以使用 JSON 来发送和接收数据，以及存储数据。例如：

// 将对象转换为 JSON 字符串
const obj = {
  name: "John",
  age: 30
};
const json = JSON.stringify(obj); // '{"name":"John","age":30}'

// 将 JSON 字符串转换为对象
const json2 = '{"name":"John","age":30}';
const obj2 = JSON.parse(json2); // { name: "John", age: 30 }

10. Web API

Web API 是 JavaScript 提供的一套内置接口，用于访问浏览器的功能。我们可以使用 Web API 来操作 DOM、获取用户信息、控制媒体播放等等。例如：

// 获取当前网页的标题
const title = document.title;

// 获取当前网页的 URL
const url = window.location.href;

// 控制媒体播放
const video = document.getElementById("myVideo");
video.play();