JavaScript中数组方法总结

前端负责的很大一部分就是通过异步请求获取数据进行简单的封装，渲染到组件上面，包括现在的很多组件化、模块化的开发，而我们获取的数据大部分是以JSON的格式，需要使用JSON.parse方法，将其转换成对象，我们很多的数据都是封装在数组里面的，我们需要拿出来进行二次处理，今天我们就来总结一下JavaScript中数组的方法。
JavaScript 数组用于在单一变量中存储多个值。

数组是一种特殊类型的对象。在 JavaScript 中对数组使用 typeof 运算符会返回 “object“。但是，JavaScript 数组最好以数组来描述。

数组元素可以是对象。JavaScript 变量可以是对象。数组是特殊类型的对象。正因如此，可以在相同数组中存放不同类型的变量。

我们可以在数组保存对象，也可以在数组中保存函数，还可以在数组中保存数组。

其实上面主要来说明数组强大的实用性，数组在任何语言中都是一个很重要的概念，所以，数组中的方法大部分的实现最终的功能是类似的，可能在原理上面稍有差异，这和每种语言的表达有一定的关系。

Array的属性

• length 返回数组的长度（数组元素的数目），数组的下标 是从0开始的，所以最后一个元素的下标 等价于Array.length-1；
• prototype 数组的原型，这个上面有数组继承的方法，当我们需要扩展新的或者修改方法的时候，可以在这个上面进行修改；
• constructor 属性返回对创建此对象的数组函数的引用。这种构造函数的方式，通常是对获取的数据使用面向对象的方法，进行二次封装，同时我们也可以用构造函数的方式来判断当前构造的对象类型（包括JavaScript的7中类型；

ECMScript历来发展的数组方法更新

ES3的数组方法

join()

• 功能：将数组转换成字符串；
• 参数：0 / 1（大于1时，默认取第一个），当我们的参数为字符或者字符串，参数会插入在每个元素的间隔之间，无参时，默认为间隔符‘，’；
• 返回：返回一个新的数组，不会修改原数组；
• 逆向操作：String.split();

reverse()

• 功能：将数组元素颠倒顺序；
• 返回：修改原有数组；

sort()

• 功能： 将数组按照一定的规则排序；

• 参数： 0 / 1（大于1时，默认取第一个），默认排序顺序是根据字符串UniCode码，参数必须是函数；
  PS：多位字符串之间的比较是按照逐位比较的方法，如果我们需要得到自己想要的结果，我们需要手动设置函数。

• 升序排列

const arr = new Array('2','4','3','1')
console.log(arr.sort((a,b)=>{
    return a-b
}))

• 降序排列

const arr = new Array('2','4','3','1')
console.log(arr.sort((a,b)=>{
    return b-a
}))

• 按照数组对象中某个属性值进行排序

const arr = [
    {name: 'Jack',age:18},
    {name: 'Tom',age:33},
    {name: 'jacy',age:25}
]
function compare (prop){
    return (a,b)=>{
        return a[prop] - b[prop]
    }
}
console.log(arr.sort(compare('age')))

• 根据参数来确定是升序还是降序

const arr = [
    {name: 'Jack',age: 18},
    {name: 'Tom',age: 33},
    {name: 'jacy',age: 25}
]
function sortByProps(attr, rev) {
    rev = rev ? 1 : -1
    return (a,b) => {
        a = a[attr]
        b = b[attr]
        if (a < b) {return rev * -1}
        if (a > b) {return rev * 1}
        return 0
    }
}
console.log(arr.sort(sortByProps('name')))

concat()

• 功能：用于连接两个或多个数组；

• 参数：字符串或者数组（参数不限）；

  • 参数为数组，连接得就是数组的元素，不是数组本身；
  • 但是这种方法只适用于一维数组，当出现多维数组的时候，此方法并不会扁平化数组，会将复杂嵌套得数据一并放在数组的最后面最为一个元素，这里面涉及到深浅拷贝的问题，此方式只使用基本的数据类型，简单的对象，复杂的对象可能会出现错误；
• 返回：不会修改原数组，会返回一个数组的副本；

slice()

• 功能：返回数组的一个片段或子数组;

• 参数：0 / 1 / 2

  • 无参数将原样返回一个新的数组，相当于复制了一遍数组;
  • 如果只指定一个参数，返回的数组将包含从开始位置到结尾的所有元素;
  • 返回的数组包含第一个参数指定的位置，到第二个参数前面一个位置之间的所有元素—[n,m);
  • 如果参数中出现负数，它表示相对于数组中的最后一个元素的位置的个数;
• 返回: 不改变原数组, 返回一个新的数组;
• PS：我们常常在开发中使用这个方法生成一个数据副本，防止源数据被修改导致错误或者不必要的损失;

splice()

• 功能：向/从数组中添加/删除项目、或者同时执行这两个操作；

• 参数：前俩个参数指定了删除，从第三个参数开始，指定拼接。

  • 第二个参数指定了应该从数组中删除元素的个数，若省略，从起始点到数组结尾的所有元素都将被删除;
  • 第三个参数开始，指被拼接到原数组的元素，区别于concat(), splice()会插入数组本身而非数组的元素(会扁平化数组);
• arrayObject.splice(index,howmany,item1,…..,itemX);
  | 参数 | 描述 |
  | —————————— | ——————————————————————————————————- |
  | index | 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。 |
  | howmany | 必需。要删除的项目数量。如果设置为 0，则不会删除项目。 |
  | item1,….,itemX | 可选。向数组添加的新项目。 |
• 返回：改变原来数组，返回的是被删除的项目；
  我们在开发的过程中，需要注意她的返回值；

push() & pop()

shift() & unshift()

toString() & toLocalString()

toSource()

• 功能：返回对象的源代码
• 参数：不传递参数

• 说明：

  • 该原始值由 Array 对象派生的所有对象继承；
  • 此方法通常由 JavaScript 在后台自动调用，并不显式地出现在代码中；
  • 只有 Gecko 核心的浏览器（比如 Firefox）支持该方法，也就是说 IE、Safari、Chrome、Opera 等浏览器均不支持该方法。

valueOf()

• 功能：返回 Boolean 对象的原始值
• 参数：不传递参数

• 说明：

  • JavaScript Boolean 对象
  • 如果调用该方法的对象不是 Boolean，则抛出异常 TypeError。
• 返回：booleanObject 的原始布尔值。

ES5新增数组方法

• 索引方法：indexOf()，lastIndexOf()
• 迭代方法：forEach()、map()、filter()、some()、every()
• 归并方法：reduce()、reduceRight()

索引方法

• 用于查询

迭代方法

• 每个方法都接受两个参数，第一个参数callback(回调函数，必选)，第二个参数是一个可选的上下文参数。
• 其中第一个参数callback接受三个参数， 当前项的值、当前项在数组中的索引、数组对象本身。即 function(value,index,arr) {}；需要注意的是与我们常用的jQuery中封装的方法区别在第一个参数和第二个参数，即index和value的顺序是相反的。
• 第二个参数是一个可选的上下文参数，是执行第一个函数参数的作用域对象，也就是上面说的callback中this所指向的值。 如果这第2个可选参数不指定，则使用全局对象代替（在浏览器是为window），严格模式下是undefined。
• 需要注意的是除了forEach()方法，其余的迭代方法中callback需要有return值否则会返回undefined。

上述方法不会修改原数组

indexOf()

• 功能：返回某个指定的字符串值在字符串中首次出现的位置。

• 参数：

  Array.prototype.indexOf(searchvalue,fromindex)

• 说明：

  • 该方法将从头到尾地检索字符串 stringObject，看它是否含有子串 searchvalue。开始检索的位置在字符串的 fromindex 处或字符串的开头（没有指定 fromindex 时）。如果找到一个 searchvalue，则返回 searchvalue 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。
  • 此方法对大小写敏感！
  • 如果要检索的字符串值没有出现，则该方法返回 -1。

lastIndexOf()

• 功能：返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。

• 参数：

  Array.prototype.lastIndexOf(searchvalue,fromindex)

• 说明：
  该方法将从尾到头地检索字符串 stringObject，看它是否含有子串 searchvalue。开始检索的位置在字符串的 fromindex 处或字符串的结尾（没有指定 fromindex时）。如果找到一个 searchvalue，则返回 searchvalue的第一个字符在 stringObject中的位置。stringObject中的字符位置是从 0 开始的。
  此如果要检索的字符串值没有出现，则该方法返回 -1。

forEach()

• 功能：用于调用数组的每个元素，并将元素传递给回调函数。

• 参数：

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

• 返回：此方法没有返回值；在JavaScript（ES3版本），返回undefined

• 说明：

  • 对于空数组是不会执行回调函数的。

  • 此方法遍历的在第一次调用callback前就会确定，所以如下的情况不会被遍历到

    • 后添加到数组中的项不会被回调访问到
    • 如果已经存在的值被改变，则传递给回调的值是遍历到他们那一刻的值。
    • 已删除的项不会被遍历到。
    • 如果已访问的元素在迭代时被删除了(例如使用 ) ，之后的元素将被跳过

      const numStr = ['1','2','3','4']
      numStr.forEach(item => {
      console.log(item)
      if (item === '2') {
      numStr.shift()
      }
      })

解释**‘2’‘2’‘3’**

• 原理：在 JS中实现forEach方法其实就是对for循环进行了一次封装，然后使用prototype绑定到数组的原型方法上面，这样就方便了数组的直接使用，省去了写for循环的复杂过程，提高开发效率。
• forEach本身是同步的，所以在forEach中执行异步方法，是不会被阻塞的，会在同步执行完，再执行异步函数。所以使用forEach批量执行异步方法怎么保证不出错是需要考虑的问题。

这边提供的参考方式是先将异步方法封装成promise,再使用async/await语法，来实现同步。或者在forEach中定义一个完整的promise,在外面使用Promise提供的all()方法返回每一个promise的结果。

map()

• 功能：创建一个新数组，其结果返回的是该数组中的每个元素的都调用一个提供的函数后返回的结果
• 参数：javascript Array.prototype.map(function(currentValue,index,arr), thisValue)

• 返回：返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

• 说明：

  • map不会对空数组进行检测
  • map不会改变原始数组
  • 不会对空数组进行检测，如果数组元素没有显示赋值，或者被delete,那么map对这些元素不会执行
  • 同时map是深拷贝还是浅拷贝取决于对于currentValue的处理

filter()

• 功能：该方法对数组中的每一项运行给定函数，返回该函数会返回 true 的项组成的数组。利用这个方法可对数组元素进行过滤筛选。
• 参数：javascript Array.prototype.map(function(currentValue,index,arr), thisValue)

• 返回：返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

• 说明：

  • filter不会对空数组进行检测
  • filter不会改变原始数组
  • 比较简单的用法就是我们可以使用这个函数进行去重

some()和every()

• 功能：

  • every：对数组中每一个运行给定函数，如果该函数对每一项返回true,则返回true
  • some：对数组中每一个运行给定函数，如果该函数对任一项返回true,则返回true
• 参数：javascript Array.prototype.some(function(currentValue,index,arr), thisValue); Array.prototype.every(function(currentValue,index,arr), thisValue)

• 说明：

  • 不会对空数组进行检测
  • 不会改变原始数组

reduce()

• 功能：

  • 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值
  • 可以作为一个高阶函数，用于函数的 compose
• 参数：javascript Array.prototype.reduce(function(total, currentValue, currentIndex, arr), initialValue)

• 说明：

  • 对于空数组是不会执行回调函数的。
  • 不会修改原来数组，需要一个新的数组接受

• 简单用法：

  • 对数据进行简单的求和，求乘积

• 高级用法：

  • 计算数组中每个元素出现的次数
  • 数组去重
  • 将多维数组转化为一维
  • 对象里的属性求和
    详细解释看这里

reduceRight()

• 这个和reduce用法是相同的，但是他是从数组最后一项向前累计的
• 这个有兴趣的可以了解一下，用的不多就不在介绍了，介绍

ES6及以上新增数组方法

from()

• 功能：将具有length属性的对象或者可以迭代的对象返回一个数组，将类数组（伪数组）对象转为数组
• 参数javascript Array.prototype.from(object, mapFunction, thisValue)

• 说明

  • 此函数还以接受第二个参数,对元素进行处理在返回数组

    Array.from(arrayLike, x => x * x);
    Array.from(arrayLike).map(x => x * x);
    Array.from([1, 2, 3], (x) => x * x);

  • 不改变原数组，需要创建一个新的数组进行接受

of()

• 功能：创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。
• 意义：为了解决Array原生中传入元素具有的二义性
• 参数：javascript Array.prototype.of(element0[, element1[, ...[, elementN]]])

copyWithin()

-功能：浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度

• 参数javascript Array.prototype.copyWithin(target, start = 0, end = this.length)

1.0 为基底的索引，复制序列到该位置。如果是负数，target 将从末尾开始计算。如果 target 大于等于 arr.length，将会不发生拷贝。如果 target 在 start 之后，复制的序列将被修改以符合 arr.length。
2.0 为基底的索引，开始复制元素的起始位置。如果是负数，start 将从末尾开始计算。如果 start 被忽略，copyWithin 将会从0开始复制。
3.0 为基底的索引，开始复制元素的结束位置。copyWithin 将会拷贝到该位置，但不包括 end 这个位置的元素。如果是负数， end 将从末尾开始计算。如果 end 被忽略，copyWithin 方法将会一直复制至数组结尾（默认为 arr.length）

• 说明

  • 参数 target、start 和 end 必须为整数。
  • 如果 start 为负，则其指定的索引位置等同于 length+start，length 为数组的长度。end 也是如此。
  • copyWithin 方法不要求其 this 值必须是一个数组对象；除此之外，copyWithin 是一个可变方法，它可以改变 this 对象本身，并且返回它，而不仅仅是它的拷贝。
• 返回：修改原数组

fill()

• 功能：用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。使用给定值，填充一个数组。

• 参数

  Array.prototype.fill(value[, start[, end]])

1.用来填充数组元素的值
2.起始索引，默认值为0
3.终止索引，默认值为 this.length

• 说明

  • 用于空数组的初始化非常方便。数组中已有的元素，会被全部抹去
  • 当一个对象被传递给 fill方法的时候, 填充数组的是这个对象的引用。如果填充的类型为对象，那么被赋值的是同一个内存地址的对象，而不是深拷贝对象
• 返回：会修改原数组

find()

• 功能：返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

• 参数：

  Array.prototype.find(function(currentValue,index,arr), thisValue)

• 说明
  find方法对数组中的每一项元素执行一次 callback 函数，直至有一个 callback 返回 true。当找到了这样一个元素后，该方法会立即返回这个元素的值，否则返回 undefined。注意 callback函数会为数组中的每个索引调用即从 0 到 length - 1，而不仅仅是那些被赋值的索引，这意味着对于稀疏数组来说，该方法的效率要低于那些只遍历有值的索引的方法。
  此方法在使用之前就已经对数组的索引进行了确定，如果在使用此方法大的途中改变数组，会使得数组的索引改变，从而获得的值发生改变

• 返回
  find方法不会改变数组。

findIndex()

• 功能：返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。

• 参数：

  Array.prototype.findIndex(function(currentValue,index,arr), thisValue)

• 说明
  findIndex方法对数组中的每个数组索引0..length-1（包括）执行一次callback函数，直到找到一个callback函数返回真实值（强制为true）的值。如果找到这样的元素，findIndex会立即返回该元素的索引。如果回调从不返回真值，或者数组的length为0，则findIndex返回-1。 与某些其他数组方法（如Array#some）不同，在稀疏数组中，即使对于数组中不存在的条目的索引也会调用回调函数。
  在第一次调用callback函数时会确定元素的索引范围，因此在findIndex方法开始执行之后添加到数组的新元素将不会被callback函数访问到。如果数组中一个尚未被callback函数访问到的元素的值被callback函数所改变，那么当callback函数访问到它时，它的值是将是根据它在数组中的索引所访问到的当前值。被删除的元素仍然会被访问到。

• 返回
  findIndex不会修改所调用的数组。

includes()

• 功能：用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。

• 参数：

  Array.prototype.includes(searchElement, fromIndex)

• 说明

• 返回
  布尔值。如果找到，返回true，未找到返回false

keys

• 功能：用于从数组创建一个包含数组键的可迭代对象Array Iterator
• 参数javascript Array.prototype.keys()

• 说明
  索引迭代器会包含那些没有对应元素的索引
• 返回
  返回一个新的Array迭代器对象javascript const arr = ['a','','c'] const newArr = Object.keys(arr) console.log(newArr) // ['0','2']

entries

• 功能：用于从数组创建一个包含数组键值对(key/value)的可迭代对象Array Iterator，其中迭代对象中数组的索引值作为key，数组元素作为value
• 参数javascript Array.prototype.keys()

• 说明
  索引迭代器会包含那些没有对应元素的索引
  下面的搬运自MDN的Array.prototype.entries

  1. Array Iterator ```javascript var arr = [“a”, “b”, “c”]; var iterator = arr.entries(); console.log(iterator);

/Array Iterator {} proto:Array Iterator next:ƒ next() Symbol(Symbol.toStringTag):”Array Iterator” proto:Object /

   2. `Iterator.next()`
```javascript
var arr = ["a", "b", "c"]; 
var iterator = arr.entries();
console.log(iterator.next());
/*{value: Array(2), done: false}
          done:false
          value:(2) [0, "a"]
          __proto__: Object
*/
// iterator.next()返回一个对象，对于有元素的数组，
// 是next{ value: Array(2), done: false }；
// next.done 用于指示迭代器是否完成：在每次迭代时进行更新而且都是false，
// 直到迭代器结束done才是true。
// next.value是一个["key","value"]的数组，是返回的迭代器中的元素值。

1. Iterator.next方法运行

   var arr = ["a", "b", "c"];
   var iter = arr.entries();
   var a = [];
   // for(var i=0; i< arr.length; i++){   // 实际使用的是这个 
   for(var i=0; i< arr.length+1; i++){    // 注意，是length+1，比数组的长度大
   var tem = iter.next();             // 每次迭代时更新next
   console.log(tem.done);             // 这里可以看到更新后的done都是false
   if(tem.done !== true){             // 遍历迭代器结束done才是true
     console.log(tem.value);
     a[i]=tem.value;
   }
   }
   console.log(a);                         // 遍历完毕，输出next.value的数组

2. 二维数组按行排序 ```javascript function sortArr(arr) { var goNext = true; var entries = arr.entries(); while (goNext) { var result = entries.next(); if (result.done !== true) {

   result.value[1].sort((a, b) => a - b);
   goNext = true;

   } else {

   goNext = false;

   } } return arr; }

var arr = [[1,34],[456,2,3,44,234],[4567,1,4,5,6],[34,78,23,1]]; sortArr(arr); /*(4) [Array(2), Array(5), Array(4)] 0:(2) [1, 34] 1:(5) [2, 3, 44, 234, 456] 2:(4) [1, 23, 34, 78] length:4 proto:Array(0)

   5. 使用`for…of`循环
```javascript
var arr = ["a", "b", "c"];
var iterator = arr.entries();
// undefined
for (let e of iterator) {
    console.log(e);
}
// [0, "a"] 
// [1, "b"] 
// [2, "c"]

• 返回
  一个新的 Array 迭代器对象。Array Iterator是对象，它的原型（__proto__:Array Iterator）上有一个next方法，可用用于遍历迭代器取得原数组的[key,value]。

values

• 功能：返回一个新的 Array Iterator 对象，该对象包含数组每个索引的值。
• 说明
  此方法是迭代器的默认实现方式

  Array.prototype.values === Array.prototype[Symbol.iterator]
  同时在数组的iteractor对象中没有存储任何值，相反，它存储了创建它时使用的数组的地址，因此地址决定了存在该数组中的值，如果数组中的值更改，则数组迭代器对象的值也更改。

flat

• 功能：按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回，实现数组扁平化
• 参数：javascript Array.prototype.flat([depth])

depth：指定要提取嵌套数组的结构深度，默认值是1。

• 说明
  扁平化嵌套数组
  扁平化数组空项
• 返回
  一个新的按照指定深度返回的新数组。
• 替代方法
  因为此方法是2019新提出的数组方法，在很多的浏览器上都不支持运行，所以有替代方案
  详情请看

flatMap

• 功能：使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与map连着深度值为1的flat几乎相同。但flatMap通常在合并成一种方法的效率高一些。

• 参数

  Array.prototype.flatMap(function(currentValue,index,arr), thisValue)

• 说明
  flatMap与map的区别

  let arr1 = ["1 2", "", "3"];
  arr1.map(x => x.split(" "));
  // [["1", "2"],[""],["3"]]
  arr1.flatMap(x => x.split(" "));
  // ["1", "2", , "", "3"]

• 返回
  一个新的数组，其中每个元素都是回调函数的结果，并且结构深度 depth 值为1。