JS循环方法

目录

• for
• forEach
• for of
• for in
• map
• reduce
• filter
• 高阶函数
  • 接收函数作为参数
  • 返回函数

for

• 用于遍历可迭代对象（可以逐个访问的，比如数组、字符串、集合、Map）、适合控制循环次数。

let arr = [1,2,3];
for(let i=0;i<arr.length;i++){
    console.log(arr[i]);//1 2 3
}

forEach

• 对数组的每个元素执行一次提供的函数, 没有办法终止或者跳出 forEach() 循环

let arr = [1,2,3]
arr.forEach((i)=>{
    if(i === 2) return;// 仅终止当前回调
    console.log(i)//没法终止，结果：1 3
})

for of

• 用于遍历可迭代对象（可以逐个访问的，比如数组、字符串、集合、Map）、直接获取值

let arr = [1,2,3]
for (let i of arr){
    console.log(i)//1 2 3
}

• Object不是可迭代对象，所以用for ... of遍历对象时则会报错。

const obj = {x: 1}
for(const v of obj){ console.log(v) }
// Uncaught TypeError: obj is not iterable

for in

• 遍历对象
• 循环将遍历对象本身的所有可枚举属性，以及对象从其构造函数原型中继承的属性。

function parent(){
	this.x = 1;
	this.y = 2
}
parent.prototype = {
	a: 'a',
	b: 'b'
}
const child = new parent()
for(let key in child) {
	console.log(key)
}
// 输出
// x
// y
// a
// b

• 原型上的a，b属性也被遍历出来了，如果只要对象自身的属性，不要原型链上的属性，则可以添加hasOwnProperty()判断

for(let key in child) {
    if (child.hasOwnProperty(key)) {
        console.log(key)
    }
}
// 输出
// x
// y

map

• 遍历返回一个新数组，新数组的结果是原数组中每个元素都调用一次提供的函数后返回的值。

let arr = [1,2,3]
let newArr = arr.map((i)=>i*2)
console.log(arr)//[1, 2, 3]
console.log(newArr)//[2, 4, 6]

reduce

• 对数组中的每个元素执行一个函数，汇总成单个值，返回最终的累加结果。

let arr = [1,2,3];
let sum = arr.reduce((pre,cur)=>pre+cur,0);//0表示初始值，不给默认第一个
console.log(sum);//6

filter

• 用于创建一个新数组，包含所有通过测试的元素，返回值为 true 的元素会被保留。

let arr = [1,2,3];
let num = arr.filter((i)=> i%2==0);//过滤出偶数项
console.log(num);//[2]

高阶函数

• 将函数作为参数传递或返回函数
• 比如上文的forEach、map、reduce、filter

接收函数作为参数

function greet(callback) {
    callback();
}
greet(() => console.log("Hello!")); // 输出: Hello!

返回函数

function createMultiplier(x) {
    return function(y) {
        return x * y;
    };
}
const double = createMultiplier(2);
console.log(double(5)); // 输出: 10