当前位置: 首页 > 编程笔记 >

javascript框架设计读书笔记之数组的扩展与修复

况唯
2023-03-14
本文向大家介绍javascript框架设计读书笔记之数组的扩展与修复,包括了javascript框架设计读书笔记之数组的扩展与修复的使用技巧和注意事项,需要的朋友参考一下

1.indexOf和lastIndexOf方法:

因为IE7在数组对象上使用indexOf会报错,所以需要重写一个兼容性的。


Array.prototype.lastIndexOf(item,index){

  var n = this.length,i = (index==null||index>n-1)?n-1:index;

  if(i < 0) i = n+i;

  for(;i>=0;i--)

    if(this[i] === item)   //全等判断,indexOf,lastIndexOf

      return i;

  return -1;

}

2.shuffle方法:对数组进行洗牌。


function shuffle(target){

  var i = target.length, j ,temp;

  for(;i>0;j=parseInt(Math.random() * i), x = target[--i],target[i] = target[j],target[j]=x){}    

     //假设length=10,那么Math.random()*10->[0,10),parseInt后,[0,9],随机的选择一个与数组最后一项交换。第二次循环,[0,8],与数组的倒数第二项交换。

  return target;

}

3.数组的平坦化处理:flatten,返回一个一维数组


function flatten(arr){

  var result = [];

  arr.forEach(function(item){

    if(Array.isArray(item))   result.concat(flatten(item));

    else  result.push(item);

  });

  return result;

}

4.unique方法:对数组去重操作

此方法,面试官最喜欢问了,因为它有多种实现方法,最普通的是两个for循环。一般知道的最多的是使用一个对象a,然后一个for循环数组arr,每次if(a[arr[i]])是否存在,不存在则push到你新定义的数组result中。存在就证明,重复,因此不用push到result中。这种方案,针对"123",123,会认为相同的,其实一个是字符串,一个是数字,不应该认为是相同的。

所以就出现了以下方法:[1,"1","1"]


 if ((typeof obj[array[i]]) != (typeof array[i]) || obj[array[i]] != array[i]) {

  a.push(array[i]);

  obj[array[i]] = array[i];

}

//首先判断类型是否相同,如果相同,就判断他们的值是否相等,不相等就存进去,相等就证明之前已经存在这个值了。

如果类型不相同,这里存在两种情况,

第一种情况,obj之前已经存了此数据了,比如:obj[123] = 123,现在array[i] = "123",这时,typeof obj[array[i]])是数字,而typeof array[i]是字符串,因此存入数组中。

第二种情况是obj还没存此数据,比如:array[i] = "123",obj["123"] = undefind,这时typeof obj[array[i]])就是typeof undefined = undefined,不等于typeof array[i],存入数组中。

此种方法,可以解决字符串和数字相同的情况,但是无法解决对象相同的情况。比如:a = {1:2}, b ={2:1};

第一次循环时,typeof obj[a] = undefined,typeof a = Object。存入obj[a] =a.其实就是obj[Object] = a;

第二次循环时,typeof obj[b] 等于typeof obj[Object]其实就是typeof a = object,typeof b = object.因此进入到obj[array[i]] != array[i]|,也就是obj[b]->obj[Object]->a != b,因此存入

obj[b] = b;也就是obj[Object] = b;覆盖了之前的obj[Object] = a;

这种情况下,就会出现所有的对象,都只会存最后一个对象值。

当考虑对象时,我就会使用以下这种方法:


for(var i = 0; i < temp.length; i++){

                for(var j = i + 1; j < temp.length; j++){

                        if(temp[i] === temp[j]){

                                temp.splice( j, 1 );

                                j--;

                        }

                }

        }

 return temp;

5.数组排序:sort方法,如果要排序的是对象,可以自己写一个compare(a,b){if(a.age>b.age) return 1;else return -1;},A.sort(compare).

6.min返回数组最小值:return Math.min.apply(0,array);

7.unshift在ie6,7下不返回数组长度。


if([].unshift(1)!==1)   //往空数组中从前面添加一项,其他浏览器会返回1,而IE6,7不会返回数组长度。这时就执行if语句

{

  var _unshift = Array.prototype.unshift;      //函数劫持。

  Array.prototype.unshift = function(){

    _unshift.apply(this,arguments);

    return this.length;

  }

}

8.splice在一个参数的情况下,IE8以及以下版本默认第二个参数为0,而其他浏览器是数组长度。


if([1,2,3].splice(1).length == 0)   //IE8以及以下版本会等于0,其他版本会等于3,进入if里面

{

  var _splice = Array.prototype.splice;

  Array.prototype.splice = function(a){

    if(arguments.length == 1)   //如果只有一个参数时

    {

      return _splice.call(this,a,this.length);

    }else{

      return _splice.apply(this,arguments);

    }

  }

}

这个方法会改变数组的选项,因此数组的push,pop,shift,unshift(这几个方法也会修改数组的选项)都会调用这个方法来实现。

这里有一个地方需要注意:


var color = new Array('red','blue','yellow','black');

var color2 = color.splice(2,0,'brown','pink');

alert(color); // red,blue,brown,pink,yellow,black,在yellow选项上,开始操作,如果删除为0,则添加的选项是在yellow之前插入。切记。


 
这里请大家去看下splice和slice的区别,返回值,以及对原数组的影响。

以上就是本节的内容的精简版了,虽然精简,但重点都在,希望对大家阅读本节的时候能有所帮助

 类似资料:
  • 本文向大家介绍javascript框架设计读书笔记之字符串的扩展和修复,包括了javascript框架设计读书笔记之字符串的扩展和修复的使用技巧和注意事项,需要的朋友参考一下 1.repeat方法:将一个字符串重复自身n次。比如:repeat("chaojidan",2)   -> chaojidanchaojidan 方法1: 方法2: 2.取字符串所有字节的长度:str.charCodeAt(

  • 本文向大家介绍javascript框架设计读书笔记之种子模块,包括了javascript框架设计读书笔记之种子模块的使用技巧和注意事项,需要的朋友参考一下 1.命名空间:   js里面的命名空间就是使用对象的属性来扩展的。比如,用户定义一个A对象,A对象下面有B属性和C属性,同时B属性和C属性又是对象。因此A={B:{},C:{}},这时用户就可以在B对象和C对象中定义一样的方法,属性了。因此B和

  • 本文向大家介绍javascript框架设计读书笔记之模块加载系统,包括了javascript框架设计读书笔记之模块加载系统的使用技巧和注意事项,需要的朋友参考一下 模块加载,其实就是把js分成很多个模块,便于开发和维护。因此加载很多js模块的时候,需要动态的加载,以便提高用户体验。 在介绍模块加载库之前,先介绍一个方法。 动态加载js方法: 由于司徒正美使用了它写的mass框架来介绍模块加载,而业

  • 本文向大家介绍ThinkPHP框架设计及扩展详解,包括了ThinkPHP框架设计及扩展详解的使用技巧和注意事项,需要的朋友参考一下 ThinkPHP框架是国内知名度很高应用很广泛的php框架,我们从一些简单的开发示例中来深入了解一下这个框架给我们带来的开发便捷性,以及游刃有余的扩展设计。同时也从源码分析的角度看看框架的一些不足,尽量做全面客观的评价。这里假设大家已经使用过ThinkPHP框架,基本

  • 本文向大家介绍bootstrap读书笔记之CSS组件(上),包括了bootstrap读书笔记之CSS组件(上)的使用技巧和注意事项,需要的朋友参考一下 bootstrap三大核心之二。 包括glyphicon图标,下拉菜单(dropdown),按钮组(button group)....等等。一. 图标字体 bootstrap3提供了200多个免费图标字体。认为它是一个字。 arial-hidden

  • 本文向大家介绍《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法,包括了《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法的使用技巧和注意事项,需要的朋友参考一下 注释         单行注释://         多行注释:/* */         "<!--"可以用作单行注释,由于和HTML的"<!--  -->"多行注释类似,容易混