JavaScript基础--es6新增的数组方法

最新推荐文章于 2024-05-03 11:08:18 发布

JJ_Smilewang

最新推荐文章于 2024-05-03 11:08:18 发布

阅读量4.2k

点赞数 2

分类专栏： JavaScript基础文章标签： javascript 前端

本文链接：https://blog.csdn.net/JJ_Smilewang/article/details/124724373

版权

JavaScript基础专栏收录该内容

20 篇文章 2 订阅

订阅专栏

今天给大家介绍一些es6新增的常用数组方法。

1. 映射数组 map()方法

目的：为了操作原数组，但不改变原数组的值

作用：map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值，不会对空数组进行检测

返回值: 新数组，一定和原始数组长度一样，不改变原数组

格式：数组.map(function(item,index,arr) { })

① item 数组的每一项（元素）
② index 数组的每一项下标（索引号）
③ arr 当前元素所在的数组

1.1 实例操作

let arr = [1, 2, 3, 4];
let narr = arr.map(function(item, index, arr) {
    console.log(item, index, arr); // 输出内容分别为数组元素，下标，原数组
    return item + 10;  // 对原数组元素进行加10操作，这样原来的数组元素的值都会加10
})
console.log(narr);  // [11, 12, 13, 14]  新数组元素的值比原数组都大10
console.log(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 = arr.filter(function(item, index, arr) {
    return item > 2; // 返回满足条件的数组元素，并存入新数组
})
console.log(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 = arr.some(function(a, b, arr) { // a表示数组元素，b表示数组元素下标
    return a > 4;  // 检测是否有满足大于4的元素，如果有返回true, 没有返回false
})
console.log(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 = arr.every(function(a, b, arr) {  // a表示数组元素，b表示数组元素下标
    return a > 4;  // 检测是否数组中所有元素都满足大于4，如果是返回true, 不是返回false
}) 
console.log(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];
arr.fill('a', 2, 4);  
console.log(arr); // 1，2，a, a, 5   要头不要尾，即从而2开始到4结束，但是4这个元素不被填充替换

let arr1 = [1, 'string', 'null', 'true', null, true];
arr1.fill('b', 3);  // 两个参数，则默认填充替换到最后
console.log(arr1);  // [1, "string", "null", "b", "b", "b"]

arr1.fill('c', 3, 10);  // 结束索引超过数组长度不替换，直接忽略
console.log(arr1);   // [1, "string", "null", "c", "c", "c"]

5. copyWithin() 方法

作用：copyWithin() 方法使用数组里面的内容替换数组里面的内容（简言之是替换内容，但是只能使用自身元素替换）

格式：数组.copyWithin(目标位置，开始索引，结束索引);

① 目标位置：当你替换内容的时候，从哪一个索引位置开始替换
② 开始索引：数组中哪一个索引位置开始当作替换内容，默认值是0
③ 结束索引：数组中哪一个索引位置结束当作替换内容，默认是末尾，包前不包后

5.1 实例操作

let arr = [1, 2, 3, 4, 5];
arr.copyWithin(2, 3, 4); // 表示从索引2开始替换，从索引3开始作为替换内容，直到索引4结束，但是不包括索引4的值，即这里只有4被作为替换内容，替换索引2的值
console.log(arr); // [1, 2, 4, 4, 5]  

let arr1 = [1, 'string', 'null', 'true', null, true];
arr1.copyWithin(2);  // 只有一个参数时，则表示开始替换的位置，那么替换的内容从下标为0开始依次往后，直到最后一个元素被替换为止
console.log(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 = arr.find(function(a, b, c) {
    return a <= 5;  //这句表示返回满足条件a<=5的元素
})
console.log(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 = arr.findIndex(function(a, b, c) {  // a表示数组元素，b表示元素下标，c表示数组
    // return a == 0;   //  表示找出数组元素为0的元素下标，由于找不到，所以返回-1
    return a == 2;      // 表示找出数组元素为2的元素下标
})
console.log(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 = arr.flat(); // 不填数字，默认拍一层
console.log(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 = arr1.flat(1);  // 数字为1，表示拍1层，由于原始是三维数组，所以无法全拍平
console.log(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 = arr2.flatMap(function(a, b, c) {
    return a.map(function(a, b, c) {  // 一边拍平，一边映射，对值进行映射
        return a + 2;  // 映射得到的数组比原数组的值大2
     })
  
});
console.log(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 < arr.length; i++) {
    sum += arr[i];
}
console.log(sum);  // 45

// 没有初始值
let arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let sum1 = arr1.reduce(function(a, b, index, arr1) {
     return a + b;
})
console.log(sum1);  // 45


// 有初始值，相当于在累加之前有个初始值
let sum2 = arr1.reduce(function(a, b) {  // 用不上的形参可以省略不写
    return a + b;
}, 11)
console.log(sum2);  // 56， 相当于初始值+数组元素累加和=11+45=56

通过以上方法的介绍，可以看出新增方法基本上都和函数结合使用，所以对函数的知识点要非常通透，这样再理解这些方法就会轻松许多，方法很多，适合自己的就是最好的，不一定都要记住，只要知道有该方法，明白作用即可。到时需要的时候再去网站上查找具体用法就行。

网址为：MDN Web Docs (mozilla.org)，可以自行查找各种方法的用法。

JJ_Smilewang

关注

2
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础--es6新增的数组方法

今天给大家介绍一些es6新增的常用数组方法。1. 映射数组 map()方法目的：为了操作原数组，但不改变原数组的值作用：map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值，不会对空数组进行检测返回值: 新数组，一定和原始数组长度一样，不改变原数组格式：数组.map(function(item,index,arr) { }) ① item 数组的每一项（元素） ② index 数组的每一项下标（索引号） ...
复制链接

扫一扫