JavaScript 常用数组操作方法

一、不改变原数组：concat()、join()、slice()、toString()、valueOf()、substring() 和 substr()

• 1、concat() 方法用于连接两个或多个数组。仅会返回被连接数组的一个副本。

  var arr1 = [1, 2, 3];
  var arr2 = [4, 5];
  var arr3 = arr1.concat(arr2);
  console.log(arr1);  // [1, 2, 3]
  console.log(arr3);  // [1, 2, 3, 4, 5]
  

• 2、join()方法用于把数组中的所有元素放入一个字符串中。

  var arr = [1, 2, 3];
  console.log(arr.join());    // 1, 2, 3
  console.log(arr);   // [1, 2, 3]
  

• 3、slice(start,end) 方法从已有的数组中返回选定的元素。返回一个新数组。包含start到end(不包含end)的arratObject中的元素

  var a = ['a', 'b', 'c', 'd', 'e', 'f'];
  var a1 = a.slice(2,4);
  console.log(a);     // ["a", "b", "c", "d", "e", "f"]
  console.log(a1);    // ["c", "d"]
  

• 4、toString()返回一个字符串，表示指定的数组及其元素

  var arr = ['a', 'b', 'c', 'd'];
  console.log(arr.toString());    // a,b,c,d
  console.log(arr);   // ["a", "b", "c", "d"]
  

• 5、substring() 和 substr() 都不改变原数组
  相同点：都只写一个参数时，两者的作用：都是截取字符串从当前下标以后直到字符串最后的字符串片段。
  不同点：第二个参数。
  ​ substr(startIndex,lenth)： 第二个参数是截取字符串的长度（从起始点截取某个长度的字符串）;
  ​ substring(startIndex, endIndex)： 第二个参数是截取字符串最终的下标 （截取2个位置之间的字符串,‘含头不含尾’）;

  var str = '123456789';
  console.log(str.substr(2))      // 3456789
  console.log(str.substring(2))   // 3456789
  
  console.log(str.substr(2, 4))       // 3456
  console.log(str.substring(2, 4))    // 34
  

二、会改变原数组：push()、unshift()、pop()、shift()、splice()、reverse()、sort()排序

• 1、push()方法可向数组的末尾添加一个或多个元素，并返回新的长度。

  var arr = [1, 2, 3];
  var arr1 = arr.push(5);
  console.log(arr);           // [1, 2, 3, 5]
  console.log(arr1);  // 4
  

• 2、unshift()方法向数组的开头添加一个或多个元素，并返回新的长度。（该方法可以不传参数,不传参数就是不增加元素）

  var arr = [1, 2, 3, 4, 5];
  console.log(arr.unshift(8, 9)); // 7
  console.log(arr);   // [8, 9, 1, 2, 3, 4, 5]
  

• 3、pop()方法用于删除数组的最后一个元素，并返回该元素的值

  var arr = [1, 2, 3];
  console.log(arr.pop()); // 3
  console.log(arr);   // [1, 2]
  

• 4、shift()方法用于删除数组的第一个元素，并返回第一个元素的值。

  var arr = [1, 2, 3];
  console.log(arr.shift());   // 1
  console.log(arr);   // [2，3]
  

• 5、splice()方法通过删除或替换现有元素或者原地添加新的元素，来修改数组，并以数组形式返回被修改的内容。没有删除元素，则返回空数组

  //从第 2 位开始删除 0 个元素，插入"FF"\"GG"
  var a = ['a', 'b', 'c', 'd']
  var a1 = a.splice(2, 0, 'GG', 'FF')
  console.log(a)      // ["a", "b", "GG", "FF", "c", "d"]
  console.log(a1)     // []
  
  // 从第 2 位开始删除 1 个元素
  var b = ['a', 'b', 'c', 'd']
  var b1 = b.splice(2, 1)
  console.log(b)      // ["a", "b", "d"]
  console.log(b1)     // ["c"]
  
  // 从第 1 位开始删除 1 或多个元素，插入"FF"\"GG"
  var c = ['a', 'b', 'c', 'd']
  var c1 = c.splice(1, 2, 'GG', 'FF')
  console.log(c)      // ["a", "GG", "FF", "d"]
  console.log(c1)     // ["b", "c"]
  
  // 从倒数第 2 位开始删除 1 个元素
  var d = ['a', 'b', 'c', 'd']
  var d1 = d.splice(-2, 1)
  console.log(d)      // ["a", "b", "d"]
  console.log(d1)     // ["c"]
  
  // 删除第2位后的所有元素
  var f = ['a', 'b', 'c', 'd']
  var f1 = f.splice(2)
  console.log(f)      // ["a", "b"]
  console.log(f1)     // ["c", "d"]
  

• 6、reverse()方法将数组中的元素的位置颠倒，并返回该数组。

  var arr = ['a', 'b', 'c', 'd'];
  console.log(arr.reverse()); // ["d", "c", "b", "a"]
  console.log(arr);   // ["d", "c", "b", "a"]
  

• 7、sort()方法用原地算法对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列时构建的。（由于它取决于具体实现，因此无法保证排序的时间和空间复杂性）

  var a1 = [1, 30, 4, 21, 100000]
  console.log(a1.sort())      // [1, 100000, 21, 30, 4]
  console.log(a1)     // [1, 100000, 21, 30, 4]
  

三、其它的数组操作方法：indexOf 和 lastIndexOf、valueOf()、every()、some()、map()、filter()、forEach()数组遍历、isArray

• 1、indexOf 和 lastIndexOf都接受两个参数：查找的值、查找起始位置(可选)。
  不存在，返回 -1 ；存在，返回位置。indexOf是从前往后查找， lastIndexOf是从后往前查找。

  var a = ['a', 'b', 'c', 'd'];
  console.log(a.indexOf('b'))     // 1
  console.log(a.indexOf('e'))     // -1
  console.log(a.lastIndexOf('d')      // 3
  console.log(a.lastIndexOf('e'))     // -1
  

• 2、valueOf()方法返回指定对象的原始值。
  该原始值由 Array 对象派生的所有对象继承。
  

  

• 3、every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。(若收到一个空数组，此方法在一切情况下都会返回 true)

  var age = [18, 20, 16, 15, 22];
  function adult(age){
      return age < 30
  }
  console.log(age.some(adult))   //true
  console.log(age)    //[18, 20, 16, 15, 22]
  

• 4、some()方法用于检测数组中的元素是否满足指定条件（函数提供）。如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素，则返回false。（如果用一个空数组进行测试，在任何情况下它返回的都是false）

  var age = [18, 20, 16, 15, 22];
  function adult(age){
      return age < 18
  }
  console.log(age.some(adult))   //true
  console.log(age)    //[18, 20, 16, 15, 22]
  

• 5、map()通过指定函数处理数组的每个元素，并返回处理后的数组。

  var age = [18, 20, 16, 15, 22];
  function adult(x){
      return x - 10
  }
  console.log(age.map(adult)) //[8, 10, 6, 5, 12]
  console.log(age)    //[18, 20, 16, 15, 22]
  

• 6、filter()方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

  var age = [18, 20, 16, 15, 22];
  function adult(x){
      return x >= 20
  }
  console.log(age.filter(adult)) // [20, 22]
  console.log(age)    // [18, 20, 16, 15, 22]
  

• 7、forEach()方法对数组的每个元素执行一次提供的函数。

  // array.forEach(function(currentValue, index, arr), thisValue)
  // function(currentValue, index, arr)   必需。 数组中每个元素需要调用的函数。
  //( currentValue.必需。当前元素, 
  //  index.可选。当前元素的索引值,  
  //  arr.可选。当前元素所属的数组对象。)
  // thisValue 可选。传递给函数的值一般用 "this" 值。如果这个参数为空， "undefined" 会传递给 "this" 值
  let arr = [1, 2, 3, 4];
  var a= arr.forEach((item, index, array) => {
      console.log(item);
      // 依次打印1, 2, 3, 4, return并没有终止forEach的循环
      return item * 2;
  });
  
  console.log(arr);
  // [1, 2, 3, 4]，不会修改元数组
  

• 8、isArray方法用于判断一个对象是否为数组。

  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  var a = Array.isArray(fruits);
  console.log(a); //true
  

三、ES6新增新操作数组的方法 ：find()、findIndex()、fill()、copyWithin()、from、of、entries()返回迭代器：返回键值对、values() 返回迭代器：返回键值对的value、keys() 返回迭代器：返回键值对的key、includes。

• 1、find()方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

  var arr = [3, 10, 18, 20];
  var arr1 = arr.find((e) => e < 10);
  console.log(arr1);   // 3
  

• 2、findIndex()方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。否则返回-1。

  var arr = [3, 10, 18, 20];
  var arr1 = arr.findIndex((e) => e >= 18);
  console.log(arr1);      //  2
  

• 3、fill()方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。会改变原数组（IE 11 及更早版本不支持 fill() 方法）

  // array.fill(value, start, end)
  // value必需。填充的值。
  // start可选。开始填充位置。
  // end可选。停止填充位置 (默认为 array.length)
  
  const arr = [1, 2, 3, 4, 5];
  console.log(arr.fill(0, 2, 4));     //  [1, 2, 0, 0, 5]
  console.log(arr.fill(7, 1));        //  [1, 7, 7, 7, 7]
  console.log(arr.fill(9));           //  [9, 9, 9, 9, 9]
  

• 4、copyWithin()方法浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度。

  // array.copyWithin(target, start, end)
  // target必需。复制到指定目标索引位置。
  // start可选。元素复制的起始位置。
  // end可选。停止复制的索引位置 (默认为 array.length)。如果为负值，表示倒数。
  
  const arr = ['a', 'b', 'c', 'd', 'e'];
  console.log(arr.copyWithin(0, 3, 4));   // ["d", "b", "c", "d", "e"]
  console.log(arr.copyWithin(1, 3));      //["d", "d", "e", "d", "e"]
  

• 5、from()方法从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。

  // Array.from(arrayLike[, mapFn[, thisArg]])
  // arrayLike 想要转换成数组的伪数组对象或可迭代对象。
  // mapFn 可选。如果指定了该参数，新数组中的每个元素会执行该回调函数。
  // thisArg 可选。执行回调函数 mapFn 时 this 对象。
  
  console.log(Array.from('Array'));   // ["A", "r", "r", "a", "y"]
  console.log(Array.from([1, 2, 3], x => x + x));     // [2, 4, 6]
  

• 6、of()方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。

  // Array.of() 和 Array 构造函数之间的区别在于处理整数参数：
  //      Array.of(7) 创建一个具有单个元素 7 的数组，
  //      而 Array(7) 创建一个长度为7的空数组
  //   （注意：这是指一个有7个空位(empty)的数组，而不是由7个undefined组成的数组）。
  
  console.log(Array.of(7));   // [7]
  console.log(Array.of(1, 2, 3));   //   [1, 2, 3]
  
  console.log(Array(7));   // [ , , , , , , ]
  console.log(Array(1, 2, 3));   // [1, 2, 3]
  
  

• 7、entries()方法返回一个数组的迭代对象，该对象包含数组的键值对 (key/value)。（迭代对象中数组的索引值作为 key， 数组元素作为 value。）

  // next方法，可用用于遍历迭代器取得原数组的[key,value]。
  
  var arr = ['a', 'b', 'c', 'd']
  var a = arr.entries()
  
  console.log(a.next().value)     // [0, "a"]
  console.log(a.next().value)     // [1, "b"]
  console.log(a.next().value)     // [2, "c"]
  console.log(a.next().value)     // [3, "d"]
  
  //也可循环打印出来
  for(const b of a){
      console.log(b)
  }
  // [0, "a"]
  // [1, "b"]
  // [2, "c"]
  // [3, "d"]
  

• 8、values()方法返回一个新的 Array Iterator 对象，该对象包含数组每个索引的值

  var arr = ['a', 'b', 'c', 'd']
  var a = arr.values()
  
  for(const b of a){
      console.log(b)
  }
  
  // a
  // b
  // c
  // d
  
  

• 9、keys()方法返回一个包含数组中每个索引键的Array Iterator对象。

  var arr = ['a', 'b', 'c', 'd']
  var a = arr.keys()
  
  for(const b of a){
      console.log(b)
  }
  // 0
  // 1
  // 2
  // 3
  
  

• 10、includes()方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。

  // arr.includes(searchElement, fromIndex)
  //  searchElement   必须。需要查找的元素值。
  //  fromIndex   可选。从该索引处开始查找 searchElement。 默认为 0。
  //          如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索。
  
  var arr = ['a', 'b', 'c', 'd']
  
  console.log(arr.includes('a'))      //true
  console.log(arr.includes('a', 3))   //false
  console.log(arr.includes('gg'))     //false