一、字符串常见方法和作用
二、数组常见的方法和作用
方法的使用教学: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
方法时调用异步方法会产生问题,主要原因有两点:
-
无法等待异步操作的完成:
forEach
和map
方法无法等待异步操作的完成,它们会继续执行下一个迭代或映射,而不会等待异步操作返回结果。这可能导致意外行为或不符合预期的结果。 -
无法捕获错误:由于
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));
打印结果
更多方法内容持续更新中