> 웹 프론트엔드 > JS 튜토리얼 > 자바스크립트의 주요 루프는 무엇입니까?

자바스크립트의 주요 루프는 무엇입니까?

醉折花枝作酒筹
풀어 주다: 2021-06-15 14:29:08
원래의
3142명이 탐색했습니다.

JavaScript의 주요 루프는 다음과 같습니다. 1. for 루프, 2. "for...in" 루프, 4. forEach 루프, 6. Object.keys는 다음의 속성을 탐색합니다. 개체.

자바스크립트의 주요 루프는 무엇입니까?

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

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

1. for 루프

for 루프는 가장 일반적이고 가장 많이 사용되는 루프 순회 방법이므로 가독성과 유지 관리 용이성이 상대적으로 떨어지지만 시간이 지나면 루프에서 벗어날 수 있습니다.

let arr = [1,2,3,4,5,6,7]for(let i = 0;i<arr.length;i++){
  console.log(arr[i])
}// 1,2,3,4,5,6,7
로그인 후 복사

2. for...in

for...in 루프는 객체를 순회하는 데 주로 사용됩니다. 객체의 해당 키 값을 얻으려면 for...in을 사용하는 것이 더 편리합니다.

//针对对象来说  
//任何对象都继承了Object对象,或者其它对象,继承的类的属性是默认不可遍历的,
//for... in循环遍历的时候会跳过,但是这个属性是可以更改为可以遍历的,那么就会造成遍历到不属于自身的属性。
//结合使用hasOwnProperty方法,在循环内部判断一下,某个属性是否为对象自身的属性。否则就可以产生遍历失真的情况。
let obj = {name: &#39;xiaohua&#39;, sex: &#39;male&#39;, age: &#39;28&#39;}
for(let key in obj){
    if(obj.hasOwnProperty(key)){
        console.log(obj[key])
    }
}
로그인 후 복사

3 , map

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 메소드는 현재 멤버, 현재 위치 및 배열 자체의 세 가지 매개변수를 전달합니다.

let arrObj = [{
    id: 1,
    name: &#39;xiaohua&#39;
},{
    id:2,
    name: &#39;xiaomin&#39;
},{
    id:3,
    name: &#39;xiaobai&#39;
}]
arrObj.map((item,index,arr)=>{
    console.log(arr) // arrObj
    console.log(index)  // 0 1 2
    console.log(item.name) // xiaohua xiaomin xiaobai
})
로그인 후 복사

4. forEach

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

let arrObj = [{
    id: 1,
    name: &#39;xiaohua&#39;
},{
    id:2,
    name: &#39;xiaomin&#39;
},{
    id:3,
    name: &#39;xiaobai&#39;
}]
arrObj.forEach((item,index,arr)=>{
    console.log(arr) // arrObj
    console.log(index)  // 0 1 2
    console.log(item.name) // xiaohua xiaomin xiaobai
})
로그인 후 복사

5. 필터 필터 루프

필터 메소드는 배열 멤버를 필터링하는 데 사용되며 조건을 충족하는 멤버는 새로운 배열을 구성하여 반환합니다. 그 매개변수는 함수이고, 모든 배열 멤버는 함수를 순차적으로 실행하며, 반환 결과가 true인 멤버는 새로운 배열을 구성하여 반환합니다. 이 방법은 원래 배열을 변경하지 않습니다.

let arrObj = [{
    id: 1,
    name: &#39;xiaohua&#39;
},{
    id:2,
    name: &#39;xiaomin&#39;
},{
    id:3,
    name: &#39;xiaobai&#39;
}]
let arr2 = arrObj.filter((item,index,arr)=>{
    return (item.name === &#39;xiaohua&#39;)
})
console.log(arr2)  // [{id:1,name:&#39;xiaohua}]
로그인 후 복사

ECMAScirpt5의 Array 클래스에 있는 필터 메소드는 모든 "false" 유형 요소(false, null, undefine, 0, NaN 또는 빈 문자열)를 제거하는 데 사용됩니다.

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

Boolean은 요소를 순회하는 함수입니다.

6. Object.keys는 객체의 속성을 순회합니다.

Object.keys 메소드의 매개변수는 객체이며 배열을 반환합니다. . 이 배열의 멤버는 모두 객체 자체의 속성 이름(상속되지 않음)이며 열거 가능한 속성만 반환됩니다.

let obj = {name: &#39;xiaohua&#39;, sex: &#39;male&#39;, age: &#39;28&#39;}
console.log(Object.keys(obj))
// ["name", "sex", "age"]
로그인 후 복사

객체가 빈 객체인지 확인하려면 Object.keys(obj).length>0

[권장 학습: javascript 고급 튜토리얼]

을 사용하면 됩니다.

위 내용은 자바스크립트의 주요 루프는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿