JavaScript字符串和数组_js 数组分割用-拼接字符串-优快云博客

本文链接：https://blog.youkuaiyun.com/Jsjendndn/article/details/144014695

今天晚上复习了一下字符串和数组的基本操作，总结了一下常用的和不常用的。。。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>

<script>
    // 字符串拼接
    // 使用 + 或 concat() 方法拼接字符串。
    let str1 = "Hello, ";
    let str2 = "world!";
    let result = str1 + str2; // 或使用 str1.concat(str2)
    console.log(result); // 输出: "Hello, world!"

    let str3 = "Hello, ";
    let str4 = "world!";
    let result2 = str3.concat(str4);
    console.log(result2); // 输出: "Hello, world!"

    // 字符串转换为小写和大写
    // 使用 toLowerCase() 和 toUpperCase() 方法进行大小写转换。
    let str = "Hello, World!";
    console.log(str.toLowerCase()); // 输出: "hello, world!"
    console.log(str.toUpperCase()); // 输出: "HELLO, WORLD!"

    // 字符串截取
    // 使用 substring()、substr() 或 slice() 方法截取字符串的一部分。
    let str5 = "Hello, World!";
    console.log(str5.substring(0, 5)); // 输出: "Hello"
    console.log(str5.slice(7)); // 输出: "World!"

    // 查找子字符串
    // 使用 indexOf() 和 lastIndexOf() 找到子字符串的位置。
    let str6 = "Hello, World!";
    console.log(str6.indexOf("o")); // 输出: 4
    console.log(str6.lastIndexOf("o")); // 输出: 8

    // 字符串替换
    // 使用 replace() 方法替换子字符串。
    let str7 = "Hello, World!";
    let newStr = str7.replace("World", "JavaScript");
    console.log(newStr); // 输出: "Hello, JavaScript!"

    // 字符串分割
    // 使用 split() 方法将字符串分割为数组。
    let str8 = "Hello, World!";
    let arr = str8.split(", "); // 根据逗号和空格分割
    console.log(arr); // 输出: ["Hello", "World!"]

    // 字符串左右去空格
    // 使用 trim() 方法去除字符串两侧的空格。
    let str9 = "   Hello, World!   ";
    console.log(str9.trim()); // 输出: "Hello, World!"

    // 字符串模版字面量
    // 使用反引号（``）创建多行字符串或嵌入表达式。
    let name = "Alice";
    let greeting = `Hello, ${name}!`;
    console.log(greeting); // 输出: "Hello, Alice!"

    // 检查字符串开头和结尾
    // 使用 startsWith() 和 endsWith() 方法检查字符串是否以特定子字符串开头或结尾。
    let str10 = "Hello, World!";
    console.log(str10.startsWith("Hello")); // 输出: true
    console.log(str10.endsWith("!")); // 输出: true

    // 字符串重复
    // 使用 repeat() 方法生成一个新字符串，该字符串包含原字符串重复指定次数的副本。
    let str11 = "Hello! ";
    console.log(str11.repeat(3)); // 输出: "Hello! Hello! Hello! "

    // 字符串开始或结束位置提取
    // 使用 slice() 提取字符串的一部分，可以通过负数索引从字符串末尾开始。
    let str12 = "Hello, World!";
    console.log(str12.slice(-6)); // 输出: "World!"

    // 转换为数组
    // 可以通过 Array.from() 或者 Spread 操作符 (...) 将字符串转换为字符数组。
    let str13 = "Hello";
    let arr2 = Array.from(str13); // 或使用 [...str]
    let arr3 = [...str13];
    console.log(arr2); // 输出: ['H', 'e', 'l', 'l', 'o']
    console.log(arr3);

    // 字符串填充
    // 使用 padStart() 和 padEnd() 方法在字符串的开头或结尾填充指定字符。
    let str14 = "5";
    console.log(str14.padStart(2, "0")); // 输出: "05"
    console.log(str14.padEnd(2, "0"));   // 输出: "50"

    // 字符串比较
    // 可以直接使用 localeCompare() 方法进行字符串的区域性比较。
    let str15 = "apple";
    let str16 = "banana";
    console.log(str15.localeCompare(str16)); // 输出: -1 (表示 str1 在 str2 前面)

    // 转换为基本类型
    // 使用 String() 函数将其他类型转换为字符串。
    let num = 123;
    let str17 = String(num);
    console.log(str17); // 输出: "123"

    // 获取字符串字符
    // 使用 charAt() 方法获取指定位置的字符，或使用数组索引获取字符
    let str18 = "Hello";
    console.log(str18.charAt(1)); // 输出: "e"
    console.log(str18[1]); // 输出: "e"

    // 查找正则表达式匹配
    // 使用 match() 方法查找与正则表达式匹配的子字符串。
    let str19 = "The rain in Spain stays mainly in the plain";
    let result3 = str19.match(/ain/g); // 查找所有 "ain"
    console.log(result3); // 输出: ["ain", "ain", "ain"]

    // 字符串切割为单词
    // 使用正则表达式和 split() 方法将字符串切割为单词数组。
    let str20 = "Hello, world! How are you?";
    let words = str20.split(/\W+/); // 根据非单词字符分割
    console.log(words); // 输出: ["Hello", "world", "How", "are", "you", ""]

    // 字符串转换为小写和大写（全局）
    // 通过 toLocaleLowerCase() 和 toLocaleUpperCase() 方法，可以基于特定语言环境进行大小写转换。
    let str21 = "İstanbul"; // 土耳其语中的大写字母
    console.log(str21.toLocaleLowerCase('tr-TR')); // 输出: "istanbul"

</script>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>

<script>
    const arr = [1, 2, 3, 4, 5];
    arr.forEach(function (item, index, arr) {
        console.log(item, index);
    });

    const arr2 = [1, 2, 3, 4, 5];
    const arr3 = arr2.map(function (item, index, arr) {
        return item * 2;
    });
    console.log(arr3);

    // filter
    // 作用：创建一个新数组，包含所有通过所提供函数测试的元素
    const arr4 = [1, 2, 3, 4, 5];
    const arr5 = arr4.filter(function (item, index, arr) {
        return item > 3;
    });
    console.log(arr5);

    // reduce
    // 作用：对数组中的每个元素执行一个 reducer 函数，最终会计算出一个单一的值。该方法也可以用于从数组中累加值。
    const arr6 = [1, 2, 3, 4, 5];
    const arr7 = arr6.reduce(function (prev, curr, index, arr) {
        return prev + curr;
    });
    console.log(arr7);

    // find
    // 作用：返回数组中满足提供的测试函数的第一个元素；如果没有找到，则返回 undefined。
    const arr8 = [1, 2, 3, 4, 5];
    const arr9 = arr8.find(function (item, index, arr) {
        return item > 3;
    });
    console.log(arr9);

    // findIndex
    // 作用：返回数组中满足提供的测试函数的第一个元素的索引；如果没有找到，则返回 -1。
    const arr10 = [1, 2, 3, 4, 5];
    const arr11 = arr10.findIndex(function (item, index, arr) {
        return item > 3;
    });
    console.log(arr11);

    // push()
    // 作用：向数组末尾添加一个或多个元素，并返回新数组的长度。
    let arr12 = [1, 2, 3];
    arr12.push(4);
    console.log(arr12); // 输出: [1, 2, 3, 4]

    // pop()
    // 作用：删除数组末尾的元素，并返回该元素。
    let arr13 = [1, 2, 3];
    let lastElement = arr13.pop();
    console.log(lastElement); // 输出: 3
    console.log(arr13); // 输出: [1, 2]

    // shift()
    // 作用：删除数组开头的元素，并返回该元素。
    let arr14 = [1, 2, 3];
    let firstElement = arr14.shift();
    console.log(firstElement); // 输出: 1
    console.log(arr14); // 输出: [2, 3]

    // unshift()
    // 作用：向数组开头添加一个或多个元素，并返回新数组的长度。
    let arr15 = [2, 3];
    arr15.unshift(1);
    console.log(arr15); // 输出: [1, 2, 3]

    // splice()
    // 作用：添加或删除数组中的元素。可以从指定位置开始删除特定数量的元素，也可以添加元素。
    let arr16 = [1, 2, 3, 4, 5];
    arr16.splice(2, 1, 'a', 'b'); // 从索引2处删除1个元素，并插入 'a' 和 'b'
    console.log(arr16); // 输出: [1, 2, 'a', 'b', 4, 5]

    // slice()
    // 作用：返回数组的浅拷贝，包含从开始到结束（不包含结束）之间的所有元素。
    let arr17 = [1, 2, 3, 4, 5];
    let newArr = arr17.slice(1, 4); // 从索引1到索引4（不包括4）
    console.log(newArr); // 输出: [2, 3, 4]

    // concat()
    // 作用：合并两个或多个数组，并返回一个新数组。
    let arr18 = [1, 2];
    let arr19 = [3, 4];
    let newArr2 = arr18.concat(arr19);
    console.log(newArr2); // 输出: [1, 2, 3, 4]

    // includes()
    // 作用：判断数组是否包含某个值，返回布尔值。
    let arr20 = [1, 2, 3];
    console.log(arr20.includes(2)); // 输出: true
    console.log(arr20.includes(4)); // 输出: false

    // indexOf()
    // 作用：返回数组中某个值首次出现的位置，如果不存在则返回 -1。
    let arr21 = [1, 2, 3];
    console.log(arr21.indexOf(2)); // 输出: 1
    console.log(arr21.indexOf(4)); // 输出: -1

    // every()
    // 作用：测试数组中的所有元素是否都通过了指定函数的测试。
    let arr22 = [1, 2, 3];
    let allPositive = arr22.every(num => num > 0);
    console.log(allPositive); // 输出: true

    // some()
    // 作用：测试数组中是否至少有一个元素通过了指定函数的测试
    let arr23 = [1, -2, 3];
    let hasNegative = arr23.some(num => num < 0);
    console.log(hasNegative); // 输出: true

    // flat()
    // 作用：将嵌套数组（数组的数组）拍平，可以指定拍平的深度。
    let arr24 = [1, [2, [3, 4]]];
    let flatArr = arr24.flat(2); // 拍平到深度2
    console.log(flatArr); // 输出: [1, 2, 3, 4]

    // forEach()
    // 作用：对数组的每个元素执行一次提供的函数，无返回值。
    let arr25 = [1, 2, 3];
    arr25.forEach(num => console.log(num)); // 输出: 1 2 3

</script>

</html>