操作数组的方法

子曾经曰过，这是基本功，就和练武的马步一样！

数组的基本方法

一、原数组改变

1.push()

1. 释义：向数组的末尾添加内容；

2. 参数：一个或多个元素；(多个居然也可以😝)

3. 原数组：改变；

4. 返回值：新数组的长度。

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

2.pop()

1. 释义：从数组中删除最后一个元素；

2. 参数：无；

3. 原数组：改变；

4. 返回值：删除的元素。

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

3.unshift()

1. 释义：向数组的开头添加内容；

2. 参数：一个或多个元素；

3. 原数组：改变；

4. 返回值：新数组的长度。

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

4.shift()

1. 释义：从数组中删除第一个元素；

2. 参数：无；

3. 原数组：改变；

4. 返回值：删除的元素。

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

5.splice( x, y, z )

1. 释义：从 x 位置开始，删除长度为 y 的元素，并用 z 替换；

2. 参数：x 表示开始位置（如果是负值，则表示从数组末位开始的第几位）， y 表示删除元素的个数，z 表示替换元素（可多个）；

3. 原数组：改变；

4. 返回值：由删除内容组成的新数组。

5. 用法：由传入参数的不同可以分别处理删除，添加，修改；

   • splice( x )：一个参数，表示删除，从 x 位置，删除到最后，即默认 y=arr.length - x；

     var arr = [1, 2, 3, 4]
     var newArr = arr.splice(2)
     
     console.log(arr) // [1, 2]
     console.log(newArr) // [3, 4]
     

   • splice( x, y )：两个参数，表示删除，从 x 位置，删除 y 个元素；

     var arr = [1, 2, 3, 4]
     var newArr = arr.splice(2, 1)
     
     console.log(arr) // [1, 2, 4]
     console.log(newArr) // [3]
     

   • splice( x, 0, z )：三个参数，且删除长度为0，表示添加，在 x 位置前添加元素；返回空数组（因为没删除）

     var arr = [1, 2, 3, 4]
     var newArr = arr.splice(0, 0, 0)
     
     console.log(arr) // [0, 1, 2, 3, 4]
     console.log(newArr) // []
     

   • splice( x, y, z )：三个参数，表示修改，从 x 位置开始，删除长度为 y 的元素，并用 z 替换；

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

6.reverse()

1. 释义：将数组中元素的位置颠倒

2. 参数：无

3. 原数组：改变；

4. 返回值：该数组的引用地址。

   var arr = [1, 2, 3, 4]
   var newArr = arr.reverse()
   
   console.log(arr) // [4, 3, 2, 1]
   console.log(newArr) // [4, 3, 2, 1]
   

7.sort()

1. 释义：sort() 方法在适当的位置对数组的元素进行排序，默认排序顺序是根据字符串Unicode码点。

2. 参数：compareFunction（可选）

3. 原数组：改变；

4. 返回值：该数组的引用地址

   /*
    如果 compareFunction(a, b) 小于 0 ，那么 a 会被排列到 b 之前；
    如果 compareFunction(a, b) 等于 0 ， a 和 b 的相对位置不变；
    如果 compareFunction(a, b) 大于 0 ， b 会被排列到 a 之前。
    */
   
   var arr = [1, 3, 2, 50, 23];
   arr.sort();// 根据字符Unicode码点 [1, 2, 23, 3, 50]
   arr.sort(function(a,b) {return a - b ;});// 从小到大 [1, 2, 3, 23, 50]
   arr.sort(function(a,b) {return b - a ;});// 从大到小 [50, 23, 3, 2, 1]
   

二、原数组不变

1.toString()

1. 释义：将数组转为字符串；

2. 参数：无；

3. 原数组：不变；

4. 返回值：新字符串。

   var arr = [1, 2, 3]
   var str = arr.toString()
   
   console.log(arr) // [1, 2, 3]
   console.log(str) // "1,2,3"
   

2.join()

1. 释义：将数组按指定分隔符转为字符串；

2. 参数：separator分隔符；

3. 原数组：不变；

4. 返回值：用分隔符连接的新字符串。

   // 根据参数不同返回不同结果
   var arr = [1, 2, 3]
   var str1 = arr.join()
   var str2 = arr.join('-')
   var str3 = arr.join('')
   
   console.log(arr) // [1, 2, 3]
   console.log(str1) // "1,2,3"
   console.log(str2) // "1-2-3"
   console.log(str3) // "123"
   

3.concat()

1. 释义：拼接两个或多个数组；

2. 参数：可以是一个或多个数值或字符串或数组；

3. 原数组：不变；

4. 返回值：新数组。

   // 传入不同参数，原数组不变
   var arr = [1, 2, 3]
   var newArr1 = arr.concat(4)
   var newArr2 = arr.concat(5, 6, 7)
   var newArr3 = arr.concat([5, 6, 7])
   var newArr4 = arr.concat([5], [6], [7])
   
   console.log(arr) // [1, 2, 3]
   console.log(newArr1) // [1, 2, 3, 4]
   console.log(newArr2) // [1, 2, 3, 5, 6, 7]
   console.log(newArr3) // [1, 2, 3, 5, 6, 7]
   console.log(newArr4) // [1, 2, 3, 5, 6, 7]
   

4.slice( x, y )

1. 释义：选取从位置 x 到位置 y 的数组的的一部分（[ x, y) => 包含x，不包含y）；

2. 参数：起始位置 x （可选，省略时为0）；终点位置 y （可选，省略时为arr.length-1）

3. 原数组：不变；

4. 返回值：由选取的内容组成的新数组。

5. 注意：slice 不修改原数组，只会返回一个浅拷贝了原数组中的元素的一个新数组，即地址都指向了同一个对象。

6. 用法：传入的参数不同

   • slice( )：不传参数，表示从 0 到 arr.length-1；

     var arr = [1, 2, 3, 4]
     var newArr = arr.slice()
     
     console.log(arr) // [1, 2, 3, 4]
     console.log(newArr) // [1, 2, 3, 4]
     

   • slice( x )：传一个参数，表示从位置 x 到 arr.length-1；

     var arr = [1, 2, 3, 4]
     var newArr = arr.slice(1)
     
     console.log(arr) // [1, 2, 3, 4]
     console.log(newArr) // [2, 3, 4]
     

   • slice( x, y )：传两个参数，表示从位置 x 到 y（不包含y）；

     var arr = [1, 2, 3, 4]
     var newArr = arr.slice(1, 2)
     
     console.log(arr) // [1, 2, 3, 4]
     console.log(newArr) // [2]
     

ES5中的数组方法

一、迭代方法

1.forEach

• 释义：遍历。

  使用函数遍历每一个数组项。

  没有返回值。

  不会改变原数组。

• 语法：

  arr.forEach( function( value, index, arr ){
    /*内容*/
  })
  //没有返回值，即使用return返回，用变量接收也是显示undefined
  

• 注意：jQuery中的each方法中回调函数的参数顺序与forEach不同

  $arr.each( function( index, value, arr ){
    /*内容*/
  })
  //没有返回值，即使用return返回，用变量接收也是显示undefined
  

• 补充：forEach除了接受一个必须的回调函数参数，还可以接受一个可选的上下文参数（改变回调函数里面的this指向）（第2个参数）默认指向window。map、filter、some、every都有该可选参数。

  arr.forEach(function(currentValue, index, arr), thisValue)
  

2.map

• 释义：映射。

  让数组中的每个元素都调用一次提供的函数。

  返回每次函数调用的结果组成的新数组。

  不会改变原数组。

• 语法：

  arr.map( function( value, index, arr ){
    return 改变后的数据；
  })
  
  //必须要有返回值，否则返回一个全是undefined的数组
  
  var arr = [1, 2, 3]
  var res1 = arr.map(function(v, i, arr){return v*2})
  var res2 = arr.map(function(v, i, arr){v*2})
  
  console.log(arr) // [1, 2, 3]
  console.log(res1) // [2, 4, 6]
  console.log(res2) // [undefined, undefined, undefined]
  

• 注意：jQuery中的map方法中回调函数的参数顺序先index，后value。

3.filter

• 释义：过滤。

  该方法对数组中的每一项运行给定函数，返回该函数会返回 true 的项组成的数组。

  即符合规则的元素会被存放到新数组中。

• 语法：

  arr.filter( function( value, index, arr ){
    return value>n(该表达式为true的值)；
  })
  
  //必须要有返回值，否则返回一个空数组
  
  var arr = [1, 2, 3, 4]
  var res1 = arr.filter(function(v, i, arr){return v>2})
  var res2 = arr.filter(function(v, i, arr){v>2})
  
  console.log(arr) // [1, 2, 3, 4]
  console.log(res1) // [3, 4]
  console.log(res2) // []
  

• 注意：jQuery中的过滤数组方法是grep

  grep(array,callback,invert)

  • array：待过滤数组；
  • callback：数组过滤函数，该函数包含两个参数，第一个是当前数组元素的值value，第二个是数组元素的下标index；
  • invert：布尔型可选项，默认为false，即返回的是过滤函数处理以后为true的数组；选项设置为true的时候，返回的是过滤函数处理以后为false的数组 。

  $.grep(arr, function( value, index ){
    return value>n;
  },false/true)//默认false，返回表达式为true的值的数组
  

• 补充：jQuery中的filter方法，参数为选择器，用于筛选元素。

  $("a"),filter("#foo");
  //选择标签为“a”且其ID为“foo"的标签
  

4.some

• 释义：存在满足。

  判断数组中的每一个元素，只要有一个符合回调函数的要求，就返回true。

  var arr = [1, 2, 3, 4]
  var res = arr.some(function(v, i, arr){return v>2})
  
  
  console.log(arr) // [1, 2, 3, 4]
  console.log(res) // true
  

5.every

• 释义：全部满足。

  判断数组中的每一个元素，所有元素都符合回调函数的要求，就返回true。

  var arr = [1, 2, 3, 4]
  var res = arr.every(function(v, i, arr){return v>2})
  
  
  console.log(arr) // [1, 2, 3, 4]
  console.log(res) // false
  

---

二、索引方法

1.indexOf

• 释义：从数组的开头开始向后查找数组中某个元素第一次出现的索引位置，如果找不到，返回-1

• 语法：

  arr.indexOf( item, start );
  //参数一：查找的元素
  //参数二：开始查找的下标index，不选默认从0索引开始
  

• 常用：

  //常用于操作数组中的元素，没有就添加。
  var index=arr.indexOf( item );
  if ( index ===  -1 ){
    arr.push( item );
  }
  

• 注意：

  在比较第一个参数与数组中的每一项时，会使用全等操作符， 要求必须完全相等,否则返回-1。

2.lastIndexOf

• 释义：从数组的末尾开始向前查找数组中某个元素第一次出现的位置，如果找不到，返回-1

---

三、归并方法

1.reduce

• 释义：不断的减少数组元素，最终的到一个结果，类似于递归

  该方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

• 语法：

  array.reduce ( function( total, currentValue, currentIndex, arr){
    return total
  }, initialValue)
  //参数一：回调函数
      //回调函数的参数1：初始值或之前值（必须）
      //回调函数的参数2：当前值（必须）
      //回调函数的参数3：当前索引值（可选）
      //回调函数的参数4：当前函数（可选）
      //回调函数返回值：返回的值作为下一次迭代的初始值
  
  //参数二：初始值（可选）如果缺省，初始值为数组的第一项
  

• 举个栗子：

  var arr = [ 1, 2, 3, 4 ];
  //不设置初始值，默认从数组第一项开始
  var sum1 = arr.reduce( function ( total, curr ){
    return total+curr;
  });
  console.log( sum1 );//10
  
  //设置初始值5，会比不设初始值多执行一次
  var sum2 = arr.reduce( function ( total, curr ){
    return total+curr;
  },5);
  console.log( sum2 );//15
  

  利用此方法，可以快速将二维数组转换为一维数组

  var arrMix = [
      [ 1, 2 ],
      [ 3, 4 ],
      [ 5, 6 ]
  ]
  var arr = arrMix.reduce( function( total, curr ){
      return total.concat( curr );
  });
  console.log( arr );//[1, 2, 3, 4, 5, 6]
  

  再举个栗子：

  //将cookie和search以对象的形式显示
  
  var cookie = "k1=v1; k2=v2; k3=v3; k4=v4";
  var search = "k1=v1&k2=v2&k3=v3&k4=v4";
  
  var res = cookie.split( "; " ).reduce(function ( res, kvstr ) {
      var kv = kvstr.split( "=" );
      var key = kv[ 0 ];
      var value = kv[ 1 ];
  
      res[ key ] = value;//设置对象的键=值
  
      return res;
  }, {} );//设置初始值为一个空对象
  
  var res2 = search.split( "&" ).reduce(function ( res, kvstr ) {
      var kv = kvstr.split( "=" );
      var key = kv[ 0 ];
      var value = kv[ 1 ];
  
      res[ key ] = value;//设置对象的键=值
  
      return res;
  }, {} );//设置初始值为一个空对象
  
  console.log(res) // {k1: "v1", k2: "v2", k3: "v3", k4: "v4"}
  console.log(res2) // {k1: "v1", k2: "v2", k3: "v3", k4: "v4"}
  

2.reduceRight

• 释义：该方法接收一个函数作为累加器，数组中的每个值（从右到左）开始缩减，最终计算为一个值。使用方法与reduce相同。

ES6中的数组方法

1.扩展运算符（...）

1. 释义：它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。

   console.log(...[1, 2, 3]) // 1 2 3
   console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5
   

2. 该运算符主要用于函数调用，如替代数组的 apply 方法

   function add(a, b, c) {
     console.log(a + b + c);
   }
   let arr = [1, 2, 3];
   add.apply(null, arr); // 6 ==> es5
   add(...arr); // 6 ==> es6
   
   Math.max.apply(null, [1, 2, 3]); // 3 ==> es5 写法
   Math.max(...[1, 2, 3]); // 3 ==> ES6 写法
   

3. 应用

   // 1.复制数组
   const a = [1, 2];
   const b = [...a];
   const [...c] = a;
   
   // 2.合并数组(取代concat)
   var a = [1, 2];
   var b = [3, 4];
   a.concat(b); // [1,2,3,4] ==> es5 写法
   [...a, ...b]; // [1,2,3,4] ==> es6 写法
   
   // 3.与解构赋值结合，生成数组
   let [a, ...b] = [1, 2, 3, 4]
   a // 1
   b // [2,3,4]
   
   // 4.将字符串转为真正的数组
   let str = "abc";
   [...str] // ["a","b","c"];
   Array.from('abc'); // ['a','b','c'];
   
   str.split("").reverse().join(""); ==> es5 写法
   [...str].reverse().join(""); ==> es6 写法
   

2.Array.from

1. 释义: 将两类对象转为正真的数组

2. 语法:

   Array.from(arrayLike: ?, mapFn?: fn(elt: ?, i: number), thisArg?: ?)

   参数:

   • arg1：类似数组的对象
   • arg2：map 函数
   • arg3：绑定 map 函数内的 this

3. 应用:

   • 该方法用于将两类对象转为正真的数组：类似数组的对象和遍历的对象( 包括 set 和 map )

     let arrLike = {
       '0': 'a',
       '1': 'b',
       '2': 'c',
       length: 3
     };
     
     var arr1 = [].slice.call(arrLike); // ["a", "b", "c"] ==> es5
     let arr2 = Array.from(arrLike); // ["a", "b", "c"] ==> es6
     
     // 将 Set 结构转为数组
     let items = new Set([1, 2, 3]);
     let array = Array.from(items);
     

   • 实际应用中，常见的类似数组的对象是 DOM 操作返回的 NodeList 集合，以及函数内部的 arguments 对象

4. 栗子:

   1. 将字符串转为数组

      Array.from('abc'); // ['a','b','c'];
      [...'abc']; // ['a','b','c'];
      'abc'.split(''); // ['a','b','c'];
      

   2. 返回各种数据的类型

      // 用arguments
      function typesOf() {
        return Array.from(arguments, p => typeof p)
      }
      typesOf(null, [], NaN, 'abc', undefined, {}); // ["object", "object", "number", "string", "undefined", "object"]
      
      // 用rest参数
      function typesOf(...rest) {
        return Array.from(rest, p => typeof p)
      }
      typesOf(null, [], NaN, 'abc', undefined, {}); // ["object", "object", "number", "string", "undefined", "object"]
      

   3. Array.from还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。

      Array.from('123',x=>x+'a'); // ["1a", "2a", "3a"]
      
      //处理两次函数
      Array.from({length:2},()=>'a'); // ["a", "a"]
      

• 扩展运算符背后调用的是遍历器接口(Symbol.iterator)，如果一个对象没有部署这个接口，就无法转换。Array.from方法还支持类似数组的对象。所谓类似数组的对象，本质特征只有一点，即必须有length属性。因此，任何有length属性的对象，都可以通过Array.from方法转为数组，而此时扩展运算符就无法转换。

3.Array.of

1. 该方法返回参数值组成的数组。如果没有参数，就返回一个空数组。

2. 替代Array()或new Array()，并且不存在由于参数不同而导致的重载。

   ( 感觉没什么用,直接用中括号不就完了吗 [ ] )

4.数组实例的copyWithin

[].copyWithin(target: number, start: number, end?: number)

• 参数
  arg1：从该位置开始替换数据
  arg2：从该位置开始读取数据，默认为 0。如果为负值，表示倒数
  arg3：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数

• 数组实例的copyWithin方法，在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组。

['a','b','c'].copyWithin(0,1); // ["b", "c", "c"];

5.数组实例的find和findIndex

• 找出第一个符合条件的数组成员（下标）

[].find(callback: fn(element: ?, index: number, array: [?]) : bool, thisArg?: ?)

[].findIndex(callback: fn(element: ?, index: number, array: [?]), thisArg?: ?)

6.数组实例的fill

• 替换、填充数组
  [].fill(value: ?, start?: number, end?: number)

7.数组实例的includes

[].includes(value: ?)

• 返回布尔值，判断某数组是否包含某个 value 值

• es5 中用 indexOf(value)===-1? 来判断是否包含

编程风格之类数组对象转数组

// 操作dom返回的NodeList集合
let ps = document.querySelectorAll('p');

// es5
[].slice.call(ps).forEach(p=> {
  console.log(p.innerText);
});

// es6
Array.from(ps).forEach(p=> {
  console.log(p.innerText);
});
[...ps].forEach(p=>{console.log(p.innerText)});

---

Knowledge changes the mind