js实现翻转

实现数组翻转

在JavaScript中翻转数组可以通过多种方法实现。以下是几种常见的方式：

使用reverse方法

const arr = [1, 2, 3, 4, 5];
const reversedArr = arr.reverse();
console.log(reversedArr); // [5, 4, 3, 2, 1]

使用for循环

function reverseArray(arr) {
    let reversed = [];
    for (let i = arr.length - 1; i >= 0; i--) {
        reversed.push(arr[i]);
    }
    return reversed;
}
const arr = [1, 2, 3, 4, 5];
console.log(reverseArray(arr)); // [5, 4, 3, 2, 1]

使用reduce方法

const arr = [1, 2, 3, 4, 5];
const reversedArr = arr.reduce((acc, current) => [current, ...acc], []);
console.log(reversedArr); // [5, 4, 3, 2, 1]

实现字符串翻转

翻转字符串可以通过以下方法实现：

使用split、reverse和join方法

const str = "hello";
const reversedStr = str.split('').reverse().join('');
console.log(reversedStr); // "olleh"

使用for循环

function reverseString(str) {
    let reversed = '';
    for (let i = str.length - 1; i >= 0; i--) {
        reversed += str[i];
    }
    return reversed;
}
const str = "hello";
console.log(reverseString(str)); // "olleh"

使用递归

function reverseString(str) {
    return str === '' ? '' : reverseString(str.substr(1)) + str[0];
}
const str = "hello";
console.log(reverseString(str)); // "olleh"

实现DOM元素翻转

翻转DOM元素可以通过CSS的transform属性实现：

使用CSS和JavaScript

const element = document.getElementById('myElement');
element.style.transform = 'rotateY(180deg)';

添加动画效果

.flip-container {
    perspective: 1000px;
}
.flip-element {
    transition: transform 0.6s;
    transform-style: preserve-3d;
}
.flip-element.flipped {
    transform: rotateY(180deg);
}

const element = document.getElementById('myElement');
element.classList.toggle('flipped');

以上方法涵盖了数组、字符串和DOM元素的翻转实现，可以根据具体需求选择合适的方式。