在 JavaScript 中有多种循环遍历对象的方法, 下面本篇文章就来给大家介绍一下使用 JavaScript 循环遍历对象的方法, 希望对大家有所帮助.
1, 使用 for 循环
for 循环是 JS 中最常用的一个循环工具, 经常用于数组的循环遍历.
- let arr = [1,2,3];
- for (let i=0; i<arr.length; i++){
- console.log(i,arr[i])
- }
- // 0 1
- // 1 2
- // 2 3
2,for in 循环(vue 中常用到)
- var obj = {
- '0':'a','1':'b','2':'c'
- };
- for(var i in obj) {
- console.log(i,":",obj[i]);
- }
for in 循环主要用于遍历普通对象, i 代表对象的 key 值, obj[i] 代表对应的 value, 当用它来遍历数组时候, 多数情况下也能达到同样的效果, 但是你不要这么做, 这是有风险的.
因为 i 输出为字符串形式, 而不是数组需要的数字下标, 这意味着在某些情况下, 会发生字符串运算, 导致数据错误, 比如:'52'+1 = '521' 而不是我们需要的 53.
另外 for in 循环的时候, 不仅遍历自身的属性, 还会找到 prototype 上去, 所以最好在循环体内加一个判断, 就用 obj[i].hasOwnProperty(i), 这样就避免遍历出太多不需要的属性.
3,while 循环
同样的遍历 cars 数组, 先用 for 循环方法
- let cars=["BMW","Volvo","Saab","Ford"];
- let i=0;
- for (;cars[i];)
- {
- console.log(cars[i])
- i++;
- };
- // BMW
- // Volvo
- // Saab
- // Ford
然后是 while 循环方法
- cars=["BMW","Volvo","Saab","Ford"];
- var i=0;
- while (cars[i])
- {
- console.log(cars[i] + "<br>")
- i++;
- };
我们发现, 它们可以实现同样的效果, 事实上它们底层的处理是一样的, 不过 for 循环可以把定义, 条件判断, 自增自减操作放到一个条件里执行, 代码看起来方便一些, 仅此而已.
4,do while 循环
- let i = 3;
- do{
- console.log(i)
- i--;
- }
- while(i>0)
- // 3
- // 2
- // 1
do while 循环是 while 循环的一个变体, 它首先执行一次操作, 然后才进行条件判断, 是 true 的话再继续执行操作, 是 false 的话循环结束.
5, 数组 forEach 循环(VUE 中常用到)
- let arr = [1,2,3];
- arr.forEach(function(i,index){
- console.log(i,index)
- })
- // 1 0
- // 2 1
- // 3 2
forEach 循环, 循环数组中每一个元素并采取操作, 没有返回值, 可以不用知道数组长度, 他有三个参数, 只有第一个是必需的, 代表当前下标下的 value.
另外请注意, forEach 循环在所有元素调用完毕之前是不能停止的, 它没有 break 语句, 如果你必须要停止, 可以尝试 try catch 语句.
就是在要强制退出的时候, 抛出一个 error 给 catch 捕捉到, 然后在 catch 里面 return, 这样就能中止循环了, 如果你经常用这个方法, 最好自定义一个这样的 forEach 函数在你的库里.
6, 数组 map()方法 (VUE 中常用到)
- arr.map(function(i,[index],[arr]){
- // i 代表数组中每一项 必须 index 代表数组中元素的下标 可选 arr 代表当前元素所属的数组对象 可选
- ..........
- })
示例:
- let arr = [1,2,3];
- let tt = arr.map(function(i){
- console.log(i)
- return i*2;
- })
- // [2,4,6]
map() 方法返回一个新数组, 数组中的元素为原始数组元素调用函数处理后的值.
注意: map 和 forEach 方法都是只能用来遍历数组, 不能用来遍历普通对象.
7, 数组 filter() 方法(VUE 中常用到)
- arr.filter(function(i,[index],[arr]){
- // i 代表数组中每一项 必须 index 代表数组中元素的下标 可选 arr 代表当前元素所属的数组对象 可选
- ..........
- })
示例:
- let arr = [1,2,3];
- let tt = arr.filter(function(i){
- return i>1; // 遍历数组中是所有元素返回大于 1 的元素
- })
- // [2,3]
filter 方法是 Array 对象内置方法, 它会返回通过过滤的元素, 不改变原来的数组.
8,Array some() 方法 (VUE 中也用到)
- let arr = [1,2,3];
- let tt = arr.some(function(i){
- return i>1;
- })
- // true
some() 方法用于检测数组中的元素 (只要有一个满足条件就是 true) 是否满足指定条件(函数提供), 返回 boolean 值, 不改变原数组.
9, 数组 every() 方法(VUE 中用到)
- arr.every(function(i,[index],[arr]){
- // i 代表数组中每一项 必须 index 代表数组中元素的下标 可选 arr 代表当前元素所属的数组对象 可选
- ..........
- })
示例:
- let arr = [1,2,3];
- let tt = arr.every(function(i){
- return i>1;
- })
- // 检测数组中元素是否都大于 1
- // false
every() 方法用于检测数组所有元素 (或每一个元素都必须满足条件才为 true) 是否都符合指定条件(通过函数提供), 返回 boolean 值, 不改变原数组.
10,Array reduce()方法(VUE 常用到)
- let arr = [1,2,3];
- let ad = arr.reduce(function(i,j){
- return i+j; // 就是计算从左到右 1+2+3
- })
- // 6
reduce() 方法接收一个函数作为累加器, 数组中的每个值 (从左到右) 开始缩减, 最终计算为一个值.
11,Array reduceRight()方法
- let arr = [1,2,3];
- let ad = arr.reduceRight(function(i,j){
- return i+j;
- })
- // 6
reduceRight()方法, 和 reduce() 功能是一样的, 它是从数组的末尾处向前开始计算.
12,for of 循环
- let arr = ['name','age'];
- for(let i of arr){
- console.log(i)
- }
- // name
- // age
for of 循环是 Es6 中新增的语句, 功能非常强大用来替代 for in 和 forEach,for-of 循环不仅支持数组, 还支持大多数类数组对象, 它允许你遍历 Arrays(数组), Strings(字符串), Maps(映射), Sets(集合)等可迭代 (Iterable data) 的数据结构, 注意它的兼容性.
- // 类数组对象
- let obj = {
- 100: 'a', 2: 'b', 7: 'c'
- }
来源: http://www.css88.com/qa/javascript/11740.html