顺序检索(Linear Search) vs 二分法检索(Binary Search)

顺序检索（linear search）是最基本的搜寻法，只要从数据开头寻找到最后，看看是否找到数据；二分法检索（binary search）又称折半检索，基本思想是设字典中的元素从小到大有序地存放在数组中，首先将给定值key与字典中间位置上元素的关键码(key)比较，如果相等，则检索成功；否则若key小，则在字典前半部分中继续进行二分法检索; 若key大，则在字典后半部分中继续进行二分法检索。这样经过一次比较就缩小一半的检索区间，如此进行下去，直到检索成功或检索失败。偶数个取中间2个其中任何一个作为中间元素。二分法检索是一种效率较高的检索方法，要求字典在顺序表中按关键码排序。

JavaScript, 算法

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1849
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function(obj) {
    return typeof obj;
} : function(obj) {
    return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj;
};

// ## Global Variables
var ALPHABET = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
var ARR_LENGTH = ALPHABET.LENGTH;
var SEARCH_INTERVAL_TIME = 800;
var secret_number = Math.floor(Math.random() * ARR_LENGTH);
var searching = false;
var completed_linear = false;
var completed_binary = false;
var linear_interval = undefined;
var binary_interval = undefined;

// ## Helper Functions
function getArgumentsAsArray() {
    var args = Array.from(arguments);
    if (_typeof(args[0]) === "object") args = args[0];
    if (args[0] && args[0].length) args = args[0];
    return args;
}

function sum() {
    var args = getArgumentsAsArray(arguments);
    return Array.from(args).reduce(function(p, c) {
        return p + c;
    });
}

function avg() {
    var args = getArgumentsAsArray(arguments);
    return sum(args) / args.length;
}

function randomIndex(array) {
    return Math.ceil(Math.random() * array.length) - 1;
}

function randomElement(array) {
    return array[randomIndex(array)];
}

// ## Search Functions
function startLinearSearch(value, set) {
    var current_value = undefined;
    var current_elm = undefined;
    var current_index = 0;
    var num_iterations = 0;
    var info = document.getElementById('linear-info');
    linear_interval = setInterval(function() {
        current_value = set[current_index];
        current_elm = document.getElementById(current_value + '-linear');
        num_iterations += 1;
        if (current_index >= set.length) {
            clearInterval(linear_interval);
            info.innerHTML = 'Index: -1, Value: none, Num Iterations: ' + num_iterations;
            return;
        }
        if (current_value != value) {
            current_elm.className = "exempt";
            info.innerHTML = 'Index: ' + current_index + ', Value: ' + current_value + ', Num Iterations: ' + num_iterations;
        }
        if (current_value == value) {
            clearInterval(linear_interval);
            current_elm.className = "found";
            info.innerHTML = 'Index: ' + current_index + ', Value: ' + current_value + ', Num Iterations: ' + num_iterations;
            return;
        }
        current_index += 1;
    }, SEARCH_INTERVAL_TIME);
}

// ## DOM triggered functions
function reset() {
    clearInterval(linear_interval);
    clearInterval(binary_interval);
    var exempt = document.querySelectorAll('.exempt');
    Array.prototype.forEach.call(exempt, function(el) {
        el.classList.remove('exempt');
    });
    var found = document.querySelectorAll('.found');
    Array.prototype.forEach.call(found, function(el) {
        el.classList.remove('found');
    });
    var info = document.querySelectorAll('.info');
    Array.prototype.forEach.call(info, function(el) {
        el.innerHTML = ' ';
    });
    enableButton('random-btn');
    enableButton('search-btn');
}

function getRandomLetter() {
    reset();
    var value = randomElement(ALPHABET);
    var input = document.getElementById('random-letter');
    input.value = value;
    input.style.webkitAnimationName = 'shake';
    input.className = 'shake';
}

function disableButton(id) {
    document.getElementById(id).disabled = true;
}

function enableButton(id) {
    document.getElementById(id).disabled = false;
}

// ## Setup functions
function setupInputHandlers() {
    var input = document.getElementById('random-letter');
    input.onkeyup = function() {
        this.value = this.value.toUpperCase();
        reset();
    };
    input.addEventListener('webkitAnimationEnd', function() {
        this.style.webkitAnimationName = '';
        this.className = '';
    }, false);
    var random_btn = document.getElementById('random-btn');
    random_btn.onclick = function(e) {
        e.preventDefault();
        getRandomLetter();
    };
    var search_btn = document.getElementById('search-btn');
    search_btn.onclick = function(e) {
        e.preventDefault();
        startLinearSearch(input.value, ALPHABET);
        startBinarySearch(input.value, ALPHABET);
    };
}

function inputFocus() {
    var input = document.getElementById('random-letter');
    input.focus();
}

// Let's roll
window.onload = function() {
    setupInputHandlers();
    inputFocus();
};

编译

CSS

@font-face("OperatorMono-Bold" "https://s3-us-west-2.amazonaws.com/s.cdpn.io/161040/OperatorMono-Bold");
@font-face("OperatorMono-Medium" "https://s3-us-west-2.amazonaws.com/s.cdpn.io/161040/OperatorMono-Medium");
@keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }
    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }
    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }
    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}
body {
    background: #3BB0FF;
    text-align: center;
    font-family: "OperatorMono-Medium", "Lucida Console", Monaco, monospace;
    color: white;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #FFF32B;
    font-family: "OperatorMono-Bold", "Lucida Console", Monaco, monospace;
    font-size: 2em;
}
h1 {
    font-size: 3em;
}
input#random-letter {
    text-align: center;
    width: 1em;
    border: none;
    border-bottom: 5px solid white;
    padding-bottom: 0.2em;
    text-transform: uppercase;
    background: #3BB0FF;
    font-size: 3em;
    font-family: "OperatorMono-Medium", "Lucida Console", Monaco, monospace;
    color: white;
}
input#random-letter.shake {
    animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
input#random-letter:focus {
    outline: none;
}
button {
    text-align: center;
    border: none;
    background: #3BB0FF;
    border: 5px solid #FFF32B;
    color: #FFF32B;
    font-size: 30px;
    font-family: "OperatorMono-Bold", "Lucida Console", Monaco, monospace;
    padding: 0.15em 1.3em;
    margin: 1em;
    transition: border-color 0.2s, color 0.2s;
    -webkit-transition: border-color 0.2s, color 0.2s;
}
button:hover {
    color: white;
    border-color: white;
    cursor: pointer;
}
.searches .linear-search,
.searches .binary-search {
    display: inline-block;
}
ul.data {
    padding: 0;
    margin: 1em;
    margin-top: 0;
}
ul.data li {
    display: inline-block;
    border-bottom: 2px solid transparent;
}
ul.data li.exempt {
    color: #FF014E;
    border-bottom: 2px solid #FF014E;
}
ul.data li.found {
    color: #66FF00;
    font-family: "OperatorMono-Bold", "Lucida Console", Monaco, monospace;
}

HTML

<h1>Linear vs Binary Search</h1>
<input type="text" maxLength="1" id="random-letter" />
<div class="controls">
    <button id="random-btn">Random</button>
    <button id="search-btn">Search</button>
</div>
<div class="searches">
    <div class="linear-search">
        <h2>Linear</h2>
        <p id="linear-info" class="info">&nbsp;</p>
        <ul class="data">
            <li id="A-linear">A</li>
            <li id="B-linear">B</li>
            <li id="C-linear">C</li>
            <li id="D-linear">D</li>
            <li id="E-linear">E</li>
            <li id="F-linear">F</li>
            <li id="G-linear">G</li>
            <li id="H-linear">H</li>
            <li id="I-linear">I</li>
            <li id="J-linear">J</li>
            <li id="K-linear">K</li>
            <li id="L-linear">L</li>
            <li id="M-linear">M</li>
            <li id="N-linear">N</li>
            <li id="O-linear">O</li>
            <li id="P-linear">P</li>
            <li id="Q-linear">Q</li>
            <li id="R-linear">R</li>
            <li id="S-linear">S</li>
            <li id="T-linear">T</li>
            <li id="U-linear">U</li>
            <li id="V-linear">V</li>
            <li id="W-linear">W</li>
            <li id="X-linear">X</li>
            <li id="Y-linear">Y</li>
            <li id="Z-linear">Z</li>
        </ul>
    </div>
    <div class="binary-search">
        <h2>Binary</h2>
        <p id="binary-info" class="info">&nbsp;</p>
        <ul class="data">
            <li id="A-binary">A</li>
            <li id="B-binary">B</li>
            <li id="C-binary">C</li>
            <li id="D-binary">D</li>
            <li id="E-binary">E</li>
            <li id="F-binary">F</li>
            <li id="G-binary">G</li>
            <li id="H-binary">H</li>
            <li id="I-binary">I</li>
            <li id="J-binary">J</li>
            <li id="K-binary">K</li>
            <li id="L-binary">L</li>
            <li id="M-binary">M</li>
            <li id="N-binary">N</li>
            <li id="O-binary">O</li>
            <li id="P-binary">P</li>
            <li id="Q-binary">Q</li>
            <li id="R-binary">R</li>
            <li id="S-binary">S</li>
            <li id="T-binary">T</li>
            <li id="U-binary">U</li>
            <li id="V-binary">V</li>
            <li id="W-binary">W</li>
            <li id="X-binary">X</li>
            <li id="Y-binary">Y</li>
            <li id="Z-binary">Z</li>
        </ul>
    </div>
</div>

JavaScript, 算法

编辑器支持Emmet

快捷键

JavaScript, 算法

JavaScript 字符计数器

JavaScript 看似在解码似的文字逐字显示特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：