JavaScript循环遍历的24个方法,你都知道吗

JavaScript循环遍历的24个方法攻略

在JavaScript编程中，循环遍历是非常常见的操作。以下罗列了24个JavaScript循环遍历的方法：

1. for循环

for循环是最基本、最常见、最易懂的循环遍历方法。每次循环可以使迭代变量前往下一项。

for (var i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

2. while循环

while循环即先判断条件是否成立，再执行循环体。在while循环中，循环条件在每次循环之前被检查，并且只要条件为真，则循环将一直继续，直到条件为假才停止。

var i = 0;
while (i < arr.length) {
  console.log(arr[i]);
  i++;
}

3. do...while循环

do...while循环与while循环非常相似，不同之处在于条件判断的时间。do while 循环将会在代码块执行前先执行一次循环，然后只要条件为真，就会不断执行循环。

var i = 0;
do {
  console.log(arr[i]);
  i++;
} while (i < arr.length);

4. forEach

forEach()是专门为数组遍历开发的方法，它允许您使用回调函数作为参数对数组中的每个元素进行操作(回调函数的形参item、index和array分别代表数组元素、数组下标和数组本身)

arr.forEach(function(item, index, array) {
  console.log(item);
});

5. map

map()是专门为数组遍历及其它操作开发的方法，它可以让您对数组中的每个元素进行操作，返回新的数组，而不修改原始数组本身。

var newarr = arr.map(function(item, index, array) {
  return item * 2; //每个元素乘以2，返回新数组
});
console.log(newarr);

6. filter

filter()方法允许您按照指定条件过滤数组元素，并只返回符合条件的元素的新数组。

var newarr = arr.filter(function(item, index, array) {
  return item > 2; //返回大于2的元素
});
console.log(newarr);

7. every

every()方法检查数组的每个元素是否符合指定条件。

var isEven = function(x) {
  return x % 2 === 0; //判断是否为偶数
}
var result = arr.every(isEven);
console.log(result);

8. some

some()方法检查数组中是否至少有一个元素符合指定条件。返回真或假。

var result = arr.some(function(item, index, array) {
  return item > 2; //是否存在大于2的元素
});
console.log(result);

9. reduce

reduce()方法在数字和数组中非常有用。它对数组中的每个元素进行操作，并返回一个单一的值。

var sum = arr.reduce(function(prev, curr, index, array) {
  return prev + curr; //将所有元素求和
});
console.log(sum);

10. reduceRight

reduceRight()方法与reduce()方法相似，不同之处在于它是从右到左对数组中的元素进行操作的。

var arr = ['a', 'b', 'c', 'd'];
var concat = arr.reduceRight(function(a, b) {
  return a + b; //将数组按逆序合并为一个字符串
});
console.log(concat);

11. indexOf

indexOf()方法允许您查找数组中指定元素的位置。

var index = arr.indexOf(2);
console.log(index);

12. lastIndexOf

lastIndexOf()方法类似于indexOf()，不同之处在于它从后往前搜索元素。

var arr = [1, 2, 3, 2];
var index = arr.lastIndexOf(2);
console.log(index);

13. find

find()方法将返回数组中通过测试函数的一个元素的值。

var arr = [1, 3, 5, 9];
var result = arr.find(function(item, index, array) {
  return item % 2 === 0; //返回第一个偶数
});
console.log(result);

14. findIndex

findIndex()方法将返回数组中通过测试函数的一个元素的索引值。

var arr = [1, 3, 5, 9];
var result = arr.findIndex(function(item, index, array) {
  return item % 2 === 0; //找到第一个偶数的位置
});
console.log(result);

15. map and filter

通过结合使用map()和filter()，可以更轻松地查询和操作数组。

var arr = [1, 2, 3, 4, 5];
var newarr = arr.filter(function(item, index, array) {
    return item !== 3; //过滤掉值为3的元素
  })
  .map(function(item, index, array) {
    return item * 2; //将所有元素的值乘以2
  });
console.log(newarr);

16. for...in循环

for...in循环允许您遍历对象的所有属性（注意：不是数组），包括原型链中的所有属性。由于此循环是针对每个属性，所以循环次数可能会比预期的多，例如您需要使用if语句来防止对原型链中的属性进行操作。

for (var prop in object) {
  console.log(prop + " = " + object[prop]);
}

17. for...of循环

for...of循环是用于遍历可迭代对象的最新加入ES6标准特性。它可以以一种简单的方式遍历数组和对象。

for (var item of arr) {
  console.log(item);
}

18. Object.keys

Object.keys()是一个静态方法，它返回一个数组，其中包含指定对象的所有可枚举属性的名称。

var obj = {
  name: 'Tom',
  age: 18
};
var keys = Object.keys(obj); //返回键数组 ['name', 'age']
console.log(keys);

19. Object.getOwnPropertyNames

Object.getOwnPropertyNames(obj)返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性，但不包括Symbol值作为名称的属性）组成的数组。

var obj = {
  name: 'Tom',
  age: 18
};
var props = Object.getOwnPropertyNames(obj); //返回属性数组 ['name', 'age']
console.log(props);

20. Object.getOwnPropertySymbols

Object.getOwnPropertySymbols()方法返回一个给定对象自身的所有Symbol属性的数组。

var sym = Symbol();
var obj = {};
obj[sym] = 'hello';
var symbols = Object.getOwnPropertySymbols(obj); //返回Symbol属性数组
console.log(symbols);

21. Reflect.ownKeys

Reflect.ownKeys()方法返回一个由给定对象的所有元素（包括不可枚举属性和Symbol值作为名称的属性）组成的数组。

var sym = Symbol();
var obj = {
  name: 'Tom',
  age: 18
};
obj[sym] = 'hello';
var keys = Reflect.ownKeys(obj); //返回属性数组 ['name', 'age', Symbol()]
console.log(keys);

22. Array.from

Array.from()方法将一个类似数组的对象或迭代器转换为一个新的数组实例。

var obj = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
};
var arr = Array.from(obj); //返回数组 ['a', 'b', 'c']
console.log(arr);

23. Array.isArray

Array.isArray(obj)方法判断对象是否为数组。

var arr = [1, 2, 3];
var result = Array.isArray(arr); //返回真
console.log(result);

24. Array.of

Array.of()方法创建一个由参数中所有元素组成的新数组实例。

var arr = Array.of(1, 2, 3, 4); //返回数组 [1, 2, 3, 4]
console.log(arr);

示例说明

示例1：使用forEach()方法操作数组：

var arr = [1, 2, 3, 4];
arr.forEach(function(item, index, array) {
  console.log(item + '-' + index);
});

结果为：输出1-0, 2-1, 3-2, 4-3。

示例2：使用map()和filter()方法对数组进行操作：

var arr = [1, 2, 3, 4, 5];
var newarr = arr.filter(function(item, index, array) {
    return item !== 3; //过滤掉值为3的元素
  })
  .map(function(item, index, array) {
    return item * 2; //将所有元素的值乘以2
  });
console.log(newarr);

结果为：输出[2, 4, 8, 10]。

以上就是JavaScript循环遍历的24个方法攻略，希望对大家有所帮助。