JS 循环遍历 总结

Posted 2021-01-12 136asdxxl

一、循环遍历语句

for...in... （ES5）

语法：javascript for(keys in obj){}
适用：遍历对象
说明：
　　1.keys表示obj对象的每一个键值对的键(键名)，所有循环中，需要使用obj[keys]来取到每一个值。
　　2.for-in 循环，遍历时不仅能读取对象自身上面的成员属性，也能延续原型链遍历出对象的原型属性
　　3.使用hasOwnProperty判断一个属性是不是对象自身上的属性。obj.hasOwnProperty(keys)==true 表示这个属性是对象的成员属性，而不是原型属性

for...of... （ES6）

语法：javascript for(keys of xxx){}
适用：数组、Set和Map结构、某些类似数组的对象（比如arguments对象、DOM NodeList 对象）、Generator 对象，以及字符串
说明：ES6 借鉴 C++、Java、C# 和 Python 语言，引入了for...of循环，作为遍历所有数据结构的统一的方法。
　一个数据结构只要部署了Symbol.iterator属性，就被视为具有iterator接口，就可以用for...of循环遍历它的成员。
也就是说，for...of循环内部调用的是数据结构的Symbol.iterator方法。
　
其他：
for (let [key,value] of Object.entries(obj))
for (let key of Object.keys(obj))
for (let key of Object.values(obj))

1.Object.keys()
返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（ enumerable ）属性的键名。

2.Object.values()
返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（ enumerable ）属性的键值。

3.Object.entries()
返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（ enumerable ）属性的键值对数组。

forEach (ES5)

语法：javascript [].forEach(callbackfn[, thisArg])
适用： 遍历数组，不改变原数组
说明：对数组里存在的每个元素调用一次 callbackfn。callbackfn 只被实际存在的数组元素调用；它不会被缺少的数组元素调用。
如果提供了一个 thisArg 参数，它会被当作 this 值传给每个 callbackfn 调用。如果没提供它，用 undefined 替代。

callbackfn参数，分别为值、下标、数组本身

[].forEach(function(value, index, array) {
    // ...
});

对比jQuery中的$.each方法：

$.each([], function(index, value, array) {
    // ...
});

缺点：

1. 不能使用break语句中断循环
2. 不能使用return语句返回到外层函数

map (ES5)

语法： javascript [].map(callbackfn[, thisArg]);
说明：map方法可以返回一个处理过的新数组，不改变原数组

callbackfn参数，分别为值、下标、数组本身

[].map(function(value, index, array) {
  // ...
  return .....
}); 

二、比较

for...in缺点

　　①数组的键名是数字，但是for...in循环是以字符串作为键名“0”、“1”、“2”等等。
　　②不仅遍历数字键名，还会遍历手动添加的其他键，甚至包括原型链上的键。
　　③某些情况下，会以任意顺序遍历键名，主要是为遍历对象而设计的，不适用于遍历数组。

for...of优点

　　①有着同for...in一样的简洁语法，但是没有for...in那些缺点。
　　②不同于forEach方法，它可以与break、continue和return配合使用。
　　③提供了遍历所有数据结构的统一操作接口。

三、循环控制语句

1、break：跳出本层循环，继续执行循环结构后面的语句。如果循环有多层，则break只能跳出一层。

2、continue：跳过本次循环剩余的代码，跳转到表达式处进行下一次的循环判断，继续执行下一次循环。
　　　①对与for循环，continue之后执行的语句，是循环变量更新语句i++；
　　　②对于while、do-while循环，continue之后执行的语句，是循环条件判断；
　　　因此，使用这两个循环时，必须将continue放到i++之后使用，否则，continue将跳过i++进入死循环

3、return：在程序（函数）中遇到return语句，那么代码就退出该函数的执行，返回到函数的调用处；如果是主程序（main()），那么结束整个程序的运行。

4、exit: 其他语言中使用，如C、C++等。调用exit()函数将会结束当前进程，同时删除子进程所占用的内存空间，把返回信息传给父进程。
当exit()中的参数为0时，表示正常退出，其他返回值表示非正常退出，执行exit()函数意味着进程结束；
而return仅表示调用堆栈的返回，其作用是返回函数值，并且退出当前执行的函数体，返回到函数的调用处，
在main()函数中， return n和exit(n)是等价的。