javaScript实用方法第一篇（.at .concat .copyWithin）

---

一、.at()方法

1.简介

at() 方法接收一个整数值并返回该索引对应的元素，允许正数和负数。负整数从数组中的最后一个元素开始倒数，是一个用于获取数组中特定位置元素的数组方法。这个方法在ECMAScript 2022（ES12）中引入。

2.语法

    <script>
        arr.at(index)
    </script>

参数
其中index是一个整数，表示要访问的元素的索引。索引可以是正数或负数，正数索引从数组的开始处（0）向后计数，负数索引从数组的末尾（-1）向前计数。
返回值
返回数组中指定索引处的元素。如果索引超出了数组的范围，则返回 undefined。

3.示例

    <script>
        let array = [1, 2, 3, 4, 5];

        // 获取索引为2的元素
        console.log(array.at(2)); // 输出: 3

        // 获取从数组末尾开始的第三个元素
        console.log(array.at(-3)); // 输出: 3

        // 索引超出数组范围
        console.log(array.at(6)); // 输出: undefined
    </script>

4.使用场景

.at() 方法特别有用在处理负索引时，这在以前的JavaScript版本中是不支持的。它提供了一种更直观的方式来访问数组的元素，尤其是在处理从数组末尾开始的索引时。

5.使用注意

.at() 方法不会改变原数组，它只用于读取数组中的元素。

二、.concat()方法

1.简介

.concat() 方法用于合并两个或多个数组。此方法不会改变现有的数组，而是返回一个新数组。

2.语法

    <script>
        array1.concat(array2, arrayN)
    </script>

参数
array2, …, arrayN：选择的是你想要与第一个数组(array1)合并的数组,其中不论值输入多少个数组都会合并。如果提供的不是数组，则会在结果数组中作为单独的元素添加。
返回值
此方法会返回一个新数组，包括所有被合并数组的元素。

3.示例

    <script>
        let array1 = [1, 2, 3];
        let array2 = [4, 5, 6];
        let array3 = [7, 8, 9];

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

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

        // 合并时，非数组元素作为单独的元素添加
        let combinedArray3 = array1.concat("a", { name: "Kimi" });
        console.log(combinedArray3); // 输出: [1, 2, 3, "a", {name: "Kimi"}]
    </script>

4.使用场景

当需要将多个数组合并成一个数组时，.concat() 方法非常有用。
tips：它也可以用来添加单个元素到数组的末尾。

5.使用注意

1.不变性：.concat() 方法不会改变现有的数组，它返回一个新数组。
2.参数类型：如果传入的参数不是数组，那么这个参数会被当作单独的元素添加到新数组中。
3.浅拷贝：.concat() 方法执行的是浅拷贝，如果数组元素是对象，那么新数组中的对象引用将指向原始数组中的对象

三、.copyWithin()方法

1.简介

.copyWithin() 方法用于在数组内部复制一段元素到另一段元素上，它会改变原数组。

2.语法

    <script>
        arr.copyWithin(target, start, end)
    </script>

参数
target：从原数组的哪里开始替换(从零开始的索引)。如果是负值，则表示从数组末尾开始的位置。
start：从原数组的哪里开始复制（从零开始的索引）。如果是负值，则表示从数组末尾开始的位置。
end（可选）：从哪里结束（从零开始的索引）。复制会在这个位置停止，但不包括这个位置的元素。如果省略这个参数，则复制到数组末尾。如果是负值，则表示从数组末尾开始的位置。
返回值
会改变原数组，不会返回新的数组。

3.示例

    <script>
        let numbers = [1, 2, 3, 4, 5];

        // 将数组中的元素复制到数组的开始位置
        numbers.copyWithin(0, 3);
        console.log(numbers); // 输出: [4, 5, 3, 4, 5]

        // 使用负值索引
        let numbers2 = [1, 2, 3, 4, 5];
        numbers2.copyWithin(-2, -3);
        console.log(numbers2); // 输出: [1, 2, 1, 2, 3]

        // 复制到数组的末尾
        let numbers3 = [1, 2, 3, 4, 5];
        numbers3.copyWithin(3, 1, 3);
        console.log(numbers3); // 输出: [1, 2, 3, 2, 3]
    </script>

4.使用场景

.copyWithin() 方法在处理数组元素的复制和覆盖时非常有用，尤其是在需要在数组内部移动元素的场景中。

5.使用注意

1.原地修改：.copyWithin() 方法会修改原数组，不会创建新数组。
2.边界处理：如果 end 参数超出了数组的长度，则实际复制的元素数量会减少。
3.负值索引：可以使用负值索引来指定从数组的末尾开始的位置。
4.重叠区域：如果复制的源区域和目标区域有重叠，那么在复制过程中，原始数据会被覆盖。

总结

这篇是我第一篇文章，本文仅仅简单介绍了.at() .concat .copWithin的使用，以后会更新更多数组的实用方法，尽量以通俗易懂的语言来解释方法的作用。