jQuery实现的简单获取索引功能示例,深入了解javascript

本文实例讲述了jQuery实现的简单获取索引功能。分享给大家供大家参考,具体如下:

在javascript中,数组对象有一个有趣的方法sort,它接收一个类型为函数的参数作为排序的依据。这意味着开发者只需要关注如何比较两个值的大小,而不用管“排序”这件事内部是如何实现的。不过了解一下sort的内部实现也不是一件坏事,何不深入了解一下呢?

本文实例讲述了JS使用正则表达式获取小括号、中括号及花括号内容的方法。分享给大家供大家参考,具体如下:

<!doctype html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="Generator" content="EditPlus®">
 <meta name="Author" content="">
 <meta name="Keywords" content="">
 <meta name="Description" content="">
 <title>www.jb51.net 获取当前点击的元素在原来集合中的索引</title>
 <style type="text/css">
  li {
    height: 25px;
    line-height: 25px;
    background: rgba(0,0,0,0.5);
    border-bottom: 1px solid red;
  }
  a {
    text-decoration: none;
    font-size: 16px;
  }
 </style>
 </head>
 <body>
 <div>
  <ul>
    <li>
      <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
        <div class="index">
        0
        </div>
      </a>
    </li>
    <li>
      <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
        <div class="index">
        1
        </div>
      </a>
    </li>
    <li>
      <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
        <div class="index">
        2
        </div>
      </a>
    </li>
    <li>
      <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
        <div class="index">
        3
        </div>
      </a>
    </li>
    <li>
      <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
        <div class="index">
        4
        </div>
      </a>
    </li>
  </ul>
 </div>
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 <script type="text/javascript">
    $(function(){
      $(".index").on("click",function(){
          var $target = $(this);
          console.log($(".index").index($target));
      });
    });
 </script>
 </body>
</html>

算法课上,我们会接触很多种排序算法,什么冒泡排序、选择排序、快速排序、堆排序等等。那么javascript的sort方法采用哪种排序算法呢?要搞清楚这个问题,呃,直接看v8源代码好了。v8中对Array.sort的实现是采用javascript完成的,粗看下来,使用了快速排序算法,但明显比我们熟悉的快速排序要复杂。那么到底复杂在什么地方?为什么要搞这么复杂?这是我们今天要探讨的问题。

JS 正则表达式 获取小括号 中括号 花括号内的内容

使用在线HTML/CSS/JavaScript代码运行工具
测试运行结果如下:

快速排序算法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>www.jb51.net JS获取括号内容</title>
</head>
<body>
<script type="text/javascript">
var str="123{xxxx}456[我的]789123[你的]456(1389090)789";
var regex1 = /\((.+?)\)/g;  // () 小括号
var regex2 = /\[(.+?)\]/g;  // [] 中括号
var regex3 = /\{(.+?)\}/g; // {} 花括号,大括号
// 输出是一个数组
console.log(str.match(regex1)); 
console.log(str.match(regex2));
console.log(str.match(regex3));
</script>
</body>
</html>

图片 1

快速排序算法之所以被称为快速排序算法,是因为它能达到最佳和平均时间复杂度均为O(nlogn),是一种应用非常广泛的排序算法。它的原理并不复杂,先找出一个基准元素(pivot,任意元素均可),然后让所有元素跟基准元素比较,比基准元素小的,放到一个集合中,其他的放到另一个集合中;再对这两个集合执行快速排序,最终得到完全排序好的序列。

使用在线HTML/CSS/JavaScript代码运行工具测试运行结果如下:

更多关于jquery相关内容感兴趣的读者可查看本站专题:《jQuery操作DOM节点方法总结》、《jquery常用操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery操作json数据技巧汇总》、《jQuery操作xml技巧总结》及《jQuery扩展技巧总结》

所以快速排序的核心是不断把原数组做切割,切割成小数组后再对小数组进行相同的处理,这是一种典型的分治的算法设计思路。实现一个简单的快速排序算法并不困难。我们不妨试一下:

图片 2

希望本文所述对大家jquery程序设计有所帮助。

function QuickSort(arr, func) {
 if (!arr || !arr.length) return [];
 if (arr.length === 1) return arr;
 var pivot = arr[0];
 var smallSet = [];
 var bigSet = [];
 for (var i = 1; i < arr.length; i++) {
  if (func(arr[i], pivot) < 0) {
   smallSet.push(arr[i]);
  } else {
   bigSet.push(arr[i]);
  }
 }
 return QuickSort(smallSet, func).concat([pivot]).concat(QuickSort(bigSet, func));
}

附:JAVA正则匹配语句

您可能感兴趣的文章:

  • jquery获取元素索引值index()示例
  • jquery
    获取当前元素的索引值
  • Jquery index()方法
    获取相应元素索引值
  • jQuery实现select下拉框获取当前选中文本、值、索引
  • jQuery实现获取元素索引值index的方法
  • jquery获取当前元素索引值用法实例
  • jquery
    获取索引值在一定范围的列表方法
  • jQuery在ul中显示某个li索引号的方法
  • jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
  • jQuery实现带右侧索引功能的通讯录示例【附源码下载】

这是一个非常基础的实现,选取数组的第一项作为基准元素。

regex = "(?<=\\[)(\\S+)(?=\\])"

原地(in-place)排序

PS:这里再为大家提供2款非常方便的正则表达式工具供大家参考使用:

我们可以注意到,上面的算法中,我们其实是创建了一个新的数组作为计算结果,从空间使用的角度看是不经济的。javascript的快速排序算法中并没有像上面的代码那样创建一个新的数组,而是在原数组的基础上,通过交换元素位置实现排序。所以,类似于push、pop、splice这几个方法,sort方法也是会修改原数组对象的!

JavaScript正则表达式在线测试工具:

我们前面说过,快速排序的核心在于切割数组。那么如果只是在原数组上交换元素,怎么做到切割数组呢?很简单,我们并不需要真的把数组切割出来,只需要记住每个部分起止的索引号。举个例子,假设有一个数组[12,
4, 9, 2, 18,
25],选取第一项12为基准元素,那么按照原始的快速排序算法,会把这个数组切割成两个小数组:[4,
9, 2], 12, [18,
25]。但是我们同样可以不切割,先通过比较、交换元素,将原数组修改成[4,
9, 2, 12, 18,
25],再根据基准元素12的位置,认为0~2号元素是一组,4~5号元素是一组,为了表述方便,我这里将比基准元素小的元素组成的分区叫小数分区,另一个分区叫大数分区。这很像电脑硬盘的分区,并不是真的把硬盘分成了C盘、D盘,而是记录下一些起止位置,在逻辑上分成了若干个分区。类似的,在快速排序算法中,我们也把这个过程叫做分区(partition)。所以相应的,我也要修改一下之前的说法了,快速排序算法的核心是分区。

正则表达式在线生成工具:

说了这么多,还是实现一个带分区的快速排序吧:

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript正则表达式技巧大全》、《JavaScript替换操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》

function swap(arr, from, to) {
 if (from == to) return;
 var temp = arr[from];
 arr[from] = arr[to];
 arr[to] = temp;
}

function QuickSortWithPartition(arr, func, from, to) {
 if (!arr || !arr.length) return [];
 if (arr.length === 1) return arr;
 from = from || 0;
 to = to || arr.length - 1;
 var pivot = arr[from];
 var smallIndex = from;
 var bigIndex = from + 1;
 for (; bigIndex <= to; bigIndex++) {
  if (func(arr[bigIndex], pivot) < 0) {
   smallIndex++;
   swap(arr, smallIndex, bigIndex);
  }
 }
 swap(arr, smallIndex, from);
 QuickSortWithPartition(arr, func, from, smallIndex - 1);
 QuickSortWithPartition(arr, func, smallIndex + 1, to);
 return arr;
}

希望本文所述对大家JavaScript程序设计有所帮助。

看起来代码长了很多,不过并不算复杂。首先由于涉及到数组元素交换,所以先实现一个swap方法来处理元素交换。快速排序算法中,增加了两个参数,from和to,分别表示当前要处理这个数组的哪个部分,from是起始索引,to是终止索引;如果这两个参数缺失,则表示处理整个数组。

您可能感兴趣的文章:

  • JS正则表达式获取分组内容的方法详解
  • JS正则表达式获取字符串中特定字符的方法
  • javascript
    获取url参数的正则表达式(用来获取某个参数值)
  • node.js正则表达式获取网页中所有链接的代码实例
  • 获取服务器传来的数据
    用JS去空格的正则表达式
  • javascript
    获取链接文件地址中第一个斜线内的正则表达式
  • JavaScript使用正则表达式获取全部分组内容的方法示例
  • JS正则替换掉小括号及内容的方法
  • 盘点javascript 正则表达式中
    中括号的【坑】
  • JS
    正则表达式中小括号的应用

同样的,我用最简单的方式选取基准元素,即所要处理分区的第一个元素。然后我定义了smallIndex和bigIndex两个变量,分别表示的是左侧小数分区的终止索引和右侧大数分区的终止索引。什么意思?就是说从第一个元素(基准元素)到第smallIndex个元素间的所有元素都比基准元素小,从第smallIndex
+
1到第bigIndex个元素都比基准元素大。一开始没有比较时,很显然这两部分分区都是空的,而比较的过程很简单,直接是bigIndex向右移,一直移到分区尾部。每当bigIndex增加1,我们会进行一次判断,看看这个位置上的元素是不是比基准元素大,如果大的话,不用做处理,它已经处于大数分区了;但如果比基准元素小,就需要进行一次交换。怎么交换呢?首先将smallIndex增加1,意味着小数分区增加了一个元素,但此时smallIndex位置的元素很明显是一个大数(这个说法其实不对,如果之前大数分区里面没有元素,此时smallIndex和bigIndex相等,但对交换没有影响),而在bigIndex位置的元素是一个小数,所以只要把这两个位置的元素交换一下就好了。

最后可别忘了一开始的起始元素,它的位置并不正确,不过只要将它和smallIndex位置的元素交换位置就可以了。同时我们得到了对应的小数分区[from…smallIndex

  • 1]和大数分区[smallIndex + 1…to]。再对这两个分区递归排序即可。

分区过程的优化

发表评论

电子邮件地址不会被公开。 必填项已用*标注