数据Array的常用方法

Posted 2020-09-13 Aimee2004

一、检测是否为数组

1、instanceof方法

constructor 属性返回对创建此对象的数组函数的引用，就是返回对象相对应的构造函数。

var arr=[];
arr instanceof Array;//true    arr是否是Array的实例？
arr.constructor==Array;//true  arr实例所对应的构造函数是否为Array？

只是，由于在不同 iframe 中创建的 Array 并不共享 prototype。如果这样用。麻烦就来了。那么，如果要应用在框架中，这种方式肯定是行不通的。

简单的方法：

Object.prototype.toString.call(value) == ‘[object Array]‘

2、Array.isArray()方法

ECMAScript 5 新增了Array.isArray()方法。这个方法的目的是最终确定某个值到底是不是数组，而不管它是在哪个全局执行环境中创建的。

if (Array.isArray(value)){
//对数组执行某些操作
}

支持Array.isArray()方法的浏览器有IE9+、Firefox 4+、Safari 5+、Opera 10.5+和Chrome。

 Polyfill

if (!Array.isArray) {
  Array.isArray = function(arg) {
    return Object.prototype.toString.call(arg) === ‘[object Array]‘;
  };
}

 

二、检测数组中是否包含制定变量或元素

1、jquery方法 $.inArray()

jquery.inarray(value,array)   确定第一个参数在数组中的位置(如果没有找到则返回 -1 )。

var arr = [ "xml", "html", "css", "js" ]; 
$.inArray("js", arr);  //返回 3

如果不包含在数组中，返回-1

 

2、indexOf() 和 lastIndexOf() 方法

ECMAScript 5 为数组实例添加了两个位置方法：indexOf()和lastIndexOf()。这两个方法都接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。

indexOf()方法从数组的开头（位置0）开始向后查找，lastIndexOf()方法则从数组的末尾开始向前查找。

这两个方法都返回要查找的项在数组中的位置，或者在没找到的情况下返回-1。

var numbers = [1,2,3,4,5,4,3,2,1];
alert(numbers.indexOf(4)); //3
alert(numbers.lastIndexOf(4)); //5
alert(numbers.indexOf(4, 4)); //5
alert(numbers.lastIndexOf(4, 4)); //3

  var person = { name: "Nicholas" };
  var people = [{ name: "Nicholas" }];
  var morePeople = [person];
  alert(people.indexOf(person)); //-1
  alert(morePeople.indexOf(person)); //0

使用indexOf()和lastIndexOf()方法查找特定项在数组中的位置非常简单，支持它们的浏览器包括IE9+、Firefox 2+、Safari 3+、Opera 9.5+和Chrome。

先判断Array是否有indexOf方法，如果没有就扩展出此方法。 

所以上面代码要写在使用indexOf方法的代码之前：

Array.prototype.indexOf=Array.prototype.indexOf || function(searchElement,fromIndex){
    if(this===undefined || this===null){
        throw new TypeError(‘"this" is null or not defined‘);
    }
    var length=this.length >>> 0;
    formIndex=+fromIndex || 0;
    if(Math.abs(formIndex)===Infinity){
        fromIndex=0;
    }

    if(fromIndex<0){
        fromIndex+=length;
        if(fromIndex<0){
            fromIndex=0;
        }
    }

    for(;fromIndex<length;fromIndex++){
        if(this[fromIndex]===searchElement){
            return fromIndex;
        }
    }
    return -1;
}

Array.prototype.lastIndexOf=Array.prototype.lastIndexOf || function(searchElement,fromIndex){
    if(this===undefined || this===null){
        throw new TypeError(‘"this" is null or not defined‘);
    }
    var length=this.length >>> 0;
    fromIndex=+fromIndex || (length-1);    
    if(Math.abs(fromIndex)===Infinity){
        fromIndex=length-1;
    }
    if(fromIndex<0){
        fromIndex+=length;
        if(fromIndex<0){
            fromIndex=length-1;
        }
    }
    
    for(;fromIndex>=0;fromIndex--){        
        if(this[fromIndex]===searchElement){
            return fromIndex;
        }
    }
    return -1;
}

 

3、for in 方法

Array.prototype.contains = function ( needle ) {
  for (i in this) {
    if (this[i] == needle)｛
　　　　 return true;
　　｝
  }
  return false;
}

// Now you can do things like:
var x = Array();
if (x.contains(‘foo‘)) {
  // do something special
}

 

三、数组与字符串转化

1、数组转为字符串

调用数组的toString()方法会返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串。

调用valueOf()返回的还是数组。实际上，为了创建这个字符串会调用数组每一项的toString()方法。

var arr=[‘a‘,‘b‘,‘c‘];
var str_arr=arr.toString();//"a,b,c"
var a_arr=arr.valueOf();//[‘a‘,‘b‘,‘c‘]

使用join()方法，则可以使用不同的分隔符来构建这个字符串。

join() 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。

join()方法只接收一个参数，即用作分隔符的字符串，然后返回包含所有数组项的字符串。

如果不给join()方法传入任何值，或者给它传入undefined，则使用逗号作为分隔符。

var colors = ["red", "green", "blue"];
alert(colors.join(",")); //red,green,blue
alert(colors.join("||")); //red||green||blue
alert(colors.join()); //red,green,blue
alert(colors.join(undefined)); //red,green,blue
alert(colors.join("")); //redgreenblue

2、字符串转为数组

split() 方法用于把一个字符串分割成字符串数组。

语法：stringObject.split(separator,howmany)

参数：

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

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

var str="How are you doing today?"
str.split(" ");//["How", "are", "you", "doing", "today?"]
str.split(" ",3);//["How", "are", "you"]

var s = "abc,abcd,aaa";
s.split(",");// ["abc", "abcd", "aaa"]

 

 四、栈方法

 栈是一种LIFO（Last-In-First-Out，后进先出）的数据结构，也就是最新添加的项最早被移除。而栈中项的插入（叫做推入）和移除（叫做弹出），只发生在一个位置——栈的顶部。

ECMAScript 为数组专门提供了push()和pop()方法，以便实现类似栈的行为。

 1、push()

push() 方法可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。 

var colors=new Array();
var count=colors.push(‘red‘,‘green‘);
console.log(count);//2
console.log(colors);//["red", "green"]

var count1=colors.push([‘blue‘,‘yellow‘],‘black‘);
console.log(count1);//2
console.log(colors);//["red", "green", ["blue", "yellow"], "black"]

 2、pop()

pop() 方法则从数组末尾移除最后一项，把数组长度减 1，并且返回它删除的元素的值。

如果数组已经为空，则 pop() 不改变数组，并返回 undefined 值。 

var colors=[‘red‘,‘green‘,‘blue‘,‘black‘];
var item=colors.pop();
console.log(item);//‘black‘
console.log(colors);//["red", "green", "blue"]

 

五、栈方法

 队列数据结构的访问规则是FIFO（First-In-First-Out，先进先出）。队列在列表的末端添加项，从列表的前端移除项。结合使用 shift() 和 push() 方法，可以像使用队列一样使用数组。

1、shift()

shift()，它能够移除数组中的第一个项并返回该项，同时将数组长度减1。 

var colors=[‘red‘,‘green‘,‘blue‘,‘black‘];
var item=colors.shift();
console.log(item);//red
console.log(colors);//["green", "blue", "black"]

2、unshift()

unshift() 与 shift() 的用途相反：它能在数组前端添加任意个项并返回新数组的长度。

因此，同时使用unshift()和pop()方法，可以从相反的方向来模拟队列，即在数组的前端添加项，从数组末端移除项。

var colors=new Array();
var count=colors.unshift(‘red‘,‘green‘);
console.log(count);//2
console.log(colors);//["red", "green"]
count=colors.unshift(‘black‘);
console.log(count);//3
console.log(colors);//["black", "red", "green"]

 

六、重排序方法

数组中已经存在两个可以直接用来重排序的方法：reverse()和sort()。

1、reverse() 方法

reverse() 方法会反转数组项的顺序。

var values=[1,2,3,4,5];
values.reverse();
console.log(values);//[5, 4, 3, 2, 1]

2、sort() 方法

在默认情况下，sort()方法按升序排列数组项——即最小的值位于最前面，最大的值排在最后面。
为了实现排序，sort()方法会调用每个数组项的toString()转型方法，然后比较得到的字符串，以确定如何排序。即使数组中的每一项都是数值，sort()方法比较的也是字符串。

var values=[0,1,5,10,15];
values.sort();
console.log(values);//[0, 1, 10, 15, 5]

var str=[‘a‘,‘c‘,‘bc‘,‘b‘,‘ca‘];
str.sort();
console.log(str);//["a", "b", "bc", "c", "ca"]

sort()方法可以接收一个比较函数作为参数，以便我们指定哪个值位于哪个值的前面。

比较函数接收两个参数，如果第一个参数应该位于第二个之前则返回一个负数，如果两个参数相等则返回0，如果第一个参数应该位于第二个之后则返回一个正数。以下就是一个简单的比较函数：

function compare(value1,value2){
    if(value1<value2){
        return -1;
    }else if(value1>value2){
        return 1;
    }else{
        return 0;
    }
}

var values=[0,1,15,10,5];
values.sort(compare);
console.log(values);//[0, 1, 5, 10, 15]

在将比较函数传递到sort()方法之后，数值仍然保持了正确的升序。当然，也可以通过比较函数产生降序排序的结果，只要交换比较函数返回的值即可。

function compare(value1,value2){
    if(value1<value2){
        return 1;
    }else if(value1>value2){
        return -1;
    }else{
        return 0;
    }
}
var values=[0,1,15,5,10];
values.sort(compare);
console.log(values);//[15, 10, 5, 1, 0]

对于数值类型或者其valueOf()方法会返回数值类型的对象类型，可以使用一个更简单的比较函数。这个函数只要用第二个值减第一个值即可。

function compare(value1,value2){
    return value2-value1;
}
var values=[0,1,15,10,5];
values.sort(compare);
console.log(values);//[15, 10, 5, 1, 0]

升序的

function compare(value1,value2){
    return value1-value2;
}
var values=[0,1,15,10,5];
values.sort(compare);
console.log(values);//[0, 1, 5, 10, 15]

 

七、操作方法

1、concat() 方法

concat()方法可以基于当前数组中的所有项创建一个新数组。具体来说，这个方法会先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。concat() 不会影响原数组。

 

在没有给concat()方法传递参数的情况下，它只是复制当前数组并返回副本。

如果传递给concat()方法的是一或多个数组，则该方法会将这些数组中的每一项都添加到结果数组中。如果传递的值不是数组，这些值就会被简单地添加到结果数组的末尾。

var colors=[‘red‘,‘green‘,‘blue‘];
var colors2=colors.concat(‘yellow‘,[‘black‘,‘brown‘]);
console.log(colors);//["red", "green", "blue"]
console.log(colors2);//["red", "green", "blue", "yellow", "black", "brown"]

连接三个数组

var num1=[1,2,3];
var num2=[4,5,6];
var num3=[7,8,9];
var num=num1.concat(num2,num3);
console.log(num);//[1, 2, 3, 4, 5, 6, 7, 8, 9]

 

2、slice() 方法

slice [sla?s]  n. 薄片；部分；菜刀，火铲  vt. 切下；把…分成部分；将…切成薄片  vi. 切开；割破

slice() 能够基于当前数组中的一或多个项创建一个新数组。slice()方法可以接受一或两个参数，即要返回项的起始和结束位置。在只有一个参数的情况下，slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数，该方法返回起始和结束位置之间的项——但不包括结束位置的项。注意，slice()方法不会影响原始数组。

语法：

arrayObject.slice(start,end)

参数：

start: 必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。

end: 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

返回值：

返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。

var colors=[‘red‘,‘green‘,‘blue‘,‘yellow‘,‘purple‘];
var colors2=colors.slice(1);
var colors3=colors.slice(1,4);
console.log(colors2);//["green", "blue", "yellow", "purple"]
console.log(colors3);//["green", "blue", "yellow"]

3、splice() 方法

splice  [spla?s]  vt. 拼接；接合；使结婚  n. 接合；结婚

splice() 的主要用途是向数组的中部插入项，但使用这种方法的方式则有如下3 种。

（1）删除

可以删除任意数量的项，只需指定2 个参数：要删除的第一项的位置和要删除的项数。例如，splice(0,2)会删除数组中的前两项。

（2）插入

可以向指定位置插入任意数量的项，只需提供3 个参数：起始位置、0（要删除的项数）和要插入的项。如果要插入多个项，可以再传入第四、第五，以至任意多个项。例如，splice(2,0,"red","green")会从当前数组的位置2 开始插入字符串"red"和"green"。

（3）替换

可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定3 个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如，splice (2,1,"red","green")会删除当前数组位置2 的项，然后再从位置2 开始插入字符串"red"和"green"。

splice()方法始终都会返回一个数组，该数组中包含从原始数组中删除的项。

语法：

arrayObject.splice(index,howmany,item1,.....,itemX)

参数：

index: 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。

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

item1,...,itemX :  可选。向数组添加的新项目。

返回值：

包含被删除项目的新数组，如果有的话。

splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。

如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。

var colors=[‘red‘,‘green‘,‘blue‘];
var removed=colors.splice(0,1);
console.log(colors);//["green", "blue"]
console.log(removed);//["red"]

removed=colors.splice(1,0,‘yellow‘,‘orange‘);
console.log(colors);//["green", "yellow", "orange", "blue"]
console.log(removed);//[]

removed=colors.splice(1,1,‘red‘,‘purple‘);
console.log(colors);//["green", "red", "purple", "orange", "blue"]
console.log(removed);//["yellow"]

 

八、迭代方法

ECMAScript 5 为数组定义了5 个迭代方法。每个方法都接收两个参数：要在每一项上运行的函数和（可选的）运行该函数的作用域对象——影响this 的值。传入这些方法中的函数会接收三个参数：数组项的值、该项在数组中的位置和数组对象本身。根据使用的方法不同，这个函数执行后的返回值可能会也可能不会影响方法的返回值。以下是这5 个迭代方法的作用。

? every()：对数组中的每一项运行给定函数，如果该函数对每一项都返回true，则返回true。
? filter()：对数组中的每一项运行给定函数，返回该函数会返回true 的项组成的数组。
? forEach()：对数组中的每一项运行给定函数。这个方法没有返回值。
? map()：对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。
? some()：对数组中的每一项运行给定函数，如果该函数对任一项返回true，则返回true。

以上方法都不会修改数组中的包含的值。

支持这些迭代方法的浏览器有IE9+、Firefox 2+、Safari 3+、Opera 9.5+和Chrome。

1、every()和some()

在这些方法中，最相似的是every()和some()，它们都用于查询数组中的项是否满足某个条件。

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

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

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

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

以上代码调用了every()和some()，传入的函数只要给定项大于2 就会返回true。对于every()，它返回的是false，因为只有部分数组项符合条件。对于some()，结果就是true，因为至少有一项是大于2 的。

2、filter()

filter()函数，利用指定的函数确定是否在返回的数组中包含某一项。例如，要返回一个所有数值都大于2 的数组，可以使用以下代码。

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

3、map()

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

例如，可以给数组中的每一项乘以2，然后返回这些乘积组成的数组，如下所示。

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

4、forEach()

forEach() 只是对数组中的每一项运行传入的函数。这个方法没有返回值，本质上与使用for 循环迭代数组一样。

var numbers=[1,2,3,4,5,4,3,2,1];
numbers.forEach(function(item,index,array){
    array[index]=item+1;
});
console.log(numbers);//[2, 3, 4, 5, 6, 5, 4, 3, 2]

 

九、归并方法

ECMAScript 5 还新增了两个归并数组的方法：reduce()和reduceRight()。这两个方法都会迭代数组的所有项，然后构建一个最终返回的值。其中，reduce()方法从数组的第一项开始，逐个遍历到最后。而reduceRight()则从数组的最后一项开始，向前遍历到第一项。

这两个方法都接收两个参数：一个在每一项上调用的函数和（可选的）作为归并基础的初始值。传给reduce()和reduceRight()的函数接收4 个参数：前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数就是数组的第二项。

使用reduce()方法可以执行求数组中所有值之和的操作，

var values=[1,2,3,4,5];
var sum=values.reduce(function(prev,cur,index,array){
    return prev+cur;
});
console.log(sum);//15

reduceRight()的作用类似，只不过方向相反而已。

var values = [1,2,3,4,5];
var sum = values.reduceRight(function(prev, cur, index, array){
    return prev + cur;
});
alert(sum); //15

语法：

arr.reduce([callback, initialValue])

参数：

callback：执行数组中每个值的函数，包含四个参数:

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

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

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

　　　　array：调用 reduce 的数组

initialValue：可选参数, 作为第一次调用 callback 的第一个参数。

返回值：

最后一次调用回调函数返回的结果

var arr=[0,1,2,3,4];
var sum=arr.reduce( (previousValue, currentValue, currentIndex, array) => {
      return previousValue + currentValue;
}, 10);
console.log(sum);//20

兼容旧环境（Polyfill）

// Production steps of ECMA-262, Edition 5, 15.4.4.21
// Reference: http://es5.github.io/#x15.4.4.21
if (!Array.prototype.reduce) {
  Array.prototype.reduce = function(callback /*, initialValue*/) {
    ‘use strict‘;
    if (this == null) {
      throw new TypeError(‘Array.prototype.reduce called on null or undefined‘);
    }
    if (typeof callback !== ‘function‘) {
      throw new TypeError(callback + ‘ is not a function‘);
    }
    var t = Object(this), len = t.length >>> 0, k = 0, value;
    if (arguments.length == 2) {
      value = arguments[1];
    } else {
      while (k < len && !(k in t)) {
        k++;
      }
      if (k >= len) {
        throw new TypeError(‘Reduce of empty array with no initial value‘);
      }
      value = t[k++];
    }
    for (; k < len; k++) {
      if (k in t) {
        value = callback(value, t[k], k, t);
      }
    }
    return value;
  };
}