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)

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