今天给大家介绍一些es6新增的常用数组方法。
1. 映射数组 map()方法
目的:为了操作原数组,但不改变原数组的值
作用:map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值,不会对空数组进行检测
返回值: 新数组,一定和原始数组长度一样,不改变原数组
格式:数组.map(function(item,index,arr) { })
① item 数组的每一项(元素)
② index 数组的每一项下标(索引号)
③ arr 当前元素所在的数组
1.1 实例操作
let arr = [1, 2, 3, 4]; let narr = (function(item, index, arr) { (item, index, arr); // 输出内容分别为数组元素,下标,原数组 return item + 10; // 对原数组元素进行加10操作,这样原来的数组元素的值都会加10 }) (narr); // [11, 12, 13, 14] 新数组元素的值比原数组都大10 (arr); // [1, 2, 3, 4] 不改变原数组
注意:
① map()方法里面是是函数,这个函数有3个形参item,index,arr,分别代表数组的每一个元素、对应元素的下标、当前操作的数组。实际运用中可以根据需要使用形参,不需要的可以不写,arr这个参数很少使用,所以基本不写。
② 要使用return 返回操作的结果
2. 过滤数组 filter() 方法
作用:filter() 方法是过滤原数组中的数据,把满足条件的放在新数组中
返回值:新数组,里面是所有原始数组中满足条件的项, 不改变原数组
格式:数组.filter(function(item,index,arr) { })
① item 数组的每一项(元素)
② index 数组的每一项下标(索引号)
③ arr 当前元素所在的数组
2.1 实例操作
let arr = [1, 2, 3, 4, 5]; let filter1 = (function(item, index, arr) { return item > 2; // 返回满足条件的数组元素,并存入新数组 }) (filter1); // [3, 4, 5]
过滤数组filter() 方法和映射map() 方法用法相似,唯一不同的是该方法返回的是满足条件的原数组的元素,并存入新数组,如果没有满足条件的元素,则返回一个空数组。
3. some() 方法 和 every() 方法
3.1 some() 方法
作用:some() 方法 用于检测数组中的元素是否有某些满足指定条件(通过函数提供)
返回值:是一个布尔值
① 有满足条件的,返回true
② 没有满足条件,返回false
格式:数组.every(function(item,index,arr) { })
① item 数组的每一项(元素)
② index 数组的每一项下标(索引号)
③ arr 当前元素所在的数组
3.2 some()方法实例操作
let arr = [1, 2, 3, 4, 5]; let some1 = (function(a, b, arr) { // a表示数组元素,b表示数组元素下标 return a > 4; // 检测是否有满足大于4的元素,如果有返回true, 没有返回false }) (some1); // true 因为存在元素5满足条件,所以为true
some()方法的用法和前面两种方法类似,区别在于返回值,这里的返回值是boolean值,存在满足条件的为true,不存在则为false。
3.3 every() 方法
作用:every() 方法 用于检测数组所有元素是否都符号指定条件(通过函数提供)
返回值:是一个布尔值
① 有满足条件的,返回true
② 没有满足条件,返回false
格式:数组.every(function(item,index,arr) { })
① item 数组的每一项(元素)
② index 数组的每一项下标(索引号)
③ arr 当前元素所在的数组
3.4 every() 方法实例操作
let arr = [1, 2, 3, 4, 5]; let every1 = (function(a, b, arr) { // a表示数组元素,b表示数组元素下标 return a > 4; // 检测是否数组中所有元素都满足大于4,如果是返回true, 不是返回false }) (every1); // false 因为不是所有元素都满足条件,所以为false
3.5 some()方法 和 every() 方法的区别:
some() 方法用于判断数组中某一个元素,只要存在有元素满足条件即为true;
every() 方法用于判断数组中所有元素,必须所有元素满足条件才为true.
4. fill() 方法
作用:fill() 方法使用指定数据填充数组,并且替换对应的元素(简言之是替换内容)
前提:数组要有length
返回值:填充好的数组(新数组),改变原数组
格式:数组.fill(要填充的数据,开始索引,结束索引);
① 要填充的数据:用什么数据填充数组里面的每一位
② 开始索引:从哪一个下标开始,默认值是0
③ 结束索引:填充到哪一个下标位置结束,默认是到 末尾,包前不包后
4.1 实例操作
let arr = [1, 2, 3, 4, 5]; ('a', 2, 4); (arr); // 1,2,a, a, 5 要头不要尾,即从而2开始到4结束,但是4这个元素不被填充替换 let arr1 = [1, 'string', 'null', 'true', null, true]; ('b', 3); // 两个参数,则默认填充替换到最后 (arr1); // [1, "string", "null", "b", "b", "b"] ('c', 3, 10); // 结束索引超过数组长度不替换,直接忽略 (arr1); // [1, "string", "null", "c", "c", "c"]
5. copyWithin() 方法
作用:copyWithin() 方法 使用数组里面的内容替换数组里面的内容(简言之是替换内容,但是只能使用自身元素替换)
格式:数组.copyWithin(目标位置,开始索引,结束索引);
① 目标位置:当你替换内容的时候,从哪一个索引位置开始替换
② 开始索引:数组中哪一个索引位置开始当作替换内容,默认值是0
③ 结束索引:数组中哪一个索引位置结束当作替换内容,默认是末尾,包前不包后
5.1 实例操作
let arr = [1, 2, 3, 4, 5]; (2, 3, 4); // 表示从索引2开始替换,从索引3开始作为替换内容,直到索引4结束,但是不包括索引4的值,即这里只有4被作为替换内容,替换索引2的值 (arr); // [1, 2, 4, 4, 5] let arr1 = [1, 'string', 'null', 'true', null, true]; (2); // 只有一个参数时,则表示开始替换的位置,那么替换的内容从下标为0开始依次往后,直到最后一个元素被替换为止 (arr1); // [1, "string", 1, "string", "null", "true"]
注意:替换值有几个,那么被替换的值就有几个,比如上述第一个数组arr中,替换内容只有4,那么就只能替换索引2这一个元素为4;而第二个数组arr1中,默认替换内容为从索引0开始到末尾,而替换位置从索引2开始,那么替换内容的个数大于被替换的值的个数,因此,可以把从索引2开始,后面的值全部替换一遍。
6. find() 方法 和 findIndex() 方法
6.1 find()方法
作用:find() 方法通过测试(函数内判断)查找到数组中第一个满足条件的元素的值
返回值:返回查找到的那个数据,如果找不到则返回undefined
格式:数组.find(function(item,index,arr) { });
① item 数组的每一项(元素)
② index 数组的每一项下标(索引号)
③ arr 当前元素所在的数组
6.2 find()方法实例操作
let arr = [1, 2, 3, 4, 5]; let find = (function(a, b, c) { return a <= 5; //这句表示返回满足条件a<=5的元素 }) (find); // 1 但是find()方法只返回满足条件的第一个元素
注意:如果有多个满足条件的元素,只返回满足条件的第一个元素。
6.3 findIndex() 方法
作用:findIndex() 方法通过测试(函数内判断)查找到数组中第一个满足条件元素的下标
返回值:查找到的那个数据的下标,如果找不到返回-1
格式:数组.findIndex(function(item,index,arr) { })
① item 数组的每一项(元素)
② index 数组的每一项下标(索引号)
③ arr 当前元素所在的数组
6.4 findIndex() 方法实例操作
let arr = [1, 2, 3, 4, 5]; let findIndex = (function(a, b, c) { // a表示数组元素,b表示元素下标,c表示数组 // return a == 0; // 表示找出数组元素为0的元素下标,由于找不到,所以返回-1 return a == 2; // 表示找出数组元素为2的元素下标 }) (findIndex); // 返回下标1
注意:findInde()方法的作用和indexOf()方法类似,都是可以获取到指定条件的第一个元素的下标,如果找不到,则返回-1。但是二者的用法不一样,要注意区分。
7. flat() 方法 和 flatMap() 方法
这两个方法都是用于拍平数组的,所谓拍平数组是原数组里面的元素又是一个数组,即数组嵌套数组,这时使用该方法可以让数组变成一维的,即数组元素不再是数组形式。
7.1 flat() 方法
作用: flat() 方法是拍平数组(就是整理原数组的元素, 然后放在一个新的数组中)
返回值: 拍平以后的数组
语法: 数组.flat(数字)
数字: 表示扁平化多少层, 默认是1, 可以填其他正整数,也可以填Infinity(无穷大)
7.2 flat() 方法实例操作
// arr这个数组里面的元素又是数组,称为二维数组 let arr = [ [1, 2, 3], ['a', 'b'], [4, 5, 6] ] // 使用flat()方法可以让arr数组元素不再是数组 let flat1 = (); // 不填数字,默认拍一层 (flat1); //[1, 2, 3, "a", "b", 4, 5, Array(2), Array(2)] let arr1 = [ [1, 2, 3], ['a', 'b'], [4, 5, [6, 7], [8, 9] //数组元素中又嵌套数组,即arr1变为了三维数组 ] ] let flat2 = (1); // 数字为1,表示拍1层,由于原始是三维数组,所以无法全拍平 (flat2); // [1, 2, 3, "a", "b", 4, 5, 6]
注意:使用flat()方法要起效果的前提条件是:数组是个多维数组,不然无需拍平。如果是n维数组,要想全拍平,则数字需要填 n-1 ,如果嫌弃计算麻烦,直接填Infinity即可
7.3 flatMap() 方法
作用: flatMap() 方法 ,拍平数组,但只能拍一层,并且一边拍平,一边映射;也可以一边拍平,一边过滤
返回值: 一个新数组
语法: 数组.flatMsp(function(item,index,arr) { })
7.4 flatMap() 方法实例操作
let arr2 = [ [1, 2, 3], ['a', 'b', [22, 33, 'tre']], [4, 5, 6] ] let narr = (function(a, b, c) { return (function(a, b, c) { // 一边拍平,一边映射,对值进行映射 return a + 2; // 映射得到的数组比原数组的值大2 }) }); (narr); // [3, 4, 5, "a2", "b2", "22,33,tre2", 6, 7, 8]
注意: flatMap() 方法不仅可以实现拍平(只拍平一层),而且可以同时进行映射数组。
8. reduce() 方法
作用:reduce() 方法 接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
格式:数组.reduce(function(prev,currentValue,currentIndex,arr) { },初始值)
① prev:表示数组的第一个元素
② currentValue:表示数组的第二个元素
③ currentIndex:表示数组的第二个元素下标
④ arr:表示整个数组
8.1 实例操作
// 使用for循环对数组元素的值进行累加求和 let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; let sum = 0; for (var i = 0; i < ; i++) { sum += arr[i]; } (sum); // 45 // 没有初始值 let arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9]; let sum1 = (function(a, b, index, arr1) { return a + b; }) (sum1); // 45 // 有初始值,相当于在累加之前有个初始值 let sum2 = (function(a, b) { // 用不上的形参可以省略不写 return a + b; }, 11) (sum2); // 56, 相当于初始值+数组元素累加和=11+45=56
通过以上方法的介绍,可以看出新增方法基本上都和函数结合使用,所以对函数的知识点要非常通透,这样再理解这些方法就会轻松许多,方法很多,适合自己的就是最好的,不一定都要记住,只要知道有该方法,明白作用即可。到时需要的时候再去网站上查找具体用法就行。
网址为:MDN Web Docs (),可以自行查找各种方法的用法。