어떤 유형의 자바스크립트 루프 문이 있나요?

루프 문에는 다음이 포함됩니다. 1. for 루프, 2. "for...in" 루프, 4. "do...while" 루프, 6. 필터 필터 루프;8. "Object.keys"는 개체의 속성을 탐색합니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

프로젝트 개발에서는 어떤 프레임워크를 기반으로 하든 데이터 처리가 필요하며 처리 데이터는 다양한 순회 루프에서 분리될 수 없습니다. JavaScript에서 반복하는 방법에는 여러 가지가 있습니다. 다음은 몇 가지 일반적인 js 루프입니다.

1. for 루프

for 문은 주로 실행 횟수를 결정하는 루프를 실행하는 데 사용됩니다.

for 문의 기본 구문은 다음과 같습니다.

for([初始值表达式]；[条件表达式]；[增量表达式]){
   循环体语句；
}

설명:

• "초기값 표현식": 루프 변수의 초기값을 설정합니다.

• "조건식": 루프에 들어갈지 여부는 무엇이든 가능하지만 일반적으로 관계식이거나 논리식이며 그 값은 true 또는 false입니다. 루프를 실행하기 전에 매번 조건식 값이 판단됩니다. 값이 true(값이 true이거나 0이 아니거나 비어 있지 않음)이면 루프 본문 문이 실행되고, 그렇지 않으면 루프가 종료되고 루프 문 뒤의 코드가 실행됩니다. ": 이 표현식을 기반으로 업데이트합니다. 루프 변수의 값입니다.

• 위 3가지 표현은 모두 생략 가능하지만, for()에서는 생략할 수 없다는 점에 유의하세요. 따라서 세 표현식을 모두 생략하면 for 문은 for(;;){loop body 문}이 됩니다. 이때 주의할 점은 루프 본문 내에 루프를 종료하는 명령문이 없으면 무한 루프에 진입하게 된다는 점입니다.

예:

     var sum = 0;
     for(var i = 1; i <= 100;i++){        //在for语句中使用var声明循环变量，使代码更简洁
         sum += i;
     }
     alert("1～100的累加和sum=" + sum);

for...in 루프는 주로 객체의 해당 키 값을 얻으려는 경우 for.. .in 이상 편리

var a = [1, 2, ,,,,,,true,,,,,,, "a",,,,,,,,,,,,,,,4,,,,,56,,,,,,"b"];  //定义数组
var b = [], num = 0;
for (var i = 0; i < a.length; i ++) {  //遍历数组
    if (typeof a[i] == "number")  //如果为数字，则返回该元素的值
        b.push(a[i]);
    num ++;  //计数器
}
console.log(num);  //返回42，说明循环了42次
console.log(b);  //返回[1,2,4,56]

while 문은 가장 일반적으로 사용되는 루프 문으로, 개수에 관계없이 조건에 따라 루프만 실행하면 되는 프로그램에서 자주 사용됩니다. 루프.

while 语句的基本语法如下：
while(条件表达式){
     循环体;
}

조건식: 루프 제어 조건으로 괄호 안에 넣어야 합니다. 어떤 식이라도 가능하지만 일반적으로 관계식 또는 논리식이며 값은 true 또는 입니다. 거짓. 참고: true, 0이 아닌 값, 비어 있지 않은 값은 모두 true 값이고, 그렇지 않으면 false 값입니다.

• 루프 본문: 반복적으로 수행해야 하는 작업을 나타냅니다. 간단한 명령문일 수도 있고 복합 명령문일 수도 있습니다. 단순문인 경우 중괄호 {}를 생략할 수 있으며, 그렇지 않은 경우에는 중괄호 {}를 사용해야 합니다.

• while 문이 실행되면 조건식의 값을 먼저 판단하고, true이면 루프 본문 문을 실행한 다음, 값이 여전히 true이면 루프를 실행합니다. body 문은 계속 실행됩니다. 그렇지 않으면 while 문 다음의 문이 실행됩니다. 표현식의 값이 처음 평가될 때 false인 경우(false, 0 또는 null 등) 루프 본문은 한 번도 실행되지 않습니다.

while 루프가 정상적으로 종료되기 위해서는 루프 조건을 수정하는 명령문이나 루프 본문에 루프를 종료하는 다른 명령문이 있어야 합니다. 그렇지 않으면 while 루프가 무한 루프에 진입하게 됩니다. 즉, 루프 본문이 계속해서 실행됩니다.

예를 들어 다음 루프 문은 무한 루프를 발생시킵니다.

var i=1,s=0;
whiel(i<=5){
    s+=i;      
}

위 코드에서 i의 초기값은 1입니다. i 변수의 값은 루프 본문에서 수정되지 않으므로 i<=5 표현식은 항상 true이므로 루프 본문이 항상 실행됩니다.

무한 루프는 시스템 리소스를 크게 점유하고 결국 시스템 충돌을 일으킬 수 있으므로 프로그래밍 시 무한 루프가 발생하지 않도록 주의해야 합니다.

     var sum = 1, i = 1;
     var ex = 1;
     while(sum <= 1.5){
         sum += 1/((i + 1)*(i + 1));
         if(sum > 1.5)
              break;
         i++;
         ex +=" + 1/(" + i + "*" + i + ")";
     }
     alert("表达式的值小于等于1.5时的i=" + i + "，对应的表达式为：" + ex);

do...while 문은 while 문의 변형입니다. 둘 사이의 차이점은 while 문은 루프 본문 문 실행 전에 루프 조건 판단을 배치하는 반면, do...while 문은 루프 본문 문 실행 후에 루프 조건 판단을 배치한다는 것입니다. do...while 문의 기본 구문은 다음과 같습니다.

do{
  循环体;
}while (条件表达式);

"조건식"과 "루프 본문"의 의미는 while 문의 의미와 동일합니다. 여기서 주목해야 할 점은 do...while 문이 ;로 끝나야 한다는 것입니다. 코드에 추가되지 않으면 JavaScript가 자동으로 추가합니다.

do...while 문이 실행되면 루프 본문 문이 먼저 실행된 후 조건식의 값이 true(값이 true이거나 0이 아닌 값)인지 판단됩니다. 루프 본문 문이 다시 실행됩니다. do...while 문은 루프 본문을 한 번 이상 실행하는데, 이는 while 문과 크게 다릅니다.

     var sum = 1, i = 1;
     var ex = 1;
     do{
         sum += 1/((i + 1)*(i + 1));
         if(sum > 1.5)
              break;
         i++;
         ex +=" + 1/(" + i + "*" + i + ")";
     }while(sum <= 1.5);
     alert("表达式的值小于等于1.5时的i=" + i + "，对应的表达式为：" + ex);

forEach의 사용법은 map의 사용법과 유사합니다. 단, forEach 메소드는 값을 반환하지 않고 데이터를 조작하는 데만 사용되며 루프를 중간에 멈출 수 없습니다. , 모든 멤버는 항상 순회됩니다

let arrObj = [{
    id: 1,
    name: 'xiaohua'
},{
    id:2,
    name: 'xiaomin'
},{
    id:3,
    name: 'xiaobai'
}]
arrObj.forEach((item,index,arr)=>{
    console.log(arr) // arrObj
    console.log(index)  // 0 1 2
    console.log(item.name) // xiaohua xiaomin xiaobai
})

map 메소드는 배열의 모든 멤버를 차례로 매개변수 함수에 전달한 다음 각 실행 결과를 새 배열로 반환합니다. 루프는 중간에 멈출 수 없으며 모든 멤버가 항상 순회됩니다

let arr = [1,2,3,4,5]
let arr2 = arr.map((n)=>{
      return n+1
})
console.log(arr2) // [2,3,4,5,6]
console.log(arr) // [1,2,3,4,5]

map方法接受一个函数作为参数。该函数调用时，map方法向它传入三个参数：当前成员、当前位置和数组本身。

let arrObj = [{
    id: 1,
    name: 'xiaohua'
},{
    id:2,
    name: 'xiaomin'
},{
    id:3,
    name: 'xiaobai'
}]
arrObj.map((item,index,arr)=>{
    console.log(arr) // arrObj
    console.log(index)  // 0 1 2
    console.log(item.name) // xiaohua xiaomin xiaobai
})

七、filter过滤循环

filter方法用于过滤数组成员，满足条件的成员组成一个新数组返回。它的参数是一个函数，所有数组成员依次执行该函数，返回结果为true的成员组成一个新数组返回。该方法不会改变原数组。

let arrObj = [{
    id: 1,
    name: 'xiaohua'
},{
    id:2,
    name: 'xiaomin'
},{
    id:3,
    name: 'xiaobai'
}]
let arr2 = arrObj.filter((item,index,arr)=>{
    return (item.name === 'xiaohua')
})
console.log(arr2)  // [{id:1,name:'xiaohua}]

ECMAScirpt5 中 Array 类中的 filter 方法使用目的是移除所有的 ”false“ 类型元素 (false, null, undefined, 0, NaN or an empty string)：

let arr = [3, 4, 5, 2, 3, undefined, null, 0, ""];
let arrNew = arr.filter(Boolean);
console.log(arrNew)  //  [3, 4, 5, 2, 3]

Boolean 是一个函数，它会对遍历数组中的元素，并根据元素的真假类型，对应返回 true 或 false.

八、Object.keys遍历对象的属性

Object.keys方法的参数是一个对象，返回一个数组。该数组的成员都是该对象自身的（而不是继承的）所有属性名，且只返回可枚举的属性。

let obj = {name: 'xiaohua', sex: 'male', age: '28'}
console.log(Object.keys(obj))
// ["name", "sex", "age"]

判断一个对象是否是空对象，可以用Object.keys(obj).length>0

【推荐学习：javascript高级教程】

위 내용은 어떤 유형의 자바스크립트 루프 문이 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!