Hướng dẫn shuffle array of objects javascript - xáo trộn mảng đối tượng javascript

Question

13

Nội dung chính Show

Shuffle Một mảng JavaScript sử dụng thuật toán Fisher-Yates
Viết thuật toán Fisher-Yates với cú pháp JavaScript ES6
Shuffle một mảng javascript bằng phương thức sort ()
Thuật toán Fisher-Yates vs Array.Sort () Phương thức
Shuffle một mảng trong javascript mà không thay đổi mảng gốc
Shuffle một mảng trong javascript với phương thức map ()
Cách xáo trộn một mảng các đối tượng trong JavaScript
Shuffle một mảng javascript với thư viện bên ngoài
Sự kết luận
Làm thế nào để bạn xáo trộn một mảng các đối tượng?
Làm thế nào để bạn ngẫu nhiên một mảng trong javascript?
Làm thế nào để bạn xáo trộn một đối tượng trong JavaScript?
Có một phương pháp xáo trộn trong JavaScript?

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.

Mã bên dưới hoạt động cho một mảng bình thường nhưng không phải với một mảng với đối tượng có ai biết cách làm điều này không?

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

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

const result = shuffle(array);

console.log(JSON.stringify(result));

Ori drori

173K29 Huy hiệu vàng203 Huy hiệu bạc193 Huy hiệu Đồng29 gold badges203 silver badges193 bronze badges

Đã hỏi ngày 29 tháng 3 năm 2018 lúc 11:48Mar 29, 2018 at 11:48

5

Hãy thử phân loại như đoạn trích này:

console.log( [
    { some: 1 },
    { some: 2 },
    { some: 3 },
    { some: 4 },
    { some: 5 },
    { some: 6 },
    { some: 7 },
  ]
  .sort( () => Math.random() - 0.5) );

Trong phản hồi của Martin Omanders Nhận xét: Đây là một phương pháp xáo trộn theo thuật toán Fisher-Yates

const result = document.querySelector("pre");
for (let i=0; i<20; i+=1) {
  result.textContent += 
    JSON.stringify(shuffleFisherYates([0,1,2,3,4,5,6,7,8,9])) + '\n';
}

function shuffleFisherYates(array) {
  let i = array.length;
  while (i--) {
    const ri = Math.floor(Math.random() * i);
    [array[i], array[ri]] = [array[ri], array[i]];
  }
  return array;
}

<pre></pre>

Có thể được ngưng tụ thành một lớp lót (lưu ý: một lớp lót này sẽ không biên dịch trong trình biên dịch đóng Google với cấp độ nâng cao):note: this one liner will not compile in the Google Closure Compiler with level advanced):

const shuffle = array => 
  [...Array(array.length)]
    .map((el, i) => Math.floor(Math.random() * i))
    .reduce( (a, rv, i) => ([a[i], a[rv]] = [a[rv], a[i]]) && a, array);
const result = document.querySelector("pre");
for (let i=0; i<100; i+=1)
  result.textContent +=
   JSON.stringify(shuffle([0,1,2,3,4,5,6,7,8,9])) + '\n';

<pre></pre>

Đã trả lời ngày 29 tháng 3 năm 2018 lúc 11:55Mar 29, 2018 at 11:55

KooiinckooiincKooiInc

Huy hiệu vàng 115K3131 gold badges141 silver badges176 bronze badges

1

Dưới đây là một ví dụ nữa dựa trên lodash _.shuffle._.shuffle.

const array = [
    { some: 1 },
    { some: 2 },
    { some: 3 },
    { some: 4 },
    { some: 5 },
    { some: 6 },
    { some: 7 },
  ];
console.log(_.shuffle(array));

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>

Đã trả lời ngày 2 tháng 1 năm 2019 lúc 9:25Jan 2, 2019 at 9:25

Penny Liupenny LiuPenny Liu

Huy hiệu vàng 13K571 Huy hiệu bạc86 Huy hiệu đồng5 gold badges71 silver badges86 bronze badges

Nếu bạn cần xáo trộn một bộ sưu tập các nút phần tử (trong DOM), trước tiên hãy chuyển đổi nó thành một mảng:

var wrapper = document.getElementById('someid');
var array = Array.prototype.slice.call(wrapper.children);

Xáo trộn một đối tượng HTMLCollection (được trả về bởi

<pre></pre>

1) trực tiếp không hoạt động ngay cả khi bạn có thể lặp lại bộ sưu tập với một vòng lặp. Điều này vấp ngã tôi một lúc.

Đã trả lời ngày 24 tháng 6 năm 2018 lúc 11:51Jun 24, 2018 at 11:51

Hansfnhansfnhansfn

4834 Huy hiệu bạc15 Huy hiệu Đồng4 silver badges15 bronze badges

Xáo trộn một mảng là một câu hỏi phổ biến được hỏi trong các cuộc phỏng vấn mã hóa. Có một vài cách khác nhau để xáo trộn một mảng trong JavaScript.

Để xáo trộn một mảng có nghĩa là ngẫu nhiên thứ tự của các mục bằng cách đặt chúng vào các vị trí khác nhau trong mảng. Theo cách này, các mục trong một định vị lại mảng bằng cách thay đổi các chỉ mục của chúng.

Bất cứ khi nào bạn muốn xáo trộn hoặc ngẫu nhiên một mảng, bạn phải tạo một chỉ mục ngẫu nhiên cho từng mục của mảng đó.

Có các phương pháp sau bạn có thể sử dụng để trộn một mảng trong JavaScript:

Thuật toán Shuffle của Fisher-Yates trong JavaScript.
Áp dụng phương thức
```
<pre></pre>
```
2 để ngẫu nhiên một mảng trong JavaScript.
Sử dụng
```
<pre></pre>
```
3 với phương pháp
```
<pre></pre>
```
2 để có được một mảng xáo trộn.

Trong bài viết này, tôi sẽ hướng dẫn bạn qua các phương pháp khác nhau để xáo trộn hoặc ngẫu nhiên một mảng JavaScript từng bước với ưu và nhược điểm của họ.

Cũng đọc: Cách xóa các phần tử khỏi một mảng trong JavaScript How to Remove Elements From an Array in JavaScript

Shuffle Một mảng JavaScript sử dụng thuật toán Fisher-Yates

Trong số các phương pháp khác nhau, thuật toán Shuffle Fisher-Yates tốt hơn về hiệu suất và độ tin cậy. Thuật toán này tổ chức lại một mảng theo thứ tự ngẫu nhiên hơn.

Đó là một thuật toán đơn giản lặp qua mảng theo thứ tự ngược lại và hoán đổi từng phần tử với một phần tử ngẫu nhiên trong mảng. Bạn có thể làm điều này chỉ trong 4 bước:just 4 steps:

Vòng lặp qua mảng để chọn từng phần tử.
Tạo một chỉ mục ngẫu nhiên bằng phương pháp
```
<pre></pre>
```
5.
Lưu trữ giá trị của mục mảng hiện tại trong một biến mới.
Trao đổi mục mảng hiện tại với mục được tạo ngẫu nhiên.

Hãy xem từng bước một ví dụ.

Bước 1: Trong ví dụ này, tôi đã tạo một hàm gọi là

<pre></pre>

6 chấp nhận một mảng làm đối số của nó. Bên trong hàm, tôi đang lặp qua mảng bằng cách sử dụng vòng lặp
<pre></pre>
7. In this example, I have created a function called

<pre></pre>

6 that accepts an array as its argument. Inside the function, I am looping over the array using the

<pre></pre>

7 loop.

          const shuffle = (array) => {
    for (let i = array.length - 1; i > 0; i--) {
        // step 2
        // step 3
        // step 4
    }
};

Vòng lặp

<pre></pre>

7 này sẽ đi qua tất cả các mục theo thứ tự ngược lại.

Bước 2: Tôi đang tạo một chỉ mục ngẫu nhiên nằm trong khoảng từ 0 đến

<pre></pre>

9 (chỉ mục mục hiện tại). Tôi đang lưu trữ chỉ số ngẫu nhiên đó trong biến
const shuffle = array => [...Array(array.length)] .map((el, i) => Math.floor(Math.random() * i)) .reduce( (a, rv, i) => ([a[i], a[rv]] = [a[rv], a[i]]) && a, array); const result = document.querySelector("pre"); for (let i=0; i<100; i+=1) result.textContent += JSON.stringify(shuffle([0,1,2,3,4,5,6,7,8,9])) + '\n';
0. I am generating a random index that ranges between 0 to

<pre></pre>

9 (current item index). I am storing that random index in the

const shuffle = array => 
  [...Array(array.length)]
    .map((el, i) => Math.floor(Math.random() * i))
    .reduce( (a, rv, i) => ([a[i], a[rv]] = [a[rv], a[i]]) && a, array);
const result = document.querySelector("pre");
for (let i=0; i<100; i+=1)
  result.textContent +=
   JSON.stringify(shuffle([0,1,2,3,4,5,6,7,8,9])) + '\n';

0 variable.

console.log( [
    { some: 1 },
    { some: 2 },
    { some: 3 },
    { some: 4 },
    { some: 5 },
    { some: 6 },
    { some: 7 },
  ]
  .sort( () => Math.random() - 0.5) );

0

Bước 3: Tôi đang lưu trữ mục hiện tại trong biến

const shuffle = array => 
  [...Array(array.length)]
    .map((el, i) => Math.floor(Math.random() * i))
    .reduce( (a, rv, i) => ([a[i], a[rv]] = [a[rv], a[i]]) && a, array);
const result = document.querySelector("pre");
for (let i=0; i<100; i+=1)
  result.textContent +=
   JSON.stringify(shuffle([0,1,2,3,4,5,6,7,8,9])) + '\n';

1 bằng cách sử dụng
const shuffle = array => [...Array(array.length)] .map((el, i) => Math.floor(Math.random() * i)) .reduce( (a, rv, i) => ([a[i], a[rv]] = [a[rv], a[i]]) && a, array); const result = document.querySelector("pre"); for (let i=0; i<100; i+=1) result.textContent += JSON.stringify(shuffle([0,1,2,3,4,5,6,7,8,9])) + '\n';
2 để trao đổi nó với mục ngẫu nhiên. I am storing the current item in the

const shuffle = array => 
  [...Array(array.length)]
    .map((el, i) => Math.floor(Math.random() * i))
    .reduce( (a, rv, i) => ([a[i], a[rv]] = [a[rv], a[i]]) && a, array);
const result = document.querySelector("pre");
for (let i=0; i<100; i+=1)
  result.textContent +=
   JSON.stringify(shuffle([0,1,2,3,4,5,6,7,8,9])) + '\n';

1 variable using the

const shuffle = array => 
  [...Array(array.length)]
    .map((el, i) => Math.floor(Math.random() * i))
    .reduce( (a, rv, i) => ([a[i], a[rv]] = [a[rv], a[i]]) && a, array);
const result = document.querySelector("pre");
for (let i=0; i<100; i+=1)
  result.textContent +=
   JSON.stringify(shuffle([0,1,2,3,4,5,6,7,8,9])) + '\n';

2 to swap it with the random item.

console.log( [
    { some: 1 },
    { some: 2 },
    { some: 3 },
    { some: 4 },
    { some: 5 },
    { some: 6 },
    { some: 7 },
  ]
  .sort( () => Math.random() - 0.5) );

1

Bước 4: Cuối cùng, tôi đang hoán đổi các mục

const shuffle = array => 
  [...Array(array.length)]
    .map((el, i) => Math.floor(Math.random() * i))
    .reduce( (a, rv, i) => ([a[i], a[rv]] = [a[rv], a[i]]) && a, array);
const result = document.querySelector("pre");
for (let i=0; i<100; i+=1)
  result.textContent +=
   JSON.stringify(shuffle([0,1,2,3,4,5,6,7,8,9])) + '\n';

2 và
const shuffle = array => [...Array(array.length)] .map((el, i) => Math.floor(Math.random() * i)) .reduce( (a, rv, i) => ([a[i], a[rv]] = [a[rv], a[i]]) && a, array); const result = document.querySelector("pre"); for (let i=0; i<100; i+=1) result.textContent += JSON.stringify(shuffle([0,1,2,3,4,5,6,7,8,9])) + '\n';
4 với nhau. Đặt mục được tạo ngẫu nhiên vào chỉ mục
<pre></pre>
9 và đặt mục hiện tại vào vòng lặp tại Index
const shuffle = array => [...Array(array.length)] .map((el, i) => Math.floor(Math.random() * i)) .reduce( (a, rv, i) => ([a[i], a[rv]] = [a[rv], a[i]]) && a, array); const result = document.querySelector("pre"); for (let i=0; i<100; i+=1) result.textContent += JSON.stringify(shuffle([0,1,2,3,4,5,6,7,8,9])) + '\n';
0. Finally, I am swapping items

const shuffle = array => 
  [...Array(array.length)]
    .map((el, i) => Math.floor(Math.random() * i))
    .reduce( (a, rv, i) => ([a[i], a[rv]] = [a[rv], a[i]]) && a, array);
const result = document.querySelector("pre");
for (let i=0; i<100; i+=1)
  result.textContent +=
   JSON.stringify(shuffle([0,1,2,3,4,5,6,7,8,9])) + '\n';

2 and

const shuffle = array => 
  [...Array(array.length)]
    .map((el, i) => Math.floor(Math.random() * i))
    .reduce( (a, rv, i) => ([a[i], a[rv]] = [a[rv], a[i]]) && a, array);
const result = document.querySelector("pre");
for (let i=0; i<100; i+=1)
  result.textContent +=
   JSON.stringify(shuffle([0,1,2,3,4,5,6,7,8,9])) + '\n';

4 with each other. Put randomly generated item at index

<pre></pre>

9 and put the current item in the loop at index

const shuffle = array => 
  [...Array(array.length)]
    .map((el, i) => Math.floor(Math.random() * i))
    .reduce( (a, rv, i) => ([a[i], a[rv]] = [a[rv], a[i]]) && a, array);
const result = document.querySelector("pre");
for (let i=0; i<100; i+=1)
  result.textContent +=
   JSON.stringify(shuffle([0,1,2,3,4,5,6,7,8,9])) + '\n';

0.

console.log( [
    { some: 1 },
    { some: 2 },
    { some: 3 },
    { some: 4 },
    { some: 5 },
    { some: 6 },
    { some: 7 },
  ]
  .sort( () => Math.random() - 0.5) );

2

Sau khi hoàn thành tất cả các bước này, tôi sẽ trả lại mảng xáo trộn từ chức năng sau khi hoàn thành vòng lặp

<pre></pre>

7.

Bây giờ bạn có thể sử dụng chức năng này để xáo trộn bất kỳ loại mảng JavaScript nào.

Tôi đã tạo ra một mảng các số. Nó không phải là một mảng số. Bạn cũng có thể sử dụng chuỗi hoặc đối tượng.

console.log( [
    { some: 1 },
    { some: 2 },
    { some: 3 },
    { some: 4 },
    { some: 5 },
    { some: 6 },
    { some: 7 },
  ]
  .sort( () => Math.random() - 0.5) );

3

Khi tôi vượt qua mảng trong hàm

<pre></pre>

6, nó sẽ trả về một mảng xáo trộn.

Cũng đọc: Chức năng Constructor JavaScript được giải thích với các ví dụ JavaScript Constructor Function Explained with Examples

Viết thuật toán Fisher-Yates với cú pháp JavaScript ES6

Bạn có thể thực hiện thuật toán shuffle

const shuffle = array => 
  [...Array(array.length)]
    .map((el, i) => Math.floor(Math.random() * i))
    .reduce( (a, rv, i) => ([a[i], a[rv]] = [a[rv], a[i]]) && a, array);
const result = document.querySelector("pre");
for (let i=0; i<100; i+=1)
  result.textContent +=
   JSON.stringify(shuffle([0,1,2,3,4,5,6,7,8,9])) + '\n';

9 với cú pháp JavaScript ES6 nếu bạn muốn mà không cần sử dụng vòng lặp

<pre></pre>

7.

console.log( [
    { some: 1 },
    { some: 2 },
    { some: 3 },
    { some: 4 },
    { some: 5 },
    { some: 6 },
    { some: 7 },
  ]
  .sort( () => Math.random() - 0.5) );

4

Trong ví dụ này, tôi đang sử dụng cú pháp ES6. Với phương pháp

<pre></pre>

1, tôi đang đảo ngược mảng. Sau đó, tôi lặp qua mảng đảo ngược bằng phương pháp

<pre></pre>

2.

Bên trong chức năng gọi lại, chúng tôi tự động nhận mục mảng hiện tại và chỉ mục của nó. Vì vậy, bạn chỉ cần tạo một chỉ mục ngẫu nhiên để chọn một mục khác từ mảng.

Sau khi chọn ngẫu nhiên mục thứ hai, bạn có thể trao đổi chúng bằng toán tử lan truyền mảng trong JavaScript.

console.log( [
    { some: 1 },
    { some: 2 },
    { some: 3 },
    { some: 4 },
    { some: 5 },
    { some: 6 },
    { some: 7 },
  ]
  .sort( () => Math.random() - 0.5) );

5

Khi bạn gọi hàm

<pre></pre>

3 với một mảng, nó cũng sẽ trả về một mảng xáo trộn. Bây giờ bạn muốn sử dụng cú pháp nào trong ứng dụng của mình.

Shuffle một mảng javascript bằng phương thức sort ()

Nếu bạn muốn một cách đơn giản để tổ chức lại mảng JavaScript của mình mà không cần sử dụng thuật toán Fisher-Yates, bạn có thể sử dụng phương pháp JavaScript

<pre></pre>

4 tích hợp.

console.log( [
    { some: 1 },
    { some: 2 },
    { some: 3 },
    { some: 4 },
    { some: 5 },
    { some: 6 },
    { some: 7 },
  ]
  .sort( () => Math.random() - 0.5) );

6

Tôi cũng đang tạo chức năng

<pre></pre>

6 chấp nhận một mảng trong đối số của nó. Tôi sẽ áp dụng phương thức

<pre></pre>

4 cho mảng này để chọn ngẫu nhiên nó.

Phương thức này có chức năng gọi lại. Và bạn phải trả về một số dương hoặc số âm từ hàm gọi lại đó.

Phương thức

<pre></pre>

4 hoán đổi một mục với mục tiếp theo trong một mảng tùy thuộc vào giá trị được trả về từ chức năng gọi lại của nó.

Để trả về một số, tôi đang tạo một số ngẫu nhiên trong khoảng từ 0 đến 1 bằng phương thức

<pre></pre>

5.

Sau đó, tôi trừ đi số ngẫu nhiên đó từ 0,5 và trả lại từ hàm gọi lại. Theo cách này, bạn có thể tạo ngẫu nhiên tạo số dương hoặc số âm mỗi lần.

Nếu phương thức

<pre></pre>

5 tạo số lớn hơn 0,5 thì hàm gọi lại sẽ trả về số âm. Nếu nó tạo ra một số nhỏ hơn 0,5 thì hàm gọi lại sẽ trả về số dương.

Ví dụ: nếu phương pháp

<pre></pre>

5 cho 0,75 và sau khi trừ nó từ 0,5, bạn sẽ nhận được -0,25, đó là số âm. if the

<pre></pre>

5 method gives 0.75 and after subtracting it from 0.5 you will get -0.25 which is a negative number.

Mặt khác, nếu phương pháp

<pre></pre>

5 cho 0,3 và sau khi trừ nếu từ 0,5, bạn sẽ nhận được 0,2 là số dương.

console.log( [
    { some: 1 },
    { some: 2 },
    { some: 3 },
    { some: 4 },
    { some: 5 },
    { some: 6 },
    { some: 7 },
  ]
  .sort( () => Math.random() - 0.5) );

7

Thuật toán Fisher-Yates vs Array.Sort () Phương thức

Ngay cả khi cả hai phương pháp có thể xáo trộn một mảng trong JavaScript, thuật toán Fisher-Yates có thể trộn lẫn một mảng hiệu quả hơn phương pháp

<pre></pre>

4.

Bởi vì phương pháp

<pre></pre>

2 chỉ hoán đổi 2 mặt hàng cạnh nhau trong một mảng. Mặt khác, thuật toán Fisher-Yates có thể trao đổi một mục với bất kỳ mục nào khác trong mảng.

Đó là lý do tại sao thuật toán này có thể trả về một mảng xáo trộn hơn so với phương thức

<pre></pre>

2 trong JavaScript.

console.log( [
    { some: 1 },
    { some: 2 },
    { some: 3 },
    { some: 4 },
    { some: 5 },
    { some: 6 },
    { some: 7 },
  ]
  .sort( () => Math.random() - 0.5) );

8

Sau khi chạy cả hai phương pháp một vài lần, chúng ta có thể thấy sự khác biệt. Thuật toán Fisher-Yates đang trả lại một mảng xáo trộn hơn mỗi lần.

Nếu bạn muốn một cách đơn giản để sắp xếp lại mảng JavaScript của bạn và bạn không cần một mảng xáo trộn hơn thì bạn có thể sử dụng phương thức

<pre></pre>

4 hoặc

const array = [
    { some: 1 },
    { some: 2 },
    { some: 3 },
    { some: 4 },
    { some: 5 },
    { some: 6 },
    { some: 7 },
  ];
console.log(_.shuffle(array));

6.

Nhưng nếu bạn cần một mảng ngẫu nhiên hơn mỗi lần thì hãy đi với thuật toán Shuffle Fisher-Yates để trộn mảng JavaScript của bạn.

Cũng đọc: Hướng dẫn tốt nhất về Nhập động trong JavaScript để nhập các mô -đun Best Guide on Dynamic Import in JavaScript for Importing Modules

Shuffle một mảng trong javascript mà không thay đổi mảng gốc

Nếu chúng ta xem xét cả hai phương pháp được hiển thị trong các phần trước cho thuật toán Fisher-Yates và

const array = [
    { some: 1 },
    { some: 2 },
    { some: 3 },
    { some: 4 },
    { some: 5 },
    { some: 6 },
    { some: 7 },
  ];
console.log(_.shuffle(array));

7), bạn sẽ thấy cả hai đều sửa đổi mảng gốc.

console.log( [
    { some: 1 },
    { some: 2 },
    { some: 3 },
    { some: 4 },
    { some: 5 },
    { some: 6 },
    { some: 7 },
  ]
  .sort( () => Math.random() - 0.5) );

9

Trong ví dụ này, chúng ta có thể xem nếu chúng ta gọi phương thức

<pre></pre>

3, nó sẽ trả về một mảng xáo trộn. Nhưng sau đó, nó cũng thay đổi mảng ban đầu. we can see if we call the

<pre></pre>

3 method, it returns a shuffled array. But after that, it also changes the original array.

Điều tương tự cũng xảy ra với phương pháp

<pre></pre>

2. Nếu bạn không muốn hành vi này, bạn có thể dễ dàng thay đổi nó bằng cách chỉ thêm một dòng mã.

Solution:

const result = document.querySelector("pre");
for (let i=0; i<20; i+=1) {
  result.textContent += 
    JSON.stringify(shuffleFisherYates([0,1,2,3,4,5,6,7,8,9])) + '\n';
}

function shuffleFisherYates(array) {
  let i = array.length;
  while (i--) {
    const ri = Math.floor(Math.random() * i);
    [array[i], array[ri]] = [array[ri], array[i]];
  }
  return array;
}

0

Để giữ cho mảng ban đầu không thay đổi, bạn phải tạo một bản sao mới của mảng bằng toán tử lây lan trong JavaScript.

Bên trong hàm

<pre></pre>

3, tôi đang tạo một bản sao của mảng gốc và lưu trữ nó trong biến

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>

1.

Thay vì sử dụng mảng gốc, bạn phải sử dụng mảng sao chép để xáo trộn. Cuối cùng, bạn sẽ trả lại mảng sao chép từ chức năng.

const result = document.querySelector("pre");
for (let i=0; i<20; i+=1) {
  result.textContent += 
    JSON.stringify(shuffleFisherYates([0,1,2,3,4,5,6,7,8,9])) + '\n';
}

function shuffleFisherYates(array) {
  let i = array.length;
  while (i--) {
    const ri = Math.floor(Math.random() * i);
    [array[i], array[ri]] = [array[ri], array[i]];
  }
  return array;
}

1

Bạn có thể làm tương tự với phương pháp

<pre></pre>

2. Lần này nó sẽ trả lại một mảng xáo trộn mà không cần sửa đổi mảng gốc.

Shuffle một mảng trong javascript với phương thức map ()

Bạn có thể chọn ngẫu nhiên một mảng JavaScript bằng phương pháp

const array = [
    { some: 1 },
    { some: 2 },
    { some: 3 },
    { some: 4 },
    { some: 5 },
    { some: 6 },
    { some: 7 },
  ];
console.log(_.shuffle(array));

6. Trong kỹ thuật này, chúng ta cần sử dụng cả hai phương pháp

const array = [
    { some: 1 },
    { some: 2 },
    { some: 3 },
    { some: 4 },
    { some: 5 },
    { some: 6 },
    { some: 7 },
  ];
console.log(_.shuffle(array));

6 và

<pre></pre>

4 cùng nhau.

Hãy xem nó được thực hiện như thế nào.

const result = document.querySelector("pre");
for (let i=0; i<20; i+=1) {
  result.textContent += 
    JSON.stringify(shuffleFisherYates([0,1,2,3,4,5,6,7,8,9])) + '\n';
}

function shuffleFisherYates(array) {
  let i = array.length;
  while (i--) {
    const ri = Math.floor(Math.random() * i);
    [array[i], array[ri]] = [array[ri], array[i]];
  }
  return array;
}

2

Tổng cộng 3 bước được yêu cầu để hoàn thành quá trình này. Các bước này là:

1. Tạo một mảng các đối tượng: Phương thức

const array = [
    { some: 1 },
    { some: 2 },
    { some: 3 },
    { some: 4 },
    { some: 5 },
    { some: 6 },
    { some: 7 },
  ];
console.log(_.shuffle(array));

6 đầu tiên sẽ lặp qua mảng và sẽ trả về một mảng đối tượng mới. Bên trong mảng này, mỗi đối tượng sẽ có 2 thuộc tính,
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
7 và
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
8.The first

const array = [
    { some: 1 },
    { some: 2 },
    { some: 3 },
    { some: 4 },
    { some: 5 },
    { some: 6 },
    { some: 7 },
  ];
console.log(_.shuffle(array));

6 method will loop over the array and will return a new array of objects. Inside this array, each object will have 2 properties,

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>

7 and

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>

8.

Thuộc tính

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>

7 chứa một số ngẫu nhiên trong khoảng từ 0 đến 1 được tạo bằng phương pháp

<pre></pre>

5. Thuộc tính

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>

8 chứa mục thực tế từ mảng gốc.

2. Xáo trộn mảng các đối tượng: Phương thức

<pre></pre>

4 sẽ xáo trộn mảng các đối tượng được tạo bởi phương thức
const array = [ { some: 1 }, { some: 2 }, { some: 3 }, { some: 4 }, { some: 5 }, { some: 6 }, { some: 7 }, ]; console.log(_.shuffle(array));
6 trước đó theo giá trị được trả về từ hàm gọi lại. The

<pre></pre>

4 method will shuffle the array of objects generated by the previous

const array = [
    { some: 1 },
    { some: 2 },
    { some: 3 },
    { some: 4 },
    { some: 5 },
    { some: 6 },
    { some: 7 },
  ];
console.log(_.shuffle(array));

6 method according to the returned value from the callback function.

Nó sẽ trả về một giá trị dương hoặc một giá trị âm bằng cách trừ 2 thuộc tính

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>

7 từ 2 đối tượng. Vì số trong thuộc tính sắp xếp được tạo ngẫu nhiên, việc trừ đi cũng sẽ trả về một số dương hoặc số âm một cách ngẫu nhiên.

3. Nhận mảng gốc từ mảng các đối tượng: Phương thức

const array = [
    { some: 1 },
    { some: 2 },
    { some: 3 },
    { some: 4 },
    { some: 5 },
    { some: 6 },
    { some: 7 },
  ];
console.log(_.shuffle(array));

6 thứ hai sẽ lặp qua mảng đối tượng xáo trộn và sẽ trả về một mảng mới với các thuộc tính giá trị. Nó sẽ loại bỏ thuộc tính
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
7. The second

const array = [
    { some: 1 },
    { some: 2 },
    { some: 3 },
    { some: 4 },
    { some: 5 },
    { some: 6 },
    { some: 7 },
  ];
console.log(_.shuffle(array));

6 method will loop over the shuffled array of objects and will return a new array with the value properties. It will remove the

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>

7 property.

Do đó, mảng mới sẽ chỉ chứa các mục của mảng gốc nhưng theo thứ tự ngẫu nhiên.

const result = document.querySelector("pre");
for (let i=0; i<20; i+=1) {
  result.textContent += 
    JSON.stringify(shuffleFisherYates([0,1,2,3,4,5,6,7,8,9])) + '\n';
}

function shuffleFisherYates(array) {
  let i = array.length;
  while (i--) {
    const ri = Math.floor(Math.random() * i);
    [array[i], array[ri]] = [array[ri], array[i]];
  }
  return array;
}

3

Khi tôi gọi hàm

<pre></pre>

6 với một mảng, nó sẽ trả về một mảng xáo trộn. Nhưng nếu bạn nhận thấy, mảng ban đầu không thay đổi lần này.

Bởi vì phương thức

const array = [
    { some: 1 },
    { some: 2 },
    { some: 3 },
    { some: 4 },
    { some: 5 },
    { some: 6 },
    { some: 7 },
  ];
console.log(_.shuffle(array));

6 luôn trả về một mảng mới. Khi phương thức

const array = [
    { some: 1 },
    { some: 2 },
    { some: 3 },
    { some: 4 },
    { some: 5 },
    { some: 6 },
    { some: 7 },
  ];
console.log(_.shuffle(array));

6 đầu tiên được gọi, nó đã trả lại một mảng mới và sau đó phương thức

<pre></pre>

4 đã xáo trộn mảng mới đó, không phải là phương thức gốc.

Do đó, kỹ thuật này theo mặc định không sửa đổi mảng gốc.

Cũng đọc: Input vs Change vs Blur vs Focus - Sự khác biệt của các sự kiện JavaScript Input VS Change VS Blur VS Focus - Differences of JavaScript Events

Cách xáo trộn một mảng các đối tượng trong JavaScript

Tất cả các kỹ thuật, tôi đã chỉ ra trước đây sẽ xáo trộn bất kỳ loại mảng javascript nào. Mảng có thể chứa số, chuỗi, đối tượng hoặc bất kỳ loại nào khác. Không quan trọng.

Vì vậy, bạn không phải làm bất cứ điều gì để xáo trộn một mảng các đối tượng. Chuyển một mảng các đối tượng cho các chức năng đó và chúng sẽ xáo trộn mảng của bạn.

const result = document.querySelector("pre");
for (let i=0; i<20; i+=1) {
  result.textContent += 
    JSON.stringify(shuffleFisherYates([0,1,2,3,4,5,6,7,8,9])) + '\n';
}

function shuffleFisherYates(array) {
  let i = array.length;
  while (i--) {
    const ri = Math.floor(Math.random() * i);
    [array[i], array[ri]] = [array[ri], array[i]];
  }
  return array;
}

4

Output:

const result = document.querySelector("pre");
for (let i=0; i<20; i+=1) {
  result.textContent += 
    JSON.stringify(shuffleFisherYates([0,1,2,3,4,5,6,7,8,9])) + '\n';
}

function shuffleFisherYates(array) {
  let i = array.length;
  while (i--) {
    const ri = Math.floor(Math.random() * i);
    [array[i], array[ri]] = [array[ri], array[i]];
  }
  return array;
}

5

Trong ví dụ này, tôi đang sử dụng thuật toán Fisher-Yates. Nhưng các phương thức

<pre></pre>

2 và
<pre></pre>
3 cũng sẽ xáo trộn các đối tượng mảng., I am using the Fisher-Yates algorithm. But the

<pre></pre>

2 and

<pre></pre>

3 methods will also shuffle array objects.

Shuffle một mảng javascript với thư viện bên ngoài

Bạn có thể sử dụng thư viện NPM bên ngoài như Lo-Dash để xáo trộn một mảng. Thư viện này có một chức năng sẽ trực tiếp ngẫu nhiên mảng của bạn mà không cần viết bất kỳ thuật toán nào.

Chạy lệnh sau để khởi tạo dự án Node.js.

const result = document.querySelector("pre");
for (let i=0; i<20; i+=1) {
  result.textContent += 
    JSON.stringify(shuffleFisherYates([0,1,2,3,4,5,6,7,8,9])) + '\n';
}

function shuffleFisherYates(array) {
  let i = array.length;
  while (i--) {
    const ri = Math.floor(Math.random() * i);
    [array[i], array[ri]] = [array[ri], array[i]];
  }
  return array;
}

6

Nó sẽ tạo một tệp

          const shuffle = (array) => {
    for (let i = array.length - 1; i > 0; i--) {
        // step 2
        // step 3
        // step 4
    }
};

3 trong root của thư mục dự án của bạn. Tệp này sẽ liệt kê tất cả các gói đã cài đặt trong dự án của bạn.

Cũng đọc: Thiết lập tốt nhất để sử dụng TypeScript với Node.js và Express Project Best Setup to Use TypeScript with Node.js and Express Project

Bây giờ, hãy cài đặt thư viện

          const shuffle = (array) => {
    for (let i = array.length - 1; i > 0; i--) {
        // step 2
        // step 3
        // step 4
    }
};

4 với lệnh sau:

const result = document.querySelector("pre");
for (let i=0; i<20; i+=1) {
  result.textContent += 
    JSON.stringify(shuffleFisherYates([0,1,2,3,4,5,6,7,8,9])) + '\n';
}

function shuffleFisherYates(array) {
  let i = array.length;
  while (i--) {
    const ri = Math.floor(Math.random() * i);
    [array[i], array[ri]] = [array[ri], array[i]];
  }
  return array;
}

7

Thư viện này cung cấp chức năng

<pre></pre>

6 để xáo trộn một mảng trong JavaScript. Bạn chỉ cần nhập và gọi nó bằng một mảng.

Hàm này sử dụng thuật toán Shuffle Fisher-Yates dưới mui xe.

const result = document.querySelector("pre");
for (let i=0; i<20; i+=1) {
  result.textContent += 
    JSON.stringify(shuffleFisherYates([0,1,2,3,4,5,6,7,8,9])) + '\n';
}

function shuffleFisherYates(array) {
  let i = array.length;
  while (i--) {
    const ri = Math.floor(Math.random() * i);
    [array[i], array[ri]] = [array[ri], array[i]];
  }
  return array;
}

8

Hàm này không sửa đổi mảng ban đầu. Nó cũng có thể xáo trộn một mảng các đối tượng.

const result = document.querySelector("pre");
for (let i=0; i<20; i+=1) {
  result.textContent += 
    JSON.stringify(shuffleFisherYates([0,1,2,3,4,5,6,7,8,9])) + '\n';
}

function shuffleFisherYates(array) {
  let i = array.length;
  while (i--) {
    const ri = Math.floor(Math.random() * i);
    [array[i], array[ri]] = [array[ri], array[i]];
  }
  return array;
}

9

Output:

<pre></pre>

0

Sự kết luận

Có nhiều cách để xáo trộn một mảng JavaScript. Chỉ cho mục đích này, việc cài đặt thư viện không phải là một ý tưởng tốt. Bởi vì các thư viện bên ngoài như Lo-Dash chứa nhiều chức năng.multiple ways to shuffle a JavaScript array. Just for this one purpose installing a library is not a good idea. Because external libraries like Lo-Dash contain many many functions.

Vì vậy, kích thước của chúng cũng trở nên lớn. Nếu bạn cần các tính năng khác mà các thư viện này cung cấp thì thật tốt khi sử dụng chúng. Bởi vì nó sẽ giúp bạn tiết kiệm rất nhiều thời gian.

Nếu không, bạn có thể viết chức năng của riêng bạn một cách dễ dàng sẽ ngẫu nhiên cho mảng của bạn. Theo cách này, ứng dụng của bạn sẽ có mã không cần thiết hơn.write your own function easily that will randomize your array. In this way, your application will have less unnecessary code.

Đó là lý do tại sao trong bài viết này, tôi đã cho bạn thấy các kỹ thuật được sử dụng nhiều nhất để xáo trộn một mảng JavaScript.

Làm thế nào để bạn xáo trộn một mảng các đối tượng?

Chúng ta có thể tạo một danh sách từ mảng và sau đó sử dụng phương thức class shuffle () để xáo trộn các yếu tố của nó. Sau đó chuyển đổi danh sách thành mảng ban đầu. Đầu ra: [1, 7, 5, 2, 3, 6, 4] Lưu ý rằng các mảng. aslist () chỉ hoạt động với một mảng các đối tượng.create a list from the array and then use the Collections class shuffle() method to shuffle its elements. Then convert the list to the original array. Output: [1, 7, 5, 2, 3, 6, 4] Note that the Arrays. asList() works with an array of objects only.

Làm thế nào để bạn ngẫu nhiên một mảng trong javascript?

Viết chức năng xáo trộn (mảng) mà xáo trộn (sắp xếp lại ngẫu nhiên) các phần tử của mảng. Nhiều lần chạy xáo trộn có thể dẫn đến các đơn đặt hàng khác nhau của các yếu tố. Ví dụ: LET ARR = [1, 2, 3]; Shuffle (mảng); // mảng = [3, 2, 1] shuffle (mảng); // mảng = [2, 1, 3] shuffle (mảng); // mảng = [3, 1, 2] // .... Multiple runs of shuffle may lead to different orders of elements. For instance: let arr = [1, 2, 3]; shuffle(arr); // arr = [3, 2, 1] shuffle(arr); // arr = [2, 1, 3] shuffle(arr); // arr = [3, 1, 2] // ...

Làm thế nào để bạn xáo trộn một đối tượng trong JavaScript?

Cách đầu tiên và đơn giản nhất để xáo trộn một mảng trong JavaScript là cung cấp một hàm tùy chỉnh cho một .sort ().const mảng = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];const shuffledArray = mảng.Sắp xếp ((a, b) => 0,5 - toán học.provide a custom function to a . sort() . const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; const shuffledArray = array. sort((a, b) => 0.5 - Math.

Có một phương pháp xáo trộn trong JavaScript?

Trái ngược với các ngôn ngữ như Ruby và PHP, JavaScript không có phương pháp tích hợp để xáo trộn mảng.JavaScript does not have an built-in method of shuffling the array.