不同的场景使用不同的遍历方法可以大大提高计算效率,优化代码结构。在总结循环的之前,先知道一下循环结构的执行步骤:
const arr = [3, 8, 99, 44, 3]
for(let i = 0; i < arr.length; i++) {
console.log(arr[i])
}
// 当循环中数组的长度没有变化时,我们应该将数组的长度存储在一个变量中,这样效率会更高。下面是改进的写法:
for(let i = 0, len = arr.length; i < len; i++ ) {
console.log(arr[i])
}
let num = 1 // 1、声明循环变量
while (num <= 10) { // 2、判断循环条件
console.log(num) // 3、执行循环体操作
num++ // 4、更新循环变量
}
let num = 10
do {
console.log(num) // 10 9 8 7 6 5 4 3 2 1 0
num--
} while(num >= 0)
console.log(num) // -1
const arr = [3, 8, 99, 44, 3]
arr.forEach((value) => {
console.log(value)
})
// 操作的结果如下:3, 8, 99, 44, 3
const arr = [];
arr[0] = 'a'
arr[3] = 'b'
arr[10] = 'c'
arr.name = 'Hello world'
arr.forEach((value, index, array) => {
console.log(value, index, array)
})
// 操作结果:
'a', 0, ['a', 3: 'b', 10: 'c', name: 'Hello world']
'b' 3, ['a', 3: 'b', 10: 'c', name: 'Hello world']
'c' 10, ['a', 3: 'b', 10: 'c', name: 'Hello world']
[1, 2, 3, 4, 5].filter(function (item, index, arr) {
return (item > 3)
}) // [4, 5]
let array = [0, 1, 'a', false]
array.filter(Boolean) // [1, "a"]
// filter方法也可以接受第二个参数,用来绑定参数函数内部的this变量。
let obj = { MAX: 3 }
let myFilter = function (item) {
if (item > this.MAX) return true
}
let arr2 = [2, 8, 3, 4, 1, 3, 2, 9];
arr2.filter(myFilter, obj) // [8, 4, 9]
[1, 2, 3, 4, 5].some(function (item, index, arr) {
return (item > 3)
}) // true
[1, 2, 3, 4, 5].every(function (elem, index, arr) {
return elem >= 3;
}) // false
[1, 2, 3, 4].reduce(function (a, b, c, d) { // a:累计变量, b:当前变量 c, d为可选参数,分别表示当前位置和原数组
console.log(a, b); // 分别为:1,2 | 3,3 | 6,4
return a + b;
}, total) // total 为可选参数,表示初始累计值,最后结果为total + 数组累计值
let arr = ['a', 'b', 'c'];
[1, 2].map(function (item, index, arr) {
return this[item];
}, arr) // 返回['b', 'c']
const arr = [3, 8, 99]
let index
for(index in arr) {
console.log("arr[" + index + "] = " + arr[index])
}
// 一般来说,操作的结果如下:
arr[0] = 3
arr[1] = 8
arr[2] = 99
// **但这样做往往会产生问题**
// for-in 循环遍历对象的属性,而不是数组的索引。所以for-in遍历的对象不限于数组,也可以遍历对象。示例如下:
const person = {
name: "zwt",
age: 18
gender: "男"
}
let info
for(info in person) {
console.log("person[" + info + "] = " + person[info])
}
// 结果如下:
person[name] = "zwt"
person[age] = 99
person[gender] = "男"
// 需要注意的是for-in遍历属性的顺序是不确定的,即输出结果的顺序与对象中属性的顺序无关,也与属性的字母顺序无关,也没有任何其他顺序。
// 现在,让我们回过头来看看使用 for-in 循环数组的例子。我们修改前面遍历数组的例子:
const arr = [3, 8, 99]
arr.name = "Hello world"
let index
for(index in arr) {
console.log("arr[" + index + "] = " + arr[index])
}
// 一般来说,操作的结果如下:
arr[0] = 3
arr[1] = 8
arr[2] = 99
arr['name'] = "Hello world"
Array.prototype.fatherName = "Father"
const arr = [3, 8, 99]
arr.name = "Hello world"
let index
for(index in arr) {
console.log("arr[" + index + "] = " + arr[index])
}
// 一般来说,操作的结果如下:
arr[0] = 3
arr[1] = 8
arr[2] = 99
arr['name'] = "Hello world"
arr['fatherName'] = "Father"
let key;
const arr = [];
arr[0] = "a"
arr[100] = "b"
arr[10000] = "c"
for(key in arr) {
if(arr.hasOwnProperty(key) && /$|^[1–9]\d*$/.test(key) && key <= 4294967294) {
console.log(arr[key])
}
}
function arrayHasOwnIndex(array, prop) {
return array.hasOwnProperty(prop) && /$|^[1–9]\d*$/.test(prop) && prop <= 4294967294 // 2-2
}
// 用法示例如下:
for (let key in arr) {
if (arrayHasOwnIndex(arr, key)) {
console.log(arr[key])
}
}
const obj = {
prop1: 'value1',
prop2: 'value2'
}
const props = ['prop1', 'prop2'];
for(let i = 0; i <props.length; i++) {
console.log(obj[props[i]])
}
const arr = ['a', 'b', 'c'];
for(let value of arr) {
console.log(value)
}
// 运行的结果是:a, b, c
以上就是今天要讲的内容,本文仅仅简单介绍了循环在不同场景下的使用,这样能使我们快速便捷地处理数据的函数和方法。