js数组方法（一）---改变原数组的七种方法

前言

数组方法是针对数组对象的函数，用于执行各种操作，如添加、删除、过滤和转换数组中的元素。JavaScript提供了许多有用的数组方法，帮助开发者更轻松地处理数组，提高代码的可读性和可维护性。现在我要讲的就是其中会改变原数组的方法

1. push() 数组末尾添加元素

当使用push()方法向数组末尾添加一个或多个元素时，它会修改原始数组并返回修改后的数组长度。

let fruits = ['apple', 'banana', 'orange'];
console.log(fruits); // 输出: ['apple', 'banana', 'orange']
let newLength = fruits.push('grape', 'kiwi');
console.log(fruits); // 输出: ['apple', 'banana', 'orange', 'grape', 'kiwi']
console.log(newLength); // 输出: 5

在上面的例子中，我们首先创建了一个名为fruits的数组，其中包含三个水果。然后，我们使用push()方法向数组末尾添加了两个新元素：'grape'和'kiwi'。调用push()方法后，fruits数组被修改并添加了两个新元素，新数组的长度变为5。最后，我们打印出修改后的数组和返回的新长度。

注意：push()方法会直接修改原始数组，并返回修改后的数组长度。如果你只想获取修改后的数组而不关心数组长度，可以省略对返回值的处理。

2. pop（）删除数组末尾的元素

当使用pop()方法时，它会从数组末尾删除最后一个元素，并返回被删除的元素。

let fruits = ['apple', 'banana', 'orange']; console.log(fruits); // 输出: ['apple', 'banana', 'orange'] 
let lastFruit = fruits.pop(); console.log(lastFruit); // 输出: 'orange' 
console.log(fruits); // 输出: ['apple', 'banana']

在上面的例子中，我们首先创建了一个名为fruits的数组，其中包含三个水果。然后，我们使用pop()方法从数组末尾删除了最后一个元素。被删除的元素'orange'被存储在变量lastFruit中，并且fruits数组变为['apple', 'banana']。最后，我们打印出被删除的元素和修改后的数组。

注意：pop()方法会直接修改原始数组，并返回被删除的元素。如果你只想获取被删除的元素而不关心数组的变化，可以将返回值存储在一个变量中以便后续使用。

3. unshift() 数组头部添加元素

当使用unshift()方法向数组头部添加一个或多个元素时，它会修改原始数组并返回修改后的数组长度。

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

let newLength = fruits.unshift('apple', 'grape');
console.log(fruits); // 输出: ['apple', 'grape', 'banana', 'orange']
console.log(newLength); // 输出: 4

在上面的例子中，我们首先创建了一个名为fruits的数组，其中包含两个水果。然后，我们使用unshift()方法向数组头部添加了两个新元素：'apple'和'grape'。调用unshift()方法后，fruits数组被修改并添加了两个新元素，新数组的长度变为4。最后，我们打印出修改后的数组和返回的新长度。

注意：unshift()方法会直接修改原始数组，并返回修改后的数组长度。如果你只想获取修改后的数组而不关心数组长度，可以省略对返回值的处理。

4. shift（）删除数组头部的元素。

当使用shift()方法时，它会从数组头部删除第一个元素，并返回被删除的元素

fruits = ['apple', 'banana', 'orange']; console.log(fruits); // 输出: ['apple', 'banana', 'orange'] 
let firstFruit = fruits.shift(); console.log(firstFruit); // 输出: 'apple' 
console.log(fruits); // 输出: ['banana', 'orange']

在上面的例子中，我们首先创建了一个名为fruits的数组，其中包含三个水果。然后，我们使用shift()方法从数组头部删除了第一个元素。被删除的元素'apple'被存储在变量firstFruit中，并且fruits数组变为['banana', 'orange']。最后，我们打印出被删除的元素和修改后的数组。

注意：shift()方法会直接修改原始数组，并返回被删除的元素。如果你只想获取被删除的元素而不关心数组的变化，可以将返回值存储在一个变量中以便后续使用。

5. reverse（） 反转数组元素

reverse() 方法用于反转数组中的元素，并返回反转后数组。

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

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

在上面的例子中，我们首先创建了一个名为 fruits 的数组，其中包含三种水果。然后，我们使用 reverse() 方法对数组进行了反转。调用 reverse() 方法后，数组中的元素顺序被颠倒，最终的输出结果为 ['orange', 'banana', 'apple']。

需要注意的是，reverse() 方法会直接修改原始数组，而不是返回一个新的反转后的数组。因此，在调用 reverse() 方法后，原始数组的元素顺序就会被改变。

6. sort（） 排序

sort() 方法用于对数组进行排序，并返回排序后的数组。默认情况下会将数组元素转换为字符串，并按照 Unicode 编码进行排序。你可以选择传入一个比较函数来定义自定义的排序规则。

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

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

在上面的例子中，我们首先创建了一个名为 fruits 的数组，其中包含三种水果。然后，我们使用 sort() 方法对数组进行排序。默认情况下，它会将数组元素转换为字符串，并按照 Unicode 编码进行排序。调用 sort() 方法后，数组的元素按字母顺序排列，最终的输出结果为 ['apple', 'banana', 'orange']。

如果要按照其他自定义的排序规则进行排序，可以传入一个比较函数作为 sort() 方法的参数。比较函数应该接受两个参数，并返回一个负数、零或正数来指示两个参数的排序顺序。

下面是一个使用比较函数进行数字排序的示例：

let numbers = [10, 5, 8, 2, 1];
console.log(numbers); // 输出: [10, 5, 8, 2, 1]

numbers.sort(function(a, b) {
  return a - b;
});
console.log(numbers); // 输出: [1, 2, 5, 8, 10]

在这个示例中，我们创建了一个名为 numbers 的数组，其中包含一些数字。然后，我们传入一个比较函数给 sort() 方法，该函数会将数组元素按升序排序。调用 sort() 方法后，数组的元素按升序排列，最终的输出结果为 [1, 2, 5, 8, 10]。

通过传递不同的比较函数，你可以实现不同的排序需求，例如按降序排序或使用自定义的排序规则。

7. splice() 向/从数组中添加/删除元素。

splice() 方法用于向/从数组中添加/删除元素，并返回删除的数据所组成的数组 。该方法可以在指定的位置添加新元素，并从数组中删除任意数量的元素。

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

// 从第二个位置开始删除一个元素
fruits.splice(1, 1);
console.log(fruits); // 输出: ['apple', 'orange']

// 在第二个位置添加两个元素
fruits.splice(1, 0, 'grape', 'peach');
console.log(fruits); // 输出: ['apple', 'grape', 'peach', 'orange']

在上面的例子中，我们首先创建了一个名为 fruits 的数组，其中包含三种水果。然后，我们使用 splice() 方法从数组中删除了一个元素，并在第二个位置添加了两个新元素。调用 splice() 方法后，数组中的元素被修改并返回一个包含被删除元素的数组（如果有的话），最终的输出结果为 ['apple', 'grape', 'peach', 'orange']。

splice() 方法接受三个参数：

• index：必需，从哪个位置开始添加/删除元素。
• deleteCount：可选，要删除的元素数量。如果设置为 0，则不会删除任何元素。
• items：可选，要添加到数组中的新元素。

可以根据需要传递适当的参数来修改数组，例如删除元素、添加新元素或替换现有元素等。