javascript 循环的多种方法

目录

 

1.for

2.for...in  （对象）

3.for...of

4.forEach

5.while(){}

6.do{}while()

7.reversc （方向倒序）

8.sort （排序）

 9.map

10.every

11.some

12.indexOf

13.lastIndexOf

14.filter

15.find

16.findIndex

17.includex

18.reduceRight

19.reduce

---

1.for 支持数组

const arr = ["January","February","March","April","May"]
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);    // January,February,March,April,May
}

2.for...in  （对象）  支持数组和对象

const obj = {
    1:"January",
    2: "February",
    3: "March",
    4: "April",
    5: "May",
}
for (const key in obj) {
    console.log(key,obj[key]);    
}

3.for...of

const arr = ["January","February","March","April","May"]
for (const item of arr) {
    console.log(item); // January,February,March,April,May
}

4.forEach 支持数组

const arr = ["January","February","March","April","May"]
arr.forEach(item => {
    console.log(item);    // January,February,March,April,May 
});

5.while(){}

let count = 0;
let num = 1;
while(num <=5){
    console.log(num); //1,2,3,5
    
    if(num === 3){
        num++;
        continue; // continue必须写在++后面，否则会进入死循环因为在while中continue之后，是执行条件判断
        // break  //支持break  作用域里后面不执行
    }
    count +=num;
    num++;
}
console.log(num,count); //6,12

6.do{}while()

do {
    if (num === 3) {
        num++;
        continue; // continue必须写在++后面，否则会进入死循环因为在while中continue之后，是执行条件判断
        // break  //支持break  作用域里后面不执行
    }
    count += num;
    num++;
} while (num <= 5);

console.log(num, count, 9999); // 6,12
// 先执行do里面的代码块再判断条件，若满足，则继续执行代码块，否则终止循环

7.reverse（方向倒序）

const arr = ["January","February","March","April","May"]
arr.reverse();
console.log(arr); // [ 'May', 'April', 'March', 'February', 'January' ]

8.sort （排序）

UTF-16代码单元值序列 

const arr = ["January","February","March","April","May"]
arr.sort();
console.log(arr); // ["April","February","January","March","May"]

const arr1= [1,30,4,21,10000]
arr1.sort();
console.log(arr1); // [ 1, 10000, 21, 30, 4 ]

 语法

arr.sort([compareFunction])

描述：

如果没有指明compareFunction,那么元素会按照转换为的字符串的诸个字符的Unicode位点进行排序。例如"Banana" 会被排列到"Cherry"之前。当数字按由小到大排序时，9出现在80之前，但因为（没有指明 compareFunction）,比较的数字会转换为字符串，所以在Unicode顺序上 "80" 要比 "9" 要靠前。

如果指明了 compareFunction,那么数组会按照调用该函数的返回值排序。即a 和 b 是两个将要被比较的元素：

•  如果 compareFunction(a,b) 小于0，那么a会被排列到b之前；
• 如果 compareFunction(a,b) 等于0，a 和 b 的相对位置不变；
• 如果 compareFunction(a,b) 大于0，b会被排列到a之前；
• compareFunction(a,b) 必须总是对相同的输入返回相同的比较结果，否则排序的结果将是不确定的；

例：

const arr1= [1,30,4,21,10000]
arr1.sort((a,b)=>{
    return a-b;
});
console.log(arr1); // [ 1, 4, 21, 30, 10000 ]

 9.map

可以遍历操作，且返回新的数组，原数组不变

const arr = ["January","February","March","April","May"]
const newArr = arr.map((item,index)=>{
    return item+"_"+index;
})
console.log(newArr); // ["January_0","February_1","March_2","April_3","May_4"]

10.every

测试数组内容是否全部通过

const arr = ["January","February","March","April","May"]
const isPass = arr.every((item,index)=>{
    return typeof item === 'string';
})
console.log(isPass); // true

11.some

测试数组里有一项通过则为true，否则为false

const arr = ["January","February","March","April","May"]
const isPass = arr.some((item,index)=>{
    return typeof item === 'number';
})
console.log(isPass); // false

12.indexOf

const arr = ["January","February","March","April","May"]
const result = arr.indexOf("May",2);
console.log(result) // 4

13.lastIndexOf

从后面开始查找

const arr = ["January","February","March","April","May"]
const result = arr.lastIndexOf("May",2);
console.log(result) // -1

const arr = ["January","February","March","April","May"]
const result = arr.lastIndexOf("May",4);
console.log(result) // 4

14.filter

遍历满足条件true会组成一个新的数组返回，不影响原数组

const arr = ["January","February","March","April","May"]
const newArr = arr.filter(function(item,index){
    return item.indexOf(this)!== -1;
},'y')
console.log(newArr); //  ["January", "February", "May"]


// 注意这里 thisValue 如果用箭头函数 this指的window

15.find

遍历返回满足条件的第一元素,不影响原数组

const arr = ["January","February","March","April","May"]
const result = arr.find(function(item,index){
    return item.indexOf(this)!== -1;
},'y')
console.log(result); // January

16.findIndex

遍历返回满足条件的第一元素的下标,不影响原数组

const arr = ["January","February","March","April","May"]
const result = arr.findIndex(function(item,index){
    return item.indexOf(this)!== -1;
},'y')
console.log(result); // 0

17.includex

检查满足条件返回true或false,第二个参数，表示开始搜索的位置

const arr = ["January","February","March","April","May"]
const isPass = arr.includes("May",2);
console.log(isPass); // true

18.reduceRight

遍历依次处理数组元素，方向从右到左

const arr = ["January","February","March","April","May"]
const result= arr.reduceRight(function(total,nowItem){
    return total+","+nowItem;
});
console.log(result); // May,April,March,February,January

19.reduce

遍历依次处理数组元素，方向从左到右

const arr = ["January","February","March","April","May"]
const result= arr.reduce(function(total,nowItem){
    return total+","+nowItem;
});
console.log(result); // January,February,March,April,May