likes
comments
collection
share

js数组方法(一)---改变原数组的七种方法

作者站长头像
站长
· 阅读数 13

前言

数组方法是针对数组对象的函数,用于执行各种操作,如添加、删除、过滤和转换数组中的元素。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:可选,要添加到数组中的新元素。

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