루프에서 ...와 ...에 대한 ...의 차이점은 무엇입니까?
의 경우 ... IN 루프는 물체의 키를 가로 지르는 데 사용되는 반면, 반복 가능한 물체의 값을 가로 지르는 데 사용됩니다. 1. 2. OF는 배열, 문자열, 맵, 세트 등과 같은 반복 가능한 객체에 적합하며 요소 값을 직접 액세스 할 수 있습니다. 3. 선택 기준 : 키 이름을 처리하거나 객체 구조를 확인 해야하는 경우 ... in. 값 자체에주의를 기울이고 코드가 간결하기를 원한다면 ...
for...of for...in 주요 차이점은 그들이 반복하는 것에 있습니다. for...in 객체 또는 배열의 키 (속성 이름)와 같은 객체의 열거 가능한 속성을 반복하는 데 사용됩니다. 반면, 루프 for...of 배열, 문자열,지도, 세트 등과 같은 반복 가능한 물체를 반복하는 데 사용됩니다.
for...in : 객체 키를 반복하십시오
Loop for...in 사용하면 객체의 모든 열거 가능한 문자열 키 속성을 통과합니다. 이것은 물체의 구조를 검사하는 데 유용합니다. 반드시 그 값은 아닙니다.
const obj = {a : 1, b : 2, c : 3};
for (obj의 키를하자) {
Console.log (키); // 출력 : A, B, c
}- 배열을 포함하여 모든 객체에서 작동합니다.
- 반복 순서는 숫자, 특히 비 어선 객체에서는 숫자로 보장되지 않습니다.
- 배열과 함께 사용할 때주의하십시오. 실제 값이 아니라 인덱스 위치를 문자열로 반복합니다.
일반적인 실수 :
const arr = [10, 20, 30];
for (het I in arr) {
Console.log (i); // "0", "1", "2"출력 - 숫자가 아니라 문자열!
}속성 이름이나 키, 특히 일반 객체에서 액세스해야 할 때이 루프를 사용하십시오.
루프 for...of
이 루프는 배열, 문자열,지도, 세트, 노드리스트 등과 같은 반복 가능한 객체를 위해 특별히 설계되었습니다.
const arr = [10, 20, 30];
(ARR의 가치) {
Console.log (값); // 출력 : 10, 20, 30
}- 인덱스 나 키가 아니라 요소에 직접 액세스 할 수 있습니다.
- 반복 가능한 프로토콜을 구현하는 데이터 구조와 잘 작동합니다.
- 당신이 그들을 감싸거나 자신의 반복자를 정의하지 않는 한 일반 객체에서 직접 작동하지 않습니다.
문자열이있는 예 :
for ( "Hello"의 숯) {
Console.log (char); // 안녕하세요
}키나 인덱스에 대해 걱정하지 않고 컬렉션에서 각 항목을 처리하려면이 루프를 사용하십시오.
언제 어느 것을 사용해야합니까?
다음은 귀하의 요구에 따라 사용할 루프를 결정하는 데 도움이되는 빠른 가이드입니다.
-
✅
for...in:- 평범한 객체로 작업하고 키나 속성 이름에 액세스해야합니다.
- 디버깅 또는 동적 속성 액세스와 같은 객체의 구조를 검사해야합니다.
-
✅ when
for...of- 배열, 문자열,지도 또는 세트와 같은 반복 가능한 반복을 다루고 있습니다.
- 당신은 키나 색인이 아니라 가치 자체에 관심이 있습니다.
- 메커니즘이 아니라 데이터에 중점을 둔 깨끗하고 읽기 쉬운 코드를 원합니다.
또한 참고 :
- 객체에 프로토 타입 체인이있는 경우 상속 된 열거 가능한 특성을 포함
for...in수 있습니다. -
for...of루프와 마찬가지로break을 사용하여 분해 될 수 있습니다.
기본적으로, 루프를 사용하는 것과 필요한 것을 기준으로 선택하십시오. 하나는 다른 것보다 낫지 않습니다. 그들은 다른 목적으로 단지 의미가 있습니다.
위 내용은 루프에서 ...와 ...에 대한 ...의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undress AI Tool
무료로 이미지를 벗다
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
고급 JavaScript 스코프 및 컨텍스트
Jul 24, 2025 am 12:42 AM
JavaScript의 범위는 변수의 접근성 범위를 결정하며, 이는 글로벌, 기능 및 블록 수준 범위로 나뉩니다. 컨텍스트는 이것의 방향을 결정하고 함수 호출 방법에 따라 다릅니다. 1. 스코프에는 글로벌 범위 (어디서나 액세스 가능), 함수 스코프 (함수 내에서만 유효 함) 및 블록 레벨 범위 ({} 내에서 유효 함)가 포함됩니다. 2. 실행 컨텍스트에는 가변 객체, 스코프 체인 및 이것의 값이 포함되어 있습니다. 이것은 일반 함수에서 글로벌 또는 정의되지 않은 것을 가리키며, 메소드 호출은 통화 객체를 가리키고 생성자는 새 객체를 가리키며 Call/Apply/Bind에 의해 명시 적으로 지정 될 수 있습니다. 3. 폐쇄는 외부 범위 변수에 액세스하고 기억하는 기능을 말합니다. 종종 캡슐화 및 캐시에 사용되지만
VUE 3 구성 API vs. 옵션 API : 세부 비교
Jul 25, 2025 am 03:46 AM
Vue3의 CompositionApi는 복잡한 논리 및 유형 파생에 더 적합하며 옵션 API는 간단한 시나리오 및 초보자에게 적합합니다. 1. OptionsApi는 데이터 및 방법과 같은 옵션에 따라 코드를 구성하며 명확한 구조를 가지지 만 복잡한 구성 요소는 조각화됩니다. 2. CompositionApi는 설정을 사용하여 관련 논리를 집중시킵니다.이 논리는 유지 관리 및 재사용에 도움이됩니다. 3. CompositionApi는 Composable 기능을 통해 충돌이없고 매개 변수화 가능한 논리 재사용을 인식합니다. 4. CompositionApi는 TypeScript와보다 정확한 유형 도출에 대한 더 나은 지원을 가지고 있습니다. 5.이 둘의 성능과 포장량에는 큰 차이가 없다. 6.
JavaScript에서 유형 강요 규칙 탐색
Jul 21, 2025 am 02:31 AM
유형 주조는 한 유형의 값을 자바 스크립트의 다른 유형으로 자동 변환하는 동작입니다. 일반적인 시나리오는 다음과 같습니다. 1. 연산자를 사용하는 경우 한쪽이 문자열 인 경우 다른 쪽은 '5'5와 같은 문자열로 변환됩니다. 결과는 "55"입니다. 2. 부울 맥락에서, 비-비안 값은 비어있는 문자열, 0, null, undefined 등과 같은 부울 유형으로 암시 적으로 변환 될 것이다. 3. NULL은 수치 연산에 참여하고 0으로 변환되며 정의되지 않은 것은 NAN으로 변환됩니다. 4. 숫자 (), String () 및 boolean ()과 같은 명백한 변환 함수를 통해 암시 적 변환으로 인한 문제를 피할 수 있습니다. 이 규칙을 마스터하면 도움이됩니다
JavaScript 동시성 패턴 마스터 링 : 웹 작업자 대 Java 스레드
Jul 25, 2025 am 04:31 AM
동시 처리에서 JavaScript의 웹 워크와 Javathreads 사이에는 필수적인 차이가 있습니다. 1. JavaScript는 단일 스레드 모델을 채택합니다. 웹 워크 사람들은 브라우저에서 제공하는 독립 스레드입니다. UI를 차단하지는 않지만 DOM을 작동 할 수없는 시간 소모적 작업을 수행하는 데 적합합니다. 2. Java는 스레드 클래스를 통해 생성 된 언어 수준의 실제 멀티 스레딩을 지원하며 복잡한 동시 논리 및 서버 측 처리에 적합합니다. 3. 웹 워크는 postMessage ()를 사용하여 주 스레드와 통신하는데, 이는 매우 안전하고 고립된다. Java 스레드는 메모리를 공유 할 수 있으므로 동기화 문제에주의를 기울여야합니다. 4. 웹 워크는 이미지 처리 및와 같은 프론트 엔드 병렬 컴퓨팅에 더 적합합니다.
JS의 날짜를 포맷하는 방법은 무엇입니까?
Jul 20, 2025 am 12:10 AM
JavaScript의 형식 날짜는 기본 방법 또는 타사 라이브러리를 통해 구현할 수 있습니다. 1. 기본 날짜 객체 스티칭 사용 : Getlylyear, GetDonth, GetDate 및 기타 방법을 통해 날짜 부분을 가져 와서 수동으로 YYYY-MM-DD 및 기타 형식으로 연결하여 가벼운 요구에 적합하며 타사 라이브러리에 의존하지 않습니다. 2. Tolocaledatestring 방법 사용 : 지역 습관에 따라 MM/DD/YYYY 형식과 같은 출력을 출력하고 다국어를 지원할 수 있지만 다른 환경으로 인해 형식이 일치하지 않을 수 있습니다. 3. Day.js 또는 Date-FNS와 같은 타사 라이브러리 사용 : 간결한 구문 및 풍부한 기능을 제공합니다.
node.js로 CLI 도구 구축
Jul 24, 2025 am 03:39 AM
프로젝트를 초기화하고 package.json을 만듭니다. 2. Shebang을 사용하여 Entry Script Index.js를 만듭니다. 3. package.json의 빈 필드를 통한 명령을 등록합니다. 4. Yargs 및 기타 라이브러리를 사용하여 명령 줄 매개 변수를 구문 분석하십시오. 5. NPMLINK 로컬 테스트 사용; 6. 경험을 향상시키기 위해 도움말, 버전 및 옵션을 추가하십시오. 7. 선택적으로 NPMPUBLISH를 통해 출판; 8. 선택적으로 Yargs와의 자동 완료를 달성합니다. 마지막으로 합리적인 구조 및 사용자 경험 설계를 통해 실제 CLI 도구를 작성하고, 자동화 작업을 완료하거나 위젯을 배포하고 완전한 문장으로 끝납니다.
JS에서 요소를 생성하고 추가하는 방법?
Jul 25, 2025 am 03:56 AM
새로운 요소를 생성하려면 document.createElement ()를 사용하십시오. 2. TextContent, 클래스리스트, SetAttribute 및 기타 방법을 통해 요소를 사용자 정의합니다. 3. DOM에 요소를 추가하기 위해 AppendChild () 또는보다 유연한 Append () 메소드를 사용하십시오. 4. 삽입 위치를 제어하기 위해 (), 이전 () 및 기타 방법을 선택적으로 사용합니다. 완전한 프로세스는 → Customize → Add를 작성하는 것이며 페이지 컨텐츠를 동적으로 업데이트 할 수 있습니다.
TypeScript의 고급 조건부 유형
Aug 04, 2025 am 06:32 AM
TypeScript의 고급 조건 유형은 TextEndsu? x : y 구문을 통해 유형간에 논리적 판단을 구현합니다. 핵심 기능은 분산 조건 유형, 유추 유형 추론 및 복잡한 유형 도구의 구성에 반영됩니다. 1. 조건부 유형은 베어 유형 매개 변수에 분산되며 문자열 [] | 번호 []를 얻기 위해 ToArray와 같이 조인트 유형을 자동으로 분할 할 수 있습니다. 2. 분포를 사용하여 필터링 및 추출 도구를 구축하기 위해 : textendsu를 통해 유형을 제외하고 textendu? t : never 및 null/undefined를 통해 공통점을 추출합니다. 3
