数组的一些用法总结

一、简单介绍一些数组的方法：

1、Array.length：返回数组的长度；

var arr = [4, 2, 6, 7, 3, 1, 5]
arr.length // 7

2、Array.join()：数组每个元素用括号里面的符号连接起来并返回一个字符串；

arr.join() // "4,2,6,7,3,1,5"
arr.join('=') // "4=2=6=7=3=1=5"
arr.join(' ') // "4 2 6 7 3 1 5"

3、Array.reverse()：将数组中的成员颠倒并返回逆序数组，被调用数组改变；

arr.reverse() //[5, 1, 3, 7, 6, 2, 4]
console.log(arr) //[5, 1, 3, 7, 6, 2, 4]

4、Array.sort()：数组排序按升序排序，被调用数组改变；

arr.sort() //[1, 2, 3, 4, 5, 6, 7]
//与reverse合用可得到降序
arr.sort.reverse() //[7, 6, 5, 4, 3, 2, 1]
console.log(arr) //[7, 6, 5, 4, 3, 2, 1]
['a', 'd', 'c', 'b'].sort() //["a", "b", "c", "d"]

5、Array.concat()：数组的连接，可以将数组b连接到arr之后,返回连接后的新数组，被调用数组不变；

var b = [8, 9, 10]
arr.concat(b) //[4, 2, 6, 7, 3, 1, 5, 8, 9, 10]
console.log(arr) //[4, 2, 6, 7, 3, 1, 5]

6、Array.push()：在数组最后添加元素，返回新数组的长度，被调用数组改变；

arr.push(8) // 8
console.log(arr) //[4, 2, 6, 7, 3, 1, 5, 8]

7、Array.pop()：删除数组的最后一个元素，返回删除的值，被调用数组改变;

arr.pop() // 8
console.log(arr) //[4, 2, 6, 7, 3, 1, 5]

8、Array.unshift()：与push类似，只是它是在数组头部插入元素，返回新数组的长度，被调用数组改变；

arr.unshift(8) // 8
console.log(arr) //[8, 4, 2, 6, 7, 3, 1, 5]

9、Array.shift()：与pop类似，只是它是删除数组的第一个元素，返回删除的值，被调用数组改变；

arr.shift() // 8
console.log(arr) //[4, 2, 6, 7, 3, 1, 5]

10、Array.silce()：返回指定数组的片段或子数组，它有两个参数，分别指定片段开始到结束的位置（注意不是序号，序号从0开始，位置从1开始），返回第一个参数指定位置（但不包含第一个参数指定位置）到第二个参数指定位置（含第二个参数指定位置）的片段，如果第二个参数不指定，则返回开始位置到最后的所有元素，被调用数组不变；

arr.slice(1, 5) //返回第1个到第5个位置之间的片段[2, 6, 7, 3]
arr.slice(1) //返回第1个位置到最后的片段[2, 6, 7, 3, 1, 5]
console.log(arr) //[4, 2, 6, 7, 3, 1, 5]

11、Array.splice()：删除或添加片段，第一个参数指定删除的开始位置，第二个参数指定删除元素个数，若第二个不指定则删除开始位置到最后的所有元素，返回删除的片段并改变被调用数组，之后的所有参数均为添加的元素，添加到开始指定位置之后；

arr.splice(1,2) //删除从第一个位置开始后面的两个元素，返回删除片段[2, 6],此时arr=[4, 7, 3, 1, 5]
arr.splice(2) //删除从第一个位置之后的所有元素，返回[3, 1, 5],此时arr=[4, 7]
arr.splice(1,0, 'a', 'b') //在第一个位置后添加‘a’，‘b’元素，返回[],此时arr=[4, 'a', 'b', 7]
arr.splice(1, 2, [1, 2], 3) //返回['a', 'b'],此时arr=[4, [1, 2], 3, 7]，注意这与concat()不同，splice()插入的数组本身而不是数组中的元素

12、Array.toString()：将数组中的所有元素转换为字符串，并用逗号连接为一个字符串列表，该方法会无视所有分隔符号，强行转化；

arr.toString() //与join()一致，返回"4,2,6,7,3,1,5"
['a', 'b', 'c'].toString() //与join(',')，返回"a,b,c"
[1, 2, [3, 4], 5].toString() //无视分隔符，返回"1,2,3,4,5"

13、Array.forEach()：遍历数组，将数组中的每一个元素传递给forEach()中的参数，该方法的参数为一个函数，函数中有三个参数：当前数组成员，当前成员索引值，原数组本身；

arr.forEach((v, i, a) => {
    console.log(a[i] = v) //输出七次true
})

14、Array.map()：数组的“映射”，将数组每一项传给函数，并返回由函数返回值组成的数组，原数组不变；

var b = arr.map(x => {
    return x += 1
}) //所有元素自加1，此时b=[5, 3, 7, 8, 4, 2, 6]

15、Array.filter()：数组“过滤”，将数组每一项传给函数，进行判断，返回由判断结果的true的元素组成的数组，原数组不变；

var b = arr.filter(x => {
    return x % 2 === 0
}) //返回数组中的偶数数组，b=[4, 2, 6]


var b = arr.filter(x => {
    return x % 2 === 1
}) //返回数组中的奇数数组,b=[[7, 3, 1, 5]

16、Array.every()和Array.some()：every()方法是将数组每一项传给函数，进行判断，若所有结果都为true，则返回true，否则返回false，some()方法则只要有一个为true就返回true，否则返回false；

var b = arr.every(x => {
    return x < 8
}) //所有元素小于8，返回true
var b = arr.every(x => {
    return x < 7
}) //不是所有元素小于7，返回false

var b = arr.some(x => {
    return x < 2
}) //只有一个小于2，返回true
var b = arr.some(x => {
    return x < 1false
}) //没有元素小于1，返回false

17、Array.reduce()和Array.reduceRight()：reduce可以翻译为“化简”，该方法有两个参数，第一个为函数，函数可以传入四个参数，第一个为当前累计操作的结果，其余三个为：当前元素值、当前元素索引值、原数组对象，该方法第二个参数为一个初始值，如果该参数未指定，则以原数组第一个元素值为初始值；reduceRight()方法只是方向是从尾到头，其他与前者一致；

var b = arr.reduce((s, v, i, a) => {
     return s += v
}) //一个累加器，b = 28 
//该函数原理为，先将初始值传给s，s与传入的第一个值做运算，将所得结果又作为下一次运算的初始值，以此类推，以上默认初始值为第一个元素
//若传入一个参数,则初始值改变
var b = arr.reduce((s, v, i, a) => {
     return s += v
},10) //b = 38

18、Array.indexOf()和Array.lastIndexOf()：该方法传入一个值，并从头到尾检索数组，返回第一个具有该值的元素的索引值，如果没有则返回-1；lastIndexOf()方法为从尾到头检索，返回索引值，没有返回-1；

[1, 2, 2, 3, 3, 1].indexOf(2) //1

[1, 2, 2, 3, 3, 1].indexOf(4) //-1

[1, 2, 2, 3, 3, 1].lastIndexOf(2) //2

[1, 2, 2, 3, 3, 1].lastIndexOf(3) //4

[1, 2, 2, 3, 3, 1].lastIndexOf(4) //-1

二、ES6中新增的一些方法

1、Array.from()：该方法会将类数组对象和可遍历的对象转化为数组，比较典型的类数组对象就是DOM操作的Nodelist以及函数的arguments，只要有length属性的对象都可以用from()方法转化为数组；

<ul id="demo">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

var a = document.getElementsByTagName('li') // HTMLCollection(8) [li, li, li, li, li, li, li, li]

var b=Array.from(a) //转化Nodelist集合，(8) [li, li, li, li, li, li, li, li]

function f(x, y, z) {
    console.log(Array.from(arguments))
}
f(1, 2, 3) //转化arguments对象，返回[1,2,3]

var a = {
    0: 'a',
    1: 'b',
    2: 'c',
    length: 3
}
Array.from(a) //['a', 'b', 'c'] ，如果去掉length属性返回undefined

var a = [1, 2, 3, 3, 2, 1]
var b = new Set(a) //数组转化为set结构
Array.from(b) //转化set数据结构，返回[1,2,3]

2、Array.of()：将一组值转化为数组，类似于Array()，但是弥补了Array()一些缺陷；

Array() //[]
Array(1) //[],length为1，Array()括号内只有一个数时，该数表示数组长度
Array(1,2,3) //[1,2,3]

Array.of() //[]
Array.of(1) //[1]
Array.of(1,2,3) //[1,2,3]

3、Array.find()和Array.findIndex()：参数为一个回调函数，将每一个数组成员传给回调函数进行判断，返回第一个结果为true的数组成员，与indexOf()类似，只不过indexOf()返回的是索引值，后者返回的数组成员并且如果全不符合则返回undefined，回调函数同样有三个参数：当前数组成员、当前成员索引值、原数组本身；findIndex()则与indexOf()不一样的是findIndex()还可以找到NaN；

[1, 2, 3, 4, 5].find((v, i, a) => {
    return v > 4 //返回5
}
[1, 2, 3, 4, 5].find((v, i, a) => {
    return v > 5 //返回undefined
}
[1, 2, 3, 4, 5].findIndex((v, i, a) => {
    return v < 4 //返回2
})
[1, 2, 3, 4, 5].findIndex((v, i, a) => {
    return v < 1 //返回-1
})

[NaN].indexOf(NaN) //-1
[NaN].findIndex(y => Object.is(NaN, y)) //0

4、Array.fill()：给定一个值，用来填充原数组，接受三个参数，第一个指定用于替换的值，第二个指定替换开始位置，第三个指定替换结束位置，开始位置默认为0，结束位置如果不指定则默认开始到数组最后，填充位置包括结束位置；

['a', 'b', 'c'].fill(1) //[1, 1, 1]

['a', 'b', 'c'].fill(1, 2) //["a", "b", 1]

['a', 'b', 'c'].fill(1, 1, 2) //["a", 1, "c"]

['a', 'b', 'c'].fill([1, 2], 1, 2) //可以为数组，["a", [1, 2], "c"]

['a', 'b', 'c'].fill({hello: 'world'}, 1, 2) //["a", {hello: 'world'}, "c"]

5、Array.includes()：检索数组中是否包含某个值，是则返回true，否则返回false，它有两个参数，第一个为检索的值，第二个为开始检索的位置，如果第二个参数为负数则从倒数位置开始向后检索；

[1, 2, 3, 4, 5].includes(2) //true

[1, 2, 3, 4, 5].includes(2, 1) //true

[1, 2, 3, 4, 5].includes(2, 2) //false

[1, 2, 3, 4, 5].includes(2, -1) //从第倒数1个位置开始向后检索，返回false

[1, 2, 3, 4, 5].includes(2, -4) //从第倒数4个位置开始向后检索，返回true

6、Array.copyWithin()：将数组中的某个成员或某个片段覆盖指定位置后的相同个数的成员，该方法有三个参数，第一个为开始替换的位置，第二个为截取成员的位置，默认为0，负数则为倒数位置，第三个为截取成员结束位置，默认为最后，负数为倒数位置；

[1, 2, 3, 4, 5].copyWithin(1, 2, 4) //截取第2个位置到第4个位置的片段[3, 4]，覆盖第1个位置之后的相同个数的成员，返回[1, 3, 4, 4, 5]

[1, 2, 3, 4, 5].copyWithin(1, 2)  //截取第2个位置到最后位置的片段[3, 4, 5], 覆盖第1个位置之后的相同个数的成员，返回[1, 3, 4, 5, 5]

[1, 2, 3, 4, 5].copyWithin(1, -2) //截取倒数第2个位置到最后位置的片段[4, 5]，覆盖第1个位置之后的相同个数的成员，返回[1, 4, 5, 4, 5]

三、数组一些简单的用法

1、数组去重

1）indexOf()方法

var a = [1, 2, 3, 3, 2, 1]
var b = []
a.forEach(x => {
    if (b.indexOf(x) === -1) {
        b.push(x)
    }
}) //b=[1, 2, 3]

2）Set方法

var a = [1, 2, 3, 3, 2, 1]
var b = new Set(a)
var c = Array.from(b) //[1, 2, 3]

//有点麻烦，封装为一个函数
function Unique(arr){
    return Array.from(new Set(arr))
}
Unique(a) //[1, 2, 3]

//或者用ES6扩展运算符（...）
var unique=[...new Set(arr)] //[1, 2, 3]

2、求数组最大最小值

//推荐简单的方法
//由于数组没有Math.max()方法，但可以想办法把数组成员转为单个的值

var arr = [4, 2, 6, 7, 3, 1, 5]

Math.max.apply(null, arr) //7

//ES6方法

Math.max(...arr) //7

3、后续遇到好的方法还会更新。。。