判断值是否在数组的方法,插件兼容

2019-07-15 作者:小鱼儿主页高手论坛   |   浏览(93)

1.遍历数组法
最简单的去重方法,实现思路:新建一新数组,遍历传入数组,值不在新数组就加入该新数组中;注意点:判断值是否在数组的方法“indexOf”是ECMAScript5 方法,IE8以下不支持,需多写一些兼容低版本浏览器代码,源码如下:

阅读目录

本文实例讲述了JS实现网页标题栏显示当前时间和日期的完整代码。分享给大家供大家参考,具体如下:

一个简单的jQuery分页插件,兼容AMD规范和requireJS.

// 最简单数组去重法 
function unique1(array){ 
var n = []; //一个新的临时数组 
//遍历当前数组 
for(var i = 0; i < array.length; i  ){ 
//如果当前数组的第i已经保存进了临时数组,那么跳过, 
//否则把当前项push到临时数组里面 
if (n.indexOf(array[i]) == -1) n.push(array[i]); 
} 
return n; 
} 

基本介绍
举例说明
总结说明

本效果实现在网页的标题栏最前端显示当前的时间和日期,还可以显示星期几,JS代码,不过代码在兼容性方面好像有些问题,如果是IE的话则正常显示,其它浏览器则看不到效果。

/**
 * jQuery分页插件
 * */
;(function (factory) {
  if (typeof define === "function" && define.amd) {
    // AMD模式
    define([ "jquery" ], factory);
  } else {
    // 全局模式
    factory(jQuery);
  }
}(function ($) {

   //定义MyPagePlugin的构造函数
  MyPagePlugin = function(ele, option) {
     //  this.viewHtml="<nav><ul class='pagination'><li><a id='firstPageli'>«</a></li><li><a id='prevPageli'>‹</a></li><li class='active'><a>第页,共页</a></li><li><a id='nextPageli'>›</a></li><li><a id='lastPageli'>»</a></li></ul></nav>";
  this.viewHtml= "<div class='pageplugin'><a class='first firstPageli'>«</a><a class='previous prevPageli'>‹</a><a class='present'>第页,共页</a><a class='next nextPageli'>›</a><a class='last lastPageli'>»</a></div>"

    this.$element = ele;
    /**参数:page:当前页,pageCount:总共页数,onPaged回调函数,回调函数会传入页数*/
    this.defaults = {
      page:1,
      pageCount:1,
      onPaged:function(pageNo){}
    };
    this.options = $.extend({}, this.defaults, option);

  }
  //定义MyPagePlugin的方法
  MyPagePlugin.prototype = {
    initPlugin:function(){
      this.$element.empty();
       this.$element.append(this.viewHtml);
       this.options.onPaged(this.options.page);//初始化
       this.$element.find(".curPageNoSpan").text(this.options.page);
       this.$element.find(".curPageNoSpan").data("options",this.options);
       this.$element.find(".allPageCountSpan").text(this.options.pageCount);
       this.$element.find(".firstPageli").on("click",function(e){

        var curNo=$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text();
        curNo=parseInt(curNo);
        if(curNo==1){
           return false;
        }else{

          $(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").data("options").onPaged(1);
          $(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text(1);
        }
        return false;
       });
       this.$element.find(".prevPageli").on("click",function(e){
        var curNo=$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text();
        curNo=parseInt(curNo);
        if(curNo==1){
          return false;
        }else{
          $(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").data("options").onPaged(curNo-1);
          $(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text(curNo-1);
        }
        return false;
       });
       this.$element.find(".nextPageli").on("click",function(e){
        var curNo=$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text();
        curNo=parseInt(curNo);
        var pageCount=$(e.currentTarget).parent("div.pageplugin").find(".allPageCountSpan").text();
        pageCount=parseInt(pageCount);
        if(curNo==pageCount){
          return false;
        }else{
          $(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").data("options").onPaged(curNo 1);
          $(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text(curNo 1);
        }
        return false;
       });
       this.$element.find(".lastPageli").on("click",function(e){
        var curNo=$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text();
        curNo=parseInt(curNo);
        var pageCount=$(e.currentTarget).parent("div.pageplugin").find(".allPageCountSpan").text();
        pageCount=parseInt(pageCount);
        if(curNo==pageCount){
           return false;
        }else{
          $(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").data("options").onPaged(pageCount);
          $(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text(pageCount);
        }
        return false;
       });

    }


  }
  $.fn.pagePlugin = function (option) {
    var pagePlugin=new MyPagePlugin(this,option);
    pagePlugin.initPlugin();
  };
}));

2.对象键值对法
该方法执行的速度比其他任何方法都快, 就是占用的内存大一些,实现思路:新建一js对象以及新数组,遍历传入数组时,判断值是否为js对象的键,不是的话给对象新增该键并放入新数组。注意 点: 判断是否为js对象键时,会自动对传入的键执行“toString()”,不同的键可能会被误认为一样;例如: a[1]、a["1"] 。解决上述问题还是得调用“indexOf”。

简单工厂模式是由一个方法来决定到底要创建哪个类的实例, 而这些实例经常都拥有相同的接口. 这种模式主要用在所实例化的类型在编译期并不能确定, 而是在执行期决定的情况。 说的通俗点,就像公司茶水间的饮料机,要咖啡还是牛奶取决于你按哪个按钮。

运行效果截图如下:

CSS

// 速度最快, 占空间最多(空间换时间) 
function unique2(array){ 
var n = {}, r = [], len = array.length, val, type; 
for (var i = 0; i < array.length; i  ) { 
val = array[i]; 
type = typeof val; 
if (!n[val]) { 
n[val] = [type]; 
r.push(val); 
} else if (n[val].indexOf(type) < 0) { 
n[val].push(type); 
r.push(val); 
} 
} 
return r; 
} 

简单工厂模式在创建ajax对象的时候也非常有用.

图片 1

.pageplugin {
 display: inline-block;
 border: 1px solid #CDCDCD;
 border-radius: 3px; }

.pageplugin a {
 cursor: pointer;
 display: block;
 float: left;
 width: 20px;
 height: 20px;
 outline: none;
 border-right: 1px solid #CDCDCD;
 border-left: 1px solid #CDCDCD;
 color: #767676;
 vertical-align: middle;
 text-align: center;
 text-decoration: none;
 font-weight: bold;
 font-size: 16px;
 font-family: Times, 'Times New Roman', Georgia, Palatino;
  background-color: #f7f7f7;
 /* ATTN: need a better font stack 
 background-color: #f7f7f7;
 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f3f3f3), color-stop(100%, lightgrey));
 background-image: -webkit-linear-gradient(#f3f3f3, lightgrey);
 background-image: linear-gradient(#f3f3f3, lightgrey); */}
 .pageplugin a:hover, .pageplugin a:focus, .pageplugin a:active {
  color:#0099CC;
  background-color: #cecece;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e4e4e4), color-stop(100%, #cecece));
  background-image: -webkit-linear-gradient(#e4e4e4, #cecece);
  background-image: linear-gradient(#e4e4e4, #cecece); }
 .pageplugin a.disabled, .pageplugin a.disabled:hover, .pageplugin a.disabled:focus, .pageplugin a.disabled:active {
  background-color: #f3f3f3;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f3f3f3), color-stop(100%, lightgrey));
  background-image: -webkit-linear-gradient(#f3f3f3, lightgrey);
  background-image: linear-gradient(#f3f3f3, lightgrey);
  color: #A8A8A8;
  cursor: default; }

.pageplugin a:first-child {
 border: none;
 border-radius: 2px 0 0 2px; }

.pageplugin a:last-child {
 border: none;
 border-radius: 0 2px 2px 0; }

 .pageplugin .present {
 float: left;
 margin: 0;
 padding: 0;
 width: 120px;
 height: 20px;
 outline: none;
 border: none;
 vertical-align: middle;
 text-align: center; }

3.数组下标判断法
还是得调用“indexOf”性能跟方法1差不多,实现思路:如果当前数组的第i项在当前数组中第一次出现的位置不是i,那么表示第i项是重复的,忽略掉。否则存入结果数组。

通常我们创建对象最常规的方法就是使用new关键字调用构造函数,这会导致对象之间的依赖性。工厂模式是一种有助于消除类之间依赖性的设计模式,它使用一个方法来决定要实例化哪一个类。本文详细介绍了简单工厂模式的理论,并且举例说明了简单工厂模式的具体应用。

在线演示地址如下:

jquery分页插件cypager

function unique3(array){ 
var n = [array[0]]; //结果数组 
//从第二项开始遍历 
for(var i = 1; i < array.length; i  ) { 
//如果当前数组的第i项在当前数组中第一次出现的位置不是i, 
//那么表示第i项是重复的,忽略掉。否则存入结果数组 
if (array.indexOf(array[i]) == i) n.push(array[i]); 
} 
return n; 
} 

基本介绍

cypager是网友分享到JquerySchool网站上的一款作品,非常实用,经过测试,插件兼容 IE8 ,Chrome,Firefox 浏览器,核心文件仅 5KB。。。

4.排序后相邻去除法
虽然原生数组的”sort”方法排序结果不怎么靠谱,但在不注重顺序的去重里该缺点毫无影响。实现思路:给传入数组排序,排序后相同值相邻,然后遍历时新数组只加入不与前一值重复的值。

简单工厂模式是工厂模式中最基本的一种。通过定义一个工厂类,根据参数实例化具体的某个产品类。

具体代码如下:

调用方式

// 将相同的值相邻,然后遍历去除重复值 
function unique4(array){ 
array.sort(); 
var re=[array[0]]; 
for(var i = 1; i < array.length; i  ){ 
if( array[i] !== re[re.length-1]){ 
  re.push(array[i]); 
 } 
 } 
 return re; 
} 

举例说明

<html>
<head>
<title>网页标题栏显示当前时间和日期的代码</title>
<script language="JavaScript1.2">
<!--hide
//定义月份的描述
var isnMonth = new Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");
//定义星期的描述
var isnDay = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六","星期日");
//取得当前日期
today = new Date () ;
Year=today.getYear(); //取得日期的年份部分
Date=today.getDate(); //取得星期部分
//定义需要显示的字符串
titlestr="今天是: " Year "年" isnMonth[today.getMonth()] Date "日" isnDay[today.getDay()]
if (document.all) //检测浏览器兼容性,如果是IE则可以显示
document.title=titlestr //改变标题,显示日期。
//--hide-->
</script>
</head>
<body>
<b>请注意上面标题栏的时间</b>
</body>
</html>

由于是 jquery插件,所以在引人 cypager.min.js 之前,要引人 jquery.min.js 本人使用的是 1.7.2 版本的,低版本的没试过。
引入css : <link rel="stylesheet" href="css/cypager.min.css" />
引人js  : <script type="text/javascript" src="js/cypager.min.js"/>

5.优化遍历数组法
该方法的实现代码相当酷炫,实现思路:获取没重复的最右一值放入新数组。(检测到有重复值时终止当前循环同时进入顶层循环的下一轮判断)推荐

我们举个例子进行说明:假设我们开发一个旅游行业网站,网站上面销售机票,酒店等产品。一个用户准备购买一张机票。我们可以定义相关类如下:

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

$(function(){
  $("#pagerArea").cypager({pg_size:10,pg_nav_count:8,pg_total_count:194,pg_call_fun:function(count){
    alert("跳转至页面:" count "");
  }});
});

本文由小鱼儿玄机30码发布于小鱼儿主页高手论坛,转载请注明出处:判断值是否在数组的方法,插件兼容

关键词: 小鱼儿玄机30码