JavaScript 数组Array grep map find filter splice 过滤 筛选

jQuery 杂项方法 | 菜鸟教程 | $.each()、$.grep()、$.inArray()、$.map()
JavaScript Array 对象

JavaScript的数组在程序中使用的频率非常高，而且Array本身提供的方法也异常强大。

1.JS数组定义

数组有四种定义的方式
使用构造函数：
var a = new Array();
var b = new Array(8);
var c = new Array("first", "second", "third");
或者数组直接量：
var d = ["first", "second", "third"];

2.属性

Array只有一个属性，就是length，length表示的是数组所占内存空间的数目，而不仅仅是数组中元素的个数。

3.方法

toString()：把数组转换成一个字符串
toLocaleString()：把数组转换成一个字符串
join()：把数组转换成一个用符号连接的字符串
shift()：将数组头部的一个元素移出
unshift()：在数组的头部插入一个元素
pop()：从数组尾部删除一个元素
push()：把一个元素添加到数组的尾部
concat()：给数组添加元素
slice()：返回数组的部分
reverse()：将数组反向排序
sort()：对数组进行排序操作
splice()：插入、删除或者替换一个数组元素

4.数组检测
var isArray = function(obj) {
    return Object.prototype.toString.call(obj) == ‘[Object Array]’;
}

5.转换方法
toString(),valueOf(),toLocaleString()返回数组总每个值的字符串形式拼接的一个以都好分割的字符串。

6.栈方法
push和pop方法组合可以模拟栈的后进先出的数据结构。
push()方法接收任意数量的参数，把它们逐个添加到数组的末尾，并返回修改后数组的长度。
pop()方法则从数组末尾移除最后一项，减少数组的length值，然后返回移除的项。

7.队列方法
push和shift方法组合可以模拟队列先进先出的数据结构
shift()方法移除数组中的第一个项并返回该项，同时将数组长度减1。

8.重排序方法
reverse()方法用于颠倒数组中元素的顺序。
sort() 方法用于对数组的元素进行排序。注意，sort方法比较的是字符串。
语法：arrayObject.sort(sortby)
参数：sortby 可选。规定排序顺序。必须是函数。
返回值：对数组的引用。请注意，数组在原数组上进行排序，不生成副本。

9.操作方法
concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
语法：arrayObject.concat(arrayX,arrayX,......,arrayX)
参数：arrayX必需。该参数可以是具体的值，也可以是数组对象。可以是任意多个。
返回值：返回一个新的数组。该数组是通过把所有arrayX 参数添加到arrayObject 中生成的。如果要进行 concat() 操作的参数是数组，那么添加的是数组中的元素，而不是数组。

slice() 方法可从已有的数组中返回选定的元素。
语法：arrayObject.slice(start,end)
参数：start 必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。
返回值：返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。
说明：请注意，该方法并不会修改数组，而是返回一个子数组。如果想删除数组中的一段元素，应该使用方法 Array.splice()。

splice() 方法用于插入、删除或替换数组的元素。
语法：arrayObject.splice(index,howmany,element1,.....,elementX)
参数：
index必需。规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
howmany 必需。规定应该删除多少元素。必须是数字，但可以是 "0"。如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
element1可选。规定要添加到数组的新元素。从 index 所指的下标处开始插入。
elementX可选。可向数组添加若干元素。
返回值：如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。
说明：splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。

/// 插入案例1
var arrR = ['a', 'b', 'c', 'd']
arrR.splice(1, 0, 'a1')
arrR.splice(1, 0, 'b1')
arrR.splice(1, 0, 'c1')
console.log(arrR) //["a", "c1", "b1", "a1", "b", "c", "d"]
/// 插入案例2
var arrR = ['1', '2', '3', '4']
arrR.splice(0, 0, 'a1')
arrR.splice(1, 0, 'b1')
arrR.splice(2, 0, 'c1')
console.log(arrR) //["a1", "b1", "c1", "1", "2", "3", "4"]
/// 替换
arrR.splice(1, 1, 'abcd')
console.log(arrR) //["a", "abcd", "b1", "a1", "b", "c", "d"]
/// 删除
arrR.splice(1, 1)
console.log(arrR) //["a", "b1", "a1", "b", "c", "d"]

10.位置方法
indexOf()和lastIndexOf，这两个方法都接收两个参数：要产假的项和（可选的）表示查找起点位置的索引。

indexOf方法从数组的开头向后查找，

lastIndexOf方法则从数组的末尾开始向前查找。

两个方法都返回要查找的项在数组中的位置，如果没有找到则返回-1

11.迭代方法
    5个迭代方法，非常有用，可以大大方便处理数组的任务。目前支持的这些方法的浏览器有IE9+、Firefox2+、Safari3+、Opera9.5+和chrome。
    每个方法都接收两个参数：要在每一项上运行的函数和（可选的）运行该函数的作用域对象-影响this的值。传入这些方法中的函数会接收三个参数：数组项的值、该项在数组中的位置和数组对象本身。

every()和some()方法，用于查询数组中的项是否满足某个条件。

every()来说，传入的函数必须对每一项都返回true，这个方法返回true，否则返回false。

var numbers = [1,2,3,4,5,4,3,2,1]; 
var everyResult = number.every(function(item, index, array) { 
    return item > 2; 
}); 
alert(everyResult); //false 

some()方法则是只要传入函数对数组中的莫一项返回true，就返回true。

var someResult = numbers.some(function(item, index, array) { 
    return item > 2; 
}); 
alert(someResult);  //true

filter()方法利用指定的函数确定是否在返回的数组总包含的某一项，并返回该函数会返回true的项组成的数组。

这个方法对于查询符合某些条件的所有数组项非常有用。

var filterResult = number.filter(function(item, index, array) { 
    return item > 2; 
}); 
alert(filterResult);    //[3,4,5,4,3] 

map()也返回一个数组，而这个数组的每一项都是在原始数组中的对应项上运行传入函数的结果。即返回每次函数调用的结果组成的数组。

var mapResult = numbers.map(function(item, index, array) { 
    return item * 2; 
}); 
alter(mapResult);   //[2,4,6,8,10,8,6,4,2]

forEach()方法只是对数组中的每一项运行传入的函数，没有返回值。

numbers.forEach(function(item, index, array) { 
    //doSomething 
}); 

========================================

push、splice 添加、删除元素

var arrayObj = new Array();//创建一个数组
var arrayData = [];

arrayObj.push("1");
arrayObj.push("2");
arrayObj.push("3");
arrayObj.push("4");
arrayObj.push("5");

arrayData.push({ "vale": $("#hidCount").val(), "text":"123" });
arrayData.push({ "vale": $("#hidCount").val(), "text":"123" });
arrayData.push({ "vale": $("#hidCount").val(), "text":"123" });
arrayData.push({ "vale": $("#hidCount").val(), "text":"123" });
arrayData.push({ "vale": $("#hidCount").val(), "text":"123" });

arrayData.push({ "objKey": $("#hidCount").val(), "objText": result.Data });
arrayData.push({ "objKey": $("#hidCount").val(), "objText": result.Data });
arrayData.push({ "objKey": $("#hidCount").val(), "objText": result.Data });
arrayData.push({ "objKey": $("#hidCount").val(), "objText": result.Data });
arrayData.push({ "objKey": $("#hidCount").val(), "objText": result.Data });

//数组长度
alert(arrayObj.length);

//数组转字符串
alert(arrayObj.join(","))

//json转字符串
alert(JSON.stringify(arrayData));


///删除arrayData元素
function DeleteLawyer() {
    $("#liLawyer" + $("#hidEditId").val()).remove();
    $.each(arrayData, function (index, item) {
        if ($("#hidEditId").val() == item.objKey.toString()) {
            arrayData.splice(index, 1);
            return;
        }
    });
    //alert(JSON.stringify(arrayData));
}

find

///
var printNum = $(".eventspace").find('[print=true]').length

///
var dragLabel = $(".eventspace").find('[print=true][order=true]')
for (var i = 0; i < dragLabel.length; i++) {
    var drugbag = JSON.parse(decodeURI($(dragLabel[i]).data('order')));
    console.log(drugbag['DRUG_BAG_ID']);
}

///
$('#eventspace div[print=true]').find(".dragprintdate").each(function (item, index) {
    $(this).css({ "visibility": "visible" })
})

filter、grep

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Vue</title>
    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>
    <div></div>
    <p></p>
    <span></span>
    <script>
    $(document).ready(function () {
        let arr = [1, 2, 6, 3, 4, 5];
        let arrStudent = ["zhangsan", "lisi", "wangwu", "zhaoliu"];
        let arrAsset = [{ "vale": 100, "name": "电子商务" }, { "vale": 200, "name": "互联网" }];
        let arrGrep = [1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1];

        /**
         * 1、arr
         * @method filter
         * @param {number}   item   当前迭代的数组元素
         * @param {number}   index  当前迭代的数组元素下下标
         * @param {array}    array  原数组
         */
        let res = arr.filter(function (item, index, array) {
            //元素值，元素的索引，原数组。
            return (item > 2);
        });
        console.log(res);

        /**
         * 2、arr
         * @method filter
         * @param {number}   index  当前迭代的数组元素下下标
         * @param {number}   item   当前迭代的数组元素
         * @param {array}    array  原数组
         */
        let resStudent = arrStudent.filter(function (item, index, array) {
            //元素值，元素的索引，原数组。
            return (item === "zhangsan");
        });
        console.log(resStudent);

        /**
         * 1、arrAsset
         * @method filter
         */
        let asset = arrAsset.filter((value, index) => {
            return value.vale == 100;
        });
        console.log(JSON.stringify(asset))

        /**
         * 1、arrGrep 原始数据
         */
        $("div").text("【原始数据】" + arrGrep.join(", "));

        /**
         * 2、arrGrep 值不等于5 并且 索引大于4
         * @method grep
         */
        arrGrep = jQuery.grep(arrGrep, function (n, i) {
            // n = 数组元素的当前值
            // i = 当前值的下标，索引
            return (n !== 5 && i > 4);
        });
        $("p").text("【值不等于5 并且 索引大于4】" + arrGrep.join(", "));

        /**
         * 3、arrGrep 值 不等于 9
         * @method grep
         */
        arrGrep = jQuery.grep(arrGrep, function (a) {
            return a !== 9;
        });
        $("span").text("【值 不等于 9】" + arrGrep.join(", "));
    });
    </script>
</body>
</html>

*
*
*