数组常用方法和属性

数组常用属性和方法

一、常用属性

1、length

使用length 应该注意的问题 （javascript 很容易因为length 的问题导致整个数组的长度修改）

1、对 arr 的length 赋值会导致 arr修改

例：
 

var arr1 =  [1,3,5,14,24];
 var arr2 =  [1,3,5,7,9];
 arr1.length = 7
 arr2.length = 3;
 console.log(arr1)  // [1,3,5,14,24, undefined, undefined]
 console.log(arr2)  // [1,3,5]

2、通过索引对 arr 的元素赋值会引起 arr 值得改变（正常情况），但是对 arr 超过其长度的索引赋值也会引起 arr 的长度发生变化

例：

 var arr =  [1,3,5,14,24];
 arr[6] = 11;
 console.log(arr)  // [1,3,5,7,9,undefined,11]
 console.log(arr.length)  // 7

2、prototype 返回对象类型原型的引用 (主要作用：对数组进行扩展)

例：

//  向数组中添加 min 方法， 使得数组可以使用 min() 取得 最小值
function min(){
    var val = this[0];
    for(var i = 0; i < this.length - 1; i++){
        var minVal = this[i] < this[i+1] ? this[i] : this[i+1];
    }
    return minVal;
}
    Array.prototype.min = min;
    console.log([1,4,6,0,9].min())  // 0

二、常用方法

1、push（）方法：向数组的末尾增加一项或多项 返回值是新数组的长度

请注意，该方法不创建新数组，而是直接修改原有的 arrayObject。

例：

    var arr = [1,2,3];
    var result = arr.push(4,5);
    console.log(arr)  // [1,2,3,4,5];
    console.log(result)  // 5

2、unshift（）方法：向数组开头增加一项或多项 返回值是新数组的长度

请注意，该方法不创建新数组，而是直接修改原有的 arrayObject。

例：

    var arr = [1,2,3];
    var result = arr.unshift(4,5)
    console.log(arr)  // [4,5,1,2,3];
    console.log(result)  // 5

3、pop（）方法:  删除数组的末尾一项 返回值是原数组的最后一个元素（也就是删除的值），如果数组已经为空，则 pop() 不改变数组，并返回 undefined 值。

请注意，该方法不创建新数组，而是直接修改原有的 arrayObject。

例：  

    var arr = [1,2,3];
    var result = arr.pop();
    console.log(arr)  // [1,2];
    console.log(result)  // 3

4、shift（）方法:  删除数组开头项 返回值是原数组的第一个元素（也就是删除的值），如果数组是空的，那么 shift() 方法将不进行任何操作，返回 undefined 值。

请注意，该方法不创建新数组，而是直接修改原有的 arrayObject。

例：

    var arr = [1,2,3];
    var result = arr.shift();
    console.log(arr)  // [2,3];
    console.log(result)  // 1

以上4种方法都会改变原数组

5、slice（start，end）方法：可从已有的数组中返回选定的元素，返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。使用负值从数组的尾部选取元素。如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。

slice（）不写参数相当于复制原数组

请注意，该方法并不会修改数组，而是返回一个子数组。如果想删除数组中的一段元素，应该使用方法 Array.splice()。

例：

    var arr = [1,2,3,4,5];
    var result = arr.slice(2,4);
    console.log(arr)  // [1,2,3,4,5];
    console.log(result)  // [3,4];

6、splice（index,howmany,item1,.....,itemX）方法 向数组中添加或删除项目，返回被删除的项目。

index：是必需的，规定添加或删除项目的位置,使用负数可从数组结尾处规定位置。

howmany：是必需的，要删除的项目数量。如果设置为 0，则不会删除项目。

item：可选。向数组添加的新项目。

splice（0）相当于复制原数组

请注意，该方法会修改原数组

例：

  

    var arr = [1,2,3,4,5,6];
    var result =  arr.splice(2,4,"ni","hao");
    console.log(arr)  // [1, 2, "ni", "hao"]
    console.log(result)  // [3,4,5,6]

7、concat（arrayX,arrayX,......,arrayX)）方法: 用于连接两个或多个数组。返回拼接好的数组 

例：
 

    var arr = [1,2,3];
    var result1 = arr.concat(4,5);
    var result2 = arr.concat(4,5,[8,9]);
    var result3 = arr.concat([5,6],[9,10]);
    console.log(arr)  // [1,2,3];
    console.log(result1)  // [1,2,3,4,5];
    console.log(result2)  // [1,2,3,8,9];
    console.log(result3)  // [1,2,3,5,6,9,10];

请注意，该方法并不会修改数组

8、join（separator）: 把数组中的每一项 按照指定的分隔符拼接成字符串，返回串连接起来的字符串，如果省略separator参数，则使用逗号作为分隔符。

例：
    

    var arr = [1,2,3,4,5];
    var result = arr.join(":");
    console.log(arr)  // [1,2,3,4,5];
    console.log(result)  // 1:2:3:4:5;

9、split(separator,howmany) 方法：用于把一个字符串分割成字符串数组。返回一个分割好的字符串数组

separator：必需。字符串或正则表达式，从该参数指定的地方分割 stringObject。

howmany：可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。

注：如果把空字符串 ("") 用作 separator，那么 stringObject 中的每个字符之间都会被分割。

例：

    var str1 = "How are you ?";
    var str2 = "2:3:4:5";
    var result1 = str1.split(" ");
    var result2 = str1.split("");
    var result3 = str1.split(" ",2);
    var result4 = str2.split(":");
    console.log(result1);    //["How", "are", "you"]
    console.log(result2);    // ["H", "o", "w", " ", "a", "r", "e", " ", "y", "o", "u", "?"]
    console.log(result3);    //["How", "are"]
    console.log(result4);    //["2", "3", "4", "5"]

10、sort(sortby)方法：用于对数组的元素进行排序。返回值：排好序的数组

sortby：可选。规定排序顺序。必须是函数。

如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。

如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：
若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
若 a 等于 b，则返回 0。
若 a 大于 b，则返回一个大于 0 的值。

注意该方法会改变原数组。

例：

   var arr1 = ["John", "George","Thomas","James"];
    var arr2 = [1,3,5,14,23];
    var result1 = arr1.sort();
    var result2 = arr2.sort();
    console.log(arr1);       //  ["George", "James", "John", "Thomas"]
    console.log(arr2);       //  [1, 14, 23, 3, 5]
    console.log(result1);    //  ["George", "James", "John", "Thomas"]
    console.log(result2);    //  [1, 14, 23, 3, 5]

请注意，上面的代码result2没有按照数值的大小对数字进行排序，要实现这一点，就必须使用一个排序函数：
   

 function sortNumber(a,b)
    {
        return a - b
    }
    var arr2 = [1,3,5,14,23];
    var result2 = arr2.sort(sortNumber);
    console.log(arr2);       //  [1, 3, 5, 14, 23]
    console.log(result2);    // [1, 3, 5, 14, 23]

11、 reverse()方法：用于颠倒数组中元素的顺序。返回倒序的数组，该方法会改变原来的数组，而不会创建新的数组。

例：

 

    var arr = [1,3,5,14,23];
    var result = arr.reverse();
    console.log(arr);       //  [23, 14, 5, 3, 1]
    console.log(result);    // [23, 14, 5, 3, 1]

12、indexOf(searchvalue,fromindex) 方法：可返回某个指定的字符串值在字符串中首次出现的位置。

该方法将从头到尾地检索字符串 stringObject，看它是否含有子串 searchvalue。开始检索的位置在字符串的 fromindex 处或字符串的开头（没有指定 fromindex 时）。如果找到一个 searchvalue，则返回 searchvalue 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。

注：indexOf() 方法对大小写敏感，如果要检索的字符串值没有出现，则该方法返回 -1。

例：

   

    var str = "Hello world Hello world!";
    var result1 = str.indexOf("hello");
    var result2 = str.indexOf("Hello");
    var result3 = str.indexOf("Hello",6);
    console.log(result1);    // -1
    console.log(result2);    // 0
    console.log(result3);    // 12

13、toString()方法: 将数组转换为以逗号分隔的字符串；

14、map(function(currentValue, index,arr)，thisValue) 方法：按照原始数组元素顺序依次处理元素。返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

function(currentValue, index,arr)：必须。函数，数组中的每个元素都会执行这个函数。currentValue，必需，当前元素的值；index，当前元素的索引值；arr，当期元素属于的数组对象

thisValue：可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。如果省略了 thisValue ，"this" 的值为 "undefined"

注：map() 不会对空数组进行检测，不会改变原始数组。

例：

    var numbers = [65, 44, 12, 4];
//  数组中的每个元素都加5，并返回新数组:
    var result = numbers.map(function(ele,index){
        return ele = ele + 5;
    })
    console.log(result);  // [70,49,17,9]

15、forEach(function(currentValue, index, arr), thisValue) 方法: 用于调用数组的每个元素，并将元素传递给回调函数。

注： forEach() 对于空数组是不会执行回调函数的,直接修改原数组，没有返回值。

16、filter(function(currentValue,index,arr), thisValue)方法：创建并返回一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素过滤出来的。

注：filter() 不会对空数组进行检测，不会改变原始数组。

例：
 

    var numbers = [65, 44, 12, 4];
    var result = numbers.filter(function(ele,index){
        if(ele>15){
            return ele;
        }
    })
    console.log(result);  //  [65,44]

17、every（function(currentValue,index,arr), thisValue）方法：用于检测数组所有元素是否都符合指定条件（通过函数提供），如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。如果所有元素都满足条件，则返回 true。

注： every() 不会对空数组进行检测，不会改变原始数组。

例：

 

    var numbers = [65, 44, 12, 4];
    var result = numbers.every(function(ele,index){
        if(ele > 3){
            return true;
        }
    })
    console.log(result); // true

18、some（function(currentValue,index,arr),thisValue）方法：用于检测数组中的元素是否满足指定条件（函数提供）。如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测，否则返回false。

注：some（）不会对空数组进行检测，不会改变原始数组。

例：

    var numbers = [65, 44, 12, 4];
    var result = numbers.some(function(ele,index){
        if(ele > 10){
            return true;
        }
    })
    console.log(result); // true

19、reduce([callback（previousValue，currentValue，currentIndex，array）, initialValue])方法：接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值，initialValue为可选参数, 作为第一次调callback 的第一个参数。

previousValue：上一次调用回调函数返回的值，或者是提供的初始值（initialValue）

currentValue：数组中当前被处理的元素

currentIndex：当前被处理元素在数组中的索引, 即currentValue的索引.如果有initialValue初始值, 从0开始.如果没有从1开始.

array：调用 reduce 的数组

例：

 

var numbers = [65, 44, 12, 4];
    var result = numbers.reduce(function(previousValue, currentValue, index, array){
        console.log(previousValue); //  65  109 121 125
        console.log(currentValue); //  44  12 4
        console.log(index); //  1  2  3
        console.log(array); //  [65, 44, 12, 4],[65, 44, 12, 4],[65, 44, 12, 4],[65, 44, 12, 4]
        return previousValue + currentValue;
    });
    console.log(numbers); // [65, 44, 12, 4]
    console.log(result); // 125

20、reduceRight() 方法：将数组元素累计算为一个值（从右到左），与 reduce（）方法方向相反。

21、find(function(currentValue,index,arr), thisValue)方法：es6新增，返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined

例：

 

    var numbers = [65, 44, 12, 4];
    var result = numbers.find(function(ele){
       return ele > 40;
    });
    console.log(result); // 65

22、findIndex(function(currentValue, index, arr), thisValue)方法：es6新增，返回数组中满足提供的测试函数的第一个元素的索引值置。

23、fill(value, start, end)方法：用于将一个固定值替换数组的元素，返回替换后的新数组

value：必需，填充的值。

start：可选，开始填充位置。

end：可选，停止填充位置 （不包括end,默认为 array.length)。

注：会改变原数组。

例：

    var numbers = [65, 44, 12, 4];
    var result1 = numbers.fill("替换",2,3);
    var result2 = numbers.fill("替换",2,4);
    console.log(numbers)       // [65, 44, "替换", "替换"]
    console.log(result1); // [65, 44, "替换", 4]
    console.log(result2); // [65, 44, "替换", "替换"]

24、includes( ele )方法：es7新增，检索元素存在于被检索对象中，存在则返回true，否则返回false

例：

    var numbers = [65, 44, 12, 4];
    var result1 = numbers.includes(44);
    var result2= numbers.includes(45);
    console.log(result1); // true
    console.log(result2); // false

25、copyWithin(target, start, end) 方法：es6新增，用于从数组的指定位置拷贝元素到数组的另一个指定位置中。

target：必需，复制到指定目标索引位置。

start：必需。元素复制的起始位置。

end：可选。停止复制的索引位置 (默认为 array.length)

例：

var fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi", "Papaya"];
var result = fruits.copyWithin(2, 0, 2);
console.log(result);   // Banana,Orange,Banana,Orange,Kiwi,Papaya

 最后说明一些数组特殊处理的应用:

1、比较数组的值是否相等（因为数组为引用类型的数据，所以数组不能直接比较）

例： 

var arr = ['1', '2', '3'];
var arr2 = ['1', '2', '3'];
arr == arr2 ?   // false

数组比较值是否相等的集中方法：将数组转换为字符串然后比较其是否相等

例：

var arr = ['1', '3', '2'];      
var arr2 = ['1', '3', '2'];
arr.toString() == arr2.toString() ? // true 

但是当数组中的值大小相同，但因为数组顺序不同时转出来的字符串也不相同

 

['1', '2', '3'].toString() == ['1', '3', '2'].toString ?  //false

解决方法：先将数组进行排序，然后作比较。

 var arr = ['1', '2', '3'];
 var arr2 = ['1', '3', '2'];  
 arr.sort().toString() == arr2.sort().toString() ?   // true