웹 프론트엔드 프런트엔드 Q&A JavaScript에서 배열을 무작위로 출력하는 방법

JavaScript에서 배열을 무작위로 출력하는 방법

Apr 24, 2023 am 09:07 AM

배열을 무작위로 출력해야 하는 필요성은 JavaScript 개발에서 자주 나타납니다. 예를 들어, 많은 데이터를 저장하는 배열이 있고 데이터의 일부를 무작위로 출력해야 한다고 가정합니다. 그렇다면 이것을 달성하는 방법은 무엇입니까?

다음은 여러 가지 구현 방법입니다.

  1. Math.random() 방법

Math.random() 방법은 JavaScript에서 제공하는 난수 생성 함수입니다. 0과 1 사이의 난수를 반환합니다. 이 방법을 사용하여 난수 인덱스를 생성한 다음 이 인덱스를 사용하여 원래 배열에서 해당 요소를 얻을 수 있습니다.

샘플 코드는 다음과 같습니다.

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var randomIndex = Math.floor(Math.random() * arr.length);
console.log(arr[randomIndex]);
로그인 후 복사

위 코드에서 Math.random() 메서드를 사용하여 0~1 사이의 난수를 생성한 후, 여기에 배열의 길이를 곱하여 난수를 얻습니다. 인덱스. 이 인덱스를 사용하여 원본에서 난수를 가져옵니다. 배열에서 해당 요소를 가져옵니다.

  1. Array.sort() 메서드

또 다른 방법은 Array.sort() 메서드를 사용하여 배열을 무작위로 정렬한 다음 배열의 처음 몇 요소를 출력하는 것입니다. 구체적인 구현은 다음과 같습니다.

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.sort(function() { return Math.random() - 0.5 });
console.log(arr.slice(0, 3));
로그인 후 복사

위 코드는 먼저 sort() 메서드를 사용하여 배열을 무작위로 정렬합니다. sort() 메서드는 비교 함수를 매개 변수로 받아들입니다. 함수가 반환하는 값은 0보다 작습니다. 이전에는 첫 번째 매개변수가 두 번째 매개변수보다 먼저 순위가 지정되었음을 나타냅니다. 이전에는 0보다 큰 반환 값은 첫 번째 매개변수가 두 번째 매개변수 뒤에 옴을 의미했습니다. 함수는 난수를 반환하므로 배열은 무작위로 정렬됩니다.

그런 다음 Slice() 메서드를 사용하여 무작위 출력 결과로 배열의 처음 세 요소를 꺼냅니다.

  1. Fisher–Yates 셔플링 알고리즘

Fisher-Yates 셔플링 알고리즘은 Knuth 셔플링 알고리즘이라고도 알려져 있으며 배열의 요소를 무작위로 배열하는 알고리즘입니다. 구현은 다음과 같습니다:

function shuffleArray(arr) {
  for (var i = arr.length - 1; i > 0; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    var temp = arr[i];
    arr[i] = arr[j];
    arr[j] = temp;
  }
  return arr;
}

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(shuffleArray(arr).slice(0, 3));
로그인 후 복사

위 코드에서 배열을 반복하여 교환을 위해 무작위 위치가 선택될 때마다 최종적으로 무작위로 배열된 배열을 얻습니다. 그런 다음, Slice() 메서드를 사용하여 배열의 처음 세 요소를 무작위 출력 결과로 제거합니다.

요약

위는 몇 가지 일반적인 구현 방법이며, 각 방법에는 장점과 단점이 있습니다. 예를 들어, 첫 번째 방법은 가장 간단하지만 동일한 요소를 반복적으로 출력하는 문제가 있을 수 있습니다. 두 번째 방법은 비교적 무작위이지만 코드가 약간 길지만, 세 번째 방법은 비교적 완벽한 구현입니다. 이를 캡슐화하는 함수를 작성해야 합니다.

개발자는 실제 요구 사항에 따라 구현에 적합한 방법을 선택할 수 있습니다. 어느 쪽이든 배열 요소를 무작위로 출력하는 기능은 JavaScript 개발에서 중요한 기술입니다.

위 내용은 JavaScript에서 배열을 무작위로 출력하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

게으른 하중의 개념을 설명하십시오. 게으른 하중의 개념을 설명하십시오. Mar 13, 2025 pm 07:47 PM

게으른 하중의 개념을 설명하십시오.

useeffect 란 무엇입니까? 부작용을 수행하는 데 어떻게 사용합니까? useeffect 란 무엇입니까? 부작용을 수행하는 데 어떻게 사용합니까? Mar 19, 2025 pm 03:58 PM

useeffect 란 무엇입니까? 부작용을 수행하는 데 어떻게 사용합니까?

React Reconciliation 알고리즘은 어떻게 작동합니까? React Reconciliation 알고리즘은 어떻게 작동합니까? Mar 18, 2025 pm 01:58 PM

React Reconciliation 알고리즘은 어떻게 작동합니까?

카레는 JavaScript에서 어떻게 작동하며 그 이점은 무엇입니까? 카레는 JavaScript에서 어떻게 작동하며 그 이점은 무엇입니까? Mar 18, 2025 pm 01:45 PM

카레는 JavaScript에서 어떻게 작동하며 그 이점은 무엇입니까?

JavaScript의 고차 기능은 무엇이며 어떻게 간결하고 재사용 가능한 코드를 작성하는 데 어떻게 사용할 수 있습니까? JavaScript의 고차 기능은 무엇이며 어떻게 간결하고 재사용 가능한 코드를 작성하는 데 어떻게 사용할 수 있습니까? Mar 18, 2025 pm 01:44 PM

JavaScript의 고차 기능은 무엇이며 어떻게 간결하고 재사용 가능한 코드를 작성하는 데 어떻게 사용할 수 있습니까?

각 라이프 사이클 방법의 목적과 사용 사례를 설명하십시오. 각 라이프 사이클 방법의 목적과 사용 사례를 설명하십시오. Mar 19, 2025 pm 01:46 PM

각 라이프 사이클 방법의 목적과 사용 사례를 설명하십시오.

React의 성능 최적화 기술 (메모 화, 코드 분할, 게으른로드)은 무엇입니까? React의 성능 최적화 기술 (메모 화, 코드 분할, 게으른로드)은 무엇입니까? Mar 18, 2025 pm 01:57 PM

React의 성능 최적화 기술 (메모 화, 코드 분할, 게으른로드)은 무엇입니까?

usecontext는 무엇입니까? 구성 요소간에 상태를 공유하는 데 어떻게 사용합니까? usecontext는 무엇입니까? 구성 요소간에 상태를 공유하는 데 어떻게 사용합니까? Mar 19, 2025 pm 03:59 PM

usecontext는 무엇입니까? 구성 요소간에 상태를 공유하는 데 어떻게 사용합니까?

See all articles