JavaScript中利用各种循环进行遍历的方式总结

JavaScript中的循环遍历艺术

====================

在JavaScript的世界里，遍历数组和对象是一项基础而重要的技能。让我们通过几个例子来深入理解如何使用不同的循环结构进行遍历。

让我们定义两个用于演示的数据结构：一个数组和一个对象。

数组：`demoArr = ['Javascript', 'Gulp', 'CSS3', 'Grunt', 'jQuery', 'angular']`

对象：`demoObj = {aaa: 'Javascript', bbb: 'Gulp', c: 'CSS3', ddd: 'Grunt', eee: 'jQuery', fff: 'angular'}`

for.. 循环

`for(var item in arr|obj){}` 这种循环结构可以用于遍历数组和对象。

遍历数组时，`item` 表示索引值，`arr` 表示当前索引值对应的元素 `arr[item]`。

遍历对象时，`item` 表示key值，`arr` 表示key值对应的value值 `obj[item]`。

注意，在使用 `for..` 循环时，有几点需要注意：

1. 循环结束后，循环变量 `i` 会保留下来。为了避免这种情况，可以将循环放在函数自执行体内。

2. `return`、`break`、`continue` 在 `for..` 循环中的使用与 `for` 循环一致。但需要注意的是，`return` 会终止函数执行，而 `break` 只是终止循环，后续代码会继续执行。

forEach 循环

`demoArr.forEach(function(arg) {})` 是数组的一个方法，用于遍历数组。参数 `arg` 表示数组每一项的元素。

注意：`forEach` 无法遍历对象。

在 IE 浏览器中，`forEach` 可能不被支持，但在 Firefox 和 Chrome 中是支持的。

`forEach` 循环中不能使用 `break` 和 `continue` 跳出循环。使用 `return` 时，效果与 `for` 循环中的 `continue` 类似。

do...while 循环

-

对于 `do...while` 循环，有一点需要特别注意：当使用 `continue` 时，如果 `i++` 放在了后面，那么 `i++` 的值将一直不会改变，导致死循环。使用 `do...while` 循环时一定要小心谨慎。

JavaScript中的循环遍历方式：从基础到进阶

在我们的JavaScript编程之旅中，循环遍历是不可或缺的一部分。无论是处理数组还是对象，循环都是我们经常使用的工具。让我们深入了解几种常见的遍历方法，包括使用控制台日志、do-while循环，以及强大的jQuery的$.each()函数。

一、控制台日志与基本循环

让我们从一个简单的例子开始。假设我们有一个名为demoArr的数组，我们想打印出它的每个元素。我们可以使用以下代码：

```javascript

console.log('开始遍历demoArr...');

for (var i = 0; i < demoArr.length; i++) {

console.log('demoArr[' + i + ']: ' + demoArr[i]);

}

console.log('');

```

这段代码首先初始化一个变量i为0，然后通过for循环遍历demoArr数组的每一个元素，直到i小于数组长度为止。每次循环都会打印出当前元素的索引和值。我们在控制台输出一条分隔线。

二、do-while循环

除了for循环，我们还可以使用do-while循环来实现同样的功能。如下所示：

```javascript

var i = 0;

var len = demoArr.length;

do {

console.log('demoArr[' + i + ']: ' + demoArr[i]);

i++;

} while (i < len);

```

这个do-while循环与前面的for循环功能相同，但是它在每次循环后都会检查条件是否仍然满足，如果满足则继续循环。需要注意的是，do-while循环至少会执行一次，即使初始条件不满足也是如此。如果我们在循环体内部使用break语句，可以终止循环。

三、使用jQuery的$.each()函数

除了使用基本的JavaScript循环，我们还可以利用强大的jQuery库中的$.each()函数来遍历数组和对象。这个函数接受一个数组或对象以及一个回调函数作为参数，回调函数中的this关键字指向当前元素，e表示索引或键，ele表示值。例如：

```javascript

$.each(demoArr, function(e, ele) {

console.log(e, ele); // 输出索引和对应的值

});

```

在$.each()的回调函数中，我们可以使用return语句来控制循环的执行。返回true表示继续执行下一次循环，返回false则终止循环。值得注意的是，我们无法使用break和continue来控制$.each()循环的执行。关于this的值，在遍历过程中，它通常指向当前元素。当我们使用$.each()遍历一个字符串时，this会指向字符串的原始形式。例如，"CSS3"会被视为一个包含字符的数组。当我们打印this时，会得到类似"CSS3"这样的结果。而当我们比较this和ele时，结果是true，因为它们指向的是同一个字符串的不同部分。至于length和[[PrimitiveValue]]没有被遍历出来是因为它们不是字符串的元素，而是字符串对象的属性。如果我们使用$.each()来遍历一个对象或数组的这些属性或特性，它们会被正确地处理并输出。$.each()提供了一种强大且灵活的方式来遍历数组和对象，让我们能够更方便地处理复杂的JavaScript数据结构。在阅读《JavaScript高级编程》的过程中，我偶然在一处找到了关于JavaScript内部属性的宝贵信息。书中提到，JavaScript的对象数据属性中有一个叫做Enumerable的属性，它被设置为false时，表示某些属性不可被枚举。

在JavaScript中，我们经常使用控制台来查看和了解对象的属性。当我们尝试查看例如数组或DOM集合的“length”属性的内部属性时，我们可以使用`Object.getOwnPropertyDescriptor(this, 'length')`来获取其详细信息。返回的结果通常会显示该属性的值、是否可写、是否可枚举以及是否可配置。

当我们谈论到遍历DOM元素时，`$.each`函数显得尤为有用。这个函数专门用于遍历DOM列表。在遍历过程中，我们可以访问每个元素的索引（i）和元素（ele）。值得注意的是，`this`和`$(this)`在遍历过程中并不相同。`this`指向当前被遍历的DOM元素，但不能调用jQuery方法。而`$(this)`是一个jQuery对象，可以调用jQuery方法进行DOM操作。

对于非数组对象（如DOM列表），我们不能直接使用for-in循环进行遍历，因为它们的键值虽然看起来像是数组索引，但实际上它们并非数组。直接遍历的结果可能会包含一些额外的属性和方法，如length、item()和namedItem()。如果我们想使用for-in循环遍历domList，我们需要先将domList转换为数组。

除了DOM对象和数组，字符串也是可以遍历的。字符串的其他属性由于它们的enumerable被设置成了false，所以在遍历过程中并不会被显示出来。但这并不影响我们遍历字符串的结果。

关于函数自执行的方式，有多种方法可以实现，如使用立即执行的函数表达式（IIFE）。有些人可能会采用一些看似复杂但实则高效的方式来编写函数，例如使用自执行匿名函数的方式。但这并不意味着他们试图炫耀自己的技术，而是出于特定的需求和考虑。

至于最后的“cambrian.render('body')”，从这段代码中无法得知其具体含义和用途，因为它可能是某个特定库或框架的API调用。但无论如何，理解JavaScript的内部属性和机制对于编写高效、灵活的代码至关重要。