javascript数组常用方法使用和总结

对于数组的操作，就常用的方法进行总结

首先判断是否是数组的方法：
Array.isArray() 用于确定传递的值是否是一个 Array。
如果值是 Array，则为true; 否则为false。

扩展运算符

找出数组中最大或最小值

const arr = [2, 8, 15, 4]; 
Math.max(...arr)  // 15 
Math.min(...arr)   // 2

合并数组

let arr1 = [20, 30]; 
let arr2 = [...arr1, 60, 80]; 

1、indexOf

使用场景：用于数组中是否包含某个值。

if (arr.indexOf(el) !== -1) {
  // ...
}

注意点：indexOf方法有两个缺点，一是不够语义化，它的含义是找到参数值的第一个出现位置，去比较是否不等于-1，表达起来不够直观。
二是，它内部使用严格相等运算符（===）进行判断，这会导致对NaN的误判。

[NaN].indexOf(NaN)
// -1

lastIndexOf()：检测当前值在数组中最后一次出现的位置索引

ES6中，数组实例的 includes()，Array.prototype.includes方法返回一个布尔值，表示某个数组是否包含给定的值，可用于替代indexOf()是否包含给定的值。
includes()，两个参数，第一个是需要检查的值，第二个是搜索的起始位置，默认0，如果第二个参数为负数，则表示倒数的位置。

2、Array.from

使用场景：将非数组对象转换为真正的数组。可迭代对象或者类数组对象（具有length属性的对象）作为第一个参数传入，Array.from()就能返回一个数组。

此方法（第二个参数）可以进行映射转换。

function arga(...args) {
        return Array.from(args, value => value + 1)
      }

      let arr = arga('arr', 26, 'pop')
      console.log(arr) //['arr1',27,'pop1']

如果映射函数需要在对象上工作，你可以手动传递第三个参数给 Array.from()方法，从而指定映射函数内部的 this 值.

3、join

join()方法用于把数组中的所有元素转换一个字符串。

元素是通过指定的分隔符进行分隔的。默认使用逗号作为分隔符

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]（原数组不变）

4、push

从数组末尾向数组添加元素，可以添加一个或多个元素。
注意点：返回值是新数组的长度。

5、pop

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

const arr = [1, 2, 3, 4, 5]
      console.log(arr.pop()) // 5
      console.log(arr) //[1, 2, 3, 4]

6、shift unshift

unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。

7、sort

sort() 方法用于对数组的元素进行排序。
排序顺序可以是字母或数字，并按升序或降序。默认排序顺序为按字母升序。
sort()方法可以接收一个比较函数作为参数
比较函数接收两个参数，如果第一个参数应该位于第二个之前则返回一个负数，如果两个参数相等则返回 0，如果第一个参数应该位于第二个之后则返回一个正数。栗子：

function compare(value1, value2) {
    if (value1 < value2) {
     return -1;
    } else if (value1 > value2) {
     return 1;
    } else {
     return 0;
    }
}
arr2 = [13, 24, 51, 3];
console.log(arr2.sort(compare));   // [3, 13, 24, 51]

降序排序的结果，只要交换比较函数返回的值

function compare(value1, value2) {
    if (value1 < value2) {
     return 1;
    } else if (value1 > value2) {
     return -1;
    } else {
     return 0;
    }
}
arr2 = [13, 24, 51, 3];
console.log(arr2.sort(compare));   // [51, 24, 13, 3]

8、reverse

reverse() 方法用于翻转数组中元素。

9、concat

concat()：用于连接两个或多个数组

10、every

语法 arr.every(callback(element[, index[, array]])[, thisArg])

every()：判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回 true。

      const array = [1, 2, 3, 4, 5]
      const arr2 = array.every(el => el > 3)
      console.log(arr2) //false

11、some

some()：判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回 true。

      const array = [1, 2, 3, 4, 5]
      const arr3 = array.some(el => el > 4)
      console.log(arr3) //true

12、filter

filter()：“过滤”功能，数组中的每一项运行给定函数，返回满足过滤条件组成的数组。

      const array = [1, 2, 3, 4, 5]
      const newArray = array.filter(el => el > 3)
      // [4, 5]
      console.log(newArray)

13、find

语法：array.find(function(currentValue, index, arr),thisValue)

find():返回匹配的第一个元素的值，find() 返回符合条件的元素，之后的值不会再调用执行函数。如果没有符合条件的元素返回 undefined，find() 对于空数组，函数是不会执行的。

findIndex():返回匹配位置的索引

14、forEach map 遍历数组

语法：array.forEach(function(currentValue, index, arr), thisValue)

forEach()返回值是：undefined 。 改变原数组
map()返回加工后的新数组，不改变原数组。
都不能打断遍历，不支持的 continue 与 break 语句的，我们可以通过 some 和 every 来实现。

15、slice

语法：arr.slice([begin[, end]])

slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。

16、splice

语法：array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

17、flat、flatMap

用于扁平化数组 关键字：Infinity

[1, [2, [3]]].flat(Infinity)

flatMap()方法对原数组的每个成员执行一个函数，相当于执行Array.prototype.map(),然后对返回值组成的数组执行flat()方法。该方法返回一个新数组，不改变原数组。
flatMap()只能展开一层数组。

18、fill

fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

const array1 = [1, 2, 3, 4];

console.log(array1.fill(0, 2, 4));
// [1, 2, 0, 0]

19、toLocaleString、toString

将数组转换为字符串

20、entries 、keys 、values

entries() 方法返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对。

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

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

 const array1 = ['a', 'b', 'c']

const iterator1 = array1.entries()

console.log(iterator1.next().value)
//  Array [0, "a"]

console.log(iterator1.next().value)
// Array [1, "b"]

const array1 = ['a', 'b', 'c'];
const iterator = array1.keys();

for (const key of iterator) {
  console.log(key);
}

// expected output: 0
// expected output: 1
// expected output: 2

21、reduce reduceRight

reduce() 方法对数组中的每个元素执行一个提供的reducer函数(升序执行)，将其结果汇总为单个返回值。

语法：arr.reduce(callback,[initialValue])

callback （执行数组中每个值的函数，包含四个参数）

1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
2、currentValue （数组中当前被处理的元素）
3、index （当前元素在数组中的索引）
4、array （调用 reduce 的数组）

initialValue （作为第一次调用 callback 的第一个参数。）

应用场景1：数组求和，求乘积

      const array = [1, 2, 3, 4, 5]
      const sum = array.reduce((pre, cur) => pre + cur)
      console.log(sum)  //15

应用场景2：计算数组中每个元素出现的次数

const names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice']

      const nameNum = names.reduce((pre, cur) => {
        if (cur in pre) {
          pre[cur]++
        } else {
          pre[cur] = 1
        }
        return pre
      }, {})
      console.log(nameNum) //{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}

应用场景3：数组去重

      const arr = [1, 2, 3, 4, 4, 1]
      const newArr = arr.reduce((pre, cur) => {
        if (!pre.includes(cur)) {
          return pre.concat(cur)
        } else {
          return pre
        }
      }, [])
      console.log(newArr) // [1, 2, 3, 4]

应用场景4：将二维数组转化为一维

      let arr = [
        [0, 1],
        [2, 3],
        [4, 5]
      ]
      let newArr = arr.reduce((pre, cur) => {
        return pre.concat(cur)
      }, [])
      console.log(newArr) // [0, 1, 2, 3, 4, 5]

应用场景5：将多维数组转化为一维

      let arr = [
        [0, 1],
        [2, 3],
        [4, [5, 6, 7]]
      ]
      const newArr = function (arr) {
        return arr.reduce((pre, cur) => pre.concat(Array.isArray(cur) ? newArr(cur) : cur), [])
      }
      console.log(newArr(arr)) //[0, 1, 2, 3, 4, 5, 6, 7]

应用场景6：对象里的属性求和

      const result = [
        {
          subject: 'math',
          score: 10
        },
        {
          subject: 'chinese',
          score: 20
        },
        {
          subject: 'english',
          score: 30
        }
      ]

      const sum = result.reduce(function (prev, cur) {
        return cur.score + prev
      }, 0)
      console.log(sum) //60

22、for...of

let arr = [10, 20, 30, 40]; 
for (const value of arr) { 
  console.log(valve); 
}