前端有哪些循环的方法

        这篇文章主要是用来记录前端中循环数组和循环对象的方法,方便以后进行翻阅。

 for循环

        使用最基本的for循环来遍历数组或对象。可以使用数组的长度来控制循环次数,也可以使用对象的属性来遍历对象。

// 遍历数组
var arr = [1, 2, 3];
for (var i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

// 遍历对象
var obj = {a: 1, b: 2, c: 3};
for (var key in obj) {
  console.log(key, obj[key]);
}

forEach方法

        数组的forEach方法可以遍历数组的每个元素,并对每个元素执行指定的回调函数。

var arr = [1, 2, 3];
arr.forEach(function(item) {
  console.log(item);
});

map方法

        数组的map方法可以遍历数组的每个元素,并对每个元素执行指定的回调函数,最终返回一个新的数组。

var arr = [1, 2, 3];
var newArr = arr.map(function(item) {
  return item * 2;
});
console.log(newArr); // [2, 4, 6]

filter方法

        数组的filter方法可以遍历数组的每个元素,并根据指定的条件过滤出符合条件的元素,最终返回一个新的数组。

var arr = [1, 2, 3, 4, 5];
var newArr = arr.filter(function(item) {
  return item > 3;
});
console.log(newArr); // [4, 5]

find 方法

        find()方法不会改变数组元素的原始值,用于返回数组中符合条件的第一个元素,如果没有符合条件的元素,则返回undefined。array.find(function(currentValue, index, arr),thisValue)

  • callback:必须。为数组中每个元素执行的函数,该函数接受三个参数:
  • currentValue:必须。数组中正在处理的当前元素。
  • index:可选。当前元素的索引值。
  • arr:可选。当前元素所在的数组对象。
  • thisValue:可选。传递给函数的值一般用 "this" 值。
  • 如果这个参数为空, "undefined" 会传递给 "this" 值
let arr1 = [1, 2, 3, 4, 5];
let num = arr1.find(item => item > 1);
console.log(num)  //2

Object.keys方法

        Object.keys方法可以获取对象的所有属性名,返回一个包含属性名的数组。

var obj = {a: 1, b: 2, c: 3};
var keys = Object.keys(obj);
console.log(keys); // ['a', 'b', 'c']

for .... of 循环

   for...of 循环是一种新的迭代语法,可以用来遍历具有迭代器(iterator)接口的数据结构,包括数组、类数组对象(例如 argumentsNodeList 等)、字符串、Map、Set 等。

let iterable = [10, 20, 30];

for (let value of iterable) {
  console.log(value); // 依次输出 10、20、30
}

for .... in 循环

   for...in 循环是一种旧的迭代语法,用来遍历对象的属性。但是,它的遍历顺序是不确定的,因为它遍历的是对象的属性名,而属性名的顺序是不固定的。

let obj = { a: 1, b: 2, c: 3 };

for (let prop in obj) {
  console.log(prop); // 依次输出 'a'、'b'、'c'
}

every 方法

  every 方法可以用来检测数组的所有元素是否都满足指定条件。如果所有元素都满足条件,则返回 true;否则返回 false

        需要注意的是every 方法只会在数组的每个元素都满足条件时才会返回 true。如果在检测到某个元素不满足条件时就返回 false,则可以使用 some 方法。

let arr = [1, 2, 3, 4, 5];
let result1 = arr.every((item) => item > 0); // 返回 true
let result2 = arr.every((item) => item > 3); // 返回 false

some 方法

   some 方法可以用来检测数组的某些元素是否满足指定条件。如果有任意一个元素满足条件,则返回 true;否则返回 false

let arr = [1, 2, 3, 4, 5];
let result1 = arr.some((item) => item > 3); // 返回 true
let result2 = arr.some((item) => item > 5); // 返回 false

推荐

        最后推荐下面这位大大的博客,非常详细,受益匪浅:

https://blog.csdn.net/s_y_w123/article/details/109615968#reduce__276

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值