Fork me on GitHub

JavaScript数组方法大全

基本内容

  • JavaScript中创建数组有两种方式,第一种是使用Array构造函数,另一种是使用数组字面量表示法
  • 有三种方法可以用来判断变量是否为数组(Array),分别是instance ofconstructorisArray
  • 数组的方法有数组原型方法,也有从object对象继承来的方法,常见的数组原型方法主要有:
    • join()
    • push()和pop()
    • shift() 和 unshift()
    • sort()
    • reverse()
    • concat()
    • slice()
    • splice()
    • indexOf()和 lastIndexOf() (ES5新增)
    • forEach() (ES5新增)

数组创建

  • JavaScript中创建数组有两种方式,第一种是使用Array构造函数

    1
    2
    3
    var arr1 = new Array(); // 创建一个空数组
    var arr2 = new Array(20); // 创建一个长度为20的数组
    var arr3 = new Array("lily","lucy","Tom"); // 创建一个包含3个字符串的数组
  • 创建数组的第二种基本方式是使用数组字面量表示法

    1
    2
    3
    var arr4 = []; // 创建一个空数组
    var arr5 = [20]; // 创建一个包含一个元素的数组
    var arr6 = ["lily","lucy","Tom"]; // 创建一个包含3个字符串的数组

数组判断

  • 有三种方法可以用来判断变量是否为数组(Array):
instance of
1
2
var a = new Array();
a instanceof Array; // true
constructor
1
2
var a = new Array();
a.constructor == Array; // true
isArray
1
2
3
//对支持isArray的浏览器
var a = new Array();
Array.isArray(a); // true

常见的数组方法

数组元素的添加
push方法
  • 将一个或多个新元素添加到原数组末尾,并返回数组的长度
  • 该方法会改变原始数组
    1
    2
    var arr = [1, 2, 3];
    var b = arr.push(4, 5); // arr:[1, 2, 3, 4, 5] b:5
unshift方法
  • 将一个或多个新元素添加到数组开头,并返回数组的长度
  • 该方法会改变原始数组
    1
    2
    var arr = [1, 2, 3];
    var b = arr.unshift(-2, -1); // arr:[-2, -1, 1, 2, 3] b:5
splice方法
  • 将一个或多个新元素插入到数组的指定位置原先插入位置的元素自动后移
  • 该方法会改变原始数组
  • 该方法可以用来插入指定的元素,也能删除指定的元素(后面介绍)。
  • 函数语法: splice(insertIndex, 0, element1, ….., elementX)
    1
    2
    3
    4
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    var result = fruits.splice(2, 0, "Lemon", "Kiwi"); // 在数组的第二个位置插入元素
    // result : ""
    // fruits: [Banana, Orange, Lemon, Kiwi, Apple, Mango]
数组元素的删除
pop方法
  • 删除原数组最后一个元素,并返回删除元素的值;如果数组为空返回undefined
  • 该方法会改变原始数组
    1
    2
    var arr = [1, 2, 3];
    var b = arr.pop(); // arr:[1, 2] b:3
shift方法
  • 删除原数组第一项,并返回删除元素的值;如果数组为空返回undefined
    1
    2
    var arr = [1, 2, 3];
    var b = arr.shift(); // arr:[2, 3] b:1
splice方法
  • splice方法可用于从数组中删除项目,然后包含被删除项目的新数组
  • 该方法会改变原始数组
  • 该方法也可以用来插入指定的元素。
  • 函数语法: splice(deleteIndex, deleteCount)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    // 删除并插入
    var arr = [1, 2, 3, 4, 5];
    var b = arr.splice(2, 2, 7, 8, 9); // arr:[1, 2, 7, 8, 9, 5] b:[3, 4]

    // 同shift
    var b = arr.splice(0, 1); // arr:[2, 7, 8, 9, 5] b: [1]
    b = Number(b);

    // 同unshift
    arr.splice(0, 0, -2, -1); // arr:[-2, -1, 2, 7, 8, 9, 5]

    //同 pop
    var b = arr.splice(arr.length - 1, 1); // arr:[-2, -1, 2, 7, 8, 9] b: [5]
    b = Number(b);

    //同 push
    arr.splice(arr.length, 0, 6, 7); // arr:[-2, -1, 2, 7, 8, 9, 6, 7]
数组元素的截取
slice方法
  • 函数语法: slice(start, end)。
  • 返回从原数组中指定start下标end下标(不包括)之间的项组成的新数组
  • 该方法并不会修改原数组,而是返回一个子数组。
  • 只有一个参数的情况下,slice()方法返回从该参数指定位置开始当前数组末尾的所有项
  • 如果有两个参数,该方法返回起始和结束位置之间的项,但不包括结束位置的项
    1
    2
    var arr = [1, 2, 3, 4, 5];
    var b = arr.slice(2, 5); //arr:[1, 2, 3, 4, 5] b:[3, 4, 5]
数组元素的合并
concat方法
  • 将多个数组(也可以是字符串,或者是数组和字符串的混合)连接为一个数组,返回连接好的新数组
  • 没有给concat()方法传递参数的情况下,它只是复制当前数组并返回副本
    1
    2
    3
    4
    var arr = [1, 3, 5, 7];
    var arrCopy = arr.concat(9, [11, 13]);
    console.log(arrCopy); //[1, 3, 5, 7, 9, 11, 13]
    console.log(arr); // [1, 3, 5, 7] (原数组未被修改)
数组的拷贝
  • 可以实现数组拷贝的方法有slice方法和concat方法。
    1
    2
    3
    4
    5
    6
    7
    // slice(start, end):start设置为0,省略end则表示从头截取到尾,即对数组进行了一份拷贝
    // 返回数组的拷贝数组,注意是一个新的数组,不是指向
    arrayObj.slice(0);

    // 在没有给 concat()方法传递参数的情况下,它只是复制当前数组并返回副本
    // 返回数组的拷贝数组,注意是一个新的数组,不是指向
    arrayObj.concat();
数组的排序
reverse方法
  • 该方法用来反转数组中的元素(前后颠倒)。
  • 此方法会修改原数组,并不会创建新数组。
    1
    2
    [1, 2, 3].reverse();  
    // [3, 2, 1]
sort方法
  • 该方法将数组中的元素排序并返回排序后的数组。
  • 此方法会修改原数组,并不会创建新数组。
  • 当sort()方法不带参数时,数组按照字母表顺序排序,如果数组包含undefined元素,会排到数组尾部
  • 也可以给sort()方法传入一个比较函数作为参数,让数组以指定的比较函数进行排序:
    • 比较函数返回值小于0,则第一个参数在前
    • 比较函数返回值大于0,则第二个参数在前
    • 两个参数值相等,则返回0
      1
      2
      3
      [6, 2, 5, 1].sort(function(a, b){  
      return a - b; //数组从小到大排序
      })
其他方法
join方法
  • 该方法用来拼接字符串。返回一个字符串
  • 函数原型: join(separator)。
  • 将数组的元素组起一个字符串,以separator为分隔符,省略的话则用默认用逗号为分隔符,该方法只接收一个参数:即分隔符。
    1
    2
    3
    4
    var arr = [1, 2, 3];
    console.log(arr.join()); // 1,2,3
    console.log(arr.join("-")); // 1-2-3
    console.log(arr); // [1, 2, 3](原数组不变)
indexOf方法
  • 该方法用于判断数组中是否有相匹配的值,第二个参数(可选的)表示从数组的某个开始位置往后检索
  • 若第二个参数缺省,则从数组的开头(位置 0)开始向后查找。
    1
    2
    [1, 2, 3, 4, 2].indexOf(2);         //1  
    [1, 2, 3, 4, 2].indexOf(2, 2); //4
lastIndexOf方法
  • 该方法用于判断数组中是否有相匹配的值,第二个参数(可选的)表示从数组的某个开始位置往前检索
  • 若第二个参数缺省,从数组的末尾开始向前查找。
    1
    2
    3
    var arr = [1,3,5,7,7,5,3,1];
    console.log(arr.lastIndexOf(5)); //5
    console.log(arr.lastIndexOf(5,4)); //2
forEach方法
  • 该方法用于对数组进行遍历循环,对数组中的每一项运行给定函数。
  • 这个方法没有返回值
  • 参数是function类型,默认有传参,参数分别为:遍历的数组内容val、对应的数组索引index,数组本身arr。
    1
    2
    3
    4
    [1, 2, 3].forEach(function(val, index, arr){  
    console.log(val);
    });
    //1 2 3
toString方法
  • 该方法用于将每个元素转化为字符串并且输出用逗号隔开
    1
    2
    3
    [1, 2, 3, 4].toString();  
    //1,2,3,4
    //等价于[1, 2, 3, 4].join();

知识拓展

arguments类数组对象调用数组方法
  • 因为arguments是一个类数组对象,虽然它也有下标,但它并非真正的数组**,所以不能和数组一样进行排序添加之类的操作。
  • 这种情况下,借用Array.prototype对象上的方法,可以对arguments完成push,shift等操作
  • 例如:通过call显式绑定来实现arguments对象变相有slice这个方法。
  • 通过[].slice.call(arguments)就可以把arguments转换成真正的数组。
  • 等价于Array.prototype.slice.call(arguments)
基本类型和引用类型的区别
  • JS变量中包含两种不同数据类型的值:基本(原始)类型值引用(对象)类型值
  • 基本的数据类型有:undefined,boolean,number,string,null。基本类型的访问是按值访问的,其值保存在栈内存中,就是说我们可以操作保存在变量中的实际的值。
  • 基本类型变量的复制:从一个变量向一个变量复制时,会在栈中创建一个新值,然后把值复制到为新变量分配的位置上。
  • 基本类型有以下几个特点:

    • 基本类型的值是不可变的

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      //任何方法都无法改变一个基本类型的值
      //比如一个字符串:
      var name = 'jozo';
      name.toUpperCase(); // 输出 'JOZO'
      console.log(name); // 输出 'jozo'
      //可以发现原始的name并未发生改变,调用了toUpperCase()方法后返回的是一个新的字符串。

      //不能给基本类型添加属性和方法
      var person = 'jozo';
      person.age = 22;
      person.method = function(){//...};
      console.log(person.age); // undefined
      console.log(person.method); // undefined
      //该例子说明基本类型是不可变的;
    • 基本类型的比较是值的比较。只有在它们的值相等的时候它们才相等。

    • 基本类型的变量是存放在栈区的(栈区指内存里的栈内存**)。
  • 引用数据类型:引用数据类型值指保存在堆内存中的对象。也就是,变量中保存的实际上的只是一个指针,这个指针指向内存中的另一个位置,该位置保存着对象。访问方式是按引用访问**。

    1
    var a = new Object();

    • 当操作时,需要先从栈中读取内存地址,然后再沿指针找到保存在堆内存中的值再操作。
  • 引用类型又称为对象类型,如对象、数组等。引用类型有以下几个特点:

    • 引用类型的值是可变的。

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      //可以为引用类型添加属性和方法,也可以删除其属性和方法,如:
      var person = {}; // 创建个空对象 --引用类型
      person.name = 'jozo';
      person.age = 22;
      person.sayName = function(){
      console.log(person.name);
      }
      person.sayName();// 'jozo'
      delete person.name; // 删除person对象的name属性
      person.sayName(); // undefined
      // 说明引用类型可以拥有属性和方法,并且是可以动态改变的。
    • 引用类型的值是同时保存在栈内存和堆内存中的对象。JS中引用类型的值是按引用访问的。

    • 引用类型的比较是引用的比较,即比较两个对象的堆内存中的地址
      1
      2
      3
      var person1 = {};
      var person2 = {};
      console.log(person1 == person2); // false
  • 基本类型在赋值操作后,两个变量是相互不受影响的。在从一个变量向另一个变量赋值基本类型时,会在该变量上创建一个新值,然后再把该值复制到为新变量分配的位置上。

    1
    2
    3
    4
    5
    var a = 10;
    var b = a;
    a++;
    console.log(a); // 11
    console.log(b); // 10 , b值只是a值的一个副本,与a完全独立
  • 引用类型的赋值其实是对象保存在栈区地址指针的赋值,因此两个变量指向同一个对象,任何的操作都会相互影响

    1
    2
    3
    4
    5
    6
    7
    8
    9
    var a = {}; // a保存了一个空对象的实例
    var b = a; // a和b都指向了这个空对象
    a.name = 'jozo';
    console.log(a.name); // 'jozo'
    console.log(b.name); // 'jozo'
    b.age = 22;
    console.log(b.age);// 22
    console.log(a.age);// 22
    console.log(a == b);// true

数组的引用与值传递
  • 数组属于引用类型数组的赋值(引用)其实是对象保存在栈区地址指针的赋值,因此两个数组指向同一个对象,任何的操作都会相互影响。
  • 不影响原值的前提下复制一个数组的过程称为数组值传递
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    /*数组的引用与值传递*/
    var a = [1, 2, 3];
    var b = [];
    // 数组引用
    b = a;
    // 数组值传递
    b = a.concat();// 方式一
    b = a.slice(0);// 方式二

    // 方式三,采用遍历。
    b = arr.map((item)=>{
    return item;
    });
------ 本文结束 ------