Javascript中常用数组方法总结（含es6）

数组(Array)是javascript中非常重要的数据结构之一，在我们日常开发中能熟练使用数组的方法也是必须的，印象中数组的方法有很多，es5,es6也新增很多数组方法，今天就把这些零散的知识点都整理出来，和各位道友共同提高。

数组中的每个元素对应一个索引（从0开始），同时每个数组有自己的length属性（等于该数组的元素个数(0~2^32-1)），每个数组都指向Array构造函数的原型（Array.prototype）,即每个数组可以调用原型上定义的方法，我们可以在控制台直接打印出Array.prototype:

怎么样，我们平时所用到的数组方法都在这里呢，为了方便记忆，我对这些方法做了些简单的分类：

会改变数组本身的方法：

1.栈方法：

ECMAScript数组提供了一种让数组的行为类似于其他数据结构的方法。也就是说，可以让数组像栈一样，可以限制插入和删除项的数据结构。栈是一种数据结构(后进先出)，也就是说最新添加的元素最早被移除。而栈中元素的插入(或叫推入)和移除(或叫弹出)，只发生在栈的顶部。ECMAScript为数组专门提供了 push() 和 pop()方法。

1.push()方法可以接收任意数量的参数，把它们逐个添加到数组的末尾，并返回修改后数组的长度。

    var arr = [];
    var length = arr.push(1,2,3);
    console.log("数组的长度为:",length,"arr:",arr) 

2.pop() 方法则从数组末尾移除最后一个元素，减少数组的length值，然后返回移除的元素。

    var arr = [3,2,1];
    var temp = arr.pop();
    console.log("取下的元素为:",temp,"arr:",arr)

2.队列方法

队列在数组的末端添加元素，从数组的前端移除元素。通过push() 向数组末端添加一个元素，然后通过shift() 方法从数组前端移除一个元素。

shift() 方法可以移除数组首位元素，并且返回取下的元素。

    var arr = [9,3,2,1];
    var temp = arr.shift();
    console.log("取下的元素为:",temp,"arr:",arr)

3.其他数组方法

unshift() 用于在数组的开头增加一个或多个元素，并返回数组的新长度。

    var arr = [3,2,1];
    var temp = arr.unshift(5,4);
    console.log("数组的长度为:",temp,"arr:",arr)

reverse() 颠倒数组中元素的排列顺序，即原先的第一个变为最后一个，原先的最后一个变为第一个,并返回对数组的引用。

    var arr = [3,2,1];
    arr.reverse();
    console.log("逆序后的数组为:",arr)

sort() 对数组元素进行排序，并返回当前数组的引用。
如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。
如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

• 若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
• 若 a 等于 b，则返回 0。

• 若 a 大于 b，则返回一个大于 0 的值。

     var arr1 = [11,2,5,54,222,9];
     var arr2 = [11,2,5,54,222,9];
     function sortBy(a,b){
         return a - b;
     }
     arr1.sort();
     arr2.sort(sortBy);
     console.log("没有用比较函数:",arr1)
     console.log("使用了比较函数:",arr2)

  

排序思想应该是类似于冒泡排序思想的，通过前后相邻的两个数进行比较，例如80与16，这时将80作为方法函数sortNum(a,b)参数列表中的a，16作为b，通过语句return a - b;返回一个数值，80-16=64,  若返回值>=1，则表示 a在排序后的序列中出现在 b 之后,所以80会在排序后出现在16之后，此时，新的数据序列为16,80,50,6,100,1，再将80作为a，50作为b进行上述的做法，第一轮下来，100就会排在最后，又开始新的一轮排序，就是类似于冒泡排序的思想吧。

splice() 在任意的位置给数组添加或删除任意个元素。返回被删除的元素组成的一个数组。splice()方法由于其参数的特殊性，可以完成增、删、改三个功能:splice()方法第一个参数为添加/删除项目的位置，第二个参数为删除元素的数量，之后的参数为可选项，为向数组新添加的元素：

    var arr = [1,2,3];
    var temp = arr.splice(1,2,4,5);
    console.log("删除的元素组成的数组:",temp,"修改后的数组:",arr);

不改变原数组的方法：

concat() 返回一个由当前数组和其它若干个数组或者若干个非数组值组合而成的新数组。浅拷贝。

    var arr1 = [1,2,3];
    var arr2 = [4,5,6];
    var temp = arr1.concat(arr2,7,8);
    console.log("连接后的新数组:",temp);

join() 方法用于把数组中的所有元素放入一个字符串。参数可选，若不传参数则使用逗号分隔：

    var arr1 = [1,2,3];
    var arr2 = [4,5,6];
    var str = arr1.join("+");
    var str2 = arr2.join();
    console.log("使用+连接:",str,"未传参数:",str2);

slice() 抽取当前数组中的一段元素组合成一个新数组。包含起始位置元素，不包含结束位置元素。

    var arr1 = [1,2,3,4,5,6];
    var temp = arr1.slice(2,5)
    console.log("新数组为:",temp);

toString() 返回一个由所有数组元素组合而成的字符串。遮蔽了原型链上的 Object.prototype.toString() 方法。

var arr = [9,3,2,1];
var temp = arr.toString();
console.log(temp)

ES5新增数组方法：

forEach() 对数组的每个元素执行一次提供的函数。forEach() 对于空数组是不会执行回调函数的。且无法提前终止循环：

    var arr1 = [1,2,3,4,5,6];
    arr1.forEach((val,index,arr) =>{
        console.log("第"+index+"个元素:",val);
    })

some() 如果数组中至少有一个元素满足测试函数，则返回 true，否则返回 false。

    var arr1 = [1,2,3,4,5,6];
    var flag = arr1.some((val,index,arr) =>{
        return val > 5
    })
    console.log(flag)   //true

every() 如果数组中的每一个元素都满足测试函数，则返回 true，否则返回 false。

    var arr1 = [1,2,3,4,5,6];
    var flag = arr1.every((val,index,arr) =>{
        return val > 5
    })
    console.log(flag)   //false

map() 返回一个由回调函数的返回值组成的新数组。不改变原数组

    var arr1 = [1,2,3,4,5,6];
    var temp = arr1.map((val,index,arr) =>{
        return val * 2;
    })
    console.log("新数组为:",temp)

filter() 将所有在过滤函数中返回 true 的数组元素放进一个新数组中并返回。不改变原数组

    var arr1 = [1,2,3,4,5,6];
    var temp = arr1.filter((val,index,arr) =>{
        return val > 5;
    })
    console.log("新数组为:",temp)

reduce() 从左到右为每个数组元素执行一次回调函数，并把上次回调函数的返回值放在一个暂存器中传给下次回调函数，并返回最后一次回调函数的返回值。
比如，用reduce对数组计算累加后的结果：

    var arr = [1,2,3,4,5,6];
    var temp = arr.reduce((prev,cur,index,arr) =>{
        console.log("上一次的值:",prev,"当前值:",cur,"当前下标:",index)
        return prev + cur;
    })
    console.log("计算后的结果:",temp)

注意，我们如果没有指定初始值，从下标1开始，如果我们指定了初始值，则从下标0开始，如指定初始值为2：

    var arr = [1,2,3,4,5,6];
    var temp = arr.reduce((prev,cur,index,arr) =>{
        console.log("上一次的值:",prev,"当前值:",cur,"当前下标:",index)
        return prev + cur;
    },2)
    console.log("计算后的结果:",temp)

indexOf() 返回数组中第一个与指定值相等的元素的索引，如果找不到这样的元素，则返回-1 。

    var arr = [1,2,2,2,5,6];
    var temp = arr.indexOf(2);
    var temp2 = arr.indexOf(7);
    console.log("查找2:",temp,"查找7:",temp2)

lastIndexOf() 返回数组中最后一个（从右边数第一个）与指定值相等的元素的索引，如果找不到这样的元素，则返回 -1。

    var arr = [1,2,2,2,5,6];
    var temp = arr.lastIndexOf(2);
    var temp2 = arr.lastIndexOf(7);
    console.log("查找2:",temp,"查找7:",temp2)

ES6新增数组方法：

1.扩展运算符(...) ...将数组变成一个参数序列

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

注意...arr只是参数序列，[...arr]才是数组。关于扩展运算符的使用场景在另一篇文章单独探讨。
2.Array.form() 可将伪数组对象和可迭代对象（iterable）（包括ES6新增的数据结构Set和Map）转换为数组。
3.copyWithin() copyWithin()方法浅复制数组的一部分到同一数组中的另一个位置，并返回该数组。

    var arr = [1,2,3,4,5,6];
    var temp = arr.copyWithin(1,2,4);
    console.log("新数组为:",temp,arr)

4.find()和findIndex()
find()方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1 。

    var arr = [1,2,3,4,5,6];
    var flag = arr.find((val,index,arr) =>{
        return val > 5
    });
    var index = arr.findIndex((val,index,arr) =>{
        return val > 5
    });
    console.log("第一个满足条件的值为:",flag,"下标为:",index)

5.fill() fill()方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素，若不指定终止索引则一直填充到数组末尾，不指定起始和终止索引填充全部数组元素

    var arr = [1,2,3,4,5,6];
    var temp = arr.fill(0,3,5)
    console.log("填充后的数组:",temp)

6.includes() includes()方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回true，否则返回false。

    var arr = [1,2,3,4,5,6];
    var temp = arr.includes(3)
    var temp2 = arr.includes(8)
    console.log("是否包含3",temp,"是否包含8:",temp2)

总结的都是些最基本的用法，千里之行始于足下，重新把基础夯实一下，如果存在错误或者表达不当，还望及时告知。