深入剖析 JavaScript 数组和字符串的各种操作技巧

🙂博主：小猫娃来啦
🙂文章核心：深入剖析 JavaScript 数组和字符串的各种操作技巧

近日总结了一下js数组和字符串相关操作方法，今天输出一篇博客，进行前端有关数组字符串相关操作方法的汇总，以后如果能用上，就当字典一样来查询方法即可。本篇博客简单粗暴，直接提供语法相关例子。

参考文献：
MDN官网
如何利用splice（）和slice（）方法操作数组
js数组高阶函数——filter()方法
js数组高阶函数——includes()方法
js数组高阶函数——map()方法
CSDN的C知道

数组方法

push()方法

向数组的末尾添加一个或多个新元素，并返回修改后数组的新长度。
语法：

arr.push(element1, element2, ..., elementN)

参数：

• element1, element2, …, elementN：要添加到数组末尾的元素。

返回值：

• 修改后数组的新长度。

例子：

var fruits = ['apple', 'banana', 'orange'];
console.log(fruits); // 输出：['apple', 'banana', 'orange']

fruits.push('grape');
console.log(fruits); // 输出：['apple', 'banana', 'orange', 'grape']

fruits.push('kiwi', 'pineapple');
console.log(fruits); // 输出：['apple', 'banana', 'orange', 'grape', 'kiwi', 'pineapple']

unshift()方法

向数组的开头添加一个或多个新元素，并返回修改后数组的新长度
语法：

arr.unshift(element1, element2, ..., elementN)

参数：

• element1, element2, …, elementN：要添加到数组开头的元素。

返回值：

• 修改后数组的新长度。

例子：

var fruits = ['apple', 'banana', 'orange'];
console.log(fruits); // 输出：['apple', 'banana', 'orange']

fruits.unshift('grape');
console.log(fruits); // 输出：['grape', 'apple', 'banana', 'orange']

fruits.unshift('kiwi', 'pineapple');
console.log(fruits); // 输出：['kiwi', 'pineapple', 'grape', 'apple', 'banana', 'orange']

shift()方法

删除数组的第一个元素，并返回被删除的元素
语法：

arr.shift()

参数：无

返回值：被删除的元素。

例子：

var fruits = ['apple', 'banana', 'orange'];
console.log(fruits); // 输出：['apple', 'banana', 'orange']

var shiftedElement = fruits.shift();
console.log(shiftedElement); // 输出：'apple'

console.log(fruits); // 输出：['banana', 'orange']

pop()方法

删除数组的最后一个元素，并返回被删除的元素
语法：

arr.pop()

参数：无

返回值：被删除的元素。

例子：

var fruits = ['apple', 'banana', 'orange'];
console.log(fruits); // 输出：['apple', 'banana', 'orange']

var poppedElement = fruits.pop();
console.log(poppedElement); // 输出：'orange'

console.log(fruits); // 输出：['apple', 'banana']

reverse()方法

颠倒数组元素的顺序，即将数组中的第一个元素变为最后一个元素，将最后一个元素变为第一个元素，以此类推。
语法：

arr.reverse()

参数：无

返回值：颠倒顺序后的数组。

例子：

var fruits = ['apple', 'banana', 'orange'];
console.log(fruits); // 输出：['apple', 'banana', 'orange']

var reversedArray = fruits.reverse();
console.log(reversedArray); // 输出：['orange', 'banana', 'apple']

console.log(fruits); // 输出：['orange', 'banana', 'apple']（原数组也被修改）

sort()方法

对数组元素进行排序。默认情况下，它按照字符串的 Unicode 编码顺序进行排序。
语法：

arr.sort()

参数：无

返回值：排序后的数组。

例子：

var fruits = ['banana', 'apple', 'orange'];
console.log(fruits); // 输出：['banana', 'apple', 'orange']

var sortedArray = fruits.sort();
console.log(sortedArray); // 输出：['apple', 'banana', 'orange']

console.log(fruits); // 输出：['apple', 'banana', 'orange']（原数组也被修改）

splice()方法

在数组中添加或删除元素，并返回被删除的元素。
语法：

array.splice(startIndex, deleteCount, item1, item2, ...)

参数：

• tartIndex：指定要进行修改的起始位置的索引。
• deleteCount：可选参数，指定要删除的元素的数量。如果设置为0，则不删除任何元素。
• item1, item2, …：可选参数，表示要添加到数组的新元素。可以添加任意数量的元素。

返回值：包含被删除元素的新数组。

例子：

var arr = [1, 2, 3, 4, 5];
var deletedItems = arr.splice(1, 2, 6, 7);
console.log(arr); // 输出：[1, 6, 7, 4, 5]
console.log(deletedItems); // 输出：[2, 3]

需要注意，splice()方法会改变原始数组。它会删除指定位置范围内的元素，并将新元素插入到相应的位置。如果不设置deleteCount参数，则删除从startIndex到数组末尾的所有元素。如果设置deleteCount为0，则不删除任何元素，只进行插入操作。splice()方法还会返回一个由被删除元素组成的新数组，可以根据需要将其赋值给一个变量。当没有删除任何元素时，返回的是一个空数组。

forEach()方法

对数组中的每个元素执行指定的操作。
语法：

arr.forEach(callback[, thisArg])

参数：

• callback：一个函数，用于对数组的每个元素执行的操作。callback函数可以接受三个参数：当前元素的值、当前元素的索引和正在遍历的数组。
• thisArg（可选）：在执行回调函数时使用的this值。

返回值：undefined

例子：

var numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(element, index, array) {
  console.log('Element:', element);
  console.log('Index:', index);
  console.log('Array:', array);
});

需要注意，forEach（）方法会对数组每一个元素实行一次callback方法，最终输出结果如下：

Element: 1
Index: 0
Array: [1, 2, 3, 4, 5]
Element: 2
Index: 1
Array: [1, 2, 3, 4, 5]
Element: 3
Index: 2
Array: [1, 2, 3, 4, 5]
Element: 4
Index: 3
Array: [1, 2, 3, 4, 5]
Element: 5
Index: 4
Array: [1, 2, 3, 4, 5]

在每次迭代中，回调函数都会接收当前元素的值、索引和数组本身作为参数，并执行指定的操作。可以根据需要在回调函数中进行相关的处理逻辑。注意，forEach()方法在遍历数组时是按照元素顺序依次执行的，且没有返回值。

字符串方法

toString()方法

将数组转换为字符串。
语法：

arr.toString()

参数：无

返回值：表示数组元素的字符串。

例子：

var fruits = ['apple', 'banana', 'orange'];
console.log(fruits.toString()); // 输出：'apple,banana,orange'

需要注意的是，toString()方法不会改变原始数组，它只是返回一个新的字符串表示。如果需要在操作后获取新的字符串表示，可以将toString()方法的结果赋值给一个变量

split()方法

将一个字符串分割为子字符串，并将结果存储在一个新数组中。
语法：

str.split(separator[, limit])

参数：

• separator：字符串或正则表达式，用于指定分割子字符串的位置。可以是一个固定的字符串、一个包含多个字符的字符串，或者一个正则表达式。
• limit（可选）：一个整数，用于限制返回的子字符串数量。

返回值：一个新数组，该数组包含分割后的子字符串。

例子：

var str = 'Hello,World,JavaScript';
var arr = str.split(',');
console.log(arr); // 输出：['Hello', 'World', 'JavaScript']

请注意，split()方法不会改变原始字符串，它只是返回一个新的数组。如果需要在操作后获取新的数组，可以将split()方法的结果赋值给一个变量。另外，如果没有提供limit参数，则将返回包含所有分割后子字符串的数组。如果提供了limit参数，但是没有足够的分割位置，则返回的数组长度可能小于limit值。

slice()方法

提取字符串或数组的一部分内容，返回一个新的字符串或数组。
语法：

str.slice(startIndex, endIndex)
arr.slice(startIndex, endIndex)

参数：

• startIndex：指定提取起始位置的索引。如果为负数，则表示从末尾开始计算的偏移量。如果省略该参数，则从第一项（索引为0）开始提取。
• endIndex：指定提取结束位置的索引（不包括该索引对应的元素）。如果为负数，则表示从末尾开始计算的偏移量。如果省略该参数，则提取到最后一项（索引为arr.length - 1）。

返回值：一个新的字符串或数组，包含从原始字符串或数组中提取的部分内容。

例子：

var str = "Hello, World!";
var slicedStr = str.slice(7, 12);
console.log(slicedStr); // 输出：World

var arr = [1, 2, 3, 4, 5];
var slicedArr = arr.slice(1, 4);
console.log(slicedArr); // 输出：[2, 3, 4]

需要注意，slice()方法不会改变原始字符串或数组，它只是返回一个新的字符串或数组。如果省略endIndex参数，则提取到最后一项。如果startIndex大于或等于endIndex，则返回空字符串或空数组。另外，如果传入负数的索引，它们会被解释为相对于字符串或数组末尾的偏移量。

stringify()方法

将JavaScript对象转换为JSON字符串。
语法：

JSON.stringify(value[, replacer[, space]])

参数：

• value：要转换为JSON字符串的值。
• replacer：可选参数，用于控制如何转换结果。可以是一个函数或一个数组。
  如果 replacer 是一个函数，则表示对转换后的每个对象和数组元素都会调用该函数，并将该对象的每个属性和数组的每个元素都作为参数传入该函数。可以在函数中返回一个序列化的值来替代原始值。如果返回undefined，则会删除相应的属性或元素。
  如果 replacer 是一个数组，则指定了哪些属性应包括在最终的 JSON字符串中。数组中的属性名必须是字符串或数字。
• space：可选参数，用于控制缩进格式化输出结果。可以是一个数字来指定缩进的空格数，也可以是一个字符串（如 ‘\t’）来指定缩进字符。如果省略，则生成的 JSON 字符串没有额外的空格。

返回值：转换后得到的JSON字符串。

---

数组和字符串组合方法

contact()方法

将多个数组或值合并到一个新数组中
语法：

array.concat(value1, value2, ..., valueN)

参数：

• value1, value2, …, valueN：要合并到新数组的数组或值。可以是单个数组、多个数组、单个值或多个值。

返回值：返回一个新数组，包含原始数组以及要合并的数组或值。

例子：

var arr1 = [1, 2, 3];
var arr2 = [4, 5];
var arr3 = [6];
var combined = arr1.concat(arr2, arr3, 7, 8);
console.log(combined); // 输出：[1, 2, 3, 4, 5, 6, 7, 8]

请注意，concat()方法不会修改原始数组，而是返回一个新数组。如果合并的是多维数组，则会进行浅拷贝，并将嵌套数组作为单个元素添加到新数组中。

你可以传递任意数量的数组和值给concat()方法来实现数组的合并。

join()方法

将数组中的所有元素连接成一个字符串，并返回这个字符串。
语法：

arr.join([separator])

参数：

• separator：可选参数，指定连接数组元素时使用的分隔符。如果省略该参数，则默认使用逗号作为分隔符。

返回值：连接后的字符串。

例子：

var arr = ['Apple', 'Banana', 'Orange'];
var result = arr.join(', ');
console.log(result); // 输出：'Apple, Banana, Orange'

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

---

函数式方法

reduce()方法

对数组中的每个元素执行一个回调函数，并将回调函数的返回值累积成最终结果。
语法：

array.reduce(callback, initialValue)

参数：

• callback：一个回调函数，用来处理数组中的每个元素。该函数可以接收四个参数：
  accumulator：累加器，存储回调函数的返回值。
  currentValue：当前正在处理的元素。
  currentIndex：当前正在处理的元素的索引（可选）。
  array：原始数组（可选）。

• initialValue：可选参数，作为第一次调用回调函数时的初始值。

返回值：

• 返回一个累计结果。

例子：

var arr = [1, 2, 3, 4, 5];
var sum = arr.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);
console.log(sum); // 输出：15

reduce()方法通过遍历数组的每个元素，并依次应用回调函数来实现累积操作。它可以用于解决各种累积问题，如求和、求积、拼接字符串等。在回调函数中，可以根据需求自定义逻辑来处理元素并更新累加器的值。

需要注意的是，如果没有提供初始值initialValue，则将使用数组的第一个元素作为初始值，并从第二个元素开始应用回调函数。如果数组为空且没有提供初始值，则会抛出TypeError。另外，reduce()方法不会修改原始数组。

map()方法

对数组中的每个元素执行一个回调函数，并将回调函数的返回值组成一个新的数组返回。
语法：

array.map(callback)

参数：

• callback：一个回调函数，用来处理数组中的每个元素。该函数可以接收三个参数：
        currentValue：当前正在处理的元素。
        index：当前正在处理的元素的索引（可选）。
        array：原始数组（可选）。

返回值：

• 返回一个新的数组，包含每次调用回调函数的返回值。

例子：

var arr = [1, 2, 3, 4, 5];
var doubled = arr.map(function(currentValue) {
  return currentValue * 2;
});
console.log(doubled); // 输出：[2, 4, 6, 8, 10]

map()方法不会修改原始数组，而是返回一个新的数组。新数组的元素数量和原始数组相同，只是每个元素经过回调函数处理后得到的新值。

filter()方法

对数组中的每个元素执行一个回调函数，并根据回调函数的返回值来筛选出满足条件的元素组成一个新的数组返回。
语法：

array.filter(callback)

参数：

• callback：一个回调函数，用来处理数组中的每个元素。该函数可以接收三个参数：
        currentValue：当前正在处理的元素。
        index：当前正在处理的元素的索引（可选）。
        array：原始数组（可选）。

返回值：

• 返回一个新的数组，包含满足回调函数条件的元素。

例子：

var arr = [1, 2, 3, 4, 5];
var evenNumbers = arr.filter(function(currentValue) {
  return currentValue % 2 === 0;
});
console.log(evenNumbers); // 输出：[2, 4]

filter()方法通过遍历数组的每个元素，并依次应用回调函数来筛选出满足条件的元素。在回调函数中，可以根据需求自定义逻辑来判断元素是否满足条件。如果回调函数返回true，则表示该元素满足条件，会被保留在新数组中；若返回false，则表示该元素不满足条件，会被过滤掉。

filter()方法不会修改原始数组，而是返回一个新的数组。新数组中只包含满足条件的元素，其顺序与原始数组保持一致。如果没有满足条件的元素，则返回一个空数组。

includes()方法

判断数组是否包含某个指定的元素，并返回一个布尔值。
语法:

array.includes(searchElement, fromIndex)

参数：

• searchElement：要搜索的元素。
• fromIndex（可选）：开始搜索的索引，默认为 0。如果指定的索引值为负数，则从数组末尾开始搜索。

返回值：

• 如果数组中包含指定的元素，则返回true；否则返回false。

例子：

var arr = [1, 2, 3, 4, 5];
console.log(arr.includes(3)); // 输出：true
console.log(arr.includes(6)); // 输出：false
console.log(arr.includes(2, 2)); // 输出：false

includes()方法对于数组中的每个元素都会进行严格相等（===）的比较。如果数组中有NaN，则includes()方法也能正确判断。

some()方法

判断数组中是否至少有一个元素满足指定的条件，并返回一个布尔值。
语法：

array.some(callback, thisArg)

参数：

• callback：一个回调函数，用于对数组的每个元素进行测试。该回调函数接受三个参数：
        currentValue：当前正在测试的元素。
        index（可选）：当前正在测试的元素的索引。
        array（可选）：调用some()方法的数组。
• thisArg（可选）：执行回调函数时使用的 this 值。

返回值：

• 如果回调函数对任一元素返回true，则返回值为true；如果所有元素回调函数都返回false，则返回值为false。

例子：

var arr = [1, 2, 3, 4, 5];
var result1 = arr.some(function(currentValue) {
  return currentValue > 3;
});
console.log(result1); // 输出：true

var result2 = arr.some(function(currentValue) {
  return currentValue > 5;
});
console.log(result2); // 输出：false

注意：some()方法在找到满足条件的元素后就会停止遍历，不会继续检查剩余的元素。如果数组为空，则返回结果为false。

every()方法

判断数组中的所有元素是否都满足指定的条件，并返回一个布尔值。
语法：

array.every(callback, thisArg)

参数：

• callback：一个回调函数，用于对数组的每个元素进行测试。该回调函数接受三个参数：
        currentValue：当前正在测试的元素。
        index（可选）：当前正在测试的元素的索引。
        array（可选）：调用every()方法的数组。
• thisArg（可选）：执行回调函数时使用的 this 值。

返回值：

• 如果所有元素都满足回调函数的条件，则返回值为true；如果至少有一个元素不满足条件，则返回值为false。

例子：

var arr = [1, 2, 3, 4, 5];
var result1 = arr.every(function(currentValue) {
  return currentValue > 0;
});
console.log(result1); // 输出：true

var result2 = arr.every(function(currentValue) {
  return currentValue > 3;
});
console.log(result2); // 输出：false

every()方法在找到不满足条件的元素后就会停止遍历，不会继续检查剩余的元素。如果数组为空，则返回结果为true。

---