jQuery 工具--数组和对象操作

最新推荐文章于 2023-02-06 16:24:33 发布

三知之灵

最新推荐文章于 2023-02-06 16:24:33 发布

阅读量1.2k

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/tjj3027/article/details/79292562

版权

JQuery 专栏收录该内容

39 篇文章 1 订阅

订阅专栏

数组和对象操作

函数列表

函数	说明
$.each()	用于遍历指定的对象和数组，并以对象的每个属性(或数组的每个成员)作为上下文来遍历执行指定的函数。
$.extend()	用于将一个或多个对象的内容合并到目标对象。
$.grep()	用于使用指定的函数过滤数组中的元素，并返回过滤后的数组。
~~$.sub()~~^1.9-	可创建一个新的jQuery副本，不影响原有的jQuery对像。
$.when()	提供一种方法来执行一个或多个对象的回调函数，延迟对象通常表示异步事件。
$.makeArray()	用于将一个类数组对象转换为真正的数组对象。
$.map()	用于使用指定函数处理数组中的每个元素(或对象的每个属性)，并将处理结果封装为新的数组返回。
$.inArray()	用于在数组中搜索指定的值，并返回其索引值。如果数组中不存在该值，则返回 -1。
$(selector).toArray()	把jQuery集合中所有DOM元素恢复成一个数组。
$.isArray()	用于将一个类数组对象转换为真正的数组对象。
$.merge()	合并两个数组
~~$.unique()~~^3.0-	用于根据元素在文档中出现的先后顺序对DOM元素数组进行排序，并移除重复的元素。
$.uniqueSort()	通过搜索的数组对象，排序数组，并移除任何重复的节点.
$.parseJSON()	用于将格式完好的JSON字符串转为与之对应的JavaScript对象。
$.parseXML()	用于将字符串解析为对应的XML文档。

函数说明

$.each():

用于遍历指定的对象和数组，并以对象的每个属性(或数组的每个成员)作为上下文来遍历执行指定的函数。

所谓的上下文，意即该函数内部的this指针引用了该元素。

语法：

jQuery.each( object, callback )

参数：

属性	说明
object	Object类型指定需要遍历的对象或数组。
callback	Function类型指定的用于循环执行的函数。

jQuery.each()方法的返回值为jQuery类型，返回当前jQuery对象本身。

参数object可以是对象或数组。如果是对象，则遍历该对象的每个属性；如果是数组，则遍历该数组中的每个元素。

jQuery.each()函数将根据每个成员(对象的属性或数组的元素)循环调用函数callback。每次调用函数callback时，jQuery.each()函数都会将callback函数内部的this引用指向当前正在迭代的成员，并为其传入两个参数。第一个参数是当前迭代成员在对象或数组中的索引值(从0开始计数)，第二个参数是当前迭代成员(与this的引用相同)。

jQuery.each()函数还会根据每次调用函数callback的返回值来决定后续动作。如果返回值为false，则停止循环(相当于普通循环中的break)；如果返回其他任何值，均表示继续执行下一个循环。

该函数属于全局jQuery对象。请注意，这与jQuery对象(实例)的each()函数不同。

区别：

在遍历DOM时，通常用$(selector).each(function(index,element))函数；
在遍历数据时，通常用$.each(dataresource,function(index,element))函数。

区别可以参考文章：http://blog.csdn.net/zjh_1110120/article/details/50550108
也可以研究以下代码；

代码：
使用jQuery.each()函数迭代对象或数组，jQuery示例代码如下：

// 遍历数组元素
$.each( [1, 2, 3] , function(i, item){
    alert("索引=" + i + "; 元素=" + item);  
} );

// 遍历对象属性
$.each( { name: "张三", age: 18 } , function(property, value){
    alert("属性名=" + property + "; 属性值=" + value);    
} );

var array = [];
array[2] = "Code";
array[4] = "Player";
// 会遍历索引为0、1、2、3、4的元素，其中0、1、3的元素是undefined
$.each( array , function(i, item){
    alert("索引=" + i + "; 元素=" + item);  
} );
//遍历数据
var jsonResourceList = '[{"id":"1","tagName":"apple"},{"id":"2","tagName":"orange"},{"id":"3","tagName":"banan
a"},{"id":"4","tagName":"watermelon"}]';
if(jsonResourceList.length >0){
    $.each(JSON.parse(jsonResourceList), function(index, obj) {
        alert(obj.tagName);
    });
}

jQuery.each()函数同样可以遍历jQuery对象中匹配的元素：
HTML:

<div id="n1">
    <div id="n2">
        <ul id="n3">
            <li id="n4">item1</li>
            <li id="n5">item2</li>
            <li id="n6">item3</li>
        </ul>
    </div>  
</div>
<form id="demoForm">
    <input name="goods_weight" type="checkbox" value="20">A(20kg)<br>
    <input name="goods_weight" type="checkbox" value="33">B(33kg)<br>
    <input name="goods_weight" type="checkbox" value="36">C(36kg)<br>
    <input name="goods_weight" type="checkbox" value="49">D(49kg)<br>
    <input name="goods_weight" type="checkbox" value="56">E(56kg)<br>
    <input name="goods_weight" type="checkbox" value="78">F(78kg)<br>
    <input id="btnBuy" type="button" value="订购">    
</form>

javascript:

$.each( $("ul li"), function(index, element){
    // this === element
    $(element).html( "编号" + (index + 1) );  
});

$.extend()

该函数可以将一个或多个对象的成员属性和方法复制到指定的对象上。

该函数属于全局jQuery对象。

语法：

jQuery.extend( target [, object1 ] [, objectN… ] )
1.0 新增该用法。
jQuery.extend( [ deep ], target , object1 [, objectN… ] )
1.1.4 新增该用法

用法二是用法一的变体，参数deep用于指示是否深度递归合并。

深度递归合并：合并对象的属性若也是对象，则取并集，并且属性对象相同的属性，后者覆盖前者

若$.extend( A,B),则简单的后者覆盖前者相同属性：
A.map={“a”:”1”,”b”:”1”};
B.map={“b”:”2”,”c”:”2”};
最终结果：A.map={“b”:”2”,”c”:”2”};

若$.extend( true，A,B),则简单的后者覆盖前者相同属性：
A.map={“a”:”1”,”b”:”1”};
B.map={“b”:”2”,”c”:”2”};
最终结果：A.map={“a”:”1”,”b”:”2”,”c”:”2”};

参数说明：

参数	说明
deep	可选/Boolean类型指示是否深度合并对象，默认为false。如果该值为true，且多个对象的某个同名属性也都是对象，则该”属性对象”的属性也将进行合并。
target	Object类型目标对象，其他对象的成员属性将被复制到该对象上。
object1	可选/Object类型第一个被合并的对象。
objectN	可选/Object类型第N个被合并的对象。

注意事项：

该函数复制的对象属性包括方法在内。此外，还会复制对象继承自原型中的属性(JS内置的对象除外)。
参数deep的默认值为false，你可以为该参数明确指定true值，但不能明确指定false值。简而言之，第一个参数不能为false值。
如果参数为null或undefined，则该参数将被忽略。
如果只为$.extend()指定了一个参数，则意味着参数target被省略。此时，target就是jQuery对象本身。通过这种方式，我们可以为全局对象jQuery添加新的函数。
如果多个对象具有相同的属性，则后者会覆盖前者的属性值。

返回值

jQuery.extend()函数的返回值是Object类型，返回扩展了其他对象的属性后的目标对象(即参数target)。

示例&说明：

jQuery.extend()函数的常规用法请参考如下jQuery代码：

//在当前页面内追加换行标签和指定的HTML内容
function w( html ){
    document.body.innerHTML += "<br/>" + html;
}


var x = { name:"CodePlayer" };
var y = { age: 18 };
var z = { site: "www.365mini.com"  };

// y和z的属性将被合并复制到对象x上
var obj = $.extend( x, y, z );
w( obj === x ); // true
w( obj.name ); // CodePlayer
w( obj.age ); // 18
w( obj.site ); // www.365mini.com

如果多个被合并对象有相同的属性，则后者会覆盖之前的属性：

var x = { name:"CodePlayer", age: 20 };
var y = { age: 18 };
var z = { site: "www.365mini.com", age: 21  };

var obj = $.extend( x, y, z );
// 三个对象都有age属性，以最靠后的对象z为准
w( obj.age ); // 21

如果多个对象的同名属性都是对象，则合并这些”属性对象”的属性，即深度递归合并：

var x = { name:"CodePlayer", map:{ a: 1, b: 1 } };
var y = { map: { b: 2, c: 2  } };

// 后者的map属性直接覆盖前者的map属性
var obj = $.extend( x, y );

for(var i in obj.map ){
    w( i + "=" + obj.map[i] );
}


w(""); // 换行隔开
/* 以下是深度复制 */


x = { name:"CodePlayer", map:{ a: 1, b: 1 } };
y = { map: { b: 2, c: 2  } };

// 两者的map属性都是对象，则合并map对象的属性。
obj = $.extend( true, x, y );

for(var i in obj.map ){
    w( i + "=" + obj.map[i] );
}

如果只为该函数指定一个参数，则表示省略target参数，target参数默认为jQuery对象本身。

//在当前页面内追加换行标签和指定的HTML内容
function w( html ){
    $(document.body).append("<br/>" + html);
}


var x = { 
    sayHi: function(){
        alert("这是新增的测试方法");
    }
};

// 只有一个参数，则表示省略target参数，target参数默认为jQuery对象本身
$.extend( x );
//w( obj === $ ); // true
$.sayHi(); // 这是新增的测试方法

$.grep()

用于使用指定的函数过滤数组中的元素，并返回过滤后的数组。

源数组不会受到影响，过滤结果只反映在返回的结果数组中。

该函数属于全局jQuery对象。

语法：

jQuery.grep( array, function [, invert ] )

jQuery 1.0 新增该静态函数。

参数说明：

参数	说明
array	Array类型将被过滤的数组。
function	Function类型指定的过滤函数。
invert	可选/Boolean类型默认值为false。指定是否反转过滤结果。

注意事项：

该函数将遍历数组元素，并执行过滤函数function。它会为function提供两个参数：其一为当前迭代的数组元素，其二是当前迭代元素在数组中的索引。
如果未指定invert参数，或该参数为false，则结果数组将包含function返回true的所有元素。如果参数invert为true，则结果数组将包含function返回false的所有元素。

返回值

jQuery.grep()函数的返回值为Array类型，返回通过指定函数过滤后的结果数组。

示例&说明：

jQuery.grep()函数的jQuery示例代码如下：

//在当前页面内追加换行标签和指定的HTML内容
function w( html ){
    document.body.innerHTML += "<br/>" + html;
}


var arr = [ 10, 25, 3, 0, -3 , 20, 6, 8, 11 ];

function filter(value, index){
    return value > 10;
}

var result = $.grep( arr, filter );
// 保留了所有大于10的元素
w( result ); // 25,20,11


var result2 = $.grep( arr, filter, true );
// 保留了所有不大于10的元素
w( result2 ); // 10,3,0,-3,6,8

$.sub()

有两个具体使用jQuery.sub（）创建jQuery副本的案例。第一种情况是希望重写 jQuery 的方法，而不想破坏原始的方法。另一种情况是想为 jQuery 插件做进一步的封装或进行基本的命名空间。

注意，jQuery.sub() 并不尝试做任何形式的隔离，因为这不是该方法的本意。所有 jQuery 副本中的方法依然指向原始的 jQuery (例如，依然会通过原始的 jQuery 进行事件绑定和触发，data 也会通过原始的 jQuery 绑定到元素上。Ajax 请求和事件也是通过原始的 jQuery 运行的等等。)。

请注意，如果你正在寻找使用这个开发插件，应首先认真考虑使用一些类似jQuery UI widget工厂，这两个状态和插件管理子方法。使用jQuery UI widget的一些例子建立一个插件。

语法：

jQuery.sub()

jQuery 1.7弃用函数,1.9移除该函数。

返回值

jQuery.grep()函数的返回值为Array类型，返回通过指定函数过滤后的结果数组。

示例&说明：

添加一个jQuery的方法，以便它不会受到外部分影响：

(function(){
  var sub$ = jQuery.sub();

  sub$.fn.myCustomMethod = function(){
    return 'just for me';
  };

  sub$(document).ready(function() {
    sub$('body').myCustomMethod() // 'just for me'
  });
})();

typeof jQuery('body').myCustomMethod // undefined

重写一些 jQuery 方法，提供新的功能：

(function() {
  var myjQuery = jQuery.sub();

  myjQuery.fn.remove = function() {
    // New functionality: Trigger a remove event
    this.trigger("remove");

    // Be sure to call the original jQuery remove method
    return jQuery.fn.remove.apply( this, arguments );
  };

  myjQuery(function($) {
    $(".menu").click(function() {
      $(this).find(".submenu").remove();
    });

    // A new remove event is now triggered from this copy of jQuery
    $(document).bind("remove", function(e) {
      $(e.target).parent().hide();
    });
  });
})();

// Regular jQuery doesn't trigger a remove event when removing an element
// This functionality is only contained within the modified 'myjQuery'.

创建一个插件，返回插件的具体方法：

(function() {
  // Create a new copy of jQuery using sub()
  var plugin = jQuery.sub();

  // Extend that copy with the new plugin methods
  plugin.fn.extend({
    open: function() {
      return this.show();
    },
    close: function() {
      return this.hide();
    }
  });

  // Add our plugin to the original jQuery
  jQuery.fn.myplugin = function() {
    this.addClass("plugin");

    // Make sure our plugin returns our special plugin version of jQuery
    return plugin( this );
  };
})();

$(document).ready(function() {
  // Call the plugin, open method now exists
  $('#main').myplugin().open();

  // Note: Calling just $("#main").open() won't work as open doesn't exist!
});

$.when()

提供一种方法来执行零个或多个Thenable 对象的回调函数，通常是表示异步事件的 Deferred(延迟) 对象。

语法：

jQuery.when( deferreds )
jQuery.when( )

参数说明：

参数	说明
deferreds	类型: Deferred 或 Promise 或 Thenable 零个或多个延迟对象，或者普通的JavaScript对象。

如果没有参数传递给 jQuery.when()，它会返回一个resolved状态的Promise。

如果向 jQuery.when() 传入一个单独的延迟对象，那么会返回它的 Promise 对象(延迟方法的一个子集)。可以继续绑定 Promise 对象的其它方法，例如， defered.then 。当延迟对象已经被解决（resolved）或被拒绝(rejected）（通常是由创建延迟对象的最初代码执行的），那么就会调用适当的回调函数。例如，由 jQuery.ajax() 返回的 jqXHR 对象是一并立的延迟对象并且可以像下面这样使用：

$.when( $.ajax("test.aspx") ).then(function(data, textStatus, jqXHR){
     alert( jqXHR.status ); // alerts 200
});

如果一个参数被传递给jQuery.when() ，并且它不是一个Deferred或Promise对象，那么它会被当作是一个被解决（resolved）的延迟对象，并且绑定到上面的任何 doneCallbacks 都会被立刻执行。向 doneCallbacks 中传入的是原始的参数。在这种情况下，设定的任何 failCallbacks 永远都不会被执行，因为延迟对象永远不会被拒绝（rejected）。例如：

$.when( { testing: 123 } ).done(
    function(x) { alert(x.testing); } /* alerts "123" */
    );

如果你不传递任何参数， jQuery.when()将返回一个resolved（解决）状态的promise对象:

$.when().then(function( x ) {
  alert( "I fired immediately" );
});

在多个延迟对象传递给jQuery.when() 的情况下，该方法根据一个新的“宿主” Deferred（延迟）对象，跟踪所有已通过Deferreds聚集状态，返回一个Promise对象。当所有的延迟对象被解决（resolve）时，“宿主” Deferred（延迟）对象才会解决（resolved）该方法，或者当其中有一个延迟对象被拒绝（rejected）时，“宿主” Deferred（延迟）对象就会reject（拒绝）该方法。如果“宿主” Deferred（延迟）对象是（resolved）解决状态时， “宿主” Deferred（延迟）对象的 doneCallbacks （解决回调）将被执行。参数传递给 doneCallbacks提供这解决（resolved）值给每个对应的Deferreds对象，并匹配Deferreds传递给 jQuery.when()的顺序。例如：

var d1 = $.Deferred();
var d2 = $.Deferred();

$.when( d1, d2 ).done(function ( v1, v2 ) {
    console.log( v1 ); // "Fish"
    console.log( v2 ); // "Pizza"
});

d1.resolve( "Fish" );
d2.resolve( "Pizza" );

如果没有值传递给 Deferred递延对象的解决（resolved）事件，那么相应的doneCallback参数将是undefined。如果传递给Deferred递延对象的解决（resolved）事件为单个的值，相应的参数将保留那个值。在传递给Deferred递延对象的解决（resolved）事件为为多个值的情况下，相应的参数将是这些值组成的数组。例如：

var d1 = $.Deferred();
var d2 = $.Deferred();
var d3 = $.Deferred();

$.when( d1, d2, d3 ).done(function ( v1, v2, v3 ) {
    console.log( v1 ); // v1 is undefined
    console.log( v2 ); // v2 is "abc"
    console.log( v3 ); // v3 is an array [ 1, 2, 3, 4, 5 ]
});

d1.resolve();
d2.resolve( "abc" );
d3.resolve( 1, 2, 3, 4, 5 );

在多延迟情况下，如果Deferreds延迟对象一被拒绝（rejected），jQuery.when()触发立即调用 “宿主” Deferred（延迟）对象的 failCallbacks。请注意在这个时间点上，有一些延迟对象仍然可以是未解决（unresolved）的。传递给failCallbacks的参数匹配Deferred（延迟）对象的 failCallbacks被 rejected 拒绝的顺序。那么，在这种情况下，如果需要执行一些额外的处理，例如，取消所有未完成的 ajax 请求，你可以在闭包中进行保持 jqXHR 对象的引用，并且在 failCallback 中检查或取消它们。

$.makeArray()

所谓”类数组对象”就是一个常规的Object对象，但它和数组对象非常相似：具备length属性，并以0、1、2、3……等数字作为属性名。不过它毕竟不是数组，没有从数组的原型对象上继承下来的内置方法(例如：push()、 sort()等)。

该函数属于全局jQuery对象。

语法：

jQuery.makeArray( object )

jQuery 1.2 新增该静态函数。

参数说明：

参数	说明
object	Object类型需要转换为数组的类数组对象。

注意事项：

一个类数组对象，它至少应该具备length属性，哪怕其值为 0，它可以没有”元素”(相当于空数组)。
如果参数object没有length属性，则它不是类数组对象。jQuery.makeArray()会直接将其视作结果数组中的一个元素。
String对象虽然有length属性，但一般不将其视作类数组对象。该函数仍然直接将其视作结果数组中的一个元素。
如果对象的最大数字属性大于或等于length属性，则以length属性为准，大于或等于其值的数字属性将被忽略。

返回值:

jQuery.makeArray()函数的返回值为Array类型，返回转换后的数组对象。

示例&说明：

类数组对象是非常常见的，例如我们经常使用的jQuery对象、NodeList对象以及函数内的arguments对象，都是类数组对象。它们都具有length属性，而且通过数字属性来访问对应的元素或参数。不过，它们毕竟不是真正的数组对象，因此无法使用数组对方的内置方法。通过jQuery.makeArray()函数，我们可以将类数组对象转换为一个真正的数组对象，从而使用数组对象的内置方法。

jQuery.makeArray()函数的jQuery示例代码如下：

//在当前页面内追加换行标签和指定的HTML内容
function w( html ){
    document.body.innerHTML += "<br/>" + html;
}

var obj = { 0:"CodePlayer", 1: "Hello", 2: 18, 3: true };
obj.length = 4;
// 类数组对象不是真正的数组
w( obj instanceof Array ); // false

var arr = $.makeArray( obj );
w( arr instanceof Array ); // true
w( arr.join(" ") ); // CodePlayer Hello 18 true
w( arr.length ); // 4

var obj2 = { };
obj2[2] = "DIY";
obj2.length = 1;
var arr2 = $.makeArray( obj2 );
w( arr2 instanceof Array ); // true
w( arr2.length ); // 1

var obj3 = { };
obj3.length = 0;
var arr3 = $.makeArray( obj3 );
w( arr3 instanceof Array ); // true
w( arr3.length ); // 0

var obj4 = { };
// 由于obj4没有length属性，直接将其转换为结果数组中的一个元素
var arr4 = $.makeArray( obj4 );
w( arr4 instanceof Array ); // true
w( arr4.length ); // 1
w( arr4[0] ); // [object Object]

// 虽然字符串有length属性，但它仍被视作结果数组中的一个元素
var arr5 = $.makeArray( "CodePlayer" );
w( arr5 instanceof Array ); // true
w( arr5.length ); // 1
w( arr5[0] ); // CodePlayer

我们常用的jQuery对象、NodeList对象、arguments对象也都是类数组对象。
HTML

<p>段落1</p>
<p>段落2</p>

script：

//在当前页面内追加换行标签和指定的HTML内容
function w( html ){
    $(document.body).append("<br/>" + html);
}

// jQuery对象也是一个类数组对象
var $p = $("p");
var arr1 = $.makeArray( $p );
w( $p instanceof Array ); // false
w( arr1 instanceof Array ); // true

// NodeList对象也是一个类数组对象
var p = document.getElementsByTagName("p");
var arr2 = $.makeArray( p );
w( p instanceof Array ); // false
w( arr2 instanceof Array ); // true


function foo(a, b){
    // arguments对象也是一个类数组对象
    var arr3 = $.makeArray( arguments );
    w( arguments instanceof Array ); // false   
    w( arr3 instanceof Array ); // true
}

foo(1, 2);

$.inArray()

用于在数组中搜索指定的值，并返回其索引值。如果数组中不存在该值，则返回 -1。

该函数属于全局jQuery对象。

语法：

jQuery.inArray( value, array [, fromIndex ])

jQuery 1.2 新增该静态函数。

参数说明：

参数	说明
value	任意类型用于查找的值。
array	Array类型指定被查找的数组。
fromIndex	可选/Number类型指定从数组的指定索引位置开始查找，默认为 0。

返回值:

jQuery.inArray()函数的返回值为Number类型，返回指定值在数组中的索引。如果没有找到，则返回 -1。

如果数组中存在多个相同的值，则以查找到的第一个值的索引为准。

注意：
如果要判断数组中是否存在指定值，你需要通过该函数的返回值不等于(或大于)-1来进行判断。

示例&说明：

jQuery.inArray()函数的jQuery示例代码如下：

//在当前页面内追加换行标签和指定的HTML内容
function w( html ){
    document.body.innerHTML += "<br/>" + html;
}


var arr = [ 10, 25, 3, 0, -3 ];

w( $.inArray( 25, arr ) ); // 1
w( $.inArray( -3, arr ) ); // 4
w( $.inArray( 10, arr ) ); // 0

// 数组中没有99
w( $.inArray( 99, arr ) ); // -1
// 数组中有数字10，但是没有字符串"10"
w( $.inArray( "10", arr ) ); // -1

$.isArray()

用于判断指定参数是否是一个数组。

该函数属于全局jQuery对象。

语法：

jQuery.isArray( object )

jQuery 1.3 新增该静态函数。

参数说明：

参数	说明
object	任意类型需要进行判断的任意值。

返回值:

jQuery.isArray()函数的返回值为Boolean类型，如果指定的参数是数组，则返回true，否则返回false。

示例&说明：

jQuery.isArray()函数的jQuery示例代码如下：

//在当前页面内追加换行标签和指定的HTML内容
function w( html ){
    document.body.innerHTML += "<br/>" + html;
}



w( $.isArray( [ 10, 25, 3 ] ) ); // true
w( $.isArray( new Array() ) ); // true


w( $.isArray( null ) ); // false
w( $.isArray( true ) ); // false
w( $.isArray( { } ) ); // false

var obj = { };
obj[0] = 10;
obj[1] = 25;
obj[2] = 3;
obj.length = 3;
// obj是一个类数组对象，但它仍然不是一个真正的数组
w( $.isArray( obj ) ); // false

$(selector).toArray()

$(selector).toArray():把jQuery集合中所有DOM元素恢复成一个数组。

语法：

$(selector).toArray( )

返回值:

$(selector)..toArray()函数的返回值为Array类型

示例&说明：

$('li').toArray()

$.merge()

合并两个数组

返回的结果会修改第一个数组的内容——第一个数组的元素后面跟着第二个数组的元素。要去除重复项，请使用$.unique()

语法：

jQuery.merge( first,second )

参数说明：

参数	说明
first	Array类型第一个待处理数组，会改变其中的元素。
second	Array类型第二个待处理数组，不会改变其中的元素。

返回值:

返回的结果会修改第一个数组的内容——第一个数组的元素后面跟着第二个数组的元素。要去除重复项，请使用$.unique()

示例&说明：

合并两个数组到第一个数组上:

$.merge( [0,1,2], [2,3,4] )//[0,1,2,2,3,4]

$.map()

用于使用指定函数处理数组中的每个元素(或对象的每个属性)，并将处理结果封装为新的数组返回。

jQuery库中还有一个同名的实例方法map()，它仅用于对当前jQuery对象所匹配的元素进行遍历处理。

该函数属于全局jQuery对象。

语法：

jQuery.map( object, callback)

jQuery 1.0 新增该静态函数。

参数说明：

参数	说明
object	任意类型指定的需要处理的数组或对象。
callback	Function类型指定的处理函数。

在jQuery 1.6 之前，该函数只支持遍历数组；从 1.6 开始，该函数也支持遍历对象。

jQuery.map()函数将遍历数组的元素(或对象的属性)并分别执行函数callback，函数中的this将指向全局对象(window)。jQuery.map()还会为函数传入两个参数：其一是当前迭代的元素或属性值，其二是当前迭代项的数组索引或对象属性名。

每次执行callback函数的返回值将作为结果数组中的一个元素，如果函数的返回值为null或undefined，则不会被添加到结果数组中。

返回值:

jQuery.map()函数的返回值为Array类型，返回经过处理后结果数组。

示例&说明：

HTML代码:

<input id="n1" name="uid" type="checkbox" checked value="1" />
<input id="n2" name="uid" type="checkbox" checked value="2" />
<input id="n3" name="uid" type="checkbox" value="3" />
<input id="n4" name="uid" type="checkbox" checked value="4" />

演示jQuery.map()函数的具体用法：

//在当前页面内追加换行标签和指定的HTML内容
function w( html ){
    document.body.innerHTML += "<br/>" + html;
}


// 遍历数组
var arr = [ "CodePlayer", 15, true ];
var result = $.map( arr, function(value, index){
    if( typeof value === "string"){
        // 如果是字符串类型，就返回null，null值将被忽略
        return null;
    }else{
        return value;
    }
} );
w( result ); // 15,true

// 遍历对象
var obj = { name: "CodePlayer", age: 18 };
var result2 = $.map( obj, function(value, key){
    return { "name": key, "value": value };     
});
w( result2 ); // [object Object],[object Object]

// 遍历jQuery对象匹配的元素
var result3 = $.map( $("[name=uid]:checked"), function(dom, key){
    return dom.value;       
});
w( result3 ); // 1,2,4

$.unique()

用于根据元素在文档中出现的先后顺序对DOM元素数组进行排序，并移除重复的元素。

注意：

该函数仅作用于DOM元素数组，而不是数字、字符串或其他类型。此外，这里的重复指的是两个元素实际上是同一个元素(通过全等”===”来判断)，而不是指两个属性相同的元素。

警告：

通过实际测试发现，该函数并不能按照预期返回正确的结果。在不同的浏览器中、在不同版本的jQuery中，其返回结果可能不一致(请参考下面的演示代码)。

该函数属于全局的jQuery对象。

语法：

jQuery.unique( array )

jQuery 1.1.3 新增该静态函数。

参数说明：

参数	说明
array	Array类型指定的DOM元素数组。

对数组中的DOM元素按照文档顺序进行排序，是从jQuery 1.4开始的。

返回值:

jQuery.unique()函数的返回值为Array类型，返回排序、去重后的DOM元素数组。

示例&说明：

jQuery.unique()函数的排序和去除，依赖于浏览器自身的相关API实现(如果没有相关实现，则使用jQuery自己的实现)，由于算法以及bug等因素，该函数的返回结果可能不符合期望。

HTML代码:

<p id="n1" class="test">段落1</p>
<p id="n2" class="test">段落2</p>
<p id="n3">段落3
    <span id="n4" class="test">文本1</span>
</p>
<div id="n5" class="test">文本2</div>
<p id="n6">段落4</p>

演示jQuery.unique()函数的具体用法：

// 打印DOM元素数组中所有元素的id
function printDoms( doms ){
    var ids = [];
    for(var i = 0; i < doms.length; i++ ){
        ids[i] = doms[i].id;
    }
    document.body.innerHTML += "<br/>" + ids.join(", ");
}

// 匹配n1、n2、n3、n6 四个元素
var pArray = $("p").get();
// 匹配n1、n2、n4、n5 四个元素
var testArray = $(".test").get();

// 联接两个数组
var total = pArray.concat( testArray );
printDoms( total ); // n1, n2, n3, n6, n1, n2, n4, n5

// 使用$.unique()进行排序、去重
var result = $.unique( total );
printDoms( result ); // n1, n2, n3, n6, n4, n5 (在Chrome浏览器中)
// 在IE或火狐上，其结果仍然为 n1, n2, n3, n6, n1, n2, n4, n5

/* 以上输出基于jQuery 1.11.1，在不同版本的jQuery中，其结果可能并不一致 */

$.uniqueSort()

排序一个DOM元素的数组，恰当的除去重复项。请注意，这仅适用于DOM元素数组，而不能处理字符串或者数字数组

如果一个节点和已经在数组中的节点完全相同，那么它被认为是重复的; 两个不同的节点具有相同的属性是被认为不重复的。此功能只适用于普通的JavaScript DOM元素的数组，主要是jQuery内部使用。你可能永远都不需要使用它。

该函数属于全局的jQuery对象。

语法：

jQuery.uniqueSort( array )

参数说明：

参数	说明
array	Array类型指定的DOM元素数组。

在jQuery 3.0之前, 这个方法叫做 jQuery.unique().在jQuery 1.4中结果将始终按它们在文档顺序返回。

返回值:

jQuery.uniqueSort()函数的返回值为Array类型，返回排序、去重后的DOM元素数组。

示例&说明：

HTML：

<div>There are 6 divs in this document.</div>
<div></div>
<div class="dup"></div>
<div class="dup"></div>
<div class="dup"></div>
<div></div>

javaScript:

<script>
// unique() must take a native array
var divs = $( "div" ).get();

// Add 3 elements of class dup too (they are divs)
divs = divs.concat( $( ".dup" ).get() );
$( "div:eq(1)" ).text( "Pre-unique there are " + divs.length + " elements." );

divs = jQuery.uniqueSort( divs );
$( "div:eq(2)" ).text( "Post-unique there are " + divs.length + " elements." )
  .css( "color", "red" );
</script>

$.parseJSON()

用于将格式完好的JSON字符串转为与之对应的JavaScript对象。

所谓”格式完好”，就是要求指定的字符串必须符合严格的JSON格式，例如：属性名称必须加双引号、字符串值也必须用双引号。

如果传入一个格式不”完好”的JSON字符串将抛出一个JS异常，例如：以下字符串均符合JSON格式，但它们不是格式完好的JSON字符串(因此会抛出异常)：

// 以下均是字符串值，省略了两侧的引号，以便于展现内容

{id: 1} // id是属性名称，必须加双引号
{'id': 1} // id是属性名称，必须用双引号(不能用单引号)
{"name": 'CodePlayer'} // name属性的值是字符串，必须用双引号(不能用单引号)

JSON标准不允许字符串中出现”控制字符”，例如：一个Tab或换行符。

$.parseJSON('{"name": "Code\tPlayer\n"}'); // 多数情况下，它会抛出一个错误，因为JS解析器会将字符串中的\t或\n等转义直接视作字面值，起到Tab或换行的效果。

//正确写法应该如下(使用两个反斜杠，以免被JS解析器直接转义\t或\n)：
$.parseJSON('{"name": "Code\\tPlayer\\n"}');

如果浏览器提供了一个本地的JSON.parse()方法，则jQuery将使用它来解析JSON字符串。

在jQuery 1.9之前(不含1.9)：如果传入一个空字符串、null或undefined，该函数将返回null，而不是抛出一个错误，即使它不是有效的JSON字符串。

该函数属于全局的jQuery对象。

语法：

jQuery.parseJSON( jsonString )

jQuery 1.4.1 新增该静态函数

参数说明：

参数	说明
jsonString	String类型需要解析并转为JS对象的JSON格式字符串。

在jQuery 3.0之前, 这个方法叫做 jQuery.unique().在jQuery 1.4中结果将始终按它们在文档顺序返回。

返回值:

jQuery.parseJSON()函数的返回值为任意类型，返回解析指定JSON字符串后的JavaScript表示。

示例&说明：

演示jQuery.parseJSON()函数的具体用法：

var result1 = $.parseJSON( "{}" ); // 一个空的Object对象

var result2 = $.parseJSON( '{ "name": "CodePlayer", "age": 1 }' ); // 一个Object对象
alert( result2.name ); // CodePlayer

var result3 = $.parseJSON( '[ 1, true, "CodePlayer" ]' ); // 一个Object对象
alert( result3[2] ); // CodePlayer

var result4 = $.parseJSON( 'true' ); // 布尔值：true

var result5 = $.parseJSON( 'null' ); // null

var result6 = $.parseJSON( '0' ); // 整数：0

var result7 = $.parseJSON( '"专注于编程开发技术分享"' ); // 字符串值：专注于编程开发技术分享

var result8 = $.parseJSON( "\"专注于编程开发技术分享\"" ); // 字符串值：专注于编程开发技术分享


/* 以下均是无效的JSON字符串或非常规的参数值 */

var result9 = $.parseJSON( 100 );  // 1.9之前返回null；1.9+返回100
var result10 = $.parseJSON( 1.23 );  // 1.9之前返回null；1.9+返回1.23
var result11 = $.parseJSON( true );  // 1.9之前返回null；1.9+返回true
var result12 = $.parseJSON( null );  // 返回null

var result13 = $.parseJSON( "" ); // 1.9之前返回null；1.9+抛出错误
var result14 = $.parseJSON( undefined );  // 1.9之前返回null；1.9+抛出错误

var result15 = $.parseJSON( "undefined" ); // 抛出错误
var result16 = $.parseJSON( "12x;xx'无效的JSON字符串x4546" ); // 抛出错误
var result17 = $.parseJSON( '{ name: "CodePlayer", age: 1 }' ); // 抛出错误
var result18 = $.parseJSON( '{ "name": \'CodePlayer\', "age": 1 }' ); // 抛出错误
var result19 = $.parseJSON( '{ "name": "Code\tPlayer\n" }' ); // 抛出错误

$.parseXML()

用于将字符串解析为对应的XML文档。

该函数将使用浏览器内置的解析函数来创建一个有效的XML文档，该文档可以传入jQuery()函数来创建一个典型的jQuery对象，从而对其进行遍历或其他操作。

该函数属于全局的jQuery对象。

语法：

jQuery.parseXML( xmlString )

jQuery 1.5 新增该静态函数。

参数说明：

参数	说明
xmlString	String类型格式良好的字符串，用于解析为对应的XML文档。

返回值:

jQuery.parseXML()函数的返回值为XMLDocument类型，返回解析后的XML文档对象。

示例&说明：

演示jQuery.parseXML()函数的具体用法：

//在当前页面内追加换行标签和指定的HTML内容
function w( html ){
    document.body.innerHTML += "<br/>" + html;
}


var xmlStr = '<?xml version="1.0" encoding="UTF-8"?>';
xmlStr += '<user>';
xmlStr += '<username>CodePlayer</username>';
xmlStr += '<age>18</age>';
xmlStr += '</user>';


var xmlDoc = $.parseXML( xmlStr );
$xml = $( xmlDoc );

var username = $xml.find("username").text();
w( username ); // CodePlayer

var $age = $xml.find("age");
w( $age.text() ); // 18

$age.text("20");
w( $age.text() ); // 20

三知之灵

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery 工具--数组和对象操作

数组和对象操作函数列表函数说明 $.each() 用于遍历指定的对象和数组，并以对象的每个属性(或数组的每个成员)作为上下文来遍历执行指定的函数。 $.extend() 用于将一个或多个对象的内容合并到目标对象。 $.grep() 用于使用指定的函数过滤数组中的元素，并返回过滤后的数组。 $.sub()1.9- 可创建一...
复制链接

扫一扫