四十四.遍历器

195 阅读8分钟

遍历器

遍历器用于遍历数据容器

for循环

for循环常用于数组的循环遍历。

image.png

image.png

for in 循环(es5 技术)

for in循环主要用于遍历普通对象,i代表对象的key 值,obj[i] 代表对应的 value。for in会遍历原型对象

image.png

image.png

当用它来遍历数组时候,数组的下标i输出为字符串形式, 而不是数组需要的数字下标,在做数字加法运算时会发生字符串运算,导致数据错误,比如: '52' +1 = '521' 而不是我们需要的53。

image.png

image.png

另外for in循环的时候,不仅遍历自身的属性,还会遍历到prototype上去,所以最好在循环体内加一个判断, 就用hasOwnProperty()方法判断,这样就避免遍历出太多不需要的属性。

image.png

image.png

for of 循环(es6 技术)

for of循环允许遍历Arrays(数组), Strings(字符串), Maps(映射), Sets(集合)等可迭代的数据容器就是数组和类数组,i不是数据容器的成员名而是数据容器中的每个元素。for of循环不会遍历到原型链上的数据。

image.png

image.png

while和do-while循环

while循环

while循环同样的可以遍历数组,和for循环类似

image.png

image.png

do-while循环

do-while循环是while循环的一个变体, 它首先执行一次操作,然后才进行条件判断,是true的话再继续执行操作,是false的话循环结束。

image.png

image.png

Array forEach()方法

forEach循环是一个方法,循环数组中每一个元素并采取操作。该方法需要传入一个回调函数,该方法没有返回值。回调函数的形参有3个,只有第1个是必需的, 代表当前元素。第2个是当前元素的下标,第3个当前元素所属的数组对象。

image.png

image.png

该方法传入的参数是回调函数,每调用一次就把数组中的元素传入给回调函数,即回调函数的形参变量接收的实参数据就是数组中的元素。数组中有几个元素就调用几次回调函数,每一次的调用都是独立的。

forEach方法原理

image.png

image.png

Array map()方法

map()方法返回一个新数组,新数组中的元素为原数组元素调用回调函数处理后的值,不改变原数组的数据。传入参数为回调函数,回调函数中可以设计代码用来处理数组的元素,回调函数的返回值放入到新数组,没有写返回值就返回undefined放在新数组。数组中有几个元素就调用几次回调函数,每一次的调用都是独立的。回调函数也有三个参数,和forEach方法同理。

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

ps:map和forEach方法都是只能用来遍历数组,不能用来遍历普通对象。

Array filter() 方法

filter()方法是Array对象内置方法,该方法会返回通过过滤的元素,不改变原来的数组。传入的参数是回调函数,回调函数同理也有3个参数。回调函数的返回值是布尔值,原数组有几个元素就调用几次回调函数,每调用一次回调函数当布尔值判定为true时,就把原数组当前元素放入新数组,当布尔值判定为false时,就过滤掉当前元素,不放入新数组。不写return就返回undefined,做布尔判定的结果是false。

image.png

image.png

Array some()方法

some()方法用于检测数组中的元素是否满足指定条件,由回调函数提供指定条件,返回布尔值,不改变原数组。传入的参数是一个回调函数,回调函数同理也有3个参数。原数组中有几个元素就调用几次回调函数,只要原数组中的元素有一个元素满足回调函数中的指定条件就返回true,反之为false,当原数组中有一个元素满足指定条件时回调函数就直接返回true,some()方法不再运行,也就是结束调用回调函数,则不用检测后面的元素。

image.png

image.png

image.png

image.png

some()方法原理

image.png

image.png

Array every()方法

every()方法用于检测数组所有元素是否都符合指定条件,由回调函数提供指定条件,返回布尔值,不改变原数组。 入的参数是一个回调函数,回调函数同理也有3个参数。原数组中有几个元素就调用几次回调函数,原数组中的所有元素都要满足回调函数中的指定条件就返回true,反之为false。当原数组中有一个元素不满足指定条件时回调函数就直接返回false,every()方法不再运行,也就是结束调用回调函数,则不用检测后面的元素。

image.png

image.png

image.png

image.png

every()方法原理

原理和some方法类似

image.png

image.png

Array reduce()方法

思路:遍历数据容器,然后累加。

image.png

image.png

reduce()方法详解

reduce()方法传入的参数有2个,第1个参数是回调函数以及第2个参数是第1次调用回调函数时,回调函数的第1个形参变量的实参。

回调函数的参数有2个,当没有给第1次调用回调函数的第1个形参赋值实参时,回调函数调用的次数是原数组中元素个数减1,第一次调用先传入原数组中两个元素(从左到右)作为实参赋值给回调函数的形参变量,然后下一次调用会将上一次调用的返回值和原数组的下一个元素作为实参赋值给这次调用的形参变量,依次类推。

image.png

image.png

reduce方法写了第2个形参时,回调函数调用的次数就是原数组中元素的个数。第一次调用先传入reduce方法的第2个形参作为回调函数的第1个形参的实参以及原数组中第1个元素(从左到右)作为回调函数的第2个形参的实参,然后下一次调用将上一次调用的返回值和原数组的下一个元素作为实参赋值给这次调用的形参变量,依次类推。则回调函数调用的次数就是原数组中元素个数。

image.png

image.png

则reduce()方法可以接收一个回调函数作为累加器,数组中的每个值( 从左到右)开始累加,reduce()方法的结果就是最终计算的值。

image.png

image.png

案例

image.png

image.png

第1次调用回调函数时,赋值给回调函数的第1个形参变量的实参是数组中第1个元素对象是没有total属性的,赋值给第2个形参的实参是数组中第2个元素对象的单价乘以数量的价格。然后回调函数中进行条件判断第1次调用回调函数时第1个形参对象没有total属性,就给第1个形参对象添加total属性且属性值是数组中第1个元素对象的单价乘以数量的价格加上数组中第2个元素对象的单价乘以数量的价格,再把添加了total属性的第1个形参对象作为返回值。第2次调用回调函数时,第1个形参是第1次调用回调函数的返回值,这个对象有total属性,第2个形参是数组中下一个元素对象的单价乘以数量的价格。然后回调函数中进行条件判断第2次调用回调函数时第1个形参对象有total属性,则此时total属性值为第1次调用回调函数返回的对象的total属性值加上数组中下一个元素对象的单价乘以数量的价格,再把更新了total属性值的对象作为第2次调用回调函数的返回值。依次类推,则reduce方法的返回值就是有了total属性且数组中所有对象的单价乘以数量的价格累加之后作为其属性值的对象。

image.png

image.png

第1次调用回调函数时,赋值给回调函数的第1个形参变量的实参是0,赋值给第2个形参变量的实参是数组中第1个元素对象的单价乘以数量的价格。第2次调用就是第1次返回的结果数组中第1个元素对象的价格作为实参赋值给回调函数的第1个形参,然后数组的第2个元素对象的单价乘以数量的价格作为实参赋值给回调函数的第2个形参。依次类推,则reduce方法的结果就是数组中所有对象最终总价。

Array reduceRight()方法

reduceRight()方法, 和 reduce()功能是一样的, 区别是reduceRight()方法从数组的末尾处向前开始计算。则回调函数的两个形参是数组中元素从右到左赋值给形参。

image.png

image.png