JS面试题大杂烩-CSDN博客

本文链接：https://blog.csdn.net/Smilequeen1/article/details/141229367

slice和splice区别

slice 和 splice 是 JavaScript 数组的两个常用方法，它们用于处理数组，但有不同的用途和行为。

`slice` 方法

slice 方法用于从一个数组中提取一部分，返回一个新数组，不会修改原数组。它有两个参数：

start (可选): 提取开始的位置（包含该位置）。如果省略，则默认为 0。
end (可选): 提取结束的位置（不包含该位置）。如果省略，则默认为数组的长度。

语法:

array.slice(start, end)

示例:

const arr = [1, 2, 3, 4, 5];
const newArr = arr.slice(1, 4);

console.log(newArr); // [2, 3, 4]
console.log(arr);    // [1, 2, 3, 4, 5] (原数组未变)

`splice` 方法

splice 方法用于在数组中添加或删除元素，并会修改原数组。它有三个主要参数：

start: 开始修改的位置。
deleteCount (可选): 要删除的元素数量。如果为 0，则不删除任何元素。
item1, item2, ... (可选): 要添加到数组中的元素。

语法:

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

示例:

const arr = [1, 2, 3, 4, 5];
arr.splice(2, 2, 'a', 'b');

console.log(arr);    // [1, 2, 'a', 'b', 5]
console.log(arr.length); // 5 (原数组长度已变)

主要区别

返回值:
- slice: 返回新数组，原数组不变。
- splice: 修改原数组，返回被删除的元素组成的数组（如果有删除的话）。
修改原数组:
- slice: 不修改原数组，只返回提取的部分。
- splice: 直接修改原数组，可以增加、删除或替换元素。
用途:
- slice: 用于从数组中提取一个子数组，通常用于不改变原数组的情况下。
- splice: 用于在数组中添加、删除或替换元素，直接对原数组进行操作。

总结

slice 是一个不修改原数组的方法，用于创建数组的一部分的新副本。
splice 是一个会修改原数组的方法，用于在数组中进行添加、删除或替换操作。

数组和字符串的方法

数组方法

1. `push`

用途: 在数组末尾添加一个或多个元素。

array.push(element1, element2, ...)

参数:

element1, element2, ...: 要添加到数组末尾的元素。

是否改变原数组: 是，push 会修改原数组。

示例:

const arr = [1, 2, 3];

arr.push(4, 5);

console.log(arr); // [1, 2, 3, 4, 5]

2. `pop`

用途: 从数组末尾删除一个元素，并返回该元素。

语法:

array.pop()

参数: 无

是否改变原数组: 是，pop 会修改原数组。

示例:

const arr = [1, 2, 3];

const last = arr.pop();

console.log(last); // 3

console.log(arr); // [1, 2]

3. `shift`

用途: 从数组开头删除一个元素，并返回该元素。

语法:

array.shift()

参数: 无

是否改变原数组: 是，shift 会修改原数组。

示例:

const arr = [1, 2, 3];

const first = arr.shift();

console.log(first); // 1

console.log(arr); // [2, 3]

4. `unshift`

用途: 在数组开头添加一个或多个元素。

语法:

array.unshift(element1, element2, ...)

参数:

element1, element2, ...: 要添加到数组开头的元素。

是否改变原数组: 是，unshift 会修改原数组。

示例:

const arr = [1, 2, 3];

arr.unshift(0);

console.log(arr); // [0, 1, 2, 3]

5. `slice`

用途: 返回数组的一部分，创建新数组。

语法:

array.slice(start, end)

参数:

start: 开始提取的位置（包括该位置）。如果省略，则默认为 0。
end (可选): 结束提取的位置（不包括该位置）。如果省略，则默认为数组的长度。

是否改变原数组: 否，slice 不会修改原数组。

示例:

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

const newArr = arr.slice(1, 4);

console.log(newArr); // [2, 3, 4]

console.log(arr); // [1, 2, 3, 4, 5]

6. `splice`

用途: 删除、替换或添加数组中的元素。

语法:

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

参数:

start: 开始修改的位置。
deleteCount (可选): 要删除的元素数量。如果为 0，则不删除任何元素。
item1, item2, ... (可选): 要添加到数组中的元素。

是否改变原数组: 是，splice 会修改原数组。

示例:

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

arr.splice(2, 2, 'a', 'b');

console.log(arr); // [1, 2, 'a', 'b', 5]

console.log(arr.length); // 5

`map`

用途: 创建一个新数组，其结果是该数组中每个元素调用一个提供的函数后返回的结果。

语法:

array.map(callback(currentValue[, index[, array]])[, thisArg])

参数:

callback: 为每个数组元素执行的函数。它接收三个参数：
- currentValue: 当前处理的元素。
- index (可选): 当前元素的索引。
- array (可选): 调用 map 方法的数组。
thisArg (可选): 执行 callback 时 this 的值。

是否改变原数组: 否，map 不会修改原数组，而是返回一个新数组。

示例:

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

const doubled = numbers.map(num => num * 2);

console.log(doubled); // [2, 4, 6, 8]

console.log(numbers); // [1, 2, 3, 4] (原数组未变)

`filter`

用途: 创建一个新数组，包含所有通过测试的数组元素。

语法:

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

参数:

callback: 测试每个数组元素的函数。它接收三个参数：
- element: 当前处理的元素。
- index (可选): 当前元素的索引。
- array (可选): 调用 filter 方法的数组。
thisArg (可选): 执行 callback 时 this 的值。

是否改变原数组: 否，filter 不会修改原数组，而是返回一个新数组。

示例:

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

const even = numbers.filter(num => num % 2 === 0);

console.log(even); // [2, 4]

console.log(numbers); // [1, 2, 3, 4, 5] (原数组未变)

`reduce`

用途: 对数组中的每个元素执行一个累积操作，最终计算出一个单一的值。

语法:

array.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

参数:

callback: 对每个数组元素执行的函数。它接收四个参数：
- accumulator: 累加器，累计函数的返回值。
- currentValue: 当前处理的元素。
- index (可选): 当前元素的索引。
- array (可选): 调用 reduce 方法的数组。
initialValue (可选): 作为第一次调用 callback 时第一个参数的值。如果没有提供，使用数组的第一个元素。

是否改变原数组: 否，reduce 不会修改原数组，而是返回计算出的单一值。

示例:

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

const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

console.log(sum); // 10

console.log(numbers); // [1, 2, 3, 4] (原数组未变)

`forEach`

用途: 对数组中的每个元素执行一个指定的操作。没有返回值。

语法:

array.forEach(callback(currentValue[, index[, array]])[, thisArg])

参数:

callback: 对每个数组元素执行的函数。它接收三个参数：
- currentValue: 当前处理的元素。
- index (可选): 当前元素的索引。
- array (可选): 调用 forEach 方法的数组。
thisArg (可选): 执行 callback 时 this 的值。

是否改变原数组: 否，forEach 不会修改原数组，但可以对原数组的元素执行操作。

示例:

const numbers = [1, 2, 3];

numbers.forEach(num => console.log(num * 2)); // 输出: // 2 // 4 // 6

`find`

用途: 返回数组中第一个符合条件的元素。如果没有符合条件的元素，则返回 undefined。

语法:

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

参数:

callback: 用于测试数组元素的函数。它接收三个参数：
- element: 当前处理的元素。
- index (可选): 当前元素的索引。
- array (可选): 调用 find 方法的数组。
thisArg (可选): 执行 callback 时 this 的值。

是否改变原数组: 否，find 不会修改原数组。

示例:

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

const found = numbers.find(num => num > 2);

console.log(found); // 3

console.log(numbers); // [1, 2, 3, 4] (原数组未变)

字符串方法

1. `charAt`

用途: 返回指定位置的字符。

语法:

string.charAt(index)

参数:

index: 字符的位置，从 0 开始。

是否改变原字符串: 否，charAt 不会修改原字符串。

示例:

const str = 'hello';

const char = str.charAt(1);

console.log(char); // 'e'

2. `concat`

用途: 将一个或多个字符串连接成一个新的字符串。

语法:

string.concat(string1, string2, ...)

参数:

string1, string2, ...: 要连接的字符串。

是否改变原字符串: 否，concat 不会修改原字符串。

示例:

const str1 = 'hello';

const str2 = 'world';

const result = str1.concat(' ', str2);

console.log(result); // 'hello world'

3. `slice`

用途: 提取字符串的一部分，返回新字符串。

语法:

string.slice(start, end)

参数:

start: 提取的开始位置（包括该位置）。如果为负值，则从字符串末尾开始计算。
end (可选): 提取的结束位置（不包括该位置）。如果省略，则默认为字符串的末尾。

是否改变原字符串: 否，slice 不会修改原字符串。

示例:

const str = 'hello world';

const part = str.slice(0, 5);

console.log(part); // 'hello'

4. `split`

用途: 将字符串分割成数组。

语法:

string.split(separator, limit)

参数:

separator: 用于分割字符串的分隔符。可以是字符串或正则表达式。
limit (可选): 分割的最大数组元素数量。

是否改变原字符串: 否，split 不会修改原字符串。

示例:

const str = 'a,b,c,d';

const arr = str.split(',');

console.log(arr); // ['a', 'b', 'c', 'd']

5. `replace`

用途: 替换字符串中匹配的子字符串或正则表达式。

语法:

string.replace(searchValue, newValue)

参数:

searchValue: 要替换的子字符串或正则表达式。
newValue: 替换后的字符串。

是否改变原字符串: 否，replace 不会修改原字符串。

示例:

const str = 'hello world';

const newStr = str.replace('world', 'everyone');

console.log(newStr); // 'hello everyone'

总结

数组方法:
- push, pop, shift, unshift, splice 会修改原数组。
- slice 不会修改原数组，返回一个新数组。
- map, filter, slice, find: 这些方法不会修改原数组，而是返回一个新数组或值。
- reduce: 不会修改原数组，返回一个单一值。
- forEach: 不会修改原数组，但可以对数组元素执行操作。
字符串方法:
- charAt, concat, slice, split, replace 不会修改原字符串，返回新值或新数组。

这些方法对于数组和字符串的操作提供了强大的功能。理解它们的行为和参数能帮助你更好地处理和操作数据。

`forEach和map`主要区别

返回值:
- forEach: 没有返回值，返回 undefined。
- map: 返回一个新数组，包含 callback 函数处理后的结果。
用途:
- forEach: 主要用于对数组的每个元素执行副作用操作，如打印、修改数组中的元素（不改变原数组）等。
- map: 用于创建一个新数组，每个元素是原数组元素经过 callback 函数处理后的结果。
链式调用:
- forEach: 不支持链式调用，因为它返回 undefined。
- map: 支持链式调用，因为它返回一个新数组。