详解javascript遍历方式

这篇文章将为你详细解读JavaScript中的遍历方式，无论你是初学者还是资深开发者，相信都能从中受益。

让我们看两个示例数组和对象：

```javascript

var demoArr = ['Javascript', 'Gulp', 'CSS3', 'Grunt', 'jQuery', 'angular'];

var demoObj = {

aaa: 'Javascript',

bbb: 'Gulp',

c: 'CSS3',

ddd: 'Grunt',

eee: 'jQuery',

fff: 'angular'

};

```

一、for循环

这是最直接、最常用的遍历方式。为了避免影响作用域中的其他变量，我们常常使用函数自执行的方式将循环变量隔离起来。例如：

```javascript

(function() {

var i = 0, len = demoArr.length;

for(; i < len; i++) {

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

}

})();

```

在for循环中，我们可以使用return、break和continue来控制循环的执行。return会终止整个函数执行，break会终止循环，而continue则会跳过当前循环，进入下一次循环。值得注意的是，数组长度计算次数过多会影响效率，因此建议提前计算好长度并存储。将变量声明放在for语句的前面可以提高代码的可读性。

二、for in循环

for in循环可以用来遍历数组和对象。遍历数组时，循环变量表示索引值，可以直接用于访问数组元素。遍历对象时，循环变量表示key值，可以直接用于访问对象的属性值。同样，我们也需要注意使用函数自执行来避免作用域问题。例如：

```javascript

(function() {

for(var i in demoArr) {

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

}

数组遍历的不同方式

在JavaScript中，有多种方法可以遍历数组。让我们深入其中几种，并理解它们的差异。

首先是使用函数res()，它展示了一个基本的for循环示例：

```javascript

function res() {

var demoArr = ['Javascript', 'Gulp', 'CSS3', 'Grunt', 'jQuery', 'angular'];

for (var item in demoArr) {

if (item == 2) {

return; // 当元素等于2时退出循环

} else {

console.log(item, demoArr[item]); // 打印元素及其对应的值

}

}

console.log('description', 'function res'); // 这句代码实际上不会执行，因为循环中已经返回了结果

}

```

接下来是forEach循环，它是JavaScript中非常常见的数组遍历方法。它的特点是无法遍历对象，并且在IE浏览器中可能无法使用。在forEach循环中，不能使用break和continue来跳出循环。如果需要使用类似的功能，可以使用return来模拟continue的效果。例如：

```javascript

demoArr.forEach(function(e) {

if (e == 'CSS3') {

return; // 返回时，后续代码将不会被执行，但不影响循环的继续执行。相当于在for循环中使用continue的效果。不能直接退出循环。这一点要注意避免误解。若使用break会报错。在forEach中不能使用break和continue。但可以使用return来模拟continue的效果。这样，当元素等于CSS3时，将跳过此次循环中的后续代码并继续下一次循环。但要注意，由于forEach不支持break和continue，所以在使用return时要特别小心。否则可能会引发问题。对于do/while循环方式遍历数组，使用时要特别小心谨慎。当使用continue时，如果i++放在了后面，那么i++的值将一直不会改变，导致陷入死循环。因此不推荐使用do/while的方式来遍历数组。而直接使用while的方式更为简洁明了。而对于$.each方法，它可以用来遍历数组和对象，其用法与forEach类似，但具有更多功能选项。当使用return true时表示跳过本次循环继续下一次循环；使用return false时表示终止循环但不终止函数执行；无法使用break与continue来跳过循环。在遍历过程中，this的值与当前元素的值相等。但是当我们尝试遍历对象的length和[[PrimitiveValue]]属性时却得不到预期的结果，这是因为这两个属性在遍历过程中被忽略了。这是因为这些属性并不是数组元素的属性，而是对象本身的属性或方法。因此在进行遍历操作时需要注意这一点以避免误解或不必要的错误发生。总结起来就是了解不同遍历方法的特性以及它们在特定情况下的行为表现非常重要以避免出现意外的结果和错误的发生。因此在实际应用中需要根据具体情况选择合适的遍历方式并正确使用它们以达到预期的效果和性能优化目标。阅读了《JavaScript高级编程》之后，我发现了关于JavaScript内部属性的一项有趣的内容。书中提到了如何设置对象的枚举属性（Enumerable）。如果一个对象的属性被设置为不可枚举（Enumerable设为false），那么它就不会出现在对象的枚举过程中。这在处理某些特定情况时会非常有用。

当我们查看一个对象属性的内部信息时，比如一个对象的 'length' 属性，我们可以使用 `Object.getOwnPropertyDescriptor()` 方法来获取其描述信息。例如，对于字符串对象的 'length' 属性，这个描述会告诉我们它的值、是否可写、是否可枚举以及是否可配置等信息。在这个例子中，我们可以看到 'length' 属性的 `enumerable` 属性被设置为 `false`。

在JavaScript中，遍历DOM元素列表是一个常见的操作。当使用jQuery的 `$.each` 方法时，其中的 `$(this)` 和普通的 `this` 有所不同，但它们遍历的结果是相同的。`$(selector).each` 是专门用来遍历DOM元素列表的。在遍历过程中，我们可以使用 `i` 获取当前元素的索引，使用 `ele` 获取当前元素。值得注意的是，`this` 不能调用jQuery方法，而 `$(this)` 可以。

当我们尝试使用 `for..` 循环来遍历DOM元素列表时，会遇到一些问题。因为DOM元素列表实际上是一个对象，虽然它的键值是连续的整数，但它并不是数组。直接遍历的结果会包含一些我们不需要的属性，比如 `length`、`item` 和 `namedItem` 方法。为了解决这个问题，我们需要先将DOM元素列表转换为数组，然后再进行遍历。

除了DOM元素列表，字符串也有类似的属性。字符串的其他属性（如 `length`）的 `enumerable` 被设置为 `false`，所以在遍历字符串时我们不会看到这些属性。还有一些函数和对象也有类似的特性。

关于函数自执行的方式，除了常见的函数直接调用的方式外，还有一些其他方式，如使用立即执行的函数表达式（IIFE）。这些方式在特定的场景下有各自的优势和用途。以上就是关于JavaScript的一些有趣知识点的小结，希望对大家的学习有所帮助。另外补充一点关于代码风格的建议：尽量保持代码清晰易懂，避免过度使用高级特性或者让人困惑的写法。对于初学者来说，逐步学习并理解这些知识点会更加有助于他们的成长。理解并掌握这些关于JavaScript内部属性的知识对于编写高效且可维护的代码是非常有帮助的。