javascript 数组操作总结

发表于 | 分类于 |

引言

  • 数组是javascript中的重要数据结构，可以存储各种数据类型，有很多重要的操作必须牢记；
  • 本文系统总结了javascript数组的各种常见操作，欢迎补充！

javascript数组需要掌握的方法

  • push、pop
  • shift、unshift
  • splice、slice
  • concat、join、sort、reverse
  • 这些方法在下面会详细介绍

数组的定义

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//方法一，定义后赋值
var arr = new Array();
arr[0] = 123
arr[1] = "abc"
arr[5] = false
alert(arr[3]) //undefined

//方法二，定义数组长度
var arr2 = new Array(2);
arr2[0] = "ddd";
arr2[1] = 123;
arr2[4] = false;  //数组长度自动扩展

//方法三，定义时赋值
var arr3 = new Array(true,123,"aaa");

//方法四，直接赋值
var arr4 = ["aaa",111,false];

数组的判断

1
2
3
4
5
var arr = new Array();

Array.isArray(arr);  //true
arr instanceof Array;  //true
arr.constructor === Array;  //true

数组元素的合并

1
2
3
var arr = ['c','b','d'];
document.write(arr.join());  //c,b,d
document.write(arr.join("."));  //c.b.d

数组的属性

  • length属性
1
2
3
4
var arr = ['c','b','d'];
alert(arr.length);  //3
arr.length = 10;  // 数组自动扩展
arr.length = 2;  //arr[2]丢失
  • prototype属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function max(){
	var i,
	max = this[0];
	for(i=1; i<this.length; i++){
		if(max<this[i]){
			max = this[i];
		}
	}
	return max;
}

Array.prototype.max = max;
var x = new Array(1,3,2,4,3,5);
alert(x.max());  // 5

数组常见操作

  • 添加元素
1
2
3
4
var arr = [1,2,"aaa",false];
arr.push(3);  //添加到末尾
arr.unshift('c');  //添加到开头，其余元素后移
arr.splice(1,0,'d');  //插入到数组下表为1的位置，并且有0个元素被吃掉
  • 删除元素
1
2
3
4
5
var arr = [1,2,"aaa",false];
arr.pop();  //移除最后一个元素
arr.shift();  //移除最前面的元素并返回该元素的值
arr.splice(1,1);  //移除下标为1开始的1个元素
delete arr[2];  //移除下标为2的元素
  • 移除特定元素
1
2
3
4
5
6
7
8
var arr = ['a','b','c','d'];
var index = null;
for(var i =0; i<arr.length; i++){
	if(arr[i]=='c'){
		index = i;
	}
}
arr.splice(index,1);
  • 截取数组
1
2
var arr = ['a','b','c','d','e'];
arr.slice(1,3);  // ['b','c']
  • 连接数组
1
2
3
var arr = ['a','b','c','d','e'];
var arr2 = ['f','g'];
arr.concat(arr2);  // ['a','b','c','d','e','f','g']
  • 拷贝数组
1
2
var arr = ['a','b','c','d','e'];
var arr2 = arr.concat();
  • 数组排序
1
2
var arr = ['e','b','a','d','c'];
alert(arr.sort());  // a b c d e
  • 数组倒序
1
2
var arr = ['e','b','a','d','c'];
alert(arr.reverse());  // e d c b a
  • 判断数组是否包含特定值
1
2
3
var arr = ['e','b','a','d','c'];
alert(arr.indexOf('d'));  // 3
alert(arr.indexOf('g'));  // -1
  • 求number数组最大最小值
1
2
3
4
5
function math(){
    var a = [3,1,2,6];
    var max = Math.max.apply(Math,a);
    var min = Math.min.apply(Math,a);
}

数组去重

  • 方法一：
    • 利用数组的indexOf方法
1
2
3
4
5
6
7
8
function unique (arr) {
 var result = []; 
 for (var i = 0; i < arr.length; i++)
 {
   if (result.indexOf(arr[i]) == -1) result.push(arr[i]);
 }
 return result;
}
  • 方法二：
    • 利用hash表
    • 可能会出现字符串和数字一样的话出错，如var a = [1, 2, 3, 4, ‘3’, 5],会返回[1, 2, 3, 4, 5]
1
2
3
4
5
6
7
8
9
10
11
12
13
function unique (arr)
{
  var hash = {},result = []; 
  for(var i = 0; i < arr.length; i++)
  {
     if (!hash[arr[i]]) 
     {
         hash[arr[i]] = true; 
         result.push(arr[i]); 
       }
   }
   return result;
}
  • 方法三：
    • 排序后比较相邻，如果一样则放弃，否则加入到result
    • 会出现与方法2一样的问题，如果数组中存在1,1,’1’这样的情况，则会排错
1
2
3
4
5
6
7
8
9
10
function unique (arr) {
  arr.sort();
  var result=[arr[0]];
  for(var i = 1; i < arr.length; i++){
      if( arr[i] !== arr[i-1]) {
          result.push(arr[i]);
      }
  }
  return result;
}
  • 方法四：
    • 最简单但是效率最低的算法,也不会出现方法2和方法3出现的bug
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function unique (arr) {
  if(arr.length == 0) return;
  var result = [arr[0]], isRepeate;
  for( var i = 0, j = arr.length; i < j; i++ ){
    isRepeate = false;
    for( var k = 0, h = result.length; k < h; k++){
        if(result[k] === arr[i]){
            isRepeate = true;
            break;
        }
        if(k == h) break;
    }
    if( !isRepeate ) result.push(arr[i]);
  }
  return result;
}

数组随机扰乱

  • 方法一：
    • 每次随机抽一个数并移动到新数组中
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function shuffle(array) {
  var copy = [],
       n = array.length,
       i;
  // 如果还剩有元素则继续。。。
  while (n) {
     // 随机抽取一个元素
     i = Math.floor(Math.random() * array.length);
     // 如果这个元素之前没有被选中过。。
     if (i in array) {
        copy.push(array[i]);
        delete array[i];
        n--;
     }
   }
}
  • 方法二：
    • 跟方法1类似，只不过通过splice来去掉原数组已选项
1
2
3
4
5
6
7
8
9
10
11
12
13
function shuffle(array) {
  var copy = [],
       n = array.length,
       i;
  // 如果还剩有元素。。
  while (n) {
     // 随机选取一个元素
     i = Math.floor(Math.random() * n--);
     // 移动到新数组中
     copy.push(array.splice(i, 1)[0]);
  }
  return copy;
}
  • 方法三：
    • 前面随机抽数依次跟末尾的数交换，后面依次前移
    • 即：第一次前n个数随机抽一个跟第n个交换，第二次前n-1个数跟第n-1个交换，依次类推
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function shuffle(array) {
  var m = array.length,
     t, i;
  // 如果还剩有元素…
  while (m) {
    // 随机选取一个元素…
    i = Math.floor(Math.random() * m--);
    // 与当前元素进行交换
    t = array[m];
    array[m] = array[i];
    array[i] = t;
  }
  return array;
}

数组间操作

  • 数组求交集
1
2
3
4
//利用filter和数组自带的indexOf方法
array1.filter(function(n) {
  return array2.indexOf(n) != -1
});
  • 数组求并集
1
2
3
4
5
6
7
8
9
10
11
//方法原理：连接两个数组并去重
function arrayUnique(array) {
  var a = array.concat();
  for(var i=0; i<a.length; ++i) {
    for(var j=i+1; j<a.length; ++j) {
       if(a[i] === a[j])
          a.splice(j--, 1);
    }
  }
  return a;
};
  • 数组求差集
1
2
3
4
//利用filter和indexOf方法
Array.prototype.diff = function(a) {
  return this.filter(function(i) {return a.indexOf(i) < 0;});
};
您的支持是对我最大的鼓励！