【前端从零学习08】

一、JavaScript 的基础方法

JavaScript 提供了丰富的内建方法，帮助开发者处理常见的编程任务。我们可以通过这些方法进行数组操作、字符串处理、控制流程等。以下是一些常见的基础方法分类。

2.1 控制流程语句

2.1.1 条件语句

• if…else：用于判断条件是否为真，根据条件执行不同的代码块。

  const age = 18;
  if (age >= 18) {
    console.log("成年人");
  } else {
    console.log("未成年人");
  }
  

• switch：根据变量的值来执行不同的代码块。

  const fruit = "apple";
  switch (fruit) {
    case "apple":
      console.log("这是一个苹果");
      break;
    case "banana":
      console.log("这是一个香蕉");
      break;
    default:
      console.log("未知水果");
  }
  

2.1.2 循环语句

• for：用于已知循环次数的情况。

  for (let i = 0; i < 5; i++) {
    console.log(i);  // 输出 0 到 4
  }
  

• while：当条件为真时，执行循环，直到条件为假。

  let i = 0;
  while (i < 5) {
    console.log(i);  // 输出 0 到 4
    i++;
  }
  

• do…while：先执行一次代码，再判断条件是否成立，循环会至少执行一次。

  let i = 0;
  do {
    console.log(i);  // 输出 0 到 4
    i++;
  } while (i < 5);
  

• for…in：用于遍历对象的属性。

  const person = { name: "Tom", age: 25 };
  for (let key in person) {
    console.log(key, person[key]);  // 输出属性名和属性值
  }
  

• for…of：用于遍历数组或类数组对象的值。

  const numbers = [1, 2, 3, 4, 5];
  for (let number of numbers) {
    console.log(number);  // 输出 1 到 5
  }
  

2.2 数组方法

2.2.1 添加、删除元素

• push()：向数组末尾添加一个或多个元素。

  const arr = [1, 2, 3];
  arr.push(4);  // [1, 2, 3, 4]
  

• pop()：删除数组末尾的元素并返回该元素。

  const arr = [1, 2, 3];
  const last = arr.pop();  // 3, arr = [1, 2]
  

• shift()：删除数组开头的元素并返回该元素。

  const arr = [1, 2, 3];
  const first = arr.shift();  // 1, arr = [2, 3]
  

• unshift()：向数组开头添加一个或多个元素。

  const arr = [1, 2, 3];
  arr.unshift(0);  // [0, 1, 2, 3]
  

2.2.2 查找与过滤

• indexOf()：返回指定元素在数组中的第一个索引，没有找到返回 -1。

  const arr = [10, 20, 30, 40];
  const index = arr.indexOf(30);  // 2
  

• includes()：检查数组是否包含某个元素，返回布尔值。

  const arr = [1, 2, 3];
  console.log(arr.includes(2));  // true
  console.log(arr.includes(5));  // false
  

• filter()：返回一个新数组，包含所有满足条件的元素。

  const arr = [1, 2, 3, 4, 5];
  const evenNumbers = arr.filter(num => num % 2 === 0);  // [2, 4]
  

• map()：对数组的每个元素执行指定的函数，并返回新数组。

  const arr = [1, 2, 3];
  const squares = arr.map(num => num * num);  // [1, 4, 9]
  

• find()：返回数组中第一个符合条件的元素。

  const arr = [10, 20, 30];
  const found = arr.find(num => num > 15);  // 20
  

• reduce()：对数组中的元素进行累加，返回一个最终的值。

  const arr = [1, 2, 3, 4];
  const sum = arr.reduce((acc, curr) => acc + curr, 0);  // 10
  

2.2.3 排序与反转

• sort()：按照字母或数字的顺序排序数组。

  const arr = [3, 1, 4, 1, 5];
  arr.sort();  // [1, 1, 3, 4, 5]
  

• reverse()：反转数组的顺序。

  const arr = [1, 2, 3];
  arr.reverse();  // [3, 2, 1]
  

2.3 字符串方法

2.3.1 字符串操作

• concat()：连接两个或多个字符串，返回一个新的字符串。

  const str1 = "Hello";
  const str2 = "World";
  const result = str1.concat(" ", str2);  // "Hello World"
  

• toUpperCase()：将字符串转换为大写字母。

  const str = "hello";
  console.log(str.toUpperCase());  // "HELLO"
  

• toLowerCase()：将字符串转换为小写字母。

  const str = "HELLO";
  console.log(str.toLowerCase());  // "hello"
  

• trim()：去除字符串两端的空格。

  const str = "  Hello World  ";
  console.log(str.trim());  // "Hello World"
  

2.3.2 查找与替换

• indexOf()：返回指定字符或子字符串首次出现的位置，没有找到返回 -1。

  const str = "Hello World";
  console.log(str.indexOf("World"));  // 6
  

• includes()：判断字符串是否包含某个字符或子字符串，返回布尔值。

  const str = "Hello World";
  console.log(str.includes("Hello"));  // true
  console.log(str.includes("Hi"));     // false
  

• replace()：替换字符串中的指定内容，返回一个新字符串。

  const str = "Hello World";
  const newStr = str.replace("World", "JavaScript");  // "Hello JavaScript"
  

• slice()：提取字符串的某个部分，返回新的字符串。

  const str = "Hello World";
  const part = str.slice(0, 5);  // "Hello"
  

2.3.3 分割与连接

• split()：将字符串分割成数组。

  const str = "apple,banana,orange";
  const fruits = str.split(",");  // ["apple", "banana", "orange"]
  

• join()：将数组的所有元素连接成一个字符串。

  const arr = ["apple", "banana", "orange"];
  const str = arr.join(", ");  // "apple, banana, orange"
  

2.4 常用全局方法

• parseInt()：将字符串解析为整数。

  const num = parseInt("123");
  console.log(num);  // 123
  

• parseFloat()：将字符串解析为浮动点数。

  const num = parseFloat("3.14");
  console.log(num);  // 3.14
  

• isNaN()：检查一个值是否是 NaN。

  console.log(isNaN(123));  // false
  console.log(isNaN("abc"));  // true
  

• setTimeout()：延迟执行某个函数。

  setTimeout(() => {
    console.log("延迟