关于Js 字符串、数组、对象常用方法

一、字符串常见方法和作用

二、数组常见的方法和作用

方法的使用教学:JavaScript Array 对象 | 菜鸟教程

三、对象常见的方法和作用

四、使用这些方法的常见应用场景以及会产生的问题

1、数组和字符串之间的相互转化

数组转化成字符串

join() 方法：将数组的所有元素连接成一个字符串，可以指定连接符。

toString() 方法：将数组转换为逗号分隔的字符串。

代码演示

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log("arr.toString()的结果:", arr.toString());
console.log("arr.join('-')的结果:", arr.join("-"));

字符串转化成数组

代码演示

let str = "Hello word!";
console.log(
    "以' '来切割字符串为数组的结果:" +
    str.split(" ") +
    "切割后的类型为:" +
    typeof str.split(" ") +
    "切割后的数组第一个元素为:" +
    str.split(" ")[0]
);

结果

2、数组或字符截取出符合条件的数据的方法

截取出数组中符合条件的数据方法

代码演示

let arr = [
          { name: "zs", sex: "M", age: "20" },
          { name: "ls", sex: "W", age: "20" },
          { name: "zs", sex: "M", age: "21" },
          { name: "ww", sex: "W", age: "20" },
        ];
        console.log(
          "使用filter方法筛选性别为男年龄为20的数据:" +
            arr.filter((item) => item.sex === "W" && item.age === "20")
        );
        console.log(
          "使用find方法筛选性别为男年龄为20的数据:" +
            arr.find((item) => item.sex === "W" && item.age === "20")
        );
        console.log(
          "使用findIndex方法筛选性别为男年龄为20的数据:" +
            arr.findIndex((item) => item.sex === "W" && item.age === "20")
        );

输出结果

注意: slice 和 splice 也都能截取数组数据

  slice不会修改原数组，而是返回一个新的数组，包含从起始索引到结束索引之间的元素。它的语法为：array.slice(start, end)，其中start为起始索引（包括该索引），end为结束索引（不包括该索引）。

  splice会修改原数组，并返回被删除的元素或者被添加的元素。它的语法为：array.splice(start, deleteCount, item1, item2, ...)，其中start为起始索引，deleteCount为要删除的元素个数，item1、item2等为要插入到数组中的元素（可选）。

截取出字符串中符合条件的数据方法

(1)、截取字符串中符合条件的子字符串

/**
 * 获取字符串中指定片段的子串
 * @param {string} str - 原始字符串
 * @param {string} fragment - 要截取的片段
 * @returns {string} - 截取的子串
 */
function getSubstring(str, fragment) {
  // 找到片段在字符串中的起始索引
  var startIndex = str.indexOf(fragment);
  
  // 计算截取的结束索引
  var endIndex = startIndex + fragment.length;
  
  // 使用 substring 方法截取子串
  var result = str.substring(startIndex, endIndex);
  
  return result;
}

var str = "abcedea";
var fragment = "ced";
var substring = getSubstring(str, fragment);
console.log(substring);  // 输出: ced

（2）、统计字符串中每个字符出现的次数

/**
 * 统计字符串中每个字符出现的次数
 * @param {string} str - 待统计的字符串
 * @returns {object} - 包含每个字符出现次数的对象
 */
function countCharacters(str) {
  // 声明一个空对象用于存储每个字符出现的次数
  var count = {};
  
  // 遍历字符串中的每个字符
  for (var i = 0; i < str.length; i++) {
    // 获取当前字符并存储在 char 变量中
    var char = str.charAt(i);
    
    // 检查 count 对象中是否已存在当前字符的计数器
    if (count[char]) {
      // 如果计数器已存在，则将其加一
      count[char]++;
    } else {
      // 如果计数器不存在，则在 count 对象中创建该计数器并初始化为 1
      count[char] = 1;
    }
  }
  
  // 返回包含每个字符出现次数的 count 对象
  return count;
}

// 测试代码
var str = "hello world";
var charCount = countCharacters(str);
console.log("输入字符串: " + str); 
console.log("每个字符出现次数: ", charCount);

3、关于数组循环 for、for of、forEach、forMap的使用

        

在使用 forEach 和 map 方法时调用异步方法会产生问题，主要原因有两点：

1. 无法等待异步操作的完成：forEach 和 map 方法无法等待异步操作的完成，它们会继续执行下一个迭代或映射，而不会等待异步操作返回结果。这可能导致意外行为或不符合预期的结果。

2. 无法捕获错误：由于 forEach 和 map 方法无法捕获异步操作的错误，因此在异步操作出现错误时，无法通过常规的错误处理机制捕获和处理错误。

举例来说，假设我们有一个包含异步操作的数组，并且我们希望对每个元素执行异步操作，然后收集结果。如果我们使用 forEach 或 map，它们无法正确等待每个异步操作的完成，并且无法捕获每个异步操作可能出现的错误。

解决这个问题的一种常见方法是使用 for...of 循环结合 async/await 关键字，或者使用 Promise.all 方法来处理异步操作的并行执行和结果收集。这样可以确保异步操作按顺序执行，并且能够捕获错误和处理返回的结果。

总之，forEach 和 map 方法不适合处理需要等待异步操作完成的情况，因为它们无法正确处理异步操作的并发执行和错误处理。

4、关于对象循环 for...in、Object.keys()、Object.entries()、Object.getOwnPropertyNames()的使用

// 表单信息
      form: {
        doctor: "张伟",
        dosage: "1",
        method: "自煎",
        decoction: "1",
        notes: "",
        date: "2023-12-19",
        frequency: "每3周1次",
        usage: "",
        min: "1",
        heat: "文火",
        diagnosis: "",
        symptoms: "",
        workInjure: false,
      },

（1）、 for in 循环

代码

for (const item in this.form) {
  console.log(item);
}

打印结果

（2）、 Object.keys()

代码

console.log(Object.keys(this.form));

打印结果

（3）、 Object.entries()

代码

console.log(Object.entries(this.form));

打印结果

（4）、 Object.getOwnPropertyNames（）

代码

console.log(Object.entries(this.form));

打印结果

更多方法内容持续更新中