使用按钮点击改变数组元素顺序
挑战：
您需要处理一个包含对象的数组，每个对象对应页面上带按钮的一个元素。点击按钮后，该元素对应的对象在数组中的位置应该向上移动一位。
示例数组：
let arr = [
{name: '项目一', value: '100'},
{name: '项目二', value: '200'},
{name: '项目三', value: '300'},
{name: '项目四', value: '400'}
];
具体要求：
- 点击索引为3的按钮，
{name: '项目四', value: '400'}对象应移动到数组开头。 - 点击索引为2的按钮，
{name: '项目三', value: '300'}对象应移动到数组的第二个位置。
需要考虑：
- 数组长度动态变化。
- 每个按钮只能点击一次（或需要某种机制防止重复点击）。
解决方案：
function moveToTop(arr, index) {
if (index > 0) {
const element = arr.splice(index, 1)[0]; //移除元素
arr.unshift(element); //添加到数组开头
}
}
// 假设按钮已添加到页面，并设置了 data-index 属性
const buttons = document.querySelectorAll('button');
buttons.forEach(button => {
button.addEventListener('click', () => {
const index = parseInt(button.dataset.index, 10);
moveToTop(arr, index);
// 更新页面显示，根据实际情况修改
console.log(arr); // 或更新页面元素显示
button.disabled = true; // 可选：禁用已点击的按钮
});
});
使用方法：
为每个按钮添加 data-index 属性，值为按钮对应的数组索引。 moveToTop 函数将数组元素移动到顶部。 事件监听器处理按钮点击，调用 moveToTop 函数并可选地禁用按钮以防止重复点击。 记得根据实际情况修改代码来更新页面显示以反映数组的更改。
