js数组遍历

for 循环:是最基础、最常见的数组遍历方法。通过定义一个循环变量和循环条件来循环遍历数组,每次循环通过访问数组索引来获取元素。for 循环可以实现对数组的正序、倒序遍历等。

let arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

forEach() 方法:是 ES5 新增的方法,它可以方便地遍历数组的所有元素。使用该方法时,需要传入一个回调函数作为参数,该回调函数会被每个元素执行一次,回调函数的参数分别为元素的值、元素的索引、整个数组。forEach() 方法不能中途停止或跳出循环。

let arr = [1, 2, 3, 4, 5];
arr.forEach(function(element, index, array) {
  console.log(element);
});

map() 方法:也是 ES5 新增的方法,它可以遍历数组并返回一个新的数组。使用该方法时,需要传入一个回调函数作为参数,该回调函数会被每个元素执行一次,回调函数的返回值会被组合成一个新数组。map() 方法不会改变原始数组,而是返回一个新的数组。

let arr = [1, 2, 3, 4, 5];
let newArr = arr.map(function(element, index, array) {
  return element * 2;
});
console.log(newArr); // [2, 4, 6, 8, 10]

filter() 方法:也是 ES5 新增的方法,它可以遍历数组并根据某些条件过滤出符合条件的元素组成一个新的数组。使用该方法时,需要传入一个回调函数作为参数,该回调函数会被每个元素执行一次,回调函数的返回值为 true 则表示该元素符合条件。filter() 方法也不会改变原始数组,而是返回一个新的数组。

let arr = [1, 2, 3, 4, 5];
let filteredArr = arr.filter(function(element, index, array) {
  return element > 2;
});
console.log(filteredArr); // [3, 4, 5]

reduce() 方法也是 ES5 新增的方法,它可以遍历数组并将数组中的每个元素累加或者累乘起来得到一个结果。它通过一个回调函数,对数组的每个元素进行处理,并将处理后的结果与下一个元素进行处理。最终得到一个单一的值,作为最终的返回结果。示例代码如下:

let arr = [1, 2, 3];
let sum = arr.reduce(function(prev, curr) {
  return prev + curr;
});
console.log(sum); // 6

some:遍历数组中的每一个元素,对每个元素执行回调函数,如果回调函数返回true,则返回true,否则返回false,只要有一个元素满足条件,就返回true。

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

// 判断数组中是否有偶数
const hasEven = array.some((element) => {
  return element % 2 === 0;
});

console.log(hasEven); // true

// 判断数组中是否有负数
const hasNegative = array.some((element) => {
  return element < 0;
});

console.log(hasNegative); // false


every:遍历数组中的每一个元素,对每个元素执行回调函数,如果回调函数返回true,则继续遍历,否则返回false,只有所有元素都满足条件,才返回true。

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

// 判断数组中是否有偶数
const hasEven = array.some((element) => {
  return element % 2 === 0;
});

console.log(hasEven); // true

// 判断数组中是否有负数
const hasNegative = array.some((element) => {
  return element < 0;
});

console.log(hasNegative); // false

find: 用于返回数组中满足给定测试条件的第一个元素的值。

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

// 查找数组中大于 3 的第一个元素
const result = numbers.find((element) => element > 3);

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

如果找不到满足条件的元素,则 find() 方法返回 undefined。

findIndex

用于查找数组中满足给定条件的第一个元素,并返回该元素在数组中的索引。如果找不到满足条件的元素,则返回 -1。

const numbers = [10, 20, 30, 40, 50];

// 找到第一个大于 25 的元素的索引
const index = numbers.findIndex(element => return element > 25);
console.log(index); // 输出: 2 (对应元素为 30)

sort

let arrayOfObjects = [
    { id: 3, name: 'John' },
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' }
];

// 按照 id 字段进行排序
arrayOfObjects.sort((a, b) => a.id - b.id);

// 从排好序的数组中提取 id,并存储到新数组
let sortedIdsArray = arrayOfObjects.map(obj => obj.id);

// 输出排好序的 id 数组
console.log(sortedIdsArray);

你可能感兴趣的:(Js,javascript,前端,开发语言)