关于JS数组常用操作的总结

在学习JS的道路上，数组是一个很重要的部分，数组的API很多，也很容易混淆，最近刷题的时候总是无法很准确的判断用哪个API或者哪个更精妙，所以我今天总结一下。主要参考廖雪峰老师和MDN文档~

arry.push()

把一个元素增加到数组的末尾，返回值为新数组的长度arry.length，示例：

let arry = [2, 9, 5]
let returnValue = arry.push(4)
console.log(returnValue) // 4
console.log(arry) // [2, 9, 5, 4]

arry.pop()

删除数组中最后一个元素，返回值为删除的元素，示例：

let arry = [2, 9, 5]
let returnValue = arry.pop()
console.log(returnValue) // 5
console.log(arry) // [2, 9]

arry.unshift()

与push方法类似，区别在于它是在数组的前面添加元素，返回值为新数组的长度arry.length，示例：

let arry = [2, 9, 5]
let returnValue = arry.unshift(4)
console.log(returnValue) // 4
console.log(arry) // [4, 2, 9, 5]

arry.shift()

与pop方法类似，区别在于它是删除数组前面的元素，返回值依然是被删除的元素，示例：

let arry = [2, 9, 5]
let returnValue = arry.shift()
console.log(returnValue) // 2
console.log(arry) // [9, 5]

由此可知，使用push和shift组合可以实现数据的‘先进先出’当然也可以使用unshift和pop

arry.indexOf()

Array可以通过indexOf()来搜索一个指定的元素的位置，示例：

let arr = [10, 20, '30', 'xyz'];
arr.indexOf(10); // 元素10的索引为0
arr.indexOf(20); // 元素20的索引为1
arr.indexOf(30); // 元素30没有找到，返回-1
arr.indexOf('30'); // 元素'30'的索引为2

arry.reverse()

把数组反向排序，这里要注意它会改变原来的数组，而不会创建新的数组，示例：

let arry = [2, 9, 5]
arry.reverse()
console.log(arry) // [ 5, 9, 2 ]

arry.sort()

对数组进行排序，可接受参数，参数必须是函数，如果不没有参数则是按照字符编码的顺序进行排序，示例：

let arry = [10, 5, 40, 1000]
console.log(arry.sort()) // [ 10, 1000, 40, 5 ]

如果数字想要按大小排列，可写入参数：

let arr = [3, 1, 7]
console.log(arr.sort((a, b) => a - b)) // [ 1, 3, 7 ]

arry.forEach(item, index)与arry.map(item, index)

两者都是对数组遍历，index表示数组索引，不是必须的参数区别在于map方法会返回一个新的数组，具体区别参考MDN，示例：

let arry = [1, 5, 10, 15];
let arry1 = arry.map( x => x + 2);
console.log(arry1) // [ 3, 7, 12, 17 ]

arry.some()

用于检测数组中的元素是否满足指定条件,参数也是函数如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素，则返回false。

let arry = [1, 5, 10, 15];
console.log(arry.some(item => item > 10)) // true

arry.every()

用于检测数组中的所有元素是否满足指定条件,只有当数组中灭一个元素都满足条件时，表达式返回true , 否则返回false，示例：

let arry = [5, 10, 15];
console.log(arry.every(item => item > 2)) // true

arry.filter()

它创建一个新的数组，原数组不变，新数组中的元素是通过检查指定数组中符合条件的所有元素，示例：

let arry = [1, 5, 10, 15];
let arry1 = arry.filter(item => item > 5)
console.log(arry) // [ 1, 5, 10, 15 ]
console.log(arry1) // [ 10, 15 ]

arry.join()

join()方法是一个非常实用的方法，它把当前Array的每个元素都用指定的字符串连接起来，然后返回连接后的字符串，示例：

let arr = ['A', 'B', 'C', 1, 2, 3];
arr.join('-'); // 'A-B-C-1-2-3'

arry.splice()

splice()方法是修改Array的“万能方法”，它可以从指定的索引开始删除若干元素，然后再从该位置添加若干元素，示例：

let arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];
// 从索引2开始删除3个元素,然后再添加两个元素:
arr.splice(2, 3, 'Google', 'Facebook'); // 返回删除的元素 ['Yahoo', 'AOL', 'Excite']
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
// 只删除,不添加:
arr.splice(2, 2); // ['Google', 'Facebook']
arr; // ['Microsoft', 'Apple', 'Oracle']
// 只添加,不删除:
arr.splice(2, 0, 'Google', 'Facebook'); // 返回[],因为没有删除任何元素
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']

arry.slice()

slice()就是对应String的substring()版本，它截取Array的部分元素，然后返回一个新的Array，示例：

let arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
arr.slice(0, 3); // 从索引0开始，到索引3结束，但不包括索引3: ['A', 'B', 'C']
arr.slice(3); // 从索引3开始到结束: ['D', 'E', 'F', 'G']

arry.concat()

用于连接两个或多个数组，返回值为连接后的新数组，原数组不变，示例：

let arry1 = [1, 2, 3]
let arry2 = [4, 5, 6]
arry1.concat(arry2)
console.log(arry1.concat(arry2)) // [ 1, 2, 3, 4, 5, 6 ]

arry.reduce()

reduce() 方法对累加器和数组中的每个元素（从左到右）应用一个函数，将其减少为单个值，示例：

var total = [0, 1, 2, 3].reduce(function(sum, value) {
  return sum + value;
}, 0);
// total is 6

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
  return a.concat(b);
}, []);
// flattened is [0, 1, 2, 3, 4, 5]

arry.fill()

fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素，示例：

//语法
arr.fill(value) 
arr.fill(value, start) 
arr.fill(value, start, end)
-----------------------------------------

[1, 2, 3].fill(4)            // [4, 4, 4]
[1, 2, 3].fill(4, 1)         // [1, 4, 4]
[1, 2, 3].fill(4, 1, 2)      // [1, 4, 3]
[1, 2, 3].fill(4, 1, 1)      // [1, 2, 3]
[1, 2, 3].fill(4, -3, -2)    // [4, 2, 3]
[1, 2, 3].fill(4, NaN, NaN)  // [1, 2, 3]
Array(3).fill(4);            // [4, 4, 4]
[].fill.call({length: 3}, 4) // {0: 4, 1: 4, 2: 4, length: 3}

arry.find()

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

function isBigEnough(element) {
  return element >= 15;
}

[12, 5, 8, 130, 44].find(isBigEnough); // 130

arry.from()

arry.from() 方法从一个类似数组或可迭代对象中创建一个新的数组实例，示例：

const bar = ["a", "b", "c"];
Array.from(bar);
// ["a", "b", "c"]

Array.from('foo');
// ["f", "o", "o"]

这些基本上都是常用的数组操作的API，有些不常用的API之所以写出来因为刷题遇到过特别的效果，如果有错误欢迎提出，希望大家多多点赞~