[jQuery學習系列二 ]2-JQuery學習二-數組操做

時間  2020-10-26
標籤 html 正則表達式 數組 微信 ide 函數 post 學習 this url 欄目 JQuery 简体版
原文   原文鏈接


[jQuery學習系列二 ]2-JQuery學習二-數組操做

前言html

上一篇內容 已經對於Jquery 有了一些認識, 包括Jquery的選擇器和DOM對象, 那麼這一篇繼續來看下Jquery中很實用的Jquery對於數組的操做.正則表達式

Jquery中對數組的操做大體有如下幾種形式:
each(迭代), map(轉換), grep(篩選), 合併等.數組

1,迭代(each)
jQuery.each( object, callback ) 返回值:Object
說明:
通用例遍方法，可用於例遍對象和數組。
注意: 傳入的第一個參數能夠是數組或者對象.若是數組,則遍歷數組中的每個對象. 第一個參數表示索引,第二個參數表示值. this表示當前遍歷的元素, 能夠經過返回false終止迭代

實例演示:微信

複製代碼

<body>
    <h3>數組成員有：</h3>
    <p id="P1"></p>  
    <h3>篩選後的數組成員有(長度>=5)：</h3>
    <p id="P2"></p>  
    <h3>篩選後的數組成員有：</h3>
    <p id="P3"></p>
</body>$(document).ready(function() {    var members = ["Jolinson", "Steve", "Dive", "John", "Damon", "Joy"];    var str = "";
    $("#P1").html(members.join(", "));
    $.each(members, function(i, item) { //這裏第一個元素i是數組下標，第二個item是數組元素
        if(item.length >= 5)
        {
            str += item + ", ";
        }
    });

    str = str.substring(0,str.length - 2);
    $("#P2").text(str);
    $("#P3").text(members.join(", "));
});

複製代碼

 

運行結果圖:

特別注意: each雖然迭代每個元素或屬性, 可是在迭代函數中並不會改變當前元素的值, 也就是沒法改變返回後的對象.
若是須要改變數組中的每個元素而且將結果返回, 因使用jQuery.map( array, callback )函數.ide

2,轉換(map)
jQuery.map( array, callback )
返回值:Array函數

說明:
將一個數組中的元素轉換到另外一個數組中。
轉換函數能夠返回轉換後的值、null（刪除數組中的項目）或一個包含值的數組，並擴展至原始數組中。
第一個參數表示值,第二個參數表示索引.
post

複製代碼

<body>
    <h3>數組成員有：</h3>
    <p id="P1"></p>  
    <h3>篩選後的數組成員有(長度>=5)：</h3>
    <p id="P2"></p>  
    <h3>篩選後的數組成員有：</h3>
    <p id="P3"></p>
</body>$(document).ready(function() {    var members = ["Jolinson", "Steve", "Dive", "John", "Damon", "Joy"];    var str = "";
    $("#P1").html(members.join(", "));
    str = $.map(members, function(item, i) { //這裏第一個元素item是數組元素，第二個元素i是數組下標
        if(item.length >= 5)
        {            return item;
        }
    });    //將members所有轉換爲大寫
    members = $.map(members, function (item, i) { 
        return (i + 1 + ". " + item.toUpperCase());
    });
    $("#P2").text(str);
    $("#P3").text(members.join(", "));
});

複製代碼

運行結果圖:
學習

3，篩選(grep)
jQuery.grep( array, callback, [invert] ) 返回值: Array
array: Array類型將被過濾的數組。
callback: Function類型指定的過濾函數。
invert: 可選/Boolean類型默認值爲false。指定是否反轉過濾結果。this

說明：
該函數將遍歷數組元素，並執行過濾函數function。它會爲function提供兩個參數：其一爲當前迭代的數組元素，其二是當前迭代元素在數組中的索引。
若是未指定invert參數，或該參數爲false，則結果數組將包含function返回true的全部元素。若是參數invert爲true，則結果數組將包含function返回false的全部元素。
源數組不會受到影響，過濾結果只反映在返回的結果數組中。url

複製代碼

<body>
    <h3>數組成員有：</h3>
    <p id="P1"></p>  
    <h3>篩選後的數組成員有(長度>=5)：</h3>
    <p id="P2"></p> 
    <h3>數組成員有：</h3>
    <p id="P3"></p>  
    <h3>篩選後的數組成員有(使用正則表達式 開頭字母A-K)：</h3>
    <p id="P4"></p>   
</body>$(document).ready(function () {    var members = ["Jolinson", "Steve", "Dive", "John", "Damon", "Joy"];
    $("#P1").html(members.join(", "));
    members = $.grep(members, function (item, i) {        return item.length >= 5;
    });
    $("#P2").text(members.join(", "));    /*----------------------------------------------------*/
    var arr = ["Jolinson", "Steve", "Dive", "545sd", "23154", "55855"];
    $("#P3").text(arr.join(", "));
    arr = $.grep(arr, function (item) {        return item.match(/^[A-K]/);
    });
    $("#P4").text(arr.join(", "));
});

複製代碼

4，合併
(1)jQuery.extend( [deep], target, object1, [objectN] )
[deep]:可選/Boolean類型指示是否深度合併對象，默認爲false。若是該值爲true，且多個對象的某個同名屬性也都是對象，則該"屬性對象"的屬性也將進行合併。
target: Object類型目標對象，其餘對象的成員屬性將被複制到該對象上。
object1:可選/Object類型第一個被合併的對象。
[objectN]: 可選/Object類型第N個被合併的對象。

該函數能夠將一個或多個對象的成員屬性和方法複製到指定的對象上。
示例以下:

複製代碼

//在當前頁面內追加換行標籤和指定的HTML內容function w( html ){
    document.body.innerHTML += "<br/>" + html;
}var x = { name:"CodeMan" };var y = { age: 18 };var z = { site: "http://www.cnblogs.com/wang-meng/"  };var obj = $.extend( x, y, z );
w( obj === x ); // truew( obj.name ); // CodeManw( obj.age ); // 18w( obj.site ); // http://www.cnblogs.com/wang-meng/

複製代碼


(2)jQuery.makeArray( obj )
函數用於將一個類數組對象轉換爲真正的數組對象。
類數組對象是很是常見的: 例如咱們常常使用的jQuery對象、函數內的arguments對象，都是類數組對象。
jQuery.makeArray()函數: 咱們能夠將類數組對象轉換爲一個真正的數組對象，從而使用數組對象的內置方法。
示例以下:

複製代碼

<p>段落1</p>
<p>段落2</p>//在當前頁面內追加換行標籤和指定的HTML內容function w( html ){
    document.body.innerHTML += "<br/>" + html;
}// jQuery對象也是一個類數組對象var $p = $("p");var arr1 = $.makeArray( $p );
w( $p instanceof Array ); // falsew( arr1 instanceof Array ); // true// NodeList對象也是一個類數組對象var p = document.getElementsByTagName("p");var arr2 = $.makeArray( p );
w( p instanceof Array ); // falsew( arr2 instanceof Array ); // truefunction foo(a, b){    //arguments對象也是一個類數組對象    //arguments是收到的實參副本，
    var arr3 = $.makeArray( arguments );
    w( arguments instanceof Array ); // false    
    w( arr3 instanceof Array ); // true}

foo(1, 2);

複製代碼

 

(3)jQuery.inArray( value, array )
value: 任意類型用於查找的值。
array: Array類型指定被查找的數組。
函數用於在數組中搜索指定的值，並返回其索引值。若是數組中不存在該值，則返回 -1。

示例以下:

複製代碼

//在當前頁面內追加換行標籤和指定的HTML內容function w( html ){
    document.body.innerHTML += "<br/>" + html;
}var arr = [ 10, 25, 3, 0, -3 ];

w( $.inArray( 25, arr ) ); // 1w( $.inArray( -3, arr ) ); // 4w( $.inArray( 10, arr ) ); // 0// 數組中沒有99w( $.inArray( 99, arr ) ); // -1// 數組中有數字10，可是沒有字符串"10"w( $.inArray( "10", arr ) ); // -1

複製代碼


(4)jQuery.merge( first, second )
合併兩個數組
返回的結果會修改第一個數組的內容——第一個數組的元素後面跟着第二個數組的元素。
要去除重複項，須要使用$.unique()

合併兩個數組到第一個數組上: 
$.merge( [0,1,2], [2,3,4] )

結果: 
[0,1,2,2,3,4]

 

(5)jQuery.unique( array )
刪除數組中重複元素。只處理刪除DOM元素數組，而不能處理字符串或者數字數組。

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

結果: 
[0,1,2,3,4]

 

(6)arguments(增長內容)
Javascript並無重載函數的功能，可是Arguments對象可以模擬重載。Javascrip中每一個函數都會有一個Arguments對象實例arguments，它引用着函數的實參，能夠用數組下標的方式"[]"引用arguments的元素。
arguments.length爲函數實參個數，arguments.callee引用函數自身。

示例以下:

複製代碼

function test(){    // 循環輸出調用當前函數時傳入的參數
    for(var n = 0; n < arguments.length; n++){
        document.write( arguments[n] + "|");
    }
    document.write('<br>'); // 輸出換行符進行區分};
test(); // (空字符串)test("Code", "http://www.cnblogs.com/wang-meng/", 12, true); // Code|http://www.cnblogs.com/wang-meng/|12|true|test("張三", false, 12.315); // 張三|false|12.315|function foo(){    // arguments前也能夠加上函數名稱
    for(var n = 0; n < foo.arguments.length; n++){
        document.write( foo.arguments[n] + "|");
    }
    document.write('<br>');
};
foo("Hello", "World"); // Hello|World|// 使用arguments對象實現任意多個數的求和function sum(){    var sum = arguments[0];    for(var n = 1; n < arguments.length; n++){
        sum += arguments[n];
    }    return sum;
}

document.writeln( sum() ); // undefineddocument.writeln( sum( 1, 5 ) ); // 6document.writeln( sum( 1, 212, 21, -14, 23 ) ); // 243

複製代碼

 

5，其餘
其餘更多關於數組的操做請查看: W3School JS Array
http://www.w3school.com.cn/jsref/jsref_obj_array.asp

以上內容皆是本身學習中整理出來的內容, 若有紕漏請你們看到能夠提醒一下. 整理記錄在這裏算是對本身學習的一個總結, 給往後的忘記的本身一個參考.

英語小貼士：
Good for you。
好啊！作得好！
Great minds think alike！
英雄所見略同！
Have a nice day.
祝你今天愉快。
Have butterflies in one's stomach.
緊張。
He's been everywhere.
他處處都去過了。
He hit the ceiling at the news.
他聽到那消息暴跳如雷/大發雷霆。
His argument doesn't hold water.
他的論點站不住腳。
How do I address you?
我怎麼稱呼你？

分類: Jquery

好文要頂 關注我 收藏該文  

一枝花算不算浪漫

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程