一、隨機換一換指定數(shù)量元素不重復(fù)
// 定義一個包含所有可能選項的數(shù)組
const options = ['選項1', '選項2', '選項3', '選項4', '選項5', '選項6', '選項7', '選項8', '選項9', '選項10'];
// 指定要隨機選擇的元素數(shù)量
const numberOfElementsToSelect = 3;
// 定義一個函數(shù)，用于從數(shù)組中隨機選擇指定數(shù)量的元素
function getRandomElements(array, count) {
? ? // 創(chuàng)建一個結(jié)果數(shù)組，用于存儲隨機選擇的元素
? ? const result = [];
? ? // 如果要選擇的元素數(shù)量大于數(shù)組長度，則拋出錯誤
? ? if (count > array.length) {
? ? ? ? throw new Error('選擇的元素數(shù)量不能大于數(shù)組長度');
? ? }
? ? // 使用while循環(huán)，直到結(jié)果數(shù)組達到指定長度
? ? while (result.length < count) {
? ? ? ? // 生成一個隨機索引
? ? ? ? const randomIndex = Math.floor(Math.random() * array.length);
? ? ? ? // 如果隨機選擇的元素尚未在結(jié)果數(shù)組中，則將其添加到結(jié)果數(shù)組中
? ? ? ? if (!result.includes(array[randomIndex])) {
? ? ? ? ? ? result.push(array[randomIndex]);
????????}
? ? }
? ? // 返回結(jié)果數(shù)組
? ? return result;
}
// 調(diào)用函數(shù)并輸出結(jié)果
try {
? ? const randomElements = getRandomElements(options, numberOfElementsToSelect);
? ? console.log('隨機選擇的元素:', randomElements);
} catch (error) {
? ? console.error(error.message);
}
二、按順序換一換，指定個數(shù)，末尾不補齊，有幾個展示幾個，再從頭開始換一換
// 定義一個函數(shù)來更新顯示的內(nèi)容
let updateDisplay = (list, n) => {
? ? console.log('list---', list, n);
? ? // 計算要顯示的三個元素的索引范圍
? ? let startIndex = currentIndex;
? ? let endIndex = startIndex + n;
? ? let displayElements = [];
? ? let tmpArr = [];
? ? if (endIndex > list.length) {
? ? ? ? displayElements =? list.slice(startIndex, list.length);
? ? ? ? currentIndex = 0;
? ? }else {
? ? ? ? displayElements =? list.slice(startIndex, endIndex);
? ? ? ? // 更新當(dāng)前索引
? ? ? ? currentIndex = endIndex;
? ? }
? ? console.log(tmpArr, displayElements);
? ? // 更新顯示內(nèi)容
? ? displayElement.innerHTML = displayElements.join(", ");
};
let currentIndex = 0;
// 定義一個數(shù)組，包含要展示的元素
let elements = ["元素1", "元素2", "元素3", "元素4", "元素5", "元素6", "元素7", "元素8"];
// 獲取顯示元素的容器和按鈕元素
let displayElement = document.getElementById("display");
// 初始化顯示內(nèi)容
updateDisplay(elements, 3);
三、按順序換一換，當(dāng)前索引超出數(shù)組長度，會從頭開始補齊數(shù)量進行換一換
示例1——
HTML
<div class="container">
? ? <div id="display">
? ? <button id="changeButton" onclick="updateDisplay(elements, 4)">換一換
</div>
JS
// 定義一個函數(shù)來更新顯示的內(nèi)容
let updateDisplay = (list, n) => {
? ? console.log('list---', list, n);
? ? // 計算要顯示的三個元素的索引范圍
? ? let startIndex = currentIndex;
? ? let endIndex = startIndex + n;
? ? let displayElements = [];
? ? let tmpArr = [];
? ? if (endIndex > list.length) {
? ? ? ? tmpArr = list.slice(0, (endIndex - list.length));
? ? ? ? displayElements = list.slice(startIndex, list.length);
? ? ? ? displayElements = displayElements.concat(tmpArr);
? ? ? ? currentIndex = endIndex - list.length;
? ? }else {
? ? ? ? displayElements =? list.slice(startIndex, endIndex);
? ? ? ? // 更新當(dāng)前索引
? ? ? ? currentIndex = endIndex;
? ? }
? ? console.log(tmpArr, displayElements);
? ? // 更新顯示內(nèi)容
? ? displayElement.innerHTML = displayElements.join(", ");
};
let currentIndex = 0;
// 定義一個數(shù)組，包含要展示的元素
let elements = ["元素1", "元素2", "元素3", "元素4", "元素5"];
// 獲取顯示元素的容器和按鈕元素
let displayElement = document.getElementById("display");
// 初始化顯示內(nèi)容
updateDisplay(elements, 4);
示例2——
// 定義一個包含所有可能選項的數(shù)組
const options = ['選項1', '選項2', '選項3', '選項4', '選項5'];
// 指定要展示的元素數(shù)量
const displayCount = 3;
// 當(dāng)前展示的元素的索引（從0開始）
let currentIndex = 0;
// 定義一個函數(shù)，用于按順序展示指定數(shù)量的元素
function displayElementsInOrder(array, count, startIndex) {
? ? // 創(chuàng)建一個空數(shù)組來存儲當(dāng)前要展示的元素
? ? const displayedElements = [];
? ? // 使用for循環(huán)來按順序添加元素到展示的數(shù)組中
? ? for (let i = 0; i < count; i++) {
? ? ? ? // 計算當(dāng)前要添加的元素的索引（考慮循環(huán)）
? ? ? ? const elementIndex = (startIndex + i) % array.length;
? ? ? ? // 將元素添加到展示的數(shù)組中
? ? ? ? displayedElements.push(array[elementIndex]);
? ? }
? ? // 返回當(dāng)前要展示的元素數(shù)組
? ? return displayedElements;
}
// 定義一個函數(shù)，用于按順序換一換并輸出新的元素
function changeElements() {
? ? // 計算下一個要展示的元素的起始索引
? ? currentIndex = (currentIndex + displayCount) % options.length;
? ? // 獲取當(dāng)前要展示的元素數(shù)組
? ? const currentElements = displayElementsInOrder(options, displayCount, currentIndex);
? ? // 輸出當(dāng)前展示的元素（這里只是打印到控制臺，你可以根據(jù)需要修改）
? ? console.log('當(dāng)前展示的元素:', currentElements);
}
// 初始調(diào)用以展示第一批元素
const initialElements = displayElementsInOrder(options, displayCount, currentIndex);
console.log('初始展示的元素:', initialElements);
// 模擬換一換的操作（這里只是連續(xù)調(diào)用幾次來展示效果）
changeElements(); // 第二次展示
changeElements(); // 第三次展示
changeElements(); // 第四次展示（會從頭開始）
示例3——
const pageInfo = reactive({
????????movieList: [
? ? ? ? ? ? ? ? { name: '1', url: 'https://movie.douban.com/subject/1292052/', rate: 9.6 },
? ? ? ? ? ? ? ? { name: '2', url: 'https://movie.douban.com/subject/1295644/', rate: 9.4 },
? ? ? ? ? ? ? ? { name: '3', url: 'https://movie.douban.com/subject/1291546/', rate: 9.5 },
? ? ? ? ? ? ? ? { name: '4', url: 'https://movie.douban.com/subject/1292720/', rate: 9.4 },
? ? ? ? ? ? ? ? { name: '5', url: 'https://movie.douban.com/subject/1292063/', rate: 9.5 },
? ? ? ? ? ? ? ? { name: '6', url: 'https://movie.douban.com/subject/1291561/', rate: 9.2 },
? ? ? ? ? ? ? ? { name: '7', url: 'https://movie.douban.com/subject/1295124/', rate: 9.4 },
? ? ? ? ? ? ? ? { name: '8', url: 'https://movie.douban.com/subject/1292001/', rate: 9.2 },
? ? ? ? ? ? ? ? { name: '9', url: 'https://movie.douban.com/subject/2131459/', rate: 9.3 },
? ? ? ? ? ? ? ? { name: '10', url: 'https://movie.douban.com/subject/3541415/', rate: 9.2 },
? ? ? ? ? ? ? ? { name: '11', url: 'https://movie.douban.com/subject/3541415/', rate: 9.2 },
? ? ? ? ? ? ? ? { name: '12', url: 'https://movie.douban.com/subject/3541415/', rate: 9.2 }
? ? ? ? ? ?],
? ? ? ? ? ?randomMovieList: [],
? ? ? ? ? ?currentIndex: 0 // 新增一個變量來跟蹤當(dāng)前索引
})
const changeLimit =()=> {
? ? ? ? ? ? const num = 10; // 每次取的數(shù)量
? ? ? ? ? ? const temp_array = pageInfo.movieList.slice(); // 復(fù)制一份電影列表
? ? ? ? ? ? const return_array = [];
? ? ? ? ? ? for (let i = 0; i < num; i++) {
? ? ? ? ? ? ? ? if (pageInfo.currentIndex >= temp_array.length) {
? ? ? ? ? ? ? ? ? ????pageInfo.currentIndex = 0; // 如果索引超出范圍，重置為0
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? return_array.push(temp_array[pageInfo.currentIndex]);
? ? ? ? ? ? ? ? pageInfo.currentIndex++;
? ? ? ? ? ? }
? ? ? ? ? ? pageInfo.randomMovieList = return_array;
? ? ? ? ? ? console.log(pageInfo.randomMovieList,'randomMovieList')
?}
示例四——
// 定義一個包含所有可能選項的數(shù)組
const options = ['選項1', '選項2', '選項3', '選項4', '選項5'];
// 指定要展示的元素數(shù)量（不補齊）
const displayCount = 3;
// 當(dāng)前展示的元素的起始索引（從0開始）
let startIndex = 0;
// 定義一個函數(shù)，用于按順序獲取指定數(shù)量的元素（不補齊）
function getNextElements(array, count, currentIndex) {
? ? const result = [];
? ? let currentIndexCopy = currentIndex; // 避免直接修改傳入的參數(shù)
? ? for (let i = 0; i < count; i++) {
? ? ? ? // 計算當(dāng)前索引（考慮循環(huán)）
? ? ? ? const elementIndex = currentIndexCopy % array.length;
? ? ? ? // 如果索引在數(shù)組范圍內(nèi)，則添加元素到結(jié)果數(shù)組
? ? ? ? if (elementIndex < array.length) {
? ? ? ? ? ? result.push(array[elementIndex]);
? ? ? ? }
? ? ? ? // 注意：這里我們不需要檢查數(shù)組長度是否足夠，因為題目要求不補齊
? ? ? ? // 更新索引以獲取下一個元素
? ? ? ? currentIndexCopy++;
? ? }
? ? // 返回結(jié)果數(shù)組和新的起始索引（用于下一次調(diào)用）
? ? // 但在這個例子中，我們只需要結(jié)果數(shù)組，因為新的起始索引可以通過結(jié)果數(shù)組長度和當(dāng)前索引計算出來
? ? return result;
}
// 但由于我們不需要每次都重新計算起始索引，我們可以簡化調(diào)用過程：
function displayNextElements() {
? ? // 獲取下一批元素
? ? const nextElements = getNextElements(options, displayCount, startIndex);
? ? // 更新起始索引（為了下一次調(diào)用，但在這個簡化例子中我們沒有直接用到它）
? ? // startIndex = (startIndex + displayCount) % options.length; // 這行其實可以省略，因為我們只關(guān)心當(dāng)前批次的元素
? ? // 輸出當(dāng)前展示的元素（這里只是打印到控制臺，你可以根據(jù)需要修改）
? ? console.log('當(dāng)前展示的元素:', nextElements);
? ? // 如果需要的話，可以在這里更新UI或執(zhí)行其他操作
}
// 初始調(diào)用以展示第一批元素
displayNextElements();
