> 웹 프론트엔드 > 프런트엔드 Q&A > 자바스크립트의 각 사용법

자바스크립트의 각 사용법

WBOY
풀어 주다: 2023-05-16 10:27:37
원래의
2901명이 탐색했습니다.

JavaScript는 웹 개발, 모바일 애플리케이션 및 데스크톱 애플리케이션에 널리 사용되는 높은 수준의 동적 객체 지향 프로그래밍 언어입니다. 그 중 각 루프는 JavaScript에서 가장 일반적으로 사용되는 루프 방법 중 하나이며 매우 광범위한 응용 프로그램을 가지고 있습니다.

각각 무엇인가요?

each는 배열이나 객체의 데이터를 반복하도록 특별히 설계된 루프 방법입니다. 루프 작성을 단순화하고 코드를 더 쉽게 읽고 이해할 수 있도록 하는 반복자로 사용됩니다.

JavaScript에서는 각각 다른 라이브러리나 프레임워크에서 제공하는 메서드를 사용할 수 있습니다(예: jQuery의 $.each(), Underscore.js의 _.each(), Lodash의 _.forEach() 등). 이 글에서는 Lodash의 각 방법을 예로 들어 설명하겠습니다.

각각 어떻게 사용하나요?

배열의 경우:

각 라이브러리에서 제공하는 각 메서드를 사용하기 전에 라이브러리나 프레임워크를 참조해야 해당 메서드를 사용할 수 있습니다. Lodash에서는 다음 메소드를 사용하여 Each 메소드를 도입할 수 있습니다.

const _ = require('lodash');
로그인 후 복사

다음으로 _.each() 메소드를 사용하여 배열을 순회할 수 있으며 코드는 다음과 같습니다.

let arr = ['apple', 'banana', 'pear'];

_.each(arr, function(fruit) {
    console.log(fruit);
});
로그인 후 복사

위 코드에서 우리는 배열 arr 을 순회한 다음 익명 함수를 콜백 함수로 사용하여 각 요소의 값을 콘솔에 출력합니다.

이 예에서는 익명 함수를 사용하여 각 과일을 인쇄합니다. 그러나 위의 예를 처리하기 위해 더 간단한 작성 방법을 사용할 수도 있습니다. 예를 들어 화살표 함수를 사용하여 기존 익명 함수를 대체할 수 있습니다.

_.each(arr, fruit => console.log(fruit));
로그인 후 복사

이 방법은 더 간결하고 읽기 쉬우며 단 한 줄의 코드로 익명 함수를 단순화하는 데에도 매우 적합합니다.

객체의 경우:

each를 사용하여 객체를 순회하는 경우 Each 메소드의 매개변수를 수정해야 합니다. 예:

let obj = {name: 'Tom', age: 18};

_.each(obj, function(value, key) {
    console.log(key + ': ' + value);
});
로그인 후 복사

위 코드에서는 객체 obj를 사용하고 Each 메소드를 통해 이를 탐색합니다. 객체의 키-값 쌍이 콘솔에 출력됩니다. 각 객체의 키와 값은 각각 매개변수로 콜백 함수에 전달됩니다.

valueOf

Lodash의 _.each() 메소드에는 기본 항목별 처리 로직과 다른 또 다른 메소드가 있는데, 바로 valueOf() 메소드입니다. valueOf() 메서드를 사용하는 경우 콜백 함수는 첫 번째 매개변수가 항상 valueOf()에서 반환된 값으로 전달되도록 지정합니다. 예:

let obj = {name: 'Tom', age: 18};

_.each(obj, function(value, key) {
    console.log(value);
}, function() {
    return this.age;
}.valueOf());
로그인 후 복사

위 코드에서는 valueOf() 메서드를 사용하고 콜백 함수에서 개체의 나이를 반환합니다. 따라서 콘솔에는 객체의 나이인 18세만 출력됩니다.

요약:

위의 예를 통해 JavaScript에서 각 루프가 매우 일반적이고 실용적이라는 것을 알 수 있습니다. 모든 유형의 데이터 구조를 탐색할 수 있으며 기존 for 루프에 비해 더 간결하고 읽기 쉽고 쓰기 쉬운 장점이 있습니다. 더 중요한 것은 대부분의 JavaScript 라이브러리 또는 프레임워크에서 널리 사용되므로 코드가 더욱 표준화되고 유지 관리 및 확장이 더 쉬워진다는 것입니다.

다양한 JavaScript 라이브러리 또는 프레임워크는 각 메서드와 매개변수를 약간 다르게 구현하지만 일반적으로 해당 목적과 기능은 일관됩니다. 따라서 실제 적용에서는 프로젝트 요구 사항과 팀 습관에 따라 유연하게 선택할 수 있습니다.

위 내용은 자바스크립트의 각 사용법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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