本文整理了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);         // 1const 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() 返回符合条件的元素，之后的值不会再调用执行函数。// 如果没有符合条件的元素返回 undefinedreturn 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]]

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

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

  1. concat合并的数组会有顺序么_超全的JS常用数组方法整理

    前言 常用数组方法汇总 方法解析 1:concat(); 2:join(); 3:pop(); 4:shift(); 5:unshift(); 7:reverse(); 8:sort(); 9:sli ...

  2. js中数组常用的方法总结，包括ES6

    原文地址:js中数组常用的方法总结,包括ES6 1.push() 后增 push()方法可以向数组后添加一个新的元素,并返回新数组的长度. 末尾添加,返回长度,改变原数组 var a = [1,2,3 ...

  3. js如何操作表格（常用属性方法汇总）

    js如何操作表格(常用属性方法汇总) 一.总结 一句话总结: 二.表格相关的属性和方法 1.1 Table 对象集合 cells[] 返回包含表格中所有单元格的一个数组. 语法:tableObject ...

  4. python redis模块常用_python-Redis模块常用的方法汇总

    Redes模块常用的方法汇总 一.创建建Redis对象 1.直接使用 import redis r = redis.Redis(host='127.0.0.1', port=6379) 2.连接池使用 ...

  5. JavaScript 常用数组方法及使用技巧「数组的力量隐藏在数组方法中，必收藏」

    JavaScript 数组的力量隐藏在数组方法中. 没错!如果你只知道用数组,但是不知道数组的这些方法怎么用,那么你就不是真正的懂他. 正餐开始,来看看 JavaScript 中有哪些常用的数组方法! ...

  6. JavaScript常用数组方法

    JavaScript数组方法有以下这些: forEach() 方法对数组的每一个元素执行一次提供的函数. map() 方法创建一个新数组,其结果是该数组都执行一次函数,原函数保持不变. filter( ...

  7. excel打印预览在哪里_Excel常用打印方法汇总

    最近小编因为作业中要打印一部分Excel而被弄得头大,各种打印问题都被我碰到了,为了解决这些问题,小编也是学习了很久才弄明白.今天我就将Excel打印中常用的方法分享给大家. 如果就连打印工作表,这种 ...

  8. js es5,es6,es7 新特性

    es5 不允许使用未声明的变量 不允许删除变量或对象.函数 不允许变量重名 不允许使用八进制 不允许使用转义字符 不允许对只读属性赋值 不允许对一个使用getter方法读取的属性进行赋值 不允许删除一 ...

  9. 光滑噪声数据常用的方法_九大常用数据分析方法汇总

    来源:数据宝典 转载:中国统计网 一.描述性统计 定义:描述性统计是一类统计方法的汇总,揭示了调查总体的数据分布特性.描述性统计分析要对调查总体所有变量的有关数据进行统计性描述,主要包括数据的频数分析 ...

  10. Javascript基础知识之四（常用数组方法）

    一.MDN链接 Array - JavaScript | MDNJavaScript的 Array 对象是用于构造数组的全局对象,数组是类似于列表的高阶对象.https://developer.moz ...

最新文章

  1. 算法训练 素因子去重
  2. Linux下安装oracle提示INS-20802 Oracle Net Configuration Assistant
  3. 时间类（时间戳的各种转换成）
  4. SQL语句AND 和 OR执行的优先级
  5. html 图片展示 3d,CSS3 3D图像显示
  6. Java RMI，Socket，HttpClient
  7. Educational Codeforces Round 73 (Rated for Div. 2) F. Choose a Square 线段树 + 二维转一维
  8. 不同表结构数据迁移_C语言：数据结构-广义表的存储结构
  9. Linux登录时执行
  10. delphi 调试控件代码_机器人调试（六十七）
  11. 5类6类7类网线对比_五类网线、六类网线和七类网线有什么区别？如何挑选网线？...
  12. MC9S12XS128 事件处理
  13. Python 内建函数大全
  14. c/c++游戏编程之Easyx图形库基础
  15. flutter 渐变色
  16. 106、七氟丙烷灭火系统的灭火机理
  17. Unity 渲染管线工作流程
  18. 购买Apple移动硬盘
  19. 类似京东商城客户端应用iOS源码
  20. docker部署环境

热门文章

  1. 创建一个Employee类
  2. Android Jetpack Startup库分析
  3. 阿里云服务器 安全组 防火墙 开放端口流程
  4. ELK基于ElastAlert实现日志的微信报警
  5. @PropertySource配置的用法
  6. 以十年维度思考技术的发展
  7. 计算机论文读书报告怎么写,论文读书报告范文(共6篇).doc
  8. GNSS模拟器助力控制器硬件在环仿真测试
  9. PHP资源汇总，内容包括：库、框架、模板等
  10. 亚马逊卖家培训返校季爆单技巧