JS 数组循环常用的方法

最新推荐文章于 2024-05-20 17:32:52 发布

睫毛又在眼睛里

最新推荐文章于 2024-05-20 17:32:52 发布

阅读量1.6k

点赞数 2

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_43905116/article/details/123376950

版权

1、普通for循环---循环一定的次数

循环的退出

Continue:退出跳过本次循环，继续下一次循环

Break:退出整个循环，结束循环

For 循环和while的区别

当如果明确了循环的次数的时候推荐使用for循环

当不明确循环的次数的时候推荐使用while循环

//常见写法

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

//改进写法，给长度赋值 不用每次循环都要获取长度
const arr = [a,b,c]
for(let i=0,len=arr.length;i<len;i++){
  console.log(i,arr[i])
}

 // 1
 // 2
 // 3

2、for~of---循环可迭代对象

在可迭代对象（包括Array，Map，Set，String，TypeArray，arguments对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句

//1、常用
const array1 = ['a','b','c'];

for(const ele of array1){
    console.log(ele)
}

// a
// b
// c

//语法
for (variable of iterable){
    //...
}

variable
    在每次迭代中，将不同属性的值分配给变量
iterable
    被迭代枚举其属性的对象

//迭代Array

let iterable = [10,20,30]

//let 可以使value值改变
for(let value of iterable){
    value +=1;
    console.log(value)
}

//11
//21
//31

//const 不可以让value值改变
for(const value of iterable){
   // value +=1; // 会报错
    console.log(value)
}

//10
//20
//30

//迭代 String
let iterable = "boo"

for (let value of iterable){
    console.log(value)
}

//b
//o
//o

//迭代Map

let iterable = new Map([['a','1'],['b','2'],['c','3']])

for(let value of iterable){
    console.log(value)
}

// ['a','1']
//['b','2']
//['c','3']

for(let [key,value] of iterable){
    console.log(value)
}

// 1
//2
//3

//迭代Set

let iterable = new Set([1,2,3,4,5,2,3,5])

for(let value of iterable){
    console.log(value)
}

//1
//2
//3
//4
//5

关闭迭代器：可以由break, throw continue或return终止。在这些情况下，迭代器关闭。

异步迭代器(for-await-of)：循环等待每个Promise对象变为resolved状态才进入下一步。

const arr1 = ['a','b','c']
for(let item of arr1){
  console.log(item)
}
// a
// b
// c


for(let [index,item] of arr1.entries()){
  console.log(index,item)
}
// 0,a
// 1,b
// 2,c


function delay(index){
  return new Promise(resolve=>{
    setTimeout(resolve,index*1000)
  })
}

async function testDelay(){
  for(let [index,item] of arr1.entries()){
    await delay(index)
    console.log(item)
    console.log("~~~~~~~~~~~~~~~~~~")
  }
  console.log("all done -1");
}
testDelay()
// a                        1000s
// ~~~~~~~~~~~~~~~~~~
// b                        2000s
// ~~~~~~~~~~~~~~~~~~
// c                        3000s
// ~~~~~~~~~~~~~~~~~~
// all done -1
//任务执行完在进行下次任务
//返回值是按照任务的先后顺序进行的

//同上是一样的结果
async function testDelays(){
  for await(let [index,item] of arr1.entries()){
     delay(index)
    console.log(item)
    console.log("~~~~~~~~~~~~~~~~~~")
  }
  console.log("all done -1");
}
testDelays()
// a
// ~~~~~~~~~~~~~~~~~~
// b
// ~~~~~~~~~~~~~~~~~~
// c
// ~~~~~~~~~~~~~~~~~~
// all done -1

3、for~in ---循环遍历对象的属性

For-in 循环遍历的是对象的属性，而不是数组的索引。因此，for-in遍历的对象不局限与数组，还可以遍历对象。

Array在JavaScript中是一个对象，array的索引是属性名。此处输出的索引值，即”0”、”1”、”2”不是Number类型的，而是String类型的，因为其就是作为属性输出，而不是索引。

for-in只能遍历“可枚举的属性”，length属于不可枚举属性，实际上，Array对象还有许多其他不可枚举的属性。

for-in不仅仅遍历array自身的属性，其还遍历array原型链上的所有可枚举的属性

const arrVal_ = [1, 2, 3];
Array.prototype.extends = function () {
  console.log("扩展的方法");
};
for (let index in arrVal_) {
  console.log(index + "类型=" + typeof index, arrVal_[index]);
}

//0类型=string 1
//1类型=string 2
//2类型=string 3
//extends类型=string [Function (anonymous)]

for-in 只会遍历存在的实体，下面的例子中， for-in 遍历了3次（遍历属性分别为”0″、 “10″、 “20″的元素，普通 for 循环则会遍历 21 次）。所以，只要处理得当， for-in 在遍历 Array 中元素也能发挥巨大作用。

const arrayVal = [];
arrayVal[0] = 1;
arrayVal[10] = 34;
arrayVal[20] = 67;
for (let index in arrayVal) {
  console.log(index + "类型=" + typeof index, arrayVal[index]);
}

//0类型=string 1
//10类型=string 34
//20类型=string 67

for (let index=0,len=arrayVal.length; index<len;index++) {
  console.log(index + "类型=" + typeof index, arrayVal[index]);
}

//0类型=number 1
//1类型=number undefined
//2类型=number undefined
//3类型=number undefined
//4类型=number undefined
//5类型=number undefined
//6类型=number undefined
//7类型=number undefined
//8类型=number undefined
//9类型=number undefined
//10类型=number 34
//11类型=number undefined
//12类型=number undefined
//13类型=number undefined
//14类型=number undefined
//15类型=number undefined
//16类型=number undefined
//17类型=number undefined
//18类型=number undefined
//19类型=number undefined
//20类型=number 67

每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。

4、.forEach(function(currentValue,index,arr){})

forEach遍历的范围在第一次调用callback前就会确定。调用forEach后添加到数组中的项不会被callback访问到，如果已经存在的值被改变，则传递给callback的值是forEach遍历到他们那一刻的值，已删除的项不会被遍历到。

方法对数组的每个元素执行一次给定的函数。

不能在它的循环体中使用await、 break、return

let arrVal= [];
arrVal[1] = 5
arrVal[4] = 5
arrVal[10] = 12;
arrVal.name = 'hello. world';

arrVal.forEach((currentValue,index,arr)=>{
    console.log("arr["+index+"]="+currentValue,arr)
})
//arr[1]=5 (11) [空, 5, 空 ×2, 5, 空 ×5, 12, name: 'hello. world']
//arr[4]=5 (11) [空, 5, 空 ×2, 5, 空 ×5, 12, name: 'hello. world']
//arr[10]=12 (11) [空, 5, 空 ×2, 5, 空 ×5, 12, name: 'hello. world']

5、.every(function(currentValue,index,arr){})

测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值

every用于检测数组所有元素是否都符合指定条件

如果数组中检测到有一个元素不满足，则整个表达式返回false,且剩余的元素不会再进行检测

如果所有元素都满足条件，则返回true

6、.map(function(currentValue,index,arr){})

map 对数组每一项进行处理，并且返回处理之后的数据组成的数组

按照原始数组元素顺序依次处理元素
不会对空数组进行检测
不会改变原始数组

7、.some(function(currentValue,index,arr){})

some用于检测数组是否有元素符合指定条件

如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回false。

8、.filter(function(currentValue,index,arr){})

filter将符合条件的所有元素组成一个新数组返回

不会对空数组进行检测
不会改变原始数组

9、.reduce(function(total,currentValue,index,arr){})

reduce 比较适合用来算数组的和
参数：

total是每次循环之前数组元素的和
item 遍历项内容
index 遍历项索引值
arr 原数组