首頁(yè) 猿問 ReactJS 隨機(jī)映射數(shù)組

ReactJS 隨機(jī)映射數(shù)組

JavaScript

慕運(yùn)維8079593 2023-08-10 15:32:13

我一直在嘗試以隨機(jī)方式映射數(shù)組。我希望數(shù)組的每個(gè)對(duì)象都顯示出來。但刷新時(shí)的順序應(yīng)該始終不同且隨機(jī)。const [ list ] = [ {id: 0, img: "img", key: 0, class: "wrap", classFlip: "wrap card-flip", match: false}, {id: 1, img: "img", key: 0, class: "wrap", classFlip: "wrap card-flip", match: false}, {id: 2, img: "img", key: 2, class: "wrap", classFlip: "wrap card-flip", match: false}, {id: 3, img: "img", key: 2, class: "wrap", classFlip: "wrap card-flip", match: false}, {id: 4, img: "img", key: 3, class: "wrap", classFlip: "wrap card-flip", match: false}, {id: 5, img: "img", key: 3, class: "wrap", classFlip: "wrap card-flip", match: false}, {id: 6, img: "img", key: 4, class: "wrap", classFlip: "wrap card-flip", match: false}, {id: 7, img: "img", key: 4, class: "wrap", classFlip: "wrap card-flip", match: false}, {id: 8, img: "img", key: 5, class: "wrap", classFlip: "wrap card-flip", match: false}, {id: 9, img: "img", key: 5, class: "wrap", classFlip: "wrap card-flip", match: false} ]; {list.map((item) => (...

查看完整描述

3 回答

慕勒3428872

TA貢獻(xiàn)1848條經(jīng)驗(yàn) 獲得超6個(gè)贊

我認(rèn)為對(duì)數(shù)組進(jìn)行洗牌會(huì)更有用。并且您還應(yīng)該更改常量的定義。

你可以嘗試這樣的事情：

const shuffle = arr => [...arr].sort(() => Math.random() - 0.5);

const list = [

{id: 0, img: "img", key: 0, class: "wrap", classFlip: "wrap card-flip", match: false},

{id: 1, img: "img", key: 0, class: "wrap", classFlip: "wrap card-flip", match: false},

{id: 2, img: "img", key: 2, class: "wrap", classFlip: "wrap card-flip", match: false},

{id: 3, img: "img", key: 2, class: "wrap", classFlip: "wrap card-flip", match: false},

{id: 4, img: "img", key: 3, class: "wrap", classFlip: "wrap card-flip", match: false},

{id: 5, img: "img", key: 3, class: "wrap", classFlip: "wrap card-flip", match: false},

{id: 6, img: "img", key: 4, class: "wrap", classFlip: "wrap card-flip", match: false},

{id: 7, img: "img", key: 4, class: "wrap", classFlip: "wrap card-flip", match: false},

{id: 8, img: "img", key: 5, class: "wrap", classFlip: "wrap card-flip", match: false},

{id: 9, img: "img", key: 5, class: "wrap", classFlip: "wrap card-flip", match: false}

];

const newList = shuffle(list);

console.log(newList);

反對(duì) 回復(fù) 2023-08-10

有只小跳蛙

TA貢獻(xiàn)1824條經(jīng)驗(yàn) 獲得超8個(gè)贊

這是一個(gè)具有不可變數(shù)據(jù)范例的純函數(shù)：

const shuffleArray = (arr) => {

// leave arr as it is (immutable data in react)

const copy = [...arr];

// our output array

const output = [];

// while there are items

while (copy.length > 0) {

// removes 1 random element from copy and adds it to output;

output.push(copy.splice(Math.floor(Math.random() * copy.length), 1));

}

// return our random array

return output;

};

反對(duì) 回復(fù) 2023-08-10

慕沐林林

TA貢獻(xiàn)2016條經(jīng)驗(yàn) 獲得超9個(gè)贊

您應(yīng)該構(gòu)建一個(gè)函數(shù)來隨機(jī)洗牌項(xiàng)目。嘗試下面。