JavaScript常用数组操作方法,包含ES6方法

当涉及到JavaScript开发中的数据存储和处理时，数组是最常用的数据结构之一。它可以存储不同类型的数据和对象，并且提供了许多灵活的操作方法。在本文中，我们将介绍JavaScript中常用的数组操作方法，包括ES6的方法。

常用数组操作方法

创建数组

要创建一个简单的数组，只需要将方括号中的项用逗号分隔,如下所示：

const myArray = ['apple', 'banana', 'orange'];

添加元素

添加项可以使用push()方法将项添加到数组末尾，也可以使用unshift()方法将项添加到数组的开头。

const myArray = ['apple', 'banana'];

myArray.push('orange');     // myArray becomes ['apple', 'banana', 'orange']

myArray.unshift('grape');   // myArray becomes ['grape', 'apple', 'banana', 'orange']

移除元素

删除项使用pop()方法来从数组的末尾删除一个项，使用shift()方法来从数组的开头删除一个项。

const myArray = ['apple', 'banana', 'orange'];

const lastElement = myArray.pop();      // myArray becomes ['apple', 'banana']

const firstElement = myArray.shift();   // myArray becomes ['banana']

获取数组中元素的位置

indexOf()方法可以返回指定元素在数组中的位置，如果该元素不存在则返回-1。

const myArray = ['apple', 'banana', 'orange'];

const orangeIndex = myArray.indexOf('orange');   // orangeIndex becomes 2

迭代数组

可以使用forEach()方法来迭代数组，完成对每个元素的特定操作，并且也支持ES6的forEach()方法。

const myArray = ['apple', 'banana', 'orange'];

myArray.forEach(function(element) {
  console.log(element);
});

// ES6 箭头函数的写法
myArray.forEach(element => console.log(element));

映射到新数组

map()方法可以将数组映射到一个新数组，新数组中的每个元素是对原始数组中每个元素的操作结果。

const myArray = ['apple', 'banana', 'orange'];

const newArray = myArray.map(function(element) {
  return element.toUpperCase();
});

// ES6 箭头函数的写法
const newArray = myArray.map(element => element.toUpperCase());

过滤数组

filter()方法可以根据元素满足条件的真假进行过滤，返回一个满足筛选条件的新数组。

const myArray = [1,2,3,4,5,6];

const filteredArray = myArray.filter(function(val) {
  return val % 2 === 0;
});

// ES6 箭头函数的写法
const filteredArray = myArray.filter(val => val % 2 === 0);

用法示例

下面是两个示例，演示如何使用数组的操作方法处理和操作数据。

根据条件过滤出数据

假设有一个包含人员信息的数组，其中包含每个人的名字和年龄。现在我们想要根据年龄筛选出大于等于18岁的人的名字。

const people = [
  { name: "Mike", age: 25 },
  { name: "Jessica", age: 22 },
  { name: "David", age: 21 },
  { name: "Tom", age: 17 },
  { name: "Mary", age: 20 }
];

const adultNames = people.filter(function(person) {
  return person.age >= 18;
}).map(function(person) {
  return person.name;
});

console.log(adultNames);     // ['Mike', 'Jessica', 'David', 'Mary']

计算数组中元素的总和

让我们看一个计算数组中所有元素的和的示例。

const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce(function(total, num) {
  return total + num;
});

// ES6 箭头函数的写法
const sum = numbers.reduce((total, num) => total + num);

console.log(sum);   // 15

以上是常用的JavaScript数组操作方法以及使用示例，开发者可根据需求使用相应方法对数据进行处理。