数组的几种常用方式汇总

最新推荐文章于 2024-07-24 22:43:51 发布

阳阳C

最新推荐文章于 2024-07-24 22:43:51 发布

阅读量802

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/qq_40409143/article/details/130993525

版权

今天我们来介绍一下数组对象：

数组对象有很多方法，包括但不限于以下这些：

push(): 在数组末尾添加一个或多个元素，并返回新数组的长度。
pop(): 删除并返回数组末尾的元素。
shift(): 删除并返回数组开头的元素。
unshift(): 在数组开头添加一个或多个元素，并返回新数组的长度。
slice(): 返回数组的一部分（浅拷贝），不会改变原数组。
splice(): 在数组中添加或删除元素（可同时实现），并返回被删除的元素。
concat(): 连接两个或多个数组，并返回新数组。
join(): 将数组转换成字符串，并使用指定的分隔符分隔每个元素。
reverse(): 反转数组元素顺序。
sort(): 对数组元素进行排序。
indexOf(): 查找指定元素在数组中第一次出现的位置。
lastIndexOf(): 查找指定元素在数组中最后一次出现的位置。
forEach(): 对数组中的每个元素执行指定的函数。
map(): 对数组中的每个元素执行指定的函数，并返回新数组。
filter(): 返回数组中满足指定条件的所有元素组成的新数组。
reduce(): 对数组中的每个元素依次执行指定的函数，并返回一个累积值。
every(): 判断数组中的每个元素是否都满足指定条件。
some(): 判断数组中是否存在至少一个元素满足指定条件

slice的基本语法格式如下：

数组的slice是指对数组的一个片段或子序列进行操作或截取。使用数组的slice可以方便地截取数组的一部分，实现对数组的操作和处理，常用于数据处理和应用程序中。

slice := arr[start:end]

其中，arr为原始数组，start为开始位置的索引，end为结束位置的索引（不包括end所在的元素）。

slice的特点和使用方法如下：

slice的长度是可以变化的，可以动态地追加元素，也可以使用内置的append()函数来添加元素。
slice底层是使用数组实现的，因此其数据类型和数组相同，也可以使用数组的所有方法和属性。
slice的容量是指slice底层数组的长度，可以使用cap()函数获取slice的容量。
当slice被复制后，slice和原始数组的元素会指向不同的内存空间，互相之间无影响。
slice可以使用for…range循环进行遍历，也可以使用索引进行访问。
slice也可以进行切片，即截取其中的一部分，语法与数组的slice相同。

数组 slice() 方法可以从已有的数组中返回选定的元素，不会对原数组进行修改。

以下是数组 slice() 方法的使用实例：

// 创建一个数组
var fruits = ["apple", "banana", "orange", "grapefruit", "kiwi"];

// 从下标 1 开始获取到下标 3 之前的所有元素（不包含下标 3）
var citrus = fruits.slice(1, 3);
console.log(citrus); // ["banana", "orange"]

// 从下标 2 开始获取到数组的最后一个元素
var restOfFruits = fruits.slice(2);
console.log(restOfFruits); // ["orange", "grapefruit", "kiwi"]

// 从下标 -2（倒数第二个）开始获取到数组的最后一个元素
var lastTwoFruits = fruits.slice(-2);
console.log(lastTwoFruits); // ["grapefruit", "kiwi"]

// 从下标 -3（倒数第三个）开始获取到下标 -1（倒数第一个）之前的所有元素
var lastThreeFruits = fruits.slice(-3, -1);
console.log(lastThreeFruits); // ["orange", "grapefruit"]

下面是一个JavaScript中使用数组的splice方法的示例：

var fruits = ['apple', 'banana', 'orange', 'mango'];

// 从索引2开始删除1个元素
fruits.splice(2, 1);

console.log(fruits); // ['apple', 'banana', 'mango']

// 从索引1开始删除2个元素，然后插入新的元素
fruits.splice(1, 2, 'peach', 'grape');

console.log(fruits); // ['apple', 'peach', 'grape', 'mango']

// 从索引0开始删除所有元素
fruits.splice(0, fruits.length);

console.log(fruits); // []

在上面的示例中，可以看到splice方法的用途。splice方法可用于删除元素，插入新元素或替换元素。第一个参数表示开始删除或插入的索引，第二个参数表示要删除的元素数量，第三个参数（可选）表示要插入的新元素。如果省略第二个参数，则默认删除从第一个参数指定的索引开始的所有元素。

以下是一个使用 JavaScript 数组 sort 方法对复杂数字进行排序的示例：

// 定义一个包含复杂数字的数组
const numbers = [
  { value: 5, type: 'odd' },
  { value: 7, type: 'odd' },
  { value: 2, type: 'even' },
  { value: 9, type: 'odd' },
  { value: 1, type: 'odd' }
];

// 使用 sort 方法对数组进行排序
numbers.sort((a, b) => {
  // 先按照数字大小排序
  if (a.value < b.value) {
    return -1;
  } else if (a.value > b.value) {
    return 1;
  }

  // 如果数字相等，则按照奇偶性进行排序
  if (a.type === 'odd' && b.type === 'even') {
    return -1;
  } else if (a.type === 'even' && b.type === 'odd') {
    return 1;
  }

  // 如果数字和奇偶性都相等，则不需要排序
  return 0;
});

// 输出排序后的数组
console.log(numbers); // [{ value: 1, type: 'odd' }, { value: 5, type: 'odd' }, { value: 7, type: 'odd' }, { value: 2, type: 'even' }, { value: 9, type: 'odd' }]

在这个示例中，我们定义了一个包含复杂数字的数组，每个数字都包含一个值和一个类型（奇数或偶数）。我们使用 sort 方法对数组进行排序，先按照数字大小进行排序，如果数字相等，则按照奇偶性进行排序。

排序后，我们打印出数组，可以看到它已经根据指定的排序顺序排好了序。

在 JavaScript 中，`forEach` 和 `map` 都是对数组进行循环操作的方法，但有以下区别：

forEach 是遍历数组的每一项，没有返回值；map 是遍历数组的每一项，并返回一个新数组，新数组的每个元素为原数组的每个元素调用回调函数的返回值。
forEach 无法跳出循环，一旦开始遍历，就必须遍历完整个数组；而 map 可以在中途停止遍历，只返回已经处理完的结果。
map 的回调函数除了传入数组元素外，还可以传入索引和原数组本身三个参数。

示例代码如下：

// forEach
let arr = [1, 2, 3];
arr.forEach((item, index) => {
  console.log(item, index);
});

// map
let arr2 = [1, 2, 3];
let mappedArr = arr2.map((item, index) => {
  return item * 2;
});
console.log(mappedArr);

filter 使用案例：假设有一个数组对象，每个对象都包含了姓名、年龄和性别三个属性，要求从中筛选出年龄在18~25岁之间、性别为女性的对象，并将它们的姓名和年龄列出来，可以使用filter方法来实现，代码如下：

const persons = [
  { name: 'Alice', age: 20, gender: 'female' },
  { name: 'Bob', age: 22, gender: 'male' },
  { name: 'Cathy', age: 25, gender: 'female' },
  { name: 'David', age: 17, gender: 'male' },
  { name: 'Eva', age: 23, gender: 'female' },
  { name: 'Frank', age: 19, gender: 'male' }
];

const filteredPersons = persons.filter(person => {
  return person.age >= 18 && person.age <= 25 && person.gender === 'female';
});

filteredPersons.forEach(person => {
  console.log(`${person.name}, ${person.age}`);
});