JavaScript 性能 - .test() 与 .search()

Question

如果我需要查看某个值是否在字符串中，使用 .test() 方法还是 .search() 方法对性能更好？

.search() 示例:

var myRegExp = '/Orange/',
    myString = 'This is a string with the word "Orange."';

if(myString.search(myRegExp) != -1) {
    // Do code here
}

.test() 示例:

var myRegExp = '/Orange/',
    myString = 'This is a string with the world "Orange."';

if(myRegExp.test(myString)) {
    // Do code here
}

最终，我正在做的是在字符串中搜索特定的类名。该元素将包含多个类，因此我需要查找其中是否包含其中一个类。

标记示例:

<ul>
    <li class="expandable expanded">
        <ul>
            <li>Text</li>
        </ul>
    <li>
    <li class="expandable collapsed">
        <ul>
            <li>Text</li>
        </ul>
    </li>
</ul>

因此，我向列表项添加了一个点击事件，如果它们的类名“展开”，则它们需要以一种方式运行，如果它们的类名“折叠”，则它们需要以另一种方式运行。

所以，本质上是这样的。

element.addEventListener('click',function(e) {
    if( /* e.target has class name of expanded */ ) {
        // Do certain code
    } else {
        // Do other code
    }
}

我正在使用 jQuery，并且我愿意接受建议，但我觉得使用 native JavaScript 会更好地解决这种情况。那么，哪种方法可以提供最佳性能呢？或者还有其他更好的方法吗？

Answer 1

好吧，如果你使用 jQuery，你可以简单地使用

element.addEventListener('click',function(e) {
    if( $(e.target).hasClass('expanded' ) {
        // Do certain code
    } else {
        // Do other code
    }
}

如果您出于某种原因(例如性能)不想创建 jQuery 对象，您可以使用此函数，改编自 $().hasClass() 的源代码:

function hasClass ( el, selector ) {
    var className = " " + selector + " ";

    if ( (" " + el.className + " ").replace(/[\n\t]/g, " ").indexOf( className ) > -1 ) {
        return true;
    }

    return false;
}

然后你可以这样调用它:

if ( hasClass(e.target, 'expanded') ) {

就个人而言，如果您已经加载了 jQuery 方法，我会选择它。