数组

数组(Array)也是一个对象,使用 typeof 检查数组会返回 "object"。

创建数组

  • 方式一

    var arr = new Array();
    arr[0] = 10;
    arr[1] = 'xx';
    console.log(arr);
    
    var arr2 = new Array(10,20,30);
    
  • 方式二

    使用字面量创建数组:

    var arr = [];
    
    var arr2 = [1,2.3];
    
  • 两者的区别

    var arr1 = [10];
    var arr2 = new Array(10);
    console.log(arr1[0]); // 10
    console.log(arr1.length); // 1
    console.log(arr2[0]); // undefined
    console.log(arr2.length); // 10
    

数组赋值

数组本身是一个对象,所以,对象的复制方式对数组也适用。

arr[1] = 0;

// 此方式也行,但是不推荐
arr.hello = '123';

数组的元素可以是任意(函数、数组等等都可)数据类型。

var arr = [function() {}];
// 调用
arr[0]();

常用属性及方法

array.length

对于连续的数组来讲,length 属性可以设置或返回数组长度。所谓连续的数组就是指,数组中的索引值是连续的。

  • 获取

    // arr数组不连续
    var arr = new Array();
    arr[0] = 1;
    arr[2] = 2;
    console.log(arr.length); // 3
    // arr数组连续
    var arr = new Array();
    arr[0] = 1;
    arr[1] = 2;
    console.log(arr.length); // 2
    
  • 修改

    // 情况 1
    var arr = new Array();
    arr[0] = 1;
    arr[1] = 2;
    arr.length = 20;
    console.log(arr);
    console.log(arr.length); // 20
    
    // 情况 2
    var arr = new Array();
    arr[0] = 1;
    arr[1] = 2;
    arr[2] = 2;
    arr[3] = 2;
    arr[4] = 2;
    arr[5] = 2;
    arr.length = 3;
    console.log(arr); // 只会输出前 3 个
    console.log(arr.length); // 3
    

push()

向数组末尾添加一个或多个元素,并返回数组的新长度。

var arr1 = [1,2,3];
var length = arr1.push(6,5,'mm');
console.log(arr1);
console.log(length);

pop()

删除最后一个元素,并返回数组被删除的元素。

var item = arr1.pop();
console.log(arr1);
console.log(item);

unshift()

在数组开头插入元素,并返回数组的新的长度。

result = arr1.unshift('u1','u2');
console.log(arr1);
console.log(result);

shift()

删除数组的第一个元素,并返回被删除的元素。

索引越界

在 JavaScript 中,如果索引越界,不会报错,会返回 undefined

var arr = new Array();
arr[0] = 10;
arr[1] = 'xx';
console.log(arr[6]); // undefined

forEach()

遍历数组,该方法只适用于 IE9 及以上的浏览器。因此,使用频率没有 for 循环高。该方法需要一个函数作为参数,该函数由我们创建,但是不由我们调用(由浏览器调用),传入的函数就称为回调函数。

[1,2,3,4,5].forEach(function(ele) {
  console.log(ele);
});

// 箭头函数
arr.forEach(ele => {
  console.log(ele);
});

回调函数的参数

回调函数可以有三个参数,第一个表示当前数组遍历出的元素,第二个表示索引,第三个表示当前正在遍历的对象。

var array = [1, 2, 3, 4, 5];
array.forEach(function(ele, i, obj) {
  console.log(ele);
  console.log("索引: "+i);
  console.log(obj = array);
});

slice()

从某个已有的数组返回选定范围的元素。有两个参数,第一个表示开始截取的下标(包含),第二个表示结束的下标(不包含)。

var array = [1,2,3];
var subArray = array.slice(0,array.length - 1);
console.log(subArray); // [1, 2]

特殊用法

如果参数是负数,则会给参数自动加上数组的长度,然后再截取,如果截取过程的范围不存在,则返回空数组([])。第二个参数可以不写,默认就是截取到最后一个。

splice()

删除元素,并向数组添加新元素,返回被删除的元素(以数组形式)。该方法可以有三个参数,第一个参数表示删除的起始位置,第二个参数表示要删除的数量,第三个及以后参数可选,表示从删除的起始位置插入新的元素。

var array = [1, 2, 3];
var d = array.splice(1, 2, 10, 11);
console.log(array);
console.log(d);

注意

该方法会影响原数组!

技巧

该方法可以有多重作用:

  • 替换元素
  • 删除元素(只有前两个参数)
  • 插入元素(第二个参数为 0)
数组去重

结合 slice()splice() 方法。

var myArray = [1, 2, 5, 8, 10, 5, 6, 2, 7, 8];
// 数组去重
function clearArray(arr) {
  var copyArr = [];
  if (arr.length > 1) {
    // 复制数组
    copyArr = arr.slice(0);
    for (var i = 0; i < copyArr.length - 1; i++) {
      for (var j = i + 1; j < copyArr.length; j++) {
        if (copyArr[i] === copyArr[j]) {
          // 去重
          copyArr.splice(j, 1);
          // 解决连续相同的元素,删除后需要再次比较该位置
          j--;
        }
      }
    }
  }
  return copyArr;
}
var arr = clearArray(myArray);
console.log("去重前: "+myArray);
console.log("去重后: "+arr);

concat()

连接两个或多个数组,并返回结果。

var conArray1 = [1, 2, 3];
var conArray2 = [4, 5, 6];
var conArray = conArray1.concat(conArray2,"123456");
console.log(conArray1);
console.log(conArray);

join()

把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔(参数可省,默认是逗号),并返回字符串。

conArray = [1, 2, 3, 5, 6, 7];
var s = conArray.join('-');
console.log(s); // 1-2-3-5-6-7
console.log(conArray);

reverse()

颠倒数组中元素的顺序,该方法对原数组有影响

sort()

对数组的元素进行排序,该方法对原数组有影响。该方法的参数是一个函数。

sort() 方法没有参数时,默认是升序(按照unicode编码进行升序,特别是对于数字来讲,可能得到错误的结果,如 11 会排在 2 的前面)排序。所以,一般需要带上回调函数来指定排序规则。

回调函数的两个参数就是数组正在比较的两个元素。并且,第一个参数在数组中的位置一定是在第二个参数的前面。

浏览器会根据回调函数的返回值来进行排序。如果返回值大于 0,则两个元素交换位置(类似升序);反之,不交换顺序。如果返回零,则表示两个数相等,也不交换位置。

var sortArray = [1, 2, 3, 26, 3, 6, 11];
sortArray.sort(function(a,b) {
  if (a > b) {
    return 1;
  } else if (a < b) {
    return -1;
  }
  return 0;
  // 或者直接使用 a - b 或 b - a
  // return a - b;
});
console.log(sortArray);
  • 改进

    • 升序
    sortArray.sort(function(a,b) {
      return a - b;
    });
    
    • 降序
    sortArray.sort(function(a,b) {
      return b - a;
    });
    

补充

数组的更多用法请见 w3cSchoolopen in new window