JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】

如下是对 JavaScript 操作数组和字符串的方法的汇总

数组

数组的常用方法

操作方法

数组基本操作可以归纳为增、删、改、查，需要留意的是哪些方法会对原数组产生影响，哪些方法不会

下面是对数组常用的操作方法做一个归纳

增

下面前三种是对原数组产生影响的增添方法，第四种则不会对原数组产生影响

• push()
• unshift()
• splice()
• concat()

push()

push()方法接收任意数量的参数，并将它们添加到数组末尾，返回数组的最新长度

let colors = [] // 创建一个数组
let count = colors.push("res", "green") // 推入两项
console.log(count) // 2

unshift()

unshift()在数组开头添加任意多个值，然后返回新的数组长度

let colors = new Array() // 创建一个数组
let count = colors.unshift("red", "green") // 从数组开头推入两项
alert(count) // 2

splice()

splice() 是 JavaScript 数组的一个原生方法，用于在数组中插入、删除或替换元素。这个方法可以接收多个参数，其中前两个参数是必需的。

🗨️第一个参数，要操作的起始位置，也就是从哪个下标开始进行插入、删除或替换。

🗨️第二个参数，要删除的元素数量，如果为 0，则表示不删除任何元素，只进行插入操作。

🗨️第三个参数及以后，要插入到数组中的新元素，可以插入任意数量的元素。

删除元素

如果想从数组中删除元素，可以将第二个参数设为要删除的元素数量，而后面不传其他的插入元素：

const arr = [1, 2, 3, 4, 5];
arr.splice(2, 2); // 从下标为 2 的位置开始，删除两个元素
console.log(arr); // 输出：[1, 2, 5]

splice(2, 2) 表示从下标为 2 的位置开始，删除 2 个元素（即删除下标为 2 和 3 的元素），最终数组变成了 [1, 2, 5]。

插入元素

如果想向数组中插入新的元素，可以将第二个参数设为 0，然后在后面传入要插入的元素：

const arr = [1, 2, 3, 4, 5];
arr.splice(2, 0, 'a', 'b', 'c'); // 从下标为 2 的位置开始，插入三个元素
console.log(arr); // 输出：[1, 2, "a", "b", "c", 3, 4, 5]

splice(2, 0, ‘a’, ‘b’, ‘c’) 表示从下标为 2 的位置开始，删除 0 个元素，并插入三个元素（即插入 ‘a’、‘b’ 和 ‘c’），最终数组变成了 [1, 2, “a”, “b”, “c”, 3, 4, 5]。

替换元素

如果想替换数组中的某个元素，可以将第二个参数设为 1，并在后面传入要替换的新元素：

const arr = [1, 2, 3, 4, 5];
arr.splice(2, 1, 'a', 'b'); // 从下标为 2 的位置开始，删除一个元素，插入两个新元素
console.log(arr); // 输出：[1, 2, "a", "b", 4, 5]

splice(2, 1, ‘a’, ‘b’) 表示从下标为 2 的位置开始，删除 1 个元素（也就是删除下标为 2 的元素 3），并插入两个新元素 ‘a’ 和 ‘b’，最终数组变成了 [1, 2, “a”, “b”, 4, 5]。

concat()

concat()方法是JavaScript数组的一个内置方法，用于合并两个或多个数组。当调用concat()方法时，它会创建原始数组的一个副本，并将指定的参数数组连接到副本的末尾。这样做不会改变原始数组，而是返回一个新的合并后的数组。

我们来检验一下它的语法

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const newArray = array1.concat(array2);

console.log(newArray); // 输出: [1, 2, 3, 4, 5, 6]
console.log(array1); // 输出: [1, 2, 3]，原始数组没有改变
console.log(array2); // 输出: [4, 5, 6]，原始数组没有改变

如上所示，通过调用concat()方法，我们创建了一个新数组newArray，它包含了array1和array2的合并结果。原始数组array1和array2保持不变。

当使用concat()方法时，可以传递一个或多个数组作为参数

// 合并两个数组
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const newArray = array1.concat(array2);
console.log(newArray); // 输出: [1, 2, 3, 4, 5, 6]

// 合并三个数组
const array3 = [7, 8, 9];
const newArray2 = array1.concat(array2, array3);
console.log(newArray2); // 输出: [1, 2, 3, 4, 5, 6, 7, 8, 9]

// 合并空数组
const emptyArray = [];
const newArray3 = array1.concat(emptyArray);
console.log(newArray3); // 输出: [1, 2, 3]

// 合并字符串和数组
const array4 = ['a', 'b', 'c'];
const newArray4 = array1.concat(array4, 'd');
console.log(newArray4); // 输出: [1, 2, 3, 'a', 'b', 'c', 'd']

我们使用了concat()方法将多个数组合并成一个新数组。注意，传递给concat()方法的参数可以是数组，也可以是其他类型的值。在最后，我们将字符串和数组一起传递给concat()方法，新数组中包含了原始数组的元素以及额外的字符串。

咱继续看一个复杂的

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const array3 = [7, 8, 9];

const nestedArray = [array1, array2];

const newArray = array1.concat(array2, array3, ['a', 'b'], ...nestedArray);
console.log(newArray);
// 输出: [1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', [1, 2, 3], [4, 5, 6]]

咱们定义了三个数组array1、array2和array3。然后，咱们创建了一个嵌套数组nestedArray，它包含了array1和array2作为元素。

接下来，咱们使用concat()方法将多个数组合并成一个新数组。除了传递array1、array2和array3之外，咱们还传递了一个包含字符串数组[‘a’, ‘b’]，以及使用扩展运算符(…)展开的nestedArray。

最终，新数组newArray包含了原始数组的所有元素，以及额外的字符串和嵌套数组。注意，嵌套数组没有展开，而是保留了原始的形式。

删

下面前三种都会影响原数组，最后一项不影响原数组:

• pop()
• shift()
• splice()
• slice()

pop()

pop()方法用于删除数组的最后一项，同时减少数组的length值，返回被删除的项

const array1 = [1, 2, 3];
const lastItem = array1.pop(); // 删除最后一项，并返回被删除的项

console.log(lastItem); // 输出: 3
console.log(array1); // 输出: [1, 2]

如上所示，咱们定义了一个数组array1，并调用pop()方法来删除最后一项。pop()方法返回被删除的项3，原始数组变成了[1, 2]。

需要注意的是，pop()方法不仅会删除最后一项，还会更改数组的长度值。同时，当原始数组为空数组时，调用pop()方法将返回undefined，并且不会更改数组的长度。

shift()

shift()方法是JavaScript数组的另一个内置方法，它用于从数组的开头删除第一项，并返回被删除的项。

const array1 = [1, 2, 3];
const firstItem = array1.shift(); // 删除第一项，并返回被删除的项

console.log(firstItem); // 输出: 1
console.log(array1); // 输出: [2, 3]

如上定义了一个数组array1，并调用shift()方法来删除第一项。shift()方法返回被删除的项1，原始数组变成了[2, 3]。

需要注意的是，shift()方法不仅会删除第一项，还会更改数组的长度值。同时，当原始数组为空数组时，调用shift()方法将返回undefined，并且不会更改数组的长度。

splice()

前面我们已经讲过其删的用法了，这里简单描述一下：传入两个参数，分别是开始位置，删除元素的数量，返回包含删除元素的数组

let colors = ["red", "green", "blue"]
let removed = colors.splice(0, 1) // 删除第一项
console.log(colors) // green, blue
console.log(remove) // red，只有一个元素的数组

slice()

slice()方法是JavaScript数组的一个内置方法，用于创建一个包含原有数组中一个或多个元素的新数组，而不会影响原始数组。

const array1 = [1, 2, 3, 4, 5];
const newArray = array1.slice(1, 4);

console.log(newArray); // 输出: [2, 3, 4]
console.log(array1); // 输出: [1, 2, 3, 4, 5]

如上代码，我们定义了一个数组array1。然后，我们调用slice()方法，并传入索引参数1和4，这表示我们想要提取从索引1（包括）到索引4（不包括）之间的元素。

slice()方法返回一个新数组newArray，其中包含了原始数组中指定索引范围内的元素[2, 3, 4]。原始数组array1保持不变，仍然是[1, 2, 3, 4, 5]。

我们可以看到，slice()方法不会修改原始数组，并且可以接受两个可选的参数，用于指定开始和结束提取的索引位置。

注意：如果只传入一个参数，则提取从该索引开始到数组末尾的所有元素。如果未传入任何参数，则提取整个数组的副本。

最后，我们来看看slice的妙用

1. 复制一个数组

我们使用slice()方法而没有传入任何参数，从而创建了原始数组originalArray的一个副本copiedArray。

const originalArray = [1, 2, 3, 4, 5];
const copiedArray = originalArray.slice();
console.log(copiedArray); // 输出: [1, 2, 3, 4, 5]

2. 截取数组的最后几个元素

我们使用slice()方法传入负数索引-3，这样可以截取数组array1中的最后三个元素。

const array1 = [1, 2, 3, 4, 5];
const lastThreeItems = array1.slice(-3);
console.log(lastThreeItems); // 输出: [3, 4, 5]

3. 删除数组中的特定元素：

我们使用slice()方法两次来删除数组array1中的第三个元素。首先，我们使用slice(0, 2)来获取索引0到索引2之间的元素（不包括索引2），然后使用concat()方法将其与索引大于2的元素连接起来，从而得到一个新数组newArray。

const array1 = [1, 2, 3, 4, 5];
const newArray = array1.slice(0, 2).concat(array1.slice(3));
console.log(newArray); // 输出: [1, 2, 4, 5]

4. 分页功能：

我们可以根据每页显示的条目数和当前页码使用slice()方法来实现分页功能。首先，我们计算当前页的起始索引startIndex和终止索引endIndex，然后使用这些索引来截取原始数组中对应页码的元素。

const itemsPerPage = 10; // 每页显示的条目数
const currentPage = 2; // 当前页码
const startIndex = (currentPage - 1) * itemsPerPage;
const endIndex = startIndex + itemsPerPage;
const paginatedItems = originalArray.slice(startIndex, endIndex);
console.log(paginatedItems); // 输出：当前页码上的条目

5. 倒序排列：

我们首先使用slice()方法创建了原始数组array1的一个副本，然后调用reverse()方法对副本进行倒序排列。

const array1 = [1, 2, 3, 4, 5];
const reversedArray = array1.slice().reverse();
console.log(reversedArray); // 输出: [5, 4, 3, 2, 1]

6. 数组元素的随机抽样：

我们使用slice()方法和sort()方法来实现数组元素的随机抽样。首先，我们使用slice()方法创建了原始数组array1的一个副本，然后使用sort()方法和随机数来对副本进行洗牌。最后，使用slice()方法截取洗牌后的数组中的前几个元素作为抽样结果。

const array1 = [1, 2, 3, 4, 5];
const sampleSize = 3; // 抽样的大小
const shuffledArray = array1
  .slice()
  .sort(() => 0.5 - Math.random())
  .slice(0, sampleSize);
console.log(shuffledArray); // 输出: 随机抽样的元素数组

改

修改原来数组的内容，常用的是 splice，前面我们已经详细介绍过了，现在简单描述一下语法：

传入三个参数，分别是开始位置，要删除元素的数量，要插入的任意多个元素，返回删除元素的数组,对原数组产生影响

let colors = ["red", "green", "blue"]
let removed = colors.splice(1, 1, "red", "purple") // 插入两个值，删除一个元素
console.log(colors) // red, red, purple, blue
console.log(removed) // green, 只有一个元素的数组

查

也即查找元素，返回元素坐标或者元素值

• indexOf()
• includes()
• find()

indexOf()

返回要查找的元素在数组中的位置，如果没找到则返回 -1

我们首先创建了一个数组array。然后，我们使用indexOf()方法来查找数字3在数组中的位置，结果为2（索引从0开始）。接着，我们使用indexOf()方法查找数字6在数组中的位置，由于数组中没有数字6，所以返回-1。

需要注意的是，indexOf()方法只会返回第一个匹配项的索引。如果要查找所有匹配项的索引，可以使用循环结合indexOf()方法进行遍历。此外，indexOf()方法还可以接收第二个参数，表示搜索的起始位置。

const array = [1, 2, 3, 3, 5];

console.log(array.indexOf(3)); // 输出: 2

console.log(array.indexOf(6)); // 输出: -1

includes()

includes() 是数组的一个方法，用于判断数组中是否包含指定的元素，并返回相应的布尔值。如果找到了指定元素，则返回 true；如果没有找到，则返回 false。

使用语法如下：

array.includes(element)

其中，array 是要进行查找的数组，element 是要查找的元素。

示例：

const fruits = ['apple', 'banana', 'orange'];

console.log(fruits.includes('apple'));   // true
console.log(fruits.includes('grape'));   // false

fruits.includes(‘apple’) 返回 true，因为数组 fruits 中包含 ‘apple’ 这个元素。而 fruits.includes(‘grape’) 返回 false，因为数组中不存在 ‘grape’ 这个元素。

find()

find() 是数组的一个方法，用于查找并返回数组中第一个满足指定条件的元素。如果找到了匹配的元素，则返回该元素；如果没有找到，则返回 undefined。

使用语法如下：

array.find(callback(element[, index[, array]])[, thisArg])

其中，array 是要进行查找的数组，callback 是一个函数，用于定义匹配条件。

callback 函数可以接受三个参数：

element：当前正在被遍历的元素。
index（可选）：当前元素的索引。
array（可选）：原始数组。
thisArg（可选）在执行 callback 函数时作为 this 的值。

示例：

const numbers = [1, 2, 3, 4, 5];

const found = numbers.find(function(element) {
  return element > 3;
});

console.log(found);   // 4

排序方法

数组有两个方法可以用来对元素重新排序:

• reverse
• sort()

reverse() 方法会将数组中的元素顺序颠倒。即第一个元素变为最后一个，第二个元素变为倒数第二个，以此类推。

使用示例：

const numbers = [1, 2, 3, 4, 5];
numbers.reverse();
console.log(numbers);  // [5, 4, 3, 2, 1]

在上述示例中，numbers.reverse() 方法将数组 numbers 中的元素顺序进行了颠倒。

sort() 方法用于对数组进行排序，默认按照 Unicode 码点进行排序。它会将数组的元素转换为字符串，然后根据字符串的顺序进行排序。

使用示例：

const fruits = ['apple', 'banana', 'orange'];
fruits.sort();
console.log(fruits);  // ['apple', 'banana', 'orange']

在上述示例中，fruits.sort() 方法按照字母顺序对数组 fruits 进行了排序。

需要注意的是，sort() 方法会直接修改原数组，并且对字符串进行排序时是按照 Unicode 码点进行的。如果需要自定义排序规则，可以传入一个比较函数作为参数。

例如，按照数字大小对数组进行排序：

const numbers = [5, 1, 3, 2, 4];
numbers.sort(function(a, b) {
  return a - b;
});
console.log(numbers);  // [1, 2, 3, 4, 5]

在上述示例中，通过传入比较函数 function(a, b) { return a - b; }，实现了按照数字大小进行升序排序。

来看一道题吧：

对一个包含学生信息的数组进行排序，按照成绩从高到低排序，如果成绩相同则按照姓名的字母顺序排序。

const students = [
  { name: 'Tom', grade: 80 },
  { name: 'Jerry', grade: 90 },
  { name: 'Ana', grade: 70 },
  { name: 'Bob', grade: 80 }
];

students.sort(function(a, b) {
  if (a.grade !== b.grade) {
    // 如果成绩不同，则按照成绩从高到低排序
    return b.grade - a.grade;
  } else {
    // 如果成绩相同，则按照姓名的字母顺序排序
    return a.name.localeCompare(b.name);
  }
});

console.log(students);
// [
//   { name: 'Jerry', grade: 90 },
//   { name: 'Bob', grade: 80 },
//   { name: 'Tom', grade: 80 },
//   { name: 'Ana', grade: 70 }
// ]

转换方法

常见的转换方法：

join() 方法是数组的一个转换方法，它将数组中的所有元素转换为字符串，并可以使用指定的分隔符将它们连接起来。

join() 方法接收一个可选的参数，用于指定字符串的分隔符。如果没有提供该参数，默认使用逗号作为分隔符。

使用示例：

const fruits = ['apple', 'banana', 'orange'];
const result = fruits.join(', ');
console.log(result);  // "apple, banana, orange"

在上述示例中，fruits.join(', ') 将数组 fruits 中的元素用逗号和空格分隔开，返回了一个包含所有元素的字符串。

需要注意的是，join() 方法不会修改原数组，而是返回一个新的字符串。

当数组中的元素本身就是字符串类型时，它们会直接被连接起来，而不会添加额外的引号。

使用示例：

const colors = ['red', 'green', 'blue'];
const result = colors.join('-');
console.log(result);  // "red-green-blue"

在上述示例中，colors.join(‘-’) 将数组 colors 中的元素用连字符分隔开，返回了一个包含所有元素的字符串。

需要注意的是，如果数组中包含 null 或 undefined 等特殊值，它们会被转换为空字符串。

使用示例：

const values = [1, null, 3, undefined, 5];
const result = values.join(':');
console.log(result);  // "1::3::5"

在上述示例中，values.join(‘:’) 将数组 values 中的元素用冒号分隔开，null 和 undefined 被转换为空字符串。

总结一下，join() 方法可以将数组中的所有元素转换为字符串，并使用指定的分隔符连接起来，返回一个新的字符串。

迭代方法

• some
• every
• forEach
• filter
• map

some()

some()方法是JavaScript数组的一个内置方法，它对数组中的每个元素都应用一个测试函数，并且在至少有一个元素返回true时返回true，否则返回false。

下面是some()方法的语法：

array.some(function(currentValue, index, arr), thisValue)

参数说明：

• function(currentValue, index, arr)：必需。表示要对每个元素进行调用的测试函数。它可以接受三个参数：
  • currentValue：当前正在被测试的元素
  • index：当前元素在数组中的索引
  • arr：调用该方法的数组
• thisValue：可选。传递给测试函数的值作为this。

简单示例：

const numbers = [1, 2, 3, 4, 5];
const hasEvenNumber = numbers.some(function(number) {
  return number % 2 === 0;
});

console.log(hasEvenNumber); // 输出 true，因为数组中有偶数

every()

every()方法是JavaScript数组的一个内置方法，它对数组中的每个元素都应用一个测试函数，并且在所有元素都返回true时返回true，否则返回false

下面是every()方法的语法：

array.every(function(currentValue, index, arr), thisValue)

参数说明：

• function(currentValue, index, arr)：必需。表示要对每个元素进行调用的测试函数。它可以接受三个参数：
  • currentValue：当前正在被测试的元素。
  • index：当前元素在数组中的索引。
  • arr：调用该方法的数组。
• thisValue：可选。传递给测试函数的值作为this。

简单示例：

const numbers = [1, 2, 3, 4, 5];
const allArePositive = numbers.every(function(number) {
  return number > 0;
});

console.log(allArePositive); // 输出 true，因为数组中所有数字都是正数

在上面的示例中，我们定义了一个名为allArePositive的变量来存储every()方法的返回值。我们通过传递一个测试函数来检查数组中的所有数字是否都是正数。由于数组中所有数字都是正数，所以every()方法返回true。

forEach()

forEach()方法是JavaScript数组的一个内置方法，它对数组中的每个元素都应用一个函数。forEach()方法没有返回值。

下面是forEach()方法的语法：

array.forEach(function(currentValue, index, arr), thisValue)

参数说明：

• function(currentValue, index, arr)：必需。表示要对每个元素进行调用的函数。它可以接受三个参数：
  • currentValue：当前正在被处理的元素。
  • index：当前元素在数组中的索引。
  • arr：调用该方法的数组。
• thisValue：可选。传递给测试函数的值作为this。

下面是一个示例：

const numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number) {
  console.log(number);
});

// 输出如下：
// 1
// 2
// 3
// 4
// 5

在上面的示例中，我们使用forEach()方法遍历数组中的所有数字，并将它们打印到控制台上。

需要注意的是，由于forEach()方法没有返回值，因此无法在其中使用return语句来终止循环或提前返回。

filter()

filter()方法是JavaScript数组的一个内置方法，它对数组中的每个元素都应用一个测试函数，并返回符合条件的元素组成的新数组。

下面是filter()方法的语法：

array.filter(function(currentValue, index, arr), thisValue)

参数说明：

• function(currentValue, index, arr)：必需。表示要对每个元素进行调用的测试函数。它可以接受三个参数：
  • currentValue：当前正在被测试的元素。
  • index：当前元素在数组中的索引。
  • arr：调用该方法的数组。
• thisValue：可选。传递给测试函数的值作为this。

简单示例

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});

console.log(evenNumbers); // 输出 [2, 4]，返回了数组中的偶数

在上面的示例中，我们使用filter()方法筛选数组中的偶数。我们通过传递一个测试函数来检查数字是否是偶数，如果是，则将其保留到新数组中。最后，我们打印出新数组evenNumbers，其中包含原数组中的偶数。

map()

map()方法是JavaScript数组的一个内置方法，它对数组中的每个元素都应用一个函数，并返回由每次函数调用的结果构成的新数组。

下面是map()方法的语法：

array.map(function(currentValue, index, arr), thisValue)

参数说明：

• function(currentValue, index, arr)：必需。表示要对每个元素进行调用的函数。它可以接受三个参数：
  • currentValue：当前正在被处理的元素。
  • index：当前元素在数组中的索引。
  • arr：调用该方法的数组。
• thisValue：可选。传递给测试函数的值作为this。

简单示例

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(function(number) {
  return number * 2;
});

console.log(doubledNumbers); // 输出 [2, 4, 6, 8, 10]，返回原数组中的每个元素乘以2后的结果

在上面的示例中，我们使用map()方法对数组中的每个数字进行操作，每个数字乘以2。然后，将每次函数调用的结果构成一个新数组doubledNumbers并打印出来。

通过map()方法，我们可以对数组中的每个元素进行自定义的操作，并将操作的结果组成一个新的数组返回。

最后我们来进行练习：

1. 根据用户输入过滤并展示出符合条件的图片列表的组件

HTML 结构：

<input id="search-input" type="text" placeholder="输入关键词">

<div id="image-list"></div>

已知网络请求返回的数据结构如下：

const images = [
  { name: 'image-1', tags: ['red', 'blue'] },
  { name: 'image-2', tags: ['green', 'yellow'] },
  { name: 'image-3', tags: ['red', 'pink'] },
  { name: 'image-4', tags: ['blue', 'orange'] },
  { name: 'image-5', tags: ['red', 'orange'] },
  { name: 'image-6', tags: ['green', 'purple'] },
  { name: 'image-7', tags: ['blue', 'purple'] },
  { name: 'image-8', tags: ['pink', 'orange'] }
];

业务逻辑：

我们通过使用 fetch 函数从指定的 API 地址获取图片列表数据。然后，在输入框输入关键词时，再进行过滤、判断和渲染操作。

// 获取输入框和图片列表元素
const searchInput = document.getElementById('search-input');
const imageList = document.getElementById('image-list');

// 监听输入框的输入事件
searchInput.addEventListener('input', function() {
  // 获取输入框的值，并将其转换为小写字母
  const inputValue = searchInput.value.toLowerCase();

  // 发起网络请求获取图片列表数据
  fetch('https://api.example.com/images')
    .then(response => response.json())
    .then(data => {
      // 过滤出符合关键词的图片列表
      const filteredImages = data.filter(function(image) {
        // 使用 some() 方法判断是否存在符合关键词的 tags
        return image.tags.some(function(tag) {
          return tag.toLowerCase().includes(inputValue);
        });
      });

      // 判断是否显示图片列表的标题
      const titleVisible = filteredImages.every(function(image) {
        return image.tags.some(function(tag) {
          return tag.toLowerCase().includes(inputValue);
        });
      });

      // 渲染图片列表
      renderImageList(filteredImages, titleVisible);
    })
    .catch(error => {
      console.error('Error fetching images:', error);
    });
});

function renderImageList(images, showTitle) {
  // 使用 map() 方法将符合条件的图片渲染出来
  const html = images.map(function(image) {
    return `<img src="${image.url}" alt="${image.name}">`;
  }).join('');

  // 根据图片列表是否存在内容来决定是否显示标题
  if (showTitle) {
    imageList.innerHTML = `<h2>Filtered Images</h2>${html}`;
  } else {
    imageList.innerHTML = html;
  }
}

字符串

字符串的常用方法

操作方法

增

这里增的意思并不是说直接增添内容，而是创建字符串的一个副本，再进行操作除了常用+以及${}进行字符串拼接之外，还可通过concat

concat()

let stringValue = "hello ";
let result = stringValue.concat("world");
console.log(result); // "hello world"
console.log(stringValue); // "hello "

删

这里的删的意思并不是说删除原字符串的内容，而是创建字符串的一个副本，再进行操作

常见的有：

• slice()
• substr()
• substring()

这些方法的主要区别在于参数的不同。

slice(startIndex, endIndex)方法根据指定的开始索引和结束索引来提取源字符串的子字符串。它返回从开始索引（包括）到结束索引（不包括）之间的字符。

示例：

let str = "Hello World";
let result = str.slice(0, 5);
console.log(result); // 输出："Hello"

如上，slice(0, 5)提取了字符串str从索引0开始到索引5之前的子字符串。

substr(startIndex, length)方法根据指定的开始索引和长度来提取源字符串的子字符串。它返回从开始索引位置开始并且具有指定长度的字符。

示例：

let str = "Hello World";
let result = str.substr(6, 5);
console.log(result); // 输出："World"

如上，substr(6, 5)提取了字符串str从索引6开始的5个字符的子字符串。

substring(startIndex, endIndex)方法根据指定的开始索引和结束索引来提取源字符串的子字符串。与slice()方法类似，它返回从开始索引（包括）到结束索引（不包括）之间的字符。

示例：

let str = "Hello World";
let result = str.substring(6, 11);
console.log(result); // 输出："World"

如上，substring(6, 11)提取了字符串str从索引6开始到索引11之前的子字符串。

slice()和substring()方法在大部分情况下是相似的，它们都是用来提取字符串中一段子串的。

它们的区别主要在于对负数索引的处理和对参数顺序的不同处理方式。

1. 对负数索引的处理：

• slice(startIndex, endIndex)方法允许使用负数索引。当使用负数索引时，它们会从字符串的末尾开始计数。

示例：

let str = "Hello World";
let result = str.slice(-5, -1); // "Worl"

• substring(startIndex, endIndex)方法不支持负数索引，如果传入负数，它们会被视为0。

示例：

let str = "Hello World";
let result = str.substring(-5, -1); // "Hello"

2. 对参数顺序的处理：

• slice(startIndex, endIndex)方法会自动调整参数顺序，确保startIndex小于等于endIndex。

示例：

let str = "Hello World";
let result = str.slice(6, 2); // "llo "

• substring(startIndex, endIndex)方法不会自动调整参数顺序，如果startIndex大于endIndex，它们会被视为0。

示例：

let str = "Hello World";
let result = str.substring(6, 2); // " "

总结来说，slice()和substring()方法在常规用法下非常相似，它们都可以提取字符串的子串。但是在对负数索引和参数顺序处理上存在一些细微差别。

改

这里改的意思也不是改变原字符串，而是创建字符串的一个副本，再进行操作

常见的有：

• trim()、trimLeft()、trimRight()
• repeat()
• padStart()、padEnd()
• toLowerCase()、toUpperCase()

trim()、trimLeft()、trimRight()

删除前、后或前后所有空格符，再返回新的字符串

let stringValue = " hello world "
let trimStringValue() = stringValue.trim()
console.log(trimStringValue) // "hello world"

repeat()

接收一个整数参数，表示要将字符串复制多少次，然后返回拼接所有副本后的结果

let stringValue = "china "
let copyStringValue = stringValue.repeat(2)

padStart()、padEnd()

padStart()和padEnd()方法都用于将字符串填充到指定长度。

padStart()方法用于在字符串的开头添加空格或其他字符，以便使字符串达到指定的长度，如果原始字符串已经达到或超过指定的长度，则不进行任何操作。它接受两个参数，第一个参数表示目标长度，第二个参数表示用于填充字符串的字符，默认为空格。

以下是padStart()方法的使用示例：

let str = "Hello";
let result = str.padStart(10, "-");
console.log(result); // 输出："-----Hello"

在上述示例中，padStart(10, “-”)将在字符串str的开头添加5个"-"字符，以便使字符串达到10个字符的长度。

padEnd()方法用于在字符串的结尾添加空格或其他字符，以便使字符串达到指定的长度，如果原始字符串已经达到或超过指定的长度，则不进行任何操作。它接受两个参数，第一个参数表示目标长度，第二个参数表示用于填充字符串的字符，默认为空格。

以下是padEnd()方法的使用示例：

let str = "World";
let result = str.padEnd(10, "-");
console.log(result); // 输出："World-----"

在上述示例中，padEnd(10, “-”)将在字符串str的结尾添加5个"-"字符，以便使字符串达到10个字符的长度。

需要注意的是，如果用于填充字符串的字符长度超过要填充的长度，则会将其截取为指定长度。如果不传入第二个参数，则默认使用空格进行填充。

toLowerCase()、toUpperCase()

大小写转化

let stringValue = "hello World"
console.log(stringValue.toLowerCase()) // hello world
console.log(stringValue.toUpperCase()) // HELLO WORLD

查

除了通过索引的方式来获取字符串的值，还可以通过：

• charAt()
• indexOf()
• startWith()
• includes()

charAt()

charAt()方法用于返回给定索引位置的字符。它接受一个整数作为参数，该整数指定要返回字符的位置。索引位置从0开始，表示字符串中的第一个字符。

以下是charAt()方法的使用示例：

let str = "Hello World";
let char = str.charAt(4);
console.log(char); // 输出：o

如上，charAt(4)返回在字符串str中索引为4的字符，即字母"o"。

需要注意的是，如果给定的索引超出了字符串的范围，charAt()方法将返回一个空字符串。

let str = "Hello World";
let char = str.charAt(20);
console.log(char); // 输出：空字符串

如上，索引20超出了字符串str的范围，因此返回一个空字符串

indexOf()

indexOf()方法用于在字符串中搜索指定的子字符串，并返回该子字符串第一次出现的位置。如果没有找到该子字符串，则返回-1。

以下是indexOf()方法的使用示例：

let str = "Hello World";
let pos = str.indexOf("World");
console.log(pos); // 输出：6

如上，indexOf(“World”)在字符串str中搜索子字符串"World"，并返回该子字符串第一次出现的位置，即6。

需要注意的是，indexOf()方法区分大小写。如果要进行不区分大小写的搜索，请使用toLowerCase()或toUpperCase()先将字符串转换为小写或大写，再进行搜索。

let str = "Hello World";
let pos = str.indexOf("world");
console.log(pos); // 输出：-1，未找到

在上述示例中，由于"world"与"World"大小写不同，因此indexOf()方法未能找到该子字符串，返回-1。

startWith() 、includes()

startsWith()和includes()方法都用于在字符串中搜索指定的子字符串，并返回一个布尔值表示是否包含该子字符串。

startsWith()方法用于判断字符串是否以指定的子字符串开头。它接受一个字符串参数，用于指定要搜索的子字符串。如果原始字符串以该子字符串开头，则返回true，否则返回false。

以下是startsWith()方法的使用示例：

let str = "Hello World";
let result = str.startsWith("Hello");
console.log(result); // 输出：true

如上，startsWith(“Hello”)判断字符串str是否以"Hello"开头，并返回true，因为字符串str确实以"Hello"开头。

includes()方法用于判断字符串是否包含指定的子字符串。它接受一个字符串参数，用于指定要搜索的子字符串。如果原始字符串包含该子字符串，则返回true，否则返回false。

以下是includes()方法的使用示例：

let str = "Hello World";
let result = str.includes("World");
console.log(result); // 输出：true

如上，includes(“World”)判断字符串str是否包含"World"子字符串，并返回true，因为字符串str确实包含"World"子字符串。

需要注意的是，startsWith()和includes()方法都区分大小写。如果要进行不区分大小写的搜索，请使用toLowerCase()或toUpperCase()先将字符串转换为小写或大写，再进行搜索。

转换方法

split()

split() 是 JavaScript 字符串对象的一个方法，它用于将字符串按照指定的分隔符进行拆分，并返回一个由拆分后的子字符串组成的数组。

split() 方法接收一个参数，用于表示要使用的分隔符。该参数可以是一个字符串或正则表达式。如果传入的是一个字符串，字符串中的每个字符都会被视为分隔符，用于拆分字符串。如果传入的是一个正则表达式，则根据匹配到的模式来拆分字符串。

下面是一个使用 split() 方法的示例：

const str = 'The quick brown fox jumps over the lazy dog.';
const separator = ' ';

const arr = str.split(separator);
console.log(arr);  // [ 'The', 'quick', 'brown', 'fox', 'jumps', 'over', 'the', 'lazy', 'dog.' ]

如上，我们使用空格 ’ ’ 来作为分隔符，将字符串 str 拆分成了一个由单词组成的数组。split() 方法返回的数组为 [ ‘The’, ‘quick’, ‘brown’, ‘fox’, ‘jumps’, ‘over’, ‘the’, ‘lazy’, ‘dog.’ ]。

需要注意的是，如果传入的分隔符为空字符串 ‘’，则会将字符串拆分为每个字符一个元素的数组。如果传入的分隔符为 null 或没有传入参数，则返回包含整个字符串的数组。

练习split()

split() 方法非常灵活，可以根据需要选择不同的分隔符和参数。它可以帮助我们方便地处理字符串，并将其拆分为需要的部分。

一

const str1 = 'apple,banana,orange';
const str2 = '1 2 3 4 5';
const str3 = 'Hello,World!';
const str4 = 'apple|banana|orange';
const str5 = 'abcbdbbdbdbbdddbdbddbb';

// 使用逗号分隔字符串，生成数组
const arr1 = str1.split(',');
console.log(arr1);  // [ 'apple', 'banana', 'orange' ]

// 使用空格分隔字符串，生成数组
const arr2 = str2.split(' ');
console.log(arr2);  // [ '1', '2', '3', '4', '5' ]

// 使用正则表达式分隔字符串，生成数组
const arr3 = str3.split(/[,!]/);
console.log(arr3);  // [ 'Hello', 'World' ]

// 使用竖线分隔字符串，生成数组
const arr4 = str4.split('|');
console.log(arr4);  // [ 'apple', 'banana', 'orange' ]

// 不传入参数，默认将字符串拆分为每个字符一个元素的数组
const arr5 = str5.split();
console.log(arr5);  // [ 'a', 'b', 'c', 'b', 'd', 'b', 'd', 'b', 'd', 'b', 'b', 'd', 'd', 'b', 'd', 'b' ]

// 拆分指定次数，使用正则表达式拆分字符串
const arr6 = str5.split(/b/, 4);
console.log(arr6);  // [ 'a', 'c', 'dbd', 'd' ]

二

我们对一个字符串进行了多个操作：

1. 使用空格将字符串拆分为单词，并计算单词数量。
2. 统计每个单词的出现次数，并生成一个包含单词和频率的对象。
3. 使用正则表达式将字符串拆分为句子，并计算句子数量。
4. 查找包含特定单词的句子。
5. 将字符串拆分为字符数组，并逆序排列字符。
6. 使用 join() 方法将逆序排列的字符组合成字符串。

const text = 'Welcome to the JavaScript world! Keep learning and keep coding!';

// 将字符串拆分为单词，并计算单词数量
const words = text.split(' ');
const wordCount = words.length;
console.log('单词数量:', wordCount);  // 单词数量: 9

// 统计每个单词的出现次数
const wordFrequency = {};
words.forEach(word => {
  if (word in wordFrequency) {
    wordFrequency[word]++;
  } else {
    wordFrequency[word] = 1;
  }
});
console.log('单词频率:', wordFrequency);
/*
单词频率: {
  Welcome: 1,
  to: 1,
  the: 1,
  JavaScript: 1,
  world!: 1,
  Keep: 1,
  learning: 1,
  and: 1,
  coding!: 1
}
*/

// 将字符串拆分为句子，并计算句子数量
const sentences = text.split(/[.!?]/);
const sentenceCount = sentences.length;
console.log('句子数量:', sentenceCount);  // 句子数量: 2

// 查找包含特定单词的句子
const keyword = 'learning';
const sentencesWithKeyword = sentences.filter(sentence => sentence.toLowerCase().includes(keyword));
console.log('包含关键词 "', keyword, '" 的句子:', sentencesWithKeyword);
// 包含关键词 " learning " 的句子: [ ' Keep learning and keep coding' ]

// 拆分字符串为字符数组，并逆序排列字符
const characters = text.split('');
const reversedCharacters = characters.reverse();
const reversedText = reversedCharacters.join('');
console.log('逆序排列的字符串:', reversedText);
// 逆序排列的字符串: !gnidoc peek dna gninrael peeK .dlrow tpircSavaJ eht ot emocleW

模板匹配方法

针对正则表达式，字符串设计了几个方法:

• match()
• search()
• replace()

match()

match() 方法是 JavaScript 字符串对象的一个方法，它用于执行正则表达式匹配操作，并返回一个包含匹配结果的数组。

match() 方法接收一个参数，可以是一个正则表达式字符串或一个 RegExp 对象。如果参数是正则表达式字符串，则会隐式地创建一个 RegExp 对象来进行匹配。

match() 方法会返回一个数组，其中包含所有与正则表达式匹配的子字符串。如果没有匹配到任何内容，则返回 null。

下面是一个使用 match() 方法的示例：

const str = 'Hello, world!';
const pattern = /[A-Z]/g;

const matches = str.match(pattern);
console.log(matches);  // ['H']

如上，我们使用正则表达式 /[A-Z]/g 来匹配字符串 str 中的大写字母。match() 方法返回了一个数组，其中包含与正则表达式匹配的子字符串 ‘H’。

需要注意的是，如果正则表达式包含全局标志 g，则 match() 方法将返回所有匹配的子字符串组成的数组。如果正则表达式没有全局标志 g，则 match() 方法只返回第一个匹配项及其相关信息的数组。

search()

search() 方法是 JavaScript 字符串对象的一个方法，它用于在字符串中查找指定正则表达式的第一个匹配项，并返回匹配项的索引值。如果没有找到匹配项，则返回 -1。

search() 方法接收一个参数，可以是一个正则表达式字符串或一个 RegExp 对象。如果参数是一个字符串，则会被隐式地转换为一个正则表达式对象来进行匹配。

下面是一个使用 search() 方法的示例：

const str = 'The quick brown fox jumps over the lazy dog.';
const pattern = /brown/;

const index = str.search(pattern);
console.log(index);  // 10

如上，我们使用正则表达式 /brown/ 来查找字符串 str 中的 brown 子字符串。search() 方法返回了匹配项的索引值 10。

需要注意的是，如果正则表达式包含全局标志 g，则 search() 方法将忽略该标志，并始终只返回第一个匹配项的索引值。

replace()

replace() 方法是 JavaScript 字符串对象的一个方法，它用于在字符串中查找指定的模式并用另一个字符串或函数来替换它。该方法返回一个新的字符串，不改变原来的字符串。

replace() 方法接收两个参数，第一个参数可以是一个正则表达式或字符串，用于表示要替换的模式或文本。如果该参数是字符串，则只会替换第一个匹配项。如果该参数是一个正则表达式，且包含全局标志 g，则会替换所有匹配项。第二个参数可以是一个字符串或函数，用于表示要替换成的内容。

下面是一个使用 replace() 方法的示例：

const str = 'The quick brown fox jumps over the lazy dog.';
const pattern = /fox/;

const newStr = str.replace(pattern, 'cat');
console.log(newStr);  // 'The quick brown cat jumps over the lazy dog.'

如上，我们使用正则表达式 /fox/ 来查找字符串 str 中的 fox 子字符串，并使用字符串 ‘cat’ 来替换它。replace() 方法返回了一个新的字符串 ‘The quick brown cat jumps over the lazy dog.’。

需要注意的是，如果第二个参数是一个函数，则该函数将被调用来生成替换文本。该函数接收匹配到的子字符串、匹配项在字符串中的索引、以及原始字符串作为参数。函数应该返回一个用来替换匹配项的字符串。

小结

加油向未来