目录
遍历器:
1、for
2、for in 循环
3、while循环
4、 do-while 循环
5、 Array forEach 循环
6、Array map() 方法
7、Array filter() 方法
8、Array some() 方法
9、Array every() 方法
10、Array reduce() 方法
11、 Array reduceRight() 方法
12、for of 循环
取出数据容器中的每一个元素的工具
for 循环是 Js 中最常用的一个循环工具, 经常用于数组的循环遍历。
for循环很重要也很常用,因为兼容性很好
let arr = [1, 2, 3];
for (let i = 0; i < arr.length; i++) {
console.log(i, arr[i]) // 0 1 2 1 2 3
}
var arr = [1, 2, 3];
for (var i = 0; i < arr.length; i++) {
console.log(i, arr[i]) // 0 1 2 1 2 3
}
for in 循环主要用于遍历普通对象, i 代表对象的 key 值, obj[i] 代表对应的 value。
当用它来遍历数组时候, 多数情况下也能达到同样的效果, 但一般不这么做, 这是有风险的。
因为 i 输出为字符串形式, 而不是数组需要的数字下标, 这意味着在某些情况下, 会发生字符串运算, 导致数据错误, 比如: '52' +1 = '521' 而不是我们需要的 53。
另外for in 循环的时候, 不仅遍历自身的属性, 还会找到 prototype 上去, 所以最好在循环体内加一个判断, 就用 obj[i].hasOwnProperty(i), 这样就避免遍历出太多不需要的属性。
var obj = {
name: 'zhou',
age: '**'
}
for (var i in obj) {
// console.log(i) // name age
console.log(obj[i]) //zhou **
}
var arr=[1,2,3]
for (var i in arr) {
console.log(i) // 0 1 2
console.log(arr[i]) // 1 2 3
}
遍历对象的时候,不能写obj.i 因为i是字符串,而如果要点的话得是变量。所以只能用中括号
while 循环遍历数组
for和while 实现同样的效果, 事实上它们底层的处理是一样的。
不过for 循环可以把定义、 条件判断、 自增自减操作放到一个条件里执行, 代码看起来方便一些, 仅此而已。
先用for 循环方法
let cars = ["BMW", "Volvo", "Saab", "Ford"]; let i = 0; for (; cars[i];) { console.log(cars[i]) i++; }; //BMW dVolvo Saab Ford
while 循环方法
cars = ["BMW", "Volvo", "Saab", "Ford"]; var i = 0; while (cars[i]) { console.log(cars[i]) i++; }; BMW dVolvo Saab Ford
do-while 循环是while循环的一个变体, 它首先执行一次操作。
然后才进行条件判断, 是 true 的话再继续执行操作, 是 false 的话循环结束。
let i = 3;
do {
console.log(i) //3 2 1
i--;
}
while (i > 0)
for while 等等都是语句 而 forEach 是函数
forEach循环, 循环数组中每一个元素并采取操作, 没有返回值,是undefined。 可以不用知道数组长度。
他有三个参数, 只有第一个是必需的, 代表当前下标下的 value。第二个是index 第三个是arr。
forEach 循环在所有元素调用完毕之前是不能停止的, 它没有break 语句, 如果你必须要停止, 可以尝试try-catch 语句, 就是在要强制退出的时候, 抛出一个 error 给catch 捕捉到, 然后在catch 里面return, 这样就能中止循环了, 如果你经常用这个方法, 最好自定义一个这样的 forEach 函数在你的库里。
传入的函数调用的次数=数组的length。每次调用会把数组中的元素传给回调函数
let arr = [1, 2, 3]; var re=arr.forEach(function(i, index) { console.log(i, index) //1 2 3 0 1 2 }) console.log(re) //undefined
自定义 forEach 函数
var arr=[1,2,3,4] Array.prototype.myforEach = function(callback) { for(var i=0;i
map() 方法返回一个新数组, 数组中的元素为原始数组元素调用函数处理后的值。
注意: map 和 forEach 方法都是只能用来遍历数组, 不能用来遍历普通对象。
有返回值(不写返回值,就返回一个数组,里面放的undefined)。
原数组不会改变,但是可以使用元素,操作返回值,就可以返回新的数组
let arr = [1, 2, 3];
let re = arr.map(function(i) {
console.log(i) //1 2 3
return i*2
})
console.log(re) // [2, 4, 6]
console.log(arr) //[1, 2, 3]
filter 方法是 Array 对象内置方法, 它会返回通过过滤的元素, 不改变原来的数组。
let arr = [1, 2, 3];
let re = arr.filter(function(i,index,arr) {
return i > 1;
})
console.log(re) //[2,3]
some() 方法用于检测数组中的元素是否满足指定条件( 函数提供), 返回 boolean 值, 不改变原数组。 已经得到true,就不会在继续往后面检测了
let arr = [1, 2, 3];
let re = arr.some(function(i) {
return i > 1;
})
console.log(re) //true
自定义 mysome 函数
var arr=[1,2,400,4,800] Array.prototype.mysome=function(callback) { for(var i=0;i
200 }) console.log(re)
every() 方法用于检测数组所有元素是否 都 符合指定条件( 通过函数提供), 返回 boolean 值, 不改变原数组。
let arr = [1, 2, 3];
let re = arr.every(function(i) {
return i > 1;
})
console.log(re) //false
reduce() 方法接收一个函数作为累加器, 数组中的每个值( 从左到右) 开始缩减, 最终计算为一个值。 函数调用次数=数组元素个数-1
var arr = [10, 20, 4, 5]
var re = arr.reduce(function (n1, n2) {
console.log(n1, n2) //第一次打印: 10 20 ,第二次:30 4
return n1 + n2 //return是30 ,那就作为下一次的n1,一次类推。如果没有返回值,就为und
})
console.log(re) //最后一次return的结果,作为re的返回结果。39
var arr=[10,20,4,5]
var re=arr.reduce(function(n1,n2){
console.log(n1,n2)
return n1+n2
},100) //设置初始值,第一次调用时,n1是100,n2是20
console.log(re)
reduceRight() 方法, 和 reduce() 功能是一样的, 它是从数组的末尾处向前开始计算。
var arr=[100,203,34,50]
arr.reduceRight(function (n1,n2){
console.log(n1,n2)
},0) //n1是0,n2是50 倒着取
// 0 50
// undefined 34
// undefined 203
// undefined 100
for of 循环是 Es6 中新增的语句, 用来替代 for in 和 forEach,
它允许你遍历 Arrays( 数组), Strings( 字符串), Maps( 映射), Sets( 集合) 等可迭代(Iterable data) 的数据结构, 注意它的兼容性。for of 可以遍历数组、类数组。
一般 for of和for in都不怎么用,推荐使用for循环
for-in 是 Es5 中的技术。会取原型链上的
var obj={age:20,name:"karen"} obj.__proto__={life:1} for(var key in obj) { console.log(key) //age name life }
for of 循环是 Es6 中新增的语句,不取原型链上的,不可遍历对象
var arr=[10,203,34] for (let s of arr) { console.log(s) //10 203 34 }
算总价的三种方法:
第1种:遍历数据 然后累加 for map for-in for-of foreach ... 一般用这个方法
var arr=[10,203,4,5]
var total=0;
//for循环可以换为上面所学的map....那些方法
for(var i=0;i
第2种:reduce reduceRight()
var arr=[10,20,4,5]
var re=arr.reduce(function(n1,n2){
console.log(n1,n2) //一次打印: 10 20 ,第二次:30 4
return n1+n2 //return是30 ,那就作为下一次的n1,一次类推。如果没有返回值,就为und
})
console.log(re) //最后一次return的结果,作为re的返回结果。39
var arr = [{
title: "肉香肉丝",
price: 18,
count: 2
},
{
title: "米饭",
price: 1,
count: 5
},
{
title: "水煮肉片",
price: 28,
count: 1
},
{
title: "鸡公煲",
price: 20,
count: 1
}
]
//传初始值0的方法
var re=arr.reduce(function(n1,n2){
return n1+n2.price*n2.count
},0)
console.log(re)
//不传初始值0
var re=arr.reduce(function(n1,n2){
if(!n1.total){
n1.total=n1.price*n1.count+n2.price*n2.count
}
else{
n1.total=n1.total+n2.price*n2.count
}
return n1
})
console.log(re)
第3种 不建议(只有全是数字的时候才可以使用。影响性能)
var arr=[10,203,4,5]
var re=eval(arr.join("+"))
console.log(re)