数组操作总结

网页三兄弟

总结了日常用到的数组操作方法，包括ES5及ES6的法子
Array对象详细介绍
ES6对数组的扩展

数组添加

unshift(val,val,….)开头添加

unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度

1
2
3
4
5
var arr = [1,2,3,4,5]
console.log( arr.unshift('w') )
//6
console.log( arr )
//["w", 1, 2, 3, 4, 5]

push(Object,…) 末尾追加

push()方法可向数组的末尾添加一个或多个元素，并返回新的长度
…是ES6的语法

1
2
3
4
5
6
7
8
9
10
11
var a = [1, 2, 3],
    b = [4, 5, 6];

a.push(...b)
//a的值：[1, 2, 3, 4, 5, 6]

Array.prototype.push.apply(a, b)
//a的值：[1, 2, 3, 4, 5, 6]

a.push("a", "b", 6)
//a的值：[1, 2, 3, "a", "b", 6]

数组合并

concat(a,b,…)

concat() 方法用于合并两个或多个数组，返回一个新的数组，被合并的数组数据不变

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
['hello'].concat(['world'])
// ["hello", "world"]

['hello'].concat(['world'], ['!'])
// ["hello", "world", "!"]

[].concat.call({a: 1}, {b: 2})
// [{ a: 1 }, { b: 2 }]

[].concat.call({a: 1}, [2])
// [{a: 1}, 2]

[2].concat({a: 1})
// [2, {a: 1}]

[].concat(['a'],['b','c'])
// ["a", "b", "c"]

数组符号合并

用数组符号包起来也可以合并 

1
2
newArr = ["全部", ...a];
//newArr的值： ["全部", 1, 2, 3]

数组删除

pop() 删除并返回最后一个

pop() 方法用于删除并返回数组的最后一个元素

1
2
3
var arr = [1,2,3,4,5]
    arr.pop()
//[1, 2, 3, 4]

shift() 删除并返回第一个

shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值 

1
2
3
var arr = [1,2,3,4,5]
    arr.shift()
// ...

清空数组

方式1，splice

1
2
3
var ary = [1,2,3,4];
ary.splice(0);
console.log(ary); // 输出 []，空数组，即被清空了

方式2，length赋值为0

1
2
3
var ary = [1,2,3,4];
ary.length = 0;
console.log(ary); // 输出 []，空数组，即被清空了

方式3，赋值为[]

1
2
var ary = [1,2,3,4];
ary = []; // 赋值为一个空数组以达到清空原数组

tip

  • 设置数组长度
    改变数组长度会改变数据，length设置的小，后面的数据丢掉，如果设置的大，追加空数据，为0就是空数组
    var arr=[1,2,3,4,5];
    arr.length = 2;
    //[1,2]

splice()对数组添加/修改(替换)/删除

warning 常用
splice() 这个语法常用

删除指定位置的值
可以删除任意数量的项，只需要指定2个参数：要删除的第一项的位置和要删除项的项数
语法: arr.splice(起点,长度)，如 arr.splice(0,2) 会删除数组中的前两项

1
2
3
var arr = [1,2,3,4,5]
    arr.splice(1,3)
//[1, 5]

数组添加、替换
语法：arr.splice(起点,长度为0,需要添加的元素)
提供3个参数：插入起始位置、0（要删除的项数）、要插入的项。 如果要插入多个项，可以再传入第四、第五，一直任意多个项。 

1
2
3
var arr = [1,2,3,4,5]
    arr.splice(1,0,'abc')
//[1, "abc", 2, 3, 4, 5]
1
2
3
var arr = [1,2,3,4,5]
    arr.splice(1,2,'2abc','3abc')
//[1, "2abc", "3abc", 4, 5]

遍历数组

tip
遍历的方法比较多，见：对象和数组遍历方法总结

find()

find()方法用于找出第一个符合条件的数组成员，他的参数是一个回调函数，所有数组成员一次执行这个回调函数，直到找出第一个返回值为true的成员，然后返回该成员，找不到符合条件的就返回undefined

1
2
3
4
[1,5,15,20,25].find((value,index,arr) => {
    return value > 20;
})
// 25

findIndex()

与find()类似，不过返回的是成员索引值

1
2
3
4
[5,10,15,20].findIndex((value,index,arr) => {
    return value > 10
})  
// 2

includes()

includes()用来判断一个字符串或数组是否包含一个指定的值，与indexOf不同的是可以判断元素里NaN
语法： Arr.includes(searchString , position)
searchString：关键字，position：可选，开始搜索的位置（默认为0），position也可以是负数，如：-2则是倒数第二个开始，找到返回true ，如果没有找到返回false；includes()方法区分大小写

1
2
3
4
5
6
7
8
[1, 2, 3].includes(2)
//true

"hello world".includes("o",8)
false

['a', 'b', 'c', 'd', NaN].includes(NaN)
//true

filter()

过滤不需要的数组元素
语法：array.filter(function(currentValue,index,arr), thisValue)

1
2
3
4
5
var testArray=[100,20,50,46,80,95];
testArray.filter((v,i)=>{
    return v>=80
});
// [100, 80, 95]

indexOf()

indexOf() 方法可返回数组中某个指定的元素第一次出现的位置，如果在数组中没找到指定元素则返回 -1。

1
2
3
var arr = ["Banana", "Orange", "Apple", "Mango"];
arr.indexOf("Apple");
//3

lastIndexOf()

lastIndexOf()同indexOf方法，只不过返回的是最后出现的位置

1
2
3
var arr = ["Banana", "Orange", "Apple", "Mango", "Apple"];
arr.lastIndexOf("Apple");
//4

$.inArray()

Jquery的$.inArray()函数用于在数组中搜索指定的值,并返回其索引值。如果数组中不存在该值,则返回-1; 和indexOf区别是兼容低版本IE
语法： $.inArray(value,array)，value是要查找的值，array是被查找的数组。
简单的数组数据可以，复杂的像数组对象就不好使了（数组对象只能转成字符串再遍历），还是ES6的好使

1
2
3
var array = ["asp.net", "asp.net mvc", "html5", "css3", "jquery", "JavaScript"];
$.inArray("asp.net mvc", array);
//1

数组去重

去重的法子很多，有空了再一一补上，把一些代码多、效率差的去掉

  1. 遍历数组法
    它是最简单的数组去重方法（indexOf方法）
    实现思路：新建一个数组，遍历去要重的数组，当值不在新数组的时候（indexOf为-1）就加入该新数组中； 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    var arr=[2,8,5,0,5,2,6,7,2];
    let unique1 =>(arr){
      var hash=[];
      for (var i = 0; i < arr.length; i++) {
         if(hash.indexOf(arr[i])==-1){
          hash.push(arr[i]);
         }
      }
      return hash;
    }
    unique1(arr)

    // ...

  2. 数组下标判断法
    调用indexOf方法，性能和方法1差不多
    实现思路：如果当前数组的第 i 项在当前数组中第一次出现的位置不是 i，那么表示第 i 项是重复的，忽略掉。否则存入结果数组。 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    function unique2(arr){
      var hash=[];
      for (var i = 0; i < arr.length; i++) {
         if(arr.indexOf(arr[i])==i){
          hash.push(arr[i]);
         }
      }
      return hash;
    }
    // ...

  3. 排序后相邻去除法
    实现思路：给传入的数组排序，排序后相同的值会相邻，然后遍历排序后数组时，新数组只加入不与前一值重复的值。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    function unique3(arr){
      arr.sort();
      var hash=[arr[0]];
      for (var i = 1; i < arr.length; i++) {
         if(arr[i]!=hash[hash.length-1]){
          hash.push(arr[i]);
         }
      }
      return hash;
    }
    // ...

  4. 优化遍历数组法（推荐）
    实现思路：双层循环，外循环表示从0到arr.length，内循环表示从i+1到arr.length
    将没重复的右边值放入新数组。（检测到有重复值时终止当前循环同时进入外层循环的下一轮判断） 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    function unique4(arr){
      var hash=[];
      for (var i = 0; i < arr.length; i++) {
        for (var j = i+1; j < arr.length; j++) {
          if(arr[i]===arr[j]){
            ++i;
          }
        }
          hash.push(arr[i]);
      }
      return hash;
    }
    // ...

  5. ES6实现
    基本思路：ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。
    Set函数可以接受一个数组（或类似数组的对象）作为参数，用来初始化。 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    function unique5(arr){
      var x = new Set(arr);
     return [...x];
    }

    // 扩展：如果重复，则去掉该元素
    //数组下标去重

    function unique22(arr){
      var hash=[];
      for (var i = 0; i < arr.length; i++) {
         if(arr.indexOf(arr[i])==arr.lastIndexOf(arr[i])){
          hash.push(arr[i]);
         }
      }
      return hash;
    }

数组排序

  • sort(sortby) 方法用于对数组的元素进行排序，并返回数组。sortby为空则默认排序顺序是根据字符串UniCode码。
    [4,3,6,5,72,2,121].sort(); //输出结果: [121, 2, 3, 4, 5, 6, 72]
    [“weq”,”d”,”qwe”,”a”,”n”,”p”,”y”].sort(); //输出结果: [“a”, “d”, “n”, “p”, “qwe”, “weq”, “y”]

降序：从大到小排序

sort()方法：

1
2
3
4
5
6
function sortNum(a,b){
	return b - a
}
var arr = [ 4,31,62,5,72,2,100 ];
arr.sort(sortNum);
// [100, 72, 62, 31, 5, 4, 2]

笨一点的法子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//创建数组元素arr
var arr=[7,13,34,3,200,100,4],
    max;
for(var i=0; i<arr.length; i++){
    for(var j=i; j<arr.length; j++){
        if(arr[i]<arr[j]){
            max=arr[j];
            arr[j]=arr[i];
            arr[i]=max;
        }
    }
}
console.log( arr )
// [200, 100, 34, 13, 7, 4, 3]

升序：从小到大排序

1
2
3
4
5
6
7
function sortNum(a,b){
	return a - b
}
var arr = [ 4,31,62,5,712,2,1200 ];
arr.sort(sortNum);
console.log(arr);
//[2, 4, 5, 31, 62, 712, 1200]

接着笨

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//创建数组元素arr
var arr=[13,7,10,76,97,100,35],
    min;
for(var i=0; i<arr.length; i++){
    for(var j=i; j<arr.length;j++){
        if(arr[i]>arr[j]){
            min=arr[j];
            arr[j]=arr[i];
            arr[i]=min;
        }
    }
}
console.log( arr )
// [7, 10, 13, 35, 76, 97, 100]

对象数组排序

下面是从小到大，要从大到小也一样，b.sortNo - a.sortNo 就反过来了

1
2
3
4
5
6
var arr= [ { 'sortNo': 2},{ 'sortNo': 1},{ 'sortNo': 5},{ 'sortNo': 6},{ 'sortNo': 79},{ 'sortNo': 3},{ 'sortNo': 999},{ 'sortNo': 4},{ 'sortNo': 0}];
    arr.sort(function(a, b){
        return a.sortNo - b.sortNo;
    });
console.log(arr);
//[{sortNo: 0},{sortNo: 1},{sortNo: 2},{sortNo: 3},{sortNo: 4},{sortNo: 5},{sortNo: 6},{sortNo: 79},{sortNo: 999}]

对象数组多条件排序

如果sortNo相同，则按sortNo2从大到小

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var arr= [ 
    { 'sortNo': 2, 'sortNo2': 3},
    { 'sortNo': 1, 'sortNo2': 3},
    { 'sortNo': 5, 'sortNo2': 3},
    { 'sortNo': 6, 'sortNo2': 3},
    { 'sortNo': 7, 'sortNo2': 3},
    { 'sortNo': 3, 'sortNo2': 4},
    { 'sortNo': 3, 'sortNo2': 2},
    { 'sortNo': 3, 'sortNo2': 1},
    { 'sortNo': 3, 'sortNo2': 3},
    { 'sortNo': 8, 'sortNo2': 3},
    { 'sortNo': 4, 'sortNo2': 1},
    { 'sortNo': 4, 'sortNo2': 2}
];
arr.sort(function(a, b){
    if (a.sortNo === b.sortNo) {
            return b.sortNo2 - a.sortNo2;
    } else {
            return a.sortNo - b.sortNo;
    }
});
console.log(arr);

颠倒数组顺序

1
2
3
var arr = [1,2,3,4,5,6]
arr.reverse()
// [6, 5, 4, 3, 2, 1]

数组转字符串

  1. 转字符串
    1
    2
    3
    4
    5
    var arr = [1,2,3,4,5,6]
    console.log(arr.toString() ) 
    console.log( arr.toLocaleString() )
    //都是返回：1,2,3,4,5,6
    //在数组里，toString()和toLocaleString()并没有发现区别
  2. 数组分隔成字符串
    join(separator)
    方法用于把数组中的所有元素放入一个字符串。分割符号可选，默认是逗号
    1
    2
    3
    4
    5
    6
    7
    var a = [1,2,3,4,5,6]

    a.join('-')
    //"1-2-3-4-5-6"

    a.join()
    //"1,2,3,4,5,6"

复制数组

slice(start，end)

  • 从start开始截取到end但是不包括end
  • 返回值为截取出来的元素的集合
  • 原始的数组不会发生变化
  • end为空就是从指定位置到到最后一个
  • start、end如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
    1
    2
    3
    4
    5
    6
    7
    var arr = [1,2,3,4,5,6],
        shallowCopy = arr.slice();
        shallowCopy.push("news");
    console.log(arr, shallowCopy );
    console.log(arr.slice(2,5) );

    //

数组属性&方法表

ES6的不在内，ES6的见文章顶部的链接

Array 对象属性

属性 描述
constructor 返回对创建此对象的数组函数的引用
length 设置或返回数组中元素的数目
prototype 使您有能力向对象添加属性和方法

Array 对象方法

方法 描述
unshift() 向数组的开头添加一个或更多元素，并返回新的长度。
push() 向数组的末尾添加一个或更多元素，并返回新的长度。
shift() 删除并返回数组的第一个元素
pop() 删除并返回数组的最后一个元素
slice() 从某个已有的数组返回选定的元素
concat() 连接两个或更多的数组，并返回结果。
sort() 对数组的元素进行排序
reverse() 颠倒数组中元素的顺序。
splice() 删除元素，并向数组添加新元素。
toSource() 返回该对象的源代码，只有Gecko核心的浏览器(Firefox)支持
join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
toString() 把数组转换为字符串，并返回结果。
toLocaleString() 把数组转换为本地数组，并返回结果。
valueOf() 返回数组对象的原始值