Java学习第一百六十七部分——移位运算符的位数取模机制

慕y274

358人浏览 · 2025-08-25 21:47:43

慕y274 · 2025-08-25 21:47:43 发布

一、前言and结语

二、可视化界面

一、前言and结语

这篇小小的水一下，bushi。

二、可视化界面

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移位运算符的位数取模机制</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
            color: #333;
        }
        h1 {
            color: #2c3e50;
            text-align: center;
            margin-bottom: 30px;
        }
        .container {
            background-color: white;
            border-radius: 10px;
            padding: 25px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }
        .explanation {
            line-height: 1.6;
        }
        .example {
            background-color: #f9f9f9;
            padding: 15px;
            border-left: 4px solid #3498db;
            margin: 20px 0;
            border-radius: 0 5px 5px 0;
        }
        .binary-rep {
            font-family: monospace;
            background-color: #eee;
            padding: 10px;
            overflow-x: auto;
            margin: 15px 0;
            border-radius: 5px;
        }
        .interactive {
            margin-top: 30px;
        }
        .input-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input, select {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            width: 100%;
            box-sizing: border-box;
        }
        button {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            margin-top: 10px;
        }
        button:hover {
            background-color: #2980b9;
        }
        .result {
            margin-top: 20px;
            padding: 15px;
            background-color: #eaf7ff;
            border-radius: 5px;
            display: none;
        }
        .bits {
            display: flex;
            flex-wrap: wrap;
            margin: 15px 0;
        }
        .bit {
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #ddd;
            margin: 2px;
            font-family: monospace;
            font-weight: bold;
        }
        .bit-1 {
            background-color: #ff9999;
        }
        .bit-0 {
            background-color: #99ccff;
        }
        .highlight {
            background-color: yellow;
        }
        .operator {
            font-weight: bold;
            color: #e74c3c;
        }
    </style>
</head>
<body>
    <h1>移位运算符的位数取模机制</h1>
    
    <div class="container">
        <div class="explanation">
            <h2>移位运算符的工作原理</h2>
            <p>在Java中，进行移位操作时（<<, >>, >>>），右边的操作数（移位位数）会先进行取模操作：</p>
            <ul>
                <li>对于<code>int</code>类型，取模32（% 32）</li>
                <li>对于<code>long</code>类型，取模64（% 64）</li>
            </ul>
            
            <div class="example">
                <p>这意味着：</p>
                <p><code>a >> 32</code> 等价于 <code>a >> 0</code>（即不移位）</p>
                <p><code>a >> 33</code> 等价于 <code>a >> 1</code></p>
                <p><code>a << 31</code> 将1移到最高位，结果是<code>Integer.MIN_VALUE</code></p>
            </div>
            
            <h3>示例：</h3>
            <div class="binary-rep">
                int a = -1; // 二进制: 11111111 11111111 11111111 11111111<br>
                a >> 32 = -1 // 相当于 a >> 0<br>
                a << 31 = -2147483648 // 二进制: 10000000 00000000 00000000 00000000
            </div>
            
            <h3>为什么要这样设计？</h3>
            <p>这种设计可以防止移位位数超过数据类型的位宽，确保移位操作总是在有效范围内进行。对于32位的int类型，任何大于31的移位位数都会通过取模操作映射到0-31的范围内。</p>
        </div>
    </div>
    
    <div class="container interactive">
        <h2>交互演示</h2>
        <p>输入一个整数和移位位数，查看不同的移位操作结果：</p>
        
        <div class="input-group">
            <label for="inputValue">整数值 (a):</label>
            <input type="number" id="inputValue" value="-1">
        </div>
        
        <div class="input-group">
            <label for="shiftAmount">移位位数:</label>
            <input type="number" id="shiftAmount" value="32" min="0">
        </div>
        
        <button onclick="calculateShift()">计算移位操作</button>
        
        <div id="result" class="result">
            <h3>计算结果：</h3>
            <p>实际移位位数: <span id="actualShift"></span></p>
            
            <div class="binary-rep">
                原始值二进制表示: <span id="originalBinary"></span>
            </div>
            
            <h4>左移 (<<):</h4>
            <p>结果: <span id="leftShiftResult"></span></p>
            <p>二进制: <span id="leftShiftBinary"></span></p>
            <div class="bits" id="leftShiftBits"></div>
            
            <h4>有符号右移 (>>):</h4>
            <p>结果: <span id="rightShiftResult"></span></p>
            <p>二进制: <span id="rightShiftBinary"></span></p>
            <div class="bits" id="rightShiftBits"></div>
            
            <h4>无符号右移 (>>>):</h4>
            <p>结果: <span id="unsignedRightShiftResult"></span></p>
            <p>二进制: <span id="unsignedRightShiftBinary"></span></p>
            <div class="bits" id="unsignedRightShiftBits"></div>
        </div>
    </div>

    <script>
        function calculateShift() {
            // 获取输入值
            const inputValue = parseInt(document.getElementById('inputValue').value);
            let shiftAmount = parseInt(document.getElementById('shiftAmount').value);
            
            // 计算实际移位位数（取模32）
            const actualShift = shiftAmount % 32;
            document.getElementById('actualShift').textContent = 
                `${shiftAmount} % 32 = ${actualShift}`;
            
            // 执行移位操作
            const leftShiftResult = inputValue << shiftAmount;
            const rightShiftResult = inputValue >> shiftAmount;
            const unsignedRightShiftResult = inputValue >>> shiftAmount;
            
            // 显示结果
            document.getElementById('leftShiftResult').textContent = leftShiftResult;
            document.getElementById('rightShiftResult').textContent = rightShiftResult;
            document.getElementById('unsignedRightShiftResult').textContent = unsignedRightShiftResult;
            
            // 显示二进制表示
            document.getElementById('originalBinary').textContent = to32BitBinary(inputValue);
            document.getElementById('leftShiftBinary').textContent = to32BitBinary(leftShiftResult);
            document.getElementById('rightShiftBinary').textContent = to32BitBinary(rightShiftResult);
            document.getElementById('unsignedRightShiftBinary').textContent = to32BitBinary(unsignedRightShiftResult);
            
            // 显示二进制位可视化
            displayBits('leftShiftBits', leftShiftResult);
            displayBits('rightShiftBits', rightShiftResult);
            displayBits('unsignedRightShiftBits', unsignedRightShiftResult);
            
            // 显示结果区域
            document.getElementById('result').style.display = 'block';
        }
        
        function to32BitBinary(num) {
            // 将数字转换为32位二进制字符串表示
            return (num >>> 0).toString(2).padStart(32, '0');
        }
        
        function displayBits(elementId, num) {
            const binaryStr = to32BitBinary(num);
            const bitsContainer = document.getElementById(elementId);
            bitsContainer.innerHTML = '';
            
            for (let i = 0; i < 32; i++) {
                const bit = binaryStr[i];
                const bitElement = document.createElement('div');
                bitElement.className = `bit bit-${bit}`;
                bitElement.textContent = bit;
                
                // 添加位索引标签（每8位一组）
                if (i % 8 === 0) {
                    const label = document.createElement('div');
                    label.style.width = '100%';
                    label.textContent = `位 ${i}-${i+7}:`;
                    label.style.marginTop = '10px';
                    label.style.fontWeight = 'bold';
                    bitsContainer.appendChild(label);
                }
                
                bitsContainer.appendChild(bitElement);
            }
        }
    </script>
</body>
</html>