JavaScript编码之路【JavaScript之操作数组、字符串方法汇总】（二）-阿里云开发者社区

JavaScript编码之路【JavaScript之操作数组、字符串方法汇总】（一）：https://developer.aliyun.com/article/1556673

includes()

includes() 是数组的一个方法，用于判断数组中是否包含指定的元素，并返回相应的布尔值。如果找到了指定元素，则返回 true；如果没有找到，则返回 false。

使用语法如下：

array.includes(element)

其中，array 是要进行查找的数组，element 是要查找的元素。

示例：

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

console.log(fruits.includes('apple'));   // true
console.log(fruits.includes('grape'));   // false

fruits.includes(‘apple’) 返回 true，因为数组 fruits 中包含 ‘apple’ 这个元素。而 fruits.includes(‘grape’) 返回 false，因为数组中不存在 ‘grape’ 这个元素。

find()

find() 是数组的一个方法，用于查找并返回数组中第一个满足指定条件的元素。如果找到了匹配的元素，则返回该元素；如果没有找到，则返回 undefined。

使用语法如下：

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

其中，array 是要进行查找的数组，callback 是一个函数，用于定义匹配条件。

callback 函数可以接受三个参数：

element：当前正在被遍历的元素。

index（可选）：当前元素的索引。

array（可选）：原始数组。

thisArg（可选）在执行 callback 函数时作为 this 的值。

示例：

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

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

console.log(found);   // 4

排序方法

数组有两个方法可以用来对元素重新排序:

reverse
sort()

reverse() 方法会将数组中的元素顺序颠倒。即第一个元素变为最后一个，第二个元素变为倒数第二个，以此类推。

使用示例：

const numbers = [1, 2, 3, 4, 5];
numbers.reverse();
console.log(numbers);  // [5, 4, 3, 2, 1]

在上述示例中，numbers.reverse() 方法将数组 numbers 中的元素顺序进行了颠倒。

sort() 方法用于对数组进行排序，默认按照 Unicode 码点进行排序。它会将数组的元素转换为字符串，然后根据字符串的顺序进行排序。

使用示例：

const fruits = ['apple', 'banana', 'orange'];
fruits.sort();
console.log(fruits);  // ['apple', 'banana', 'orange']

在上述示例中，fruits.sort() 方法按照字母顺序对数组 fruits 进行了排序。

需要注意的是，sort() 方法会直接修改原数组，并且对字符串进行排序时是按照 Unicode 码点进行的。如果需要自定义排序规则，可以传入一个比较函数作为参数。

例如，按照数字大小对数组进行排序：

const numbers = [5, 1, 3, 2, 4];
numbers.sort(function(a, b) {
  return a - b;
});
console.log(numbers);  // [1, 2, 3, 4, 5]

在上述示例中，通过传入比较函数 function(a, b) { return a - b; }，实现了按照数字大小进行升序排序。

来看一道题吧：

对一个包含学生信息的数组进行排序，按照成绩从高到低排序，如果成绩相同则按照姓名的字母顺序排序。

const students = [
  { name: 'Tom', grade: 80 },
  { name: 'Jerry', grade: 90 },
  { name: 'Ana', grade: 70 },
  { name: 'Bob', grade: 80 }
];

students.sort(function(a, b) {
  if (a.grade !== b.grade) {
    // 如果成绩不同，则按照成绩从高到低排序
    return b.grade - a.grade;
  } else {
    // 如果成绩相同，则按照姓名的字母顺序排序
    return a.name.localeCompare(b.name);
  }
});

console.log(students);
// [
//   { name: 'Jerry', grade: 90 },
//   { name: 'Bob', grade: 80 },
//   { name: 'Tom', grade: 80 },
//   { name: 'Ana', grade: 70 }
// ]

转换方法

常见的转换方法：

join() 方法是数组的一个转换方法，它将数组中的所有元素转换为字符串，并可以使用指定的分隔符将它们连接起来。

join() 方法接收一个可选的参数，用于指定字符串的分隔符。如果没有提供该参数，默认使用逗号作为分隔符。

使用示例：

const fruits = ['apple', 'banana', 'orange'];
const result = fruits.join(', ');
console.log(result);  // "apple, banana, orange"

在上述示例中，fruits.join(', ') 将数组 fruits 中的元素用逗号和空格分隔开，返回了一个包含所有元素的字符串。

需要注意的是，join() 方法不会修改原数组，而是返回一个新的字符串。

当数组中的元素本身就是字符串类型时，它们会直接被连接起来，而不会添加额外的引号。

使用示例：

const colors = ['red', 'green', 'blue'];
const result = colors.join('-');
console.log(result);  // "red-green-blue"

在上述示例中，colors.join(‘-’) 将数组 colors 中的元素用连字符分隔开，返回了一个包含所有元素的字符串。

需要注意的是，如果数组中包含 null 或 undefined 等特殊值，它们会被转换为空字符串。

使用示例：

const values = [1, null, 3, undefined, 5];
const result = values.join(':');
console.log(result);  // "1::3::5"

在上述示例中，values.join(‘:’) 将数组 values 中的元素用冒号分隔开，null 和 undefined 被转换为空字符串。

总结一下，join() 方法可以将数组中的所有元素转换为字符串，并使用指定的分隔符连接起来，返回一个新的字符串。

迭代方法

some
every
forEach
filter
map

some()

some()方法是JavaScript数组的一个内置方法，它对数组中的每个元素都应用一个测试函数，并且在至少有一个元素返回true时返回true，否则返回false。

下面是some()方法的语法：

array.some(function(currentValue, index, arr), thisValue)

参数说明：

function(currentValue, index, arr)：必需。表示要对每个元素进行调用的测试函数。它可以接受三个参数：

currentValue：当前正在被测试的元素
index：当前元素在数组中的索引
arr：调用该方法的数组

thisValue：可选。传递给测试函数的值作为this。

简单示例：

const numbers = [1, 2, 3, 4, 5];
const hasEvenNumber = numbers.some(function(number) {
  return number % 2 === 0;
});

console.log(hasEvenNumber); // 输出 true，因为数组中有偶数

every()

every()方法是JavaScript数组的一个内置方法，它对数组中的每个元素都应用一个测试函数，并且在所有元素都返回true时返回true，否则返回false

下面是every()方法的语法：

array.every(function(currentValue, index, arr), thisValue)

参数说明：

function(currentValue, index, arr)：必需。表示要对每个元素进行调用的测试函数。它可以接受三个参数：

currentValue：当前正在被测试的元素。
index：当前元素在数组中的索引。
arr：调用该方法的数组。

thisValue：可选。传递给测试函数的值作为this。

简单示例：

const numbers = [1, 2, 3, 4, 5];
const allArePositive = numbers.every(function(number) {
  return number > 0;
});

console.log(allArePositive); // 输出 true，因为数组中所有数字都是正数

在上面的示例中，我们定义了一个名为allArePositive的变量来存储every()方法的返回值。我们通过传递一个测试函数来检查数组中的所有数字是否都是正数。由于数组中所有数字都是正数，所以every()方法返回true。

forEach()

forEach()方法是JavaScript数组的一个内置方法，它对数组中的每个元素都应用一个函数。forEach()方法没有返回值。

下面是forEach()方法的语法：

array.forEach(function(currentValue, index, arr), thisValue)

参数说明：

function(currentValue, index, arr)：必需。表示要对每个元素进行调用的函数。它可以接受三个参数：

currentValue：当前正在被处理的元素。
index：当前元素在数组中的索引。
arr：调用该方法的数组。

thisValue：可选。传递给测试函数的值作为this。

下面是一个示例：

const numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number) {
  console.log(number);
});

// 输出如下：
// 1
// 2
// 3
// 4
// 5

在上面的示例中，我们使用forEach()方法遍历数组中的所有数字，并将它们打印到控制台上。

需要注意的是，由于forEach()方法没有返回值，因此无法在其中使用return语句来终止循环或提前返回。

filter()

filter()方法是JavaScript数组的一个内置方法，它对数组中的每个元素都应用一个测试函数，并返回符合条件的元素组成的新数组。

下面是filter()方法的语法：

array.filter(function(currentValue, index, arr), thisValue)

参数说明：

function(currentValue, index, arr)：必需。表示要对每个元素进行调用的测试函数。它可以接受三个参数：

currentValue：当前正在被测试的元素。
index：当前元素在数组中的索引。
arr：调用该方法的数组。

thisValue：可选。传递给测试函数的值作为this。

简单示例

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});

console.log(evenNumbers); // 输出 [2, 4]，返回了数组中的偶数

在上面的示例中，我们使用filter()方法筛选数组中的偶数。我们通过传递一个测试函数来检查数字是否是偶数，如果是，则将其保留到新数组中。最后，我们打印出新数组evenNumbers，其中包含原数组中的偶数。

map()

map()方法是JavaScript数组的一个内置方法，它对数组中的每个元素都应用一个函数，并返回由每次函数调用的结果构成的新数组。

下面是map()方法的语法：

array.map(function(currentValue, index, arr), thisValue)

参数说明：

function(currentValue, index, arr)：必需。表示要对每个元素进行调用的函数。它可以接受三个参数：

currentValue：当前正在被处理的元素。
index：当前元素在数组中的索引。
arr：调用该方法的数组。

thisValue：可选。传递给测试函数的值作为this。

简单示例

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(function(number) {
  return number * 2;
});

console.log(doubledNumbers); // 输出 [2, 4, 6, 8, 10]，返回原数组中的每个元素乘以2后的结果

在上面的示例中，我们使用map()方法对数组中的每个数字进行操作，每个数字乘以2。然后，将每次函数调用的结果构成一个新数组doubledNumbers并打印出来。

通过map()方法，我们可以对数组中的每个元素进行自定义的操作，并将操作的结果组成一个新的数组返回。

最后我们来进行练习：

根据用户输入过滤并展示出符合条件的图片列表的组件

HTML 结构：

<input id="search-input" type="text" placeholder="输入关键词">

<div id="image-list"></div>

已知网络请求返回的数据结构如下：

const images = [
  { name: 'image-1', tags: ['red', 'blue'] },
  { name: 'image-2', tags: ['green', 'yellow'] },
  { name: 'image-3', tags: ['red', 'pink'] },
  { name: 'image-4', tags: ['blue', 'orange'] },
  { name: 'image-5', tags: ['red', 'orange'] },
  { name: 'image-6', tags: ['green', 'purple'] },
  { name: 'image-7', tags: ['blue', 'purple'] },
  { name: 'image-8', tags: ['pink', 'orange'] }
];

业务逻辑：

我们通过使用 fetch 函数从指定的 API 地址获取图片列表数据。然后，在输入框输入关键词时，再进行过滤、判断和渲染操作。

// 获取输入框和图片列表元素
const searchInput = document.getElementById('search-input');
const imageList = document.getElementById('image-list');

// 监听输入框的输入事件
searchInput.addEventListener('input', function() {
  // 获取输入框的值，并将其转换为小写字母
  const inputValue = searchInput.value.toLowerCase();

  // 发起网络请求获取图片列表数据
  fetch('https://api.example.com/images')
    .then(response => response.json())
    .then(data => {
      // 过滤出符合关键词的图片列表
      const filteredImages = data.filter(function(image) {
        // 使用 some() 方法判断是否存在符合关键词的 tags
        return image.tags.some(function(tag) {
          return tag.toLowerCase().includes(inputValue);
        });
      });

      // 判断是否显示图片列表的标题
      const titleVisible = filteredImages.every(function(image) {
        return image.tags.some(function(tag) {
          return tag.toLowerCase().includes(inputValue);
        });
      });

      // 渲染图片列表
      renderImageList(filteredImages, titleVisible);
    })
    .catch(error => {
      console.error('Error fetching images:', error);
    });
});

function renderImageList(images, showTitle) {
  // 使用 map() 方法将符合条件的图片渲染出来
  const html = images.map(function(image) {
    return `<img src="${image.url}" alt="${image.name}">`;
  }).join('');

  // 根据图片列表是否存在内容来决定是否显示标题
  if (showTitle) {
    imageList.innerHTML = `<h2>Filtered Images</h2>${html}`;
  } else {
    imageList.innerHTML = html;
  }
}

JavaScript编码之路【JavaScript之操作数组、字符串方法汇总】（三）：https://developer.aliyun.com/article/1556675

JavaScript编码之路【JavaScript之操作数组、字符串方法汇总】（二）

includes()

排序方法

转换方法

some()

every()

forEach()

热门文章

最新文章

相关课程

相关电子书

JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】（二）

includes()

排序方法

转换方法

some()

every()

forEach()

热门文章

最新文章

相关课程

相关电子书

JavaScript编码之路【JavaScript之操作数组、字符串方法汇总】（二）