2023-07-26发表2024-05-31更新ES624 分钟读完 (大约3583个字)0次访问

ES6中Array的强大之道：在数组中找到你想要的

在现代的JavaScript开发中，Arrays（数组）是最常用的数据结构之一。ES6为数组提供了一系列实用的方法，如find、filter、forEach、map、some和every等，这些方法使得对数组进行操作更加简洁和高效。本文将详细介绍每个方法的语法、基本用法以及常见应用场景，助你发掘Arrays的强大之道，以便更好地应对各种开发需求。

一、Find（寻找）

Find方法用于在数组中查找满足特定条件的第一个元素，并返回该元素。如果没有满足条件的元素，则返回undefined。

Find方法的语法及基本用法

1	array.find(callback(element[, index[, array]])[, thisArg])

其中，callback是用来测试每个元素是否满足条件的函数，element表示当前遍历到的元素，index表示当前索引，array表示原数组对象。thisArg是可选参数，用于指定回调函数内部的this值。

Find方法的实例
让我们通过一个简单的示例来演示如何使用find方法寻找数组中的元素：

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

const result = numbers.find((element) => {
  return element > 3;
});

console.log(result); // 输出: 4

在这个例子中，我们使用find方法查找数组中第一个大于3的元素。

Find方法常用于以下场景：

a. 寻找特定元素

我们可以使用find方法寻找数组中满足特定条件的元素。假设我们有一个存储学生信息的数组，并且我们想要找到年龄为18岁的学生：

const students = [
  { name: 'Alice', age: 16 },
  { name: 'Bob', age: 20 },
  { name: 'Tom', age: 18 },
  { name: 'Linda', age: 22 }
];

const result = students.find((student) => {
  return student.age === 18;
});

console.log(result);
// 输出:
// { name: 'Tom', age: 18 }

通过将回调函数定义为检查age属性是否等于18，我们可以使用find方法快速找到年龄为18岁的学生信息。

b. 查找具有唯一标识的对象

有时候我们需要根据某个字段或属性值查找具有唯一标识的对象。假设我们有一个存储用户信息的数组，并且每个用户都有一个唯一的id属性，我们希望根据id查找对应的用户信息：

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Tom' }
];

const userId = 2;

const result = users.find((user) => {
  return user.id === userId;
});

console.log(result);
// 输出:
// { id: 2, name: 'Bob' }

在这个例子中，我们使用find方法根据id字段查找到id为2的用户信息。

二、Filter（过滤）

Filter方法用于创建一个新数组，其中包含所有满足特定条件的原始数组元素。如果没有满足条件的元素，则返回一个空数组。

Filter方法的语法及基本用法

1	array.filter(callback(element[, index[, array]])[, thisArg])

Filter方法的实例

让我们通过一个简单的示例来演示如何使用filter方法过滤数组元素：

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

const filteredNumbers = numbers.filter((element) => {
  return element > 3;
});

console.log(filteredNumbers); // 输出: [4, 5]

在这个例子中，我们使用filter方法过滤数组中大于3的元素，并生成一个新的filteredNumbers数组。

Filter方法常用于以下场景：

a. 过滤特定条件的元素

我们可以使用filter方法过滤满足特定条件的元素。假设我们有一个存储商品信息的数组，并且我们想要过滤出价格大于100的商品：

const products = [
  { name: 'iPhone', price: 999 },
  { name: 'iPad', price: 799 },
  { name: 'MacBook', price: 1299 },
  { name: 'AirPods', price: 199 }
];

const filteredProducts = products.filter((product) => {
  return product.price > 1000;
});

console.log(filteredProducts);
// 输出:
// [
//   { name: 'iPhone', price: 999 },
//   { name: 'MacBook', price: 1299 }
// ]

通过将回调函数定义为检查price属性是否大于1000，我们可以使用filter方法过滤出价格大于1000的商品。

b. 删除数组中的空值或无效数据

有时候我们需要从数组中删除空值、零值或其他无效数据。假设我们有一个存储用户评论的数组，并且部分评论可能为空字符串或者不合法：

const comments = ['Great!', '', 'Bad', null, 'Excellent'];

const filteredComments = comments.filter((comment) => {
  return comment && comment.trim().length > 0;
});

console.log(filteredComments); // 输出: ['Great!', 'Bad', 'Excellent']

通过将回调函数定义为检查comment是否存在并且去除首尾空格后长度是否大于0，我们可以使用filter方法快速过滤掉空值或无效数据。

三、ForEach（遍历）

ForEach方法用于对数组中的每个元素执行一次指定的操作，没有返回值。

ForEach方法的语法及基本用法

1	array.forEach(callback(currentValue[, index[, array]])[, thisArg]);

其中，callback是要执行的操作的函数，currentValue表示当前遍历到的元素，index表示当前索引，array表示原数组对象。thisArg是可选参数，用于指定回调函数内部的this值。

ForEach方法的实例

让我们通过一个简单的示例来演示如何使用forEach方法遍历数组：

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

numbers.forEach((number) => {
  console.log(number);
});

// 输出:
// 1
// 2
// 3
// 4
// 5

在这个例子中，我们使用forEach方法遍历数组，并对每个元素执行打印输出的操作。

ForEach方法常用于以下场景：

a. 修改原始数组

除了遍历和打印输出，我们还可以使用forEach方法修改原始数组。假设我们有一个存储数字的数组，并将每个元素都乘以2来修改原数组：

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

numbers.forEach((number, index, array) => {
  array[index] = number * 2;
});

console.log(numbers); // 输出: [2, 4, 6, 8, 10]

在这个例子中，我们使用forEach方法遍历数组，并将每个元素乘以2来修改原数组。

b. 执行其它操作

除了修改数组本身，forEach方法还可以用于执行一些其它逻辑操作，如打印输出或发送网络请求等。假设我们有一个存储用户信息的数组，并且我们想要将每个用户的名称打印出来：

const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Tom', age: 28 }
];

users.forEach((user) => {
  console.log(user.name);
});

// 输出:
// Alice
// Bob
// Tom

在这个例子中，我们使用forEach方法遍历数组，并打印每个用户的名称。

四、Map（映射）

Map方法通过对原始数组的每个元素应用特定操作来创建一个新数组，新数组包含了这些操作的结果。

Map方法的语法及基本用法

1	array.map(callback(element[, index[, array]])[, thisArg]);

其中，callback是要应用的操作的函数，element表示当前遍历到的元素，index表示当前索引，array表示原数组对象。thisArg是可选参数，用于指定回调函数内部的this值。

Map方法的实例
让我们通过一个简单的示例来演示如何使用map方法映射数组元素：

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

const doubledNumbers = numbers.map((number) => {
  return number * 2;
});

console.log(doubledNumbers); // 输出: [2, 4, 6, 8, 10]

在这个例子中，我们使用map方法将原数组中的每个元素都乘以2，并生成一个新的doubledNumbers数组。

Map方法常用于以下场景：

a. 根据原始数组生成新的数据结构

我们可以使用map方法将原始数组转换为具有不同结构的新数组。假设我们有一个存储学生信息的数组，并且我们想要将每个学生的姓名和年龄组成一个新的对象数组：

const students = [
  { name: 'Alice', age: 16 },
  { name: 'Bob', age: 18 },
  { name: 'Tom', age: 20 }
];

const studentDetails = students.map((student) => {
  return {
    fullName: student.name,
    yearsOld: student.age
  };
});

console.log(studentDetails);
// 输出:
// [
//   { fullName: 'Alice', yearsOld: 16 },
//   { fullName: 'Bob', yearsOld: 18 },
//   { fullName: 'Tom', yearsOld: 20 }
// ]

通过将回调函数定义为返回一个新的对象，我们可以使用map方法将原始数组中的学生信息转换为具有姓名和年龄的新对象数组。

b. 对数组中的元素进行格式化或转换

有时候我们需要对数组中的元素进行格式化或转换，如将日期字符串转换为日期对象、将文本转换为大写、保留小数点后两位等操作。假设我们有一个存储订单金额的数组，并且我们想要将金额保留两位小数：

const prices = [9.99, 21.49, 15.00, 7.5];

const formattedPrices = prices.map((price) => {
  return price.toFixed(2);
});

console.log(formattedPrices); // 输出: ['9.99', '21.49', '15.00', '7.50']

通过使用toFixed方法对每个价格进行格式化，我们可以使用map方法将价格数组中的元素保留两位小数。

五、Some（某些满足条件）

Some方法用于检查数组中是否至少存在一个满足特定条件的元素，如果存在则返回true，否则返回false。

Some方法的语法及基本用法

1	array.some(callback(element[, index[, array]])[, thisArg]);

其中，callback是要检测的条件的函数，element表示当前遍历到的元素，index表示当前索引，array表示原数组对象。thisArg是可选参数，用于指定回调函数内部的this值。

Some方法的实例
让我们通过一个简单的示例来演示如何使用some方法检查数组中是否存在满足条件的元素：

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

const hasEvenNumber = numbers.some((number) => {
  return number % 2 === 0;
});

console.log(hasEvenNumber); // 输出: true

在这个例子中，我们使用some方法检查数组中是否存在偶数，即是否至少有一个元素满足条件。

Some方法常用于以下场景：

a. 检查数组中是否存在满足特定条件的元素

我们可以使用some方法来检查数组中是否至少存在一个元素满足特定条件。假设我们有一个存储用户年龄的数组，并且我们想要检查是否存在成年用户（年龄大于等于18）：

const ages = [16, 22, 14, 30, 25];

const hasAdultUser = ages.some((age) => {
  return age >= 18;
});

console.log(hasAdultUser); // 输出: true

通过将回调函数定义为检查年龄是否大于等于18，我们可以使用some方法快速检查数组中是否存在成年用户。

b. 检查字符串数组中是否包含特定字符或单词

有时候我们需要检查字符串数组中是否至少存在一个元素包含特定字符或单词。假设我们有一个存储用户名的数组，并且我们想要检查是否存在包含”admin”的用户名：

const usernames = ['john', 'admin', 'alice', 'bob'];

const hasAdminUser = usernames.some((username) => {
  return username.includes('admin');
});

console.log(hasAdminUser); // 输出: true

通过将回调函数定义为检查用户名是否包含”admin”，我们可以使用some方法快速检查数组中是否存在包含”admin”的用户名。

请注意，Some方法在找到满足条件的元素后会立即停止遍历，因此对于大型数组或需要遍历整个数组的情况，可以考虑使用Some方法来提高性能。

六、Every（每个元素都满足条件）

Every方法用于检查数组中的每个元素是否都满足特定条件，如果是则返回true，否则返回false。

Every方法的语法及基本用法

1	array.every(callback(element[, index[, array]])[, thisArg]);

Every方法的实例
让我们通过一个简单的示例来演示如何使用every方法检查数组中的每个元素是否都满足条件：

const numbers = [2, 4, 6, 8, 10];

const allEvenNumbers = numbers.every((number) => {
  return number % 2 === 0;
});

console.log(allEvenNumbers); // 输出: true

在这个例子中，我们使用every方法检查数组中的每个数字是否都为偶数。

Every方法常用于以下场景：

a. 检查数组中的所有元素是否满足某个条件

我们可以使用every方法来检查数组中的每个元素是否都满足某个条件。假设我们有一个存储商品库存的数组，并且我们想要检查是否所有商品的库存量都大于0：

const inventory = [5, 10, 3, 7, 8];

const allProductsInStock = inventory.every((quantity) => {
  return quantity > 0;
});

console.log(allProductsInStock); // 输出: true

通过将回调函数定义为检查库存量是否大于0，我们可以使用every方法快速检查数组中的所有商品是否都有库存。

b. 检查对象数组中的属性是否都满足某个条件

在对象数组中，我们可以使用every方法来检查所有对象的特定属性是否都满足某个条件。假设我们有一个存储学生信息的数组，并且我们想要检查所有学生的成绩是否都大于等于60：

const students = [
  { name: 'Alice', score: 75 },
  { name: 'Bob', score: 82 },
  { name: 'Tom', score: 67 }
];

const allStudentsPass = students.every((student) => {
  return student.score >= 60;
});

console.log(allStudentsPass); // 输出: true

通过将回调函数定义为检查成绩是否大于等于60，我们可以使用every方法快速检查数组中所有学生的成绩是否都合格。

请注意，Every方法在遇到第一个不满足条件的元素时会立即停止遍历，因此对于大型数组或需要遍历整个数组的情况，可以考虑使用Every方法来提高性能。

ES6为JavaScript语言引入的这些方法，提供了更加简洁、优雅的语法，使我们能够更高效地处理数组操作。通过灵活运用这些方法，我们可以轻松地寻找和过滤数组元素，对数组进行遍历和修改。

ES6中Array的强大之道：在数组中找到你想要的

https://blogs.52fx.biz/posts/3998542171.html