Array对象

1. 修改原数组

  push/ unshift 返回值 数组长度

  pop/shift 返回值 删除、增加值

  reverse

  sort() 若无参数,则比较的是字符串,会先用toString()转为字符类型

  splice: 删除 (a, b)

     插入 (a, 0, c, ...)

     替换 (a, b, c, ...)

2. 不修改原数组

  concat

  slice (a, b) 若a,b为负,则为length+a/b,并且若a>b,则返回[]

  join 

  

*补充知识点

浅复制

  浅复制是复制引用,复制后的引用都是指向同一个对象的实例,彼此之间的操作会互相影响

深复制

  深复制不是简单的复制引用,而是在堆中重新分配内存,并且把源对象实例的所有属性都进行新建复制,以保证深复制的对象的引用图不包含任何原有对象或对象图上的任何对象,复制后的对象与原来的对象是完全隔离的

深复制方法

1. Array的slice和concat方法

1) 单纯数组

  var array = [1,2,3];

  var array_shallow = array;

  var array_concat = array.concat();

  var array_slice = array.slice(0);

  console.log(array === array_shallow);   //true

  console.log(array === array_slice);     //false

  console.log(array === array_concat);    //false

2) 数组中包含对象

  var array = [1, [1,2,3], {name:"array"}];

  var array_concat = array.concat();

  var array_slice = array.slice(0);

  //改变array_concat中数组元素的值

  array_concat[1][0] = 5;

  console.log(array[1]);    //[5,2,3]

  console.log(array_slice[1]);  //[5,2,3]

  //改变array_slice中对象元素的值

  array_slice[2].name = "array_slice";

  console.log(array[2].name);   //array_slice

  console.log(array_concat[2].name); //array_slice

可以看出concat和slice并不是真正的深复制,数组中的对象元素(Object,Array等)只是复制了引用.

2. JSON对象的parse和stringify

  var source = {

      name:"source",

      child:{

          name:"child"

      }

  }

  var target = JSON.parse(JSON.stringify(source));

  //改变target的name属性

  target.name = "target";

  console.log(source.name);   //source

  console.log(target.name);   //target

  //改变target的child

  target.child.name = "target child";

  console.log(source.child.name);  //child

  console.log(target.child.name);  //target child

  这个方法使用较为简单,可以满足基本的深复制需求,而且能够处理JSON格式能表示的所有数据类型,但是对于正则表达式类型、函数类型等无法进行深复制(而且会直接丢失相应的值),同时如果对象中存在循环引用的情况也无法正确处理

3.   jQuery中的extend

1.  jQuery.extend( target [, object1 ] [, objectN ] )

合并object1, objectN到target对象,如果只有一个参数,则该target对象会被合并到jQuery对象中

  var result=$.extend( false, {}, 

  { name: "John", location:{city: "Boston",county:"USA"} }, 

  { last: "Resig", location: {state: "MA",county:"China"} }  );

  result={name:"John",last:"Resig",location:{state:"MA",county:"China"}};

2.  jQuery.extend([deep], target [, object1 ] [, objectN ] )

  深度复制合并对象,第一个参数是boolean类型的true时,将object1, objectN深度复制后合并到target中;关于深度复制,是将除null, undefined,window对象,dom对象,通过继承创建的对象外的其它对象克隆后保存到target中;

  var result=$.extend( true, {}, 

  { name: "John", location:{city: "Boston",county:"USA"} }, 

  { last: "Resig", location: {state: "MA",county:"China"} }  );

  result={name:"John",last:"Resig",location:{city:"Boston",state:"MA",county:"China"}};

jQuery扩展:

  1.  jQuery.extend()

  jQuery.extend中的jQuery类型是function,即typeof jQuery值为字符串“function”。如果把jQuery当成一个类,jQuery.extend相当于为该类添加了静态方法extend。静态方法是不需要new一个实例再去调用的,通过“类名+方法名”直接调用。

  2.  jQuery.fn.extend()

  jQuery.fn等于jQuery.prototype。通过调用jQuery.fn.extend(object)来扩展时(注意只传一个参数object),extend函数中仍然会执行。而这时的this则是jQuery.prototype。即给jQuery.prototype上添加了许多属性,方法。当jQuery函数执行时,如$()或jQuery()。该函数会new一个jQuery。这时则把扩展的属性,方法都附加到new生成的对象上了。

jQuery插件开发:

  1、  类级别的插件开发

    1.1 添加一个新的全局函数

      添加一个全局函数,我们只需如下定义:

      jQuery.foo = function() {   alert('This is a test. This is only a test.');  };    

    1.2 增加多个全局函数

      添加多个全局函数,可采用如下定义:

      jQuery.foo = function() {   alert('This is a test. This is only a test.');  };  

      jQuery.bar = function(param) {  alert(param);  };   

      调用时和一个函数的一样的:jQuery.foo();jQuery.bar();或者$.foo();$.bar('bar');  

    1.3 使用jQuery.extend(object); 

      jQuery.extend({      

        foo: function() {  alert('This is a test. This is only a test.');    },      

        bar: function(param) { alert(param); }     

      });

  1.4 使用命名空间

    虽然在jQuery命名空间中,我们禁止使用了大量的javaScript函数名和变量名。但是仍然不可避免某些函数或变量名将于其他jQuery插件冲突,因此我

  们习惯将一些方法封装到另一个自定义的命名空间。

  jQuery.myPlugin = {          

    foo:function() { alert('This is a test. This is only a test.');    },          

    bar:function(param) { alert(param); }         

  };  

  采用命名空间的函数仍然是全局函数,调用时采用的方法:  

  $.myPlugin.foo();         $.myPlugin.bar('baz');

  2、  对象级别的插件开发

  对象级别的插件开发需要如下的两种形式:、

  形式1:  

   (function($){     

    $.fn.extend({     

      pluginName:function(opt,callback){     // code      }     

    })     

  })(jQuery);     

  形式2:

   (function($) {       

    $.fn.pluginName = function() {   // code };     

  })(jQuery);      

       上面定义了一个jQuery函数,形参是$,函数定义完成之后,把jQuery这个实参传递进去.立即调用执行。这样的好处是,我们在写jQuery插件时,也可以使用$这个别名,而不会与prototype引起冲突.

posted @ 2017-07-03 21:17  夏目桑  阅读(151)  评论(0编辑  收藏  举报