一文搞懂 JavaScript 数组非破坏性方法：slice、indexOf、join 你都懂了吗？

JavaScript 非破坏性数组方法详解：concat、slice、indexOf 等

在 JavaScript 中，非破坏性方法 是指这些方法不会修改原始数据，而是返回一个新的数据。对于数组操作，使用非破坏性方法可以帮助我们在处理数据时保持原始数据不变。

本篇文章将带你详细了解常用的几种非破坏性数组方法：concat、indexOf、slice 等。

---

常见的非破坏性数组方法

1. Array.isArray()

该方法用于判断参数是否为数组。如果是数组，返回 true，否则返回 false。

const arr = ['apple', 'banana'];
const obj = { name: 'fruit' };

console.log(Array.isArray(arr));  // true
console.log(Array.isArray(obj));  // false

---

2. 数组.length

返回数组的长度，即数组中的元素个数。

const arr = ['apple', 'banana', 'cherry'];
console.log(arr.length);  // 3

---

3. 数组.at()

该方法可以根据索引获取数组中的元素，支持传入负数索引，负值从数组的末尾开始计算。

const arr = ['linxixi', 'xixilin', 'xixi'];
console.log(arr.at(0));  // linxixi
console.log(arr.at(1));  // xixilin
console.log(arr.at(-1)); // xixi
console.log(arr.at(-2)); // xixilin

---

4. 数组.concat()

用于合并两个或多个数组，并返回一个新的数组。原数组保持不变。

const arr1 = ['apple', 'banana'];
const arr2 = ['cherry', 'date'];
console.log(arr1.concat(arr2));  // ['apple', 'banana', 'cherry', 'date']

---

5. indexOf()

返回数组中首次出现的指定元素的索引，如果元素未找到，则返回 -1。还可以指定开始搜索的位置。

const arr = ['悟空', '八戒', '沙僧', '唐僧', '悟空', '八戒'];
console.log(arr.indexOf('悟空'));    // 0
console.log(arr.indexOf('八戒'));    // 1
console.log(arr.indexOf('悟空', 4)); // 4
console.log(arr.indexOf('唐僧'));    // 3
console.log(arr.indexOf('哭兮兮'));  // -1

---

6. lastIndexOf()

返回数组中最后一次出现指定元素的索引，未找到返回 -1。

const arr = ['悟空', '八戒', '沙僧', '唐僧', '悟空', '八戒'];
console.log(arr.lastIndexOf('悟空')); // 4
console.log(arr.lastIndexOf('沙僧')); // 2
console.log(arr.lastIndexOf('buxixi')); // -1

---

7. join()

将数组中的所有元素连接成一个字符串，并返回这个新字符串。你可以指定一个分隔符。

const arr = ['悟空', '八戒', '沙僧', '唐僧'];
console.log(arr.join(''));    // 悟空八戒沙僧唐僧
console.log(arr.join(','));   // 悟空,八戒,沙僧,唐僧

---

8. slice()

返回数组的一部分，可以使用两个参数：起始索引和结束索引。如果省略参数，则会返回从起始索引到数组结束的元素。如果使用负数索引，则从数组的末尾开始截取。

const arr = ['悟空', '八戒', '沙僧', '唐僧'];
console.log(arr.slice(0, 1));    // ['悟空']
console.log(arr.slice(1, 1));    // []
console.log(arr.slice(2));       // ['沙僧', '唐僧']
console.log(arr.slice(-2));      // ['沙僧', '唐僧']
console.log(arr.slice(-2, -1));  // ['沙僧']
console.log(arr.slice());        // ['悟空', '八戒', '沙僧', '唐僧']

slice() 方法是浅拷贝，即返回一个新的数组，原数组不受影响。

---

小结

1. 非破坏性方法：这些方法在调用时不会修改原始数据，而是返回新的数据。
2. 常用非破坏性方法 ：包括 Array.isArray()、concat()、indexOf()、slice() 等，它们都提供了便捷的数组操作方式。
3. 函数的返回值：这些方法大多数返回新的数组或索引，不会改变原始数组。

---

面试总结话术

在 JavaScript 中，非破坏性方法是指那些不会直接修改原始数据的方法，常见的如 concat()、slice()、indexOf() 等。通过这些方法，我们可以更高效地操作数组，同时保证原始数据的安全，避免不必要的副作用。