>  기사  >  웹 프론트엔드  >  일반적으로 사용되는 Javascript 배열 방법.

일반적으로 사용되는 Javascript 배열 방법.

PHPz
PHPz원래의
2024-07-18 10:12:021088검색

Commonly used Javascript Array Methods.

이 게시물에서는 반복 및 콜백 기능을 사용하여 기능을 유지하는 일반적으로 사용되는 Javascript 배열 방법에 대해 알아봅니다.

반복은 일련의 명령문이나 코드 블록을 반복적으로 실행하는 것을 말하며, 이를 통해 동일한 작업을 여러 번 수행할 수 있습니다.

간단히 말하면 콜백은 다른 함수에 인수로 전달되는 함수 정의입니다.

간단한 설명을 위해 이 세 가지 사항에 중점을 두겠습니다.

  1. 특정 배열 방식을 사용해야 하는 경우
  2. 배열 메소드가 반환하는 내용
  3. 배열 메소드의 코드 예시입니다. **

진행하기 전에 이러한 배열 메소드가 어떻게 구성되어 있는지 살펴보겠습니다.

// 배열 메서드(콜백(배열의 각 항목에 대해 실행하려는 조건))

이러한 각 배열 메서드는 콜백을 인수로 받는 함수입니다. 이 콜백에서 각 배열 항목에 대해 실행하려는 조건을 지정합니다.

예시를 위해 이 객체 배열을 사용할 것입니다.

`const 데이터 = [
{
"userId": 1,
"사용자 이름": "프란시스",
"message": "안녕하세요?",
"timestamp": "2024-02-18T12:30:00Z",
"상태": "온라인",
"메시지 전송됨": 28,
"역할": "사용자",
"passCode": "293087O7764"

},
{
"userId": 2,
"사용자 이름": "모세",
"message": "나쁘지는 않습니다. 그냥 프로젝트를 진행 중인 것뿐입니다.",
"타임스탬프": "2024-02-18T12:35:00Z",
"status": "자리 비움",
"메시지 전송됨": 74,
"역할": "사용자",
"passCode": "675147O2234"
},
{
"userId": 3,
"username": "Vicky",
"message": "안녕하세요 여러분! 최근 가십은 무엇인가요?",
"timestamp": "2024-02-18T12:40:00Z",
"상태": "온라인",
"메시지 전송됨": 271,
"역할": "조정자",
"passCode": "76352O8069"

},
{
"userId": 4,
"사용자 이름": "주니어",
"message": "별로, 그냥 쉬고 있어요. 당신은 어때요?",
"타임스탬프": "2024-02-18T12:45:00Z",
"상태": "오프라인",
"메시지 전송됨": 125,
"역할": "관리자",
"passCode": "21876O3483"
}
]`

forEach: forEach는 모든 배열 항목에 대해 조건을 실행하려고 할 때 사용됩니다. forEach는 정의되지 않은 값을 반환합니다.

getMessageSent(사용자) 함수{
sumMessageSent = 0;
users.forEach(함수(사용자){
sumMessageSent += user.messageSent;
})
sumMessageSent를 반환합니다.
}
getMessageSent(data) // 출력: 498

reduce: 감소는 배열을 단일 값으로 줄이는 데 사용됩니다. 예를 들어 이 배열 [8, 7, 3]은 숫자 18로 줄일 수 있습니다. 감속기는 단일 값을 반환합니다.

리듀서 함수는 총계와 현재로 구성된 리듀서, 두 번째는 초기값이라는 두 개의 매개변수를 사용합니다

합계: 일반적으로 누산기라고 합니다. 내가 부르는 총계는 감속기 함수의 마지막으로 계산된 값입니다.

현재는 단일 배열 항목을 나타냅니다. 우리의 경우에는 4개의 항목(현재)이 있습니다.

initialValue는 첫 번째 호출 시 합계에 할당하는 값입니다. 간단히 말해서 initalValue가 총계의 기본값이라고 말합니다

const getMessageSent = (사용자) => {
return users.reduce((total, current) => total += current.messageSent, 0)
}

getMessageSent(data) // 출력: 498

filter: Array.filter는 배열에서 특정 조건을 충족하는 항목만 수집하려는 경우에 사용됩니다. array.filter는 배열을 반환합니다.

const onlineUsers = (사용자) => {
users.filter(user => user.status === "online")
반환 }

onlineUsers(data) // 출력: [객체 객체]

find Array.find는 콜백 내부에 정의된 조건을 충족하는 첫 번째 배열 항목만 가져오려는 경우에 사용됩니다. array.find는 배열이 아닌 항목의 형식으로 첫 번째 항목을 반환합니다. 우리의 경우 일치하는 항목이 없으면 객체이거나 정의되지 않습니다.

const getUserRole = (사용자) => {
users.find(user => user.role === "user")
반환 }

getUserRole(data) // 출력: {userId: 1, 사용자 이름: 'Francis', 메시지: "안녕하세요?", 타임스탬프: '2024-02-18T12:30:00Z', 상태: ' 온라인', …}

조건을 충족하는 첫 번째 사용자만 반환되는 방식에 주목하세요.

map Array.map은 배열의 항목을 변환할 때 사용됩니다. array.map은 콜백의 조건을 충족하는 변환된 항목의 배열을 반환합니다.

const getUserNameAndPass = (사용자) => {
return users.map((사용자) => {
const userPassCode = user.passCode.slice(-4);
return${user.username} ${userPassCode.padStart(
user.passCode.length,
"★"
)};
});
};

getUserNameAndPass(data)// 출력:['프란시스 ★★★★★★★7764', '모세 ★★★★★★★2234', '비키 ★★★★★★8069', '주니어 ★ ★★★★★3483']

every array.every는 모든 배열 항목이 정의된 조건을 통과했는지 확인하려는 경우에 사용됩니다. array.every는 부울을 반환합니다. 모든 항목이 조건을 통과하면 true이고, 조건을 만족하지 못하는 항목이 있으면 false입니다.

const isOnline = data.every(user => dataItem.status === 'online')

console.log(isOnline) // 출력:false

Some array.some은 배열 항목 중 일부가 주어진 조건을 통과하는지 확인하려고 할 때 사용됩니다. array.some은 부울을 반환합니다. 일부 항목이 조건을 통과하면 true이고, 모든 항목이 통과 또는 실패하면 false입니다.

const isOnline = data.every(user => dataItem.status === 'online')

console.log(isOnline) // 출력: true

다음은 널리 사용되는 배열 방법 중 일부입니다.

위 내용은 일반적으로 사용되는 Javascript 배열 방법.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.