常用数组方法汇总（ES3、ES5、ES6、ES7、ES10）

本文整理了es3、es5、es6、es7、es10的关于数组的方法

**使用案例在表格下面

	方法	作用	参数	返回值	是否改变原数组
ES3	join( ）	将数组转化为字符串	1.无参数时，默认返回用逗号连接数组每一项的字符串 2.有 符号字符串 参数时，返回用符号连接数组每一项的字符串	新字符串	否
	reverse( )	将数组中的元素颠倒顺序	无参数	数组	是
	sort ( )	将数组元素按照一定规则排序	1、无参数时，默认按照字母表顺序 2、有参数时，只能传一个比较函数，该函数参数又有两个参数（第三个参数默认undefined), 假设第一个参数应该在前，你应该返回一个小于0的数值，否则返回大于0的数值	数组	是
	concat( )	拼接数组/浅拷贝	拼接数组/浅拷贝参数为字符串或数组（数组项或数组名），参数不限 1、当参数为数组时，粘合的是数组的元素，而非数组本身 2、但此方法不会扁平化数组参数(换句话说，如果你的参数是个数组，里面又嵌套了超过1个数组，这个里面的数组的元素不会被提取出来粘合，而是整个数组被粘合在新的数组后面).	新数组、字符串	否
	slice( )	查找数组中返回选定的元素	1、无参数时，将原样返回一个新的数组，相当于复制了一遍数组 2、第一个参数，该参数为选取的起始下标。 如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推 3、第二个参数为截止下标，如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素	返回一个新的数组，包含从 start 到 end （不包括该元素）	否
	splice( )	从数组中删除、插入元素	前俩个参数（必须）指定了删除，从第三个参数（可选）开始，指定拼接。 1、第一个参数规定，删除、插入的起始位置（数组下标） 2、第二个参数规定删除的元素个数， 若省略，从起始点到数组结尾的所有元素都将被删除 3、第三个参数，指被拼接到原数组的元素，区别于concat(), splice()会插入数组本身而非数组的元素(会扁平化数组)	返回删除项组成的新数组	是
	push( )	在原数组后面追加	参数不限，不会扁平化数组	返回新数组的数组长度	是
	pop( )	删除并返回数组的最后一个元素	无参数	返回删除项	是
	unshift( )	在原数组前面追加	参数不限，不会改变参数顺序	返回新数组的数组长度	是
	shift( )	删除并返回数组的第一个元素	无参数	返回删除项	是
	toString( )	将数组转化为字符串	无参数	返回用逗号连接数组每一项的字符串	否
	toLocaleString( )	将数组转化为字符串	无参数	返回用逗号连接数组每一项的字符串	否
ES5	map( )	遍历/操作/返回 用于改变数据	参数是一个带return的函数，函数的参数有三个分别是item,index,arr	返回新数组	否
	filter( )	按照某个条件过滤数组	参数是一个带return的函数，函数的参数有三个分别是item,index,arr	返回一个满足过滤条件的新数组	否，不会对空数组进行检测
	forEach( )	遍历数组 用于不改变数据值，单纯的获取值	参数是一个带return的函数，函数的参数有三个分别是item,index,arr	无返回值	是
	every( )	对数组元素应用指定的函数判定.	参数是一个函数，数组中所有元素在函数判定下都为true则返回true，否则返回false. 对于空数组，返回true.	boolean	否,且不会对空数组进行检测
	some( )	对数组元素应用指定的函数判定.	参数是一个函数，数组中 有一个元素在函数判定下都为true则返回true，否则返回false. 对于空数组，返回 false.	boolean	否，且 some() 不会对空数组进行检测。
	reduce( )	归并（从左到右累加）	第一个参数是执行化简操作的函数．第二个是传递给函数的初始值(如果无，函数将把数组中的第一个元素作为其初始值). 1、 空数组上，不带初始值参数调用此函数将会报错. 2、 如果只有一个元素且没有指定初始值，或者有一个空数组并且指定了一个初始值，reduce() 只是简单地返回那个值而不会调用化简函数.	返回最后一次的操作结果 ？新数组同上	否
	reduceRight( )	归并（从右到左累加）
	indexOf( )	从前往后查询数组中指定的元素	1、第一个参数指的是需要搜索的值，返回则找到第一个元素的索引或者如果没有找到就返回 -1. 2、 第二个参数是可选的，它指定数组中的一个索引，表示从哪里开始搜索，可以是负数，它代表相对于数组末尾的个数。最后一个元素是-1，倒数第二个元素为-2,以此类推...
	lastIndexOf( )	从后往前查询数组中指定的元素
ES6	Array.from( )	将一个类数组对象或者可遍历对象（包括字符串）转换成一个真正的数组。	1、第一个参数可以为 类数组对象（必须要有length 属性）、Set结构数据，字符串，真数组 2、还可以接受 第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。	返回真正的数组/td>
	Array.of( ）	建一个包含所有传入参数的数组	1、无参数时返回一个空数组 2、有参数时 不管参数的数量与类型	返回真正的数组
	find( )	找出第一个符合条件的数组成员	它的参数是一个回调函数，回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组（item，index，arr）	如果找到了符合条件的成员就返回该成员；如果没有符合条件的成员，则返回undefined。
	findIndex( )	控件允许输入的最多字符		如果找到了符合条件的成员就返回该成员的位置，如果所有成员都不符合条件，则返回-1。
	fill( )	填充一个数组（插入数据）	1、第一个参数表示被填充的元素. 2、第二个参数表示填充的起始位置. 3、第三个参数表示填充的结束位置(指定位置之前一个).	数组	是
	copyWidthin( )	在数组内部，将指定位置的成员复制到其他位置(会覆盖原有成员)．	三个参数： 1、target(必须): 从该位置开始替换数据. 2、start(可选)：从该位置开始读取数据. 3、end(可选)：到该位置的前一个位置.	数组	是
ES7	includes( )	判断数组是否包含给定的值，与字符串的includes()方法类似.	1、第一个参数表示要查找的数 2、第二个参数表示搜索的起始位置	boolean
ES10	flat( )	一个可指定的深度的数组降维，也可去除数组的空项	参数为指定深度，不写参数默认降一维，参数为Infinity展开任意深度，即全部降维	新数组	否
	flatMap( )	先使用映射函数映射每个元素，然后将结果压缩成一个新数组	和map的参数相同	新数组	否

常用方法举例**:

join()

var fruits = ["Banana", "Orange","Apple", "Mango"];
console.log(fruits.join(" * ")); 

// Banana * Orange * Apple * Mango

reverse()

let arr = [3,5,2,4,1]
console.log(arr.reverse())

//   [1, 4, 2, 5, 3]

sort ()

let arr = [3,5,2,4,1]
console.log(arr.sort( ( a-b ) =>a-b))  //升序   [1, 2, 3, 4, 5]
console.log(arr.sort( ( a-b ) =>b-a))  //降序   [5, 4, 3, 2, 1]

concat()

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

let arr1 = ["George","John","Thomas"]
let arr2 = ["James","Adrew","Martin"]
console.log(arr1.concat(arr2))  
//   ["George","John","Thomas","James","Adrew","Martin"]

slice()

let arr =  ["George","John","Thomas","James","Adrew","Martin"]

console.log(arr.slice(1))      
 //   ["John","Thomas","James","Adrew","Martin"]
 
console.log(arr.slice(2,4))   
//   ["Thomas","James"]

splice()

let arr =  ["George","John","Thomas","James","Adrew","Martin"]

console.log(arr.splice(2，0，"William"))      
//   ["George","John","William","Thomas","James","Adrew","Martin"]
 
console.log(arr.splice(2,1,"William"))   
//   ["George","John","William","James","Adrew","Martin"]

push()

let arr =  ["George","John"]
console.log(arr.push("William"))   //   3  数组长度
console.log(arr)        //   ["George","John","William"]

pop()

let arr =  ["George","John","Thomas","James","Adrew","Martin"]
console.log(arr.pop())   //    ['Martin']

unshift()

let arr =  ["George","John"]
console.log(arr.unshift("William"))   //   3  数组长度
console.log(arr)        //   ["William","George","John"]

shift()

let arr =  ["George","John","Thomas","James","Adrew","Martin"]
console.log(arr.shift())       //   ['George']

toString()

将数字转为字符串：
var a = 1234;
console.log(a.toString())          //'1234'

将数组转为字符串：
let arr =  ["George","John","Thomas","James","Adrew","Martin"]
console.log(arr.toString())       //   ”George,John,Thomas,James,Adrew,Martin”

将Date转为字符串
var date = new Date();
console.log(date.valueOf());       //'1564453330442'
console.log(date.toString());      //"Tue Jul 30 2019 10:22:10 GMT+0800 (中国标准时间)"

**注意**
1：如果你开发的脚本在世界范围都有人使用，那么将对象转换成字符串时请使用toString()方法来完成
2：toString()是保险的，返回唯一值的方法,它不会因为本地环境的改变而发生变化。
如果是为了返回时间类型的数据，推荐使用toLocaleString()。若是在后台处理字符串，请务必使用toString()。

toLocalString()

将数字转为字符串：
var a = 1234;
console.log(a.toLocaleString())        //'1,234' , toLocaleString()会让数字三位三位一分隔

将数组转为字符串：
let arr =  ["George","John","Thomas","James","Adrew","Martin"]
console.log(arr.toString())           //   ”George,John,Thomas,James,Adrew,Martin”

将Date转为字符串：
var date = new Date();
console.log(date.valueOf());                //'1564453330442'
console.log(date.toLocaleString());     //"2019/7/30 上午10:22:10"

**注意**
1：toLocaleString调用每个数组的oLocaleString() 方法，然后使用地区特定的分隔符把生成的字符串连接起来，形成一个字符串
2：LocaleString()会根据你机器的本地环境来返回字符串，它和toString()返回的值在不同的本地环境下使用的符号会有微妙的变化。

map()

var arr = [1,2,3,4,5]
var doubleNumber = arr.map(function(num){
    return num*2
})    
console.log(doubleNumber)   // [2,4,6,8,10]　

var arr = [
     { name:'Jack',age:'16',sex:'男' },
     {name:'Jerry',age:'18',sex:'男' },
     {name:'Bailey',age:'14',sex:'女' }
 ]
 var names = arr.map(function(name){
       return name.name;
})
 console.log(names)      //  ["Jack", "Jerry", "Bailey"]
----------------------------------------------------------------------
var arr=['1','4','9','16'];
var r=arr.map(parseInt);
console.log(r)      //  [1,NaN,NaN,1]

var arr=['1','4','9','16'];
var r=arr.map(function(x){return parseInt(x)});   //parseInt一定要有参数
console.log(r)      //  [1,4,9,16]

filter()

var ages = [32, 33, 16, 40];
var new = ages .filter( item =>item < 18)
console.log( new )     //  [16]
console.log(ages)     // [32, 33, 16, 40];  不改变原数组

var arr = [
  {"name":"apple", "count": 2},
  {"name":"orange", "count": 5},
  {"name":"pear", "count": 3},
  {"name":"orange", "count": 16},
];
var newArr = arr.filter(function(item){
  return item.name === "orange";
});
console.log( newArr ） // [ {"name":"orange", "count": 5},{"name":"orange", "count": 16}]

forEach()

var arr = [1,2,3,4];
arr.forEach(function(item,index){
console.log(item);    //替代for循环，本身不支持 continue 与 break 语句，可以通过 some 和 every 来实现
});
//1
//2
//3
//4
--------------------------------------------------------------------------
使用 return 语句实现 continue 关键字的效果：
var arr = [1, 2, 3, 4, 5];
arr.forEach(function (item) {
    if (item === 3) {
        return;
    }
    console.log(item);
});
//1
//2
//4
//5

every()

var ages = [32, 33, 12, 40];
var  checkAdult  = ages.every(age=>age>18)
console.log( checkAdult )    // false
------------------------------------------------------------
every 的break实现：
var arr = [1, 2, 3, 4, 5];
arr.every(function (item) {
        console.log(item);
        return item !== 3;
});
//1
//2
//3

some()

var ages = [32, 33, 12, 40];
var  checkAdult  = ages.some(age=>age<18)
console.log( checkAdult )    // true
------------------------------------------------------------
some的continue实现：
var arr = [1, 2, 3, 4, 5];
arr.some(function (item) {
        if (item === 2) {
                return;        // 不能为 return false
        }
        console.log(item);
});
//1
//3
//4
//5

reduce()

默认从左到右：
var numbers = [65, 44, 12, 4];
numbers.reduce((total,nextNum)=>{
    return total + num
})
// 125

reduceRight()

从右到左，减去每个数组元素：
var numbers = [2, 45, 30, 100];
numbers.reduceRight((total, num)=> {
    return total - num;
})
// 23

indexOf()

查找数组中某元素的位置下标：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
console.log( a )    // 2

从第四个位置开始查找apple元素
var fruits=["Banana","Orange","Apple","Mango","Banana","Orange","Apple"];
var a = fruits.indexOf("Apple",4);
console.log( a )    // 6

判断数组中是否存在某元素：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var  b =   fruits.indexOf("pineapple")  ===  -1
console.log( b )    // true   没找到值为-1

lastIndexOf()

从后向前查找：
var fruits=["Banana","Orange","Apple","Mango","Banana","Orange","Apple"];
var a = fruits.lastIndexOf("Apple",4);
console.log( a )    // 2

Array.from()

1、将类数组对象转换为真正数组：
let arrayLike = {
    0: 'tom', 
    1: '65',
    2: '男',
    3: ['jane','john','Mary'],
    'length': 4
}
let arr = Array.from(arrayLike)
console.log(arr) // ['tom','65','男',['jane','john','Mary']]
对比：
let arrayLike = {
    'name': 'tom', 
    'age': '65',
    'sex': '男',
    'friends': ['jane','john','Mary'],
    length: 4
}
let arr = Array.from(arrayLike)
console.log(arr)  // [ undefined, undefined, undefined, undefined ]

**注意**
由此可见，要将一个类数组对象转换为一个真正的数组，必须具备以下条件：
1、该类数组对象必须具有length属性，用于指定数组的长度。如果没有length属性，那么转换后的数组是一个空数组。
2、该类数组对象的属性名必须为数值型或字符串型的数字
------------------------------------------------------------------------------------

2、将Set结构的数据转换为真正的数组（可去重）：
let arr = [12,45,97,9797,564,134,45642]
let set = new Set(arr)
console.log(Array.from(set))  // [ 12, 45, 97, 9797, 564, 134, 45642 ]    

Array.from还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。
let arr = [12,45,97,9797,564,134,45642]
let set = new Set(arr)
console.log(Array.from(set, item => item + 1)) // [ 13, 46, 98, 9798, 565, 135, 45643 ]
--------------------------------------------------------------------------------------

3、将字符串转换为数组：
let  str = 'hello world!';
console.log(Array.from(str)) // ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"]
-------------------------------------------------------------------------------------

4、Array.from参数是一个真正的数组，会返回一个一模一样的新数组
console.log(Array.from([12,45,47,56,213,4654,154]))    // [12, 45, 97, 9797, 564, 134, 45642]

Array.of()

将一组数值转换为数组:
const aaa = Array.of();
console.log(aaa);       // []

const a = Array.of(2,4,6,8);
console.log(a);         // [2,4,6,8]

const b = Array.of(1);
console.log(b);         // [1]   

const c = Array.of(1).length;
console.log(c);         // 1

const ddd = Array.of(undefined);
console.log(ddd);       // [undefined]

find()

var arr=[1,2,3,4,5,6,7,8,9,10]
arr.find( item => {
    // find() 方法为数组中的每个元素都调用一次函数执行：
    // 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
    // 如果没有符合条件的元素返回 undefined
	return item>5
})
//6     返回符合条件的第一个元素

findIndex()

var arr=[1,2,3,4,5,6,7,8,9,10]
arr.find( item => {
	return item>5
})
// 5  返回符合条件的第一个元素的下标位置

fill()

只有一个参数时，固定值填充数组：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.fill("Runoob");
console.log( fruits )    //  [Runoob,Runoob,Runoob,Runoob]

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.fill("Runoob", 2, 4);  // 起始下标为2，到下标为4结束，不包含下标为4 的
console.log( fruits )    //  [Banana,Orange,Runoob,Runoob]

copyWidth()

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.copyWithin(2, 0);   //粘贴位置从下标为2的元素开始，复制的内容从下标为0 开始，第三个参数为0 ，表示复制内容直到最后一项
console.log( fruits )    //  [ Banana,Orange,Banana,Orange ]

var fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi", "Papaya"];
fruits.copyWithin(2, 0, 2);
console.log( fruits )    //  [ Banana,Orange,Banana,Orange,Kiwi,Papaya ]

includes()

let site = ['runoob', 'google', 'taobao'];
site.includes('runoob');     // true 
site.includes('baidu');      // false

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true

**注意**
如果 fromIndex 为负值，计算出的索引将作为开始搜索searchElement的位置。如果计算出的索引小于 0，则整个数组都会被搜索。

// 数组长度是3
// fromIndex 是 -100
// computed index 是 3 + (-100) = -97
var arr = ['a', 'b', 'c'];
arr.includes('a', -100); // true
arr.includes('b', -100); // true
arr.includes('c', -100); // true

flat( )

降维：
var arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]

var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

//使用 Infinity 作为深度，展开任意深度的嵌套数组
arr3.flat(Infinity);
// [1, 2, 3, 4, 5, 6]

去空：
var arr4 = [1, 2, , 4, 5]; arr4.flat(); // [1, 2, 4, 5]

flatMap( )

var arr1 = [1, 2, 3, 4];

arr1.map(x => [x * 2]);
// [[2], [4], [6], [8]]

arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]

// 只会将 flatMap 中的函数返回的数组 “压平” 一层
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]

本文会继续整理，不断更新。另外，文本有任何错误之处欢迎指正。若有不完善的地方，欢迎大佬补充~