微信扫一扫打赏支持

ES6参考---es5中数组方法

ES6参考---es5中数组方法

一、总结

一句话总结：

a、值位置：indexOf(value) 或 lastIndexOf(value)：得到值在数组中的第一个（最后一个）下标
b、遍历回调型：forEach（遍历数组）、map（遍历返回加工之后的数组）、filter（遍历返回符合要求的数组）
1. Array.prototype.indexOf(value) : 得到值在数组中的第一个下标
2. Array.prototype.lastIndexOf(value) : 得到值在数组中的最后一个下标
3. Array.prototype.forEach(function(item, index){}) : 遍历数组
4. Array.prototype.map(function(item, index){}) : 遍历数组返回一个新的数组，返回加工之后的值
5. Array.prototype.filter(function(item, index){}) : 遍历过滤出一个新的子数组， 返回条件为true的值

 

 

1、数组方法indexOf和lastIndexOf的作用是什么？

得到值在数组中的第一个（最后一个）下标
var arr = [1, 4, 6, 2, 5, 6];
console.log(arr.indexOf(6));//2
//Array.prototype.lastIndexOf(value) : 得到值在数组中的最后一个下标
console.log(arr.lastIndexOf(6));//5

 

 

2、数组方法forEach、map和filter的作用是什么？

forEach（遍历数组）、map（遍历返回加工之后的数组）、filter（遍历返回符合要求的数组）
<script type="text/javascript">
  /*
   需求:
   1. 输出第一个6的下标
   2. 输出最后一个6的下标
   3. 输出所有元素的值和下标
   4. 根据arr产生一个新数组,要求每个元素都比原来大10
   5. 根据arr产生一个新数组, 返回的每个元素要大于4
   */

    var arr = [1, 4, 6, 2, 5, 6];
    console.log(arr.indexOf(6));//2
    //Array.prototype.lastIndexOf(value) : 得到值在数组中的最后一个下标
    console.log(arr.lastIndexOf(6));//5

    //Array.prototype.forEach(function(item, index){}) : 遍历数组
    arr.forEach(function (item, index) {
        console.log(item, index);
    });

    //Array.prototype.map(function(item, index){}) : 遍历数组返回一个新的数组，返回加工之后的值
    var arr1 = arr.map(function (item, index) {
        return item + 10
    });
    console.log(arr, arr1);

    //Array.prototype.filter(function(item, index){}) : 遍历过滤出一个新的子数组， 返回条件为true的值
    var arr2 = arr.filter(function (item, index) {
        return item > 4
    });
    console.log(arr, arr2);


</script>

 

 

3、数组的方法都是数组原型对象的方法？

肯定不能是数组直接的方法，数组直接的内容是数组里面存的内容
1. Array.prototype.indexOf(value) : 得到值在数组中的第一个下标
2. Array.prototype.lastIndexOf(value) : 得到值在数组中的最后一个下标
3. Array.prototype.forEach(function(item, index){}) : 遍历数组
4. Array.prototype.map(function(item, index){}) : 遍历数组返回一个新的数组，返回加工之后的值
5. Array.prototype.filter(function(item, index){}) : 遍历过滤出一个新的子数组， 返回条件为true的值

 

 

 

 

二、es5中数组方法

博客对应课程的视频位置：

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>04_Array扩展</title>
 6 </head>
 7 <body>
 8 <!--
 9 1. Array.prototype.indexOf(value) : 得到值在数组中的第一个下标
10 2. Array.prototype.lastIndexOf(value) : 得到值在数组中的最后一个下标
11 3. Array.prototype.forEach(function(item, index){}) : 遍历数组
12 4. Array.prototype.map(function(item, index){}) : 遍历数组返回一个新的数组，返回加工之后的值
13 5. Array.prototype.filter(function(item, index){}) : 遍历过滤出一个新的子数组， 返回条件为true的值
14 -->
15 <script type="text/javascript">
16   /*
17    需求:
18    1. 输出第一个6的下标
19    2. 输出最后一个6的下标
20    3. 输出所有元素的值和下标
21    4. 根据arr产生一个新数组,要求每个元素都比原来大10
22    5. 根据arr产生一个新数组, 返回的每个元素要大于4
23    */
24 
25     var arr = [1, 4, 6, 2, 5, 6];
26     console.log(arr.indexOf(6));//2
27     //Array.prototype.lastIndexOf(value) : 得到值在数组中的最后一个下标
28     console.log(arr.lastIndexOf(6));//5
29 
30     //Array.prototype.forEach(function(item, index){}) : 遍历数组
31     arr.forEach(function (item, index) {
32         console.log(item, index);
33     });
34 
35     //Array.prototype.map(function(item, index){}) : 遍历数组返回一个新的数组，返回加工之后的值
36     var arr1 = arr.map(function (item, index) {
37         return item + 10
38     });
39     console.log(arr, arr1);
40 
41     //Array.prototype.filter(function(item, index){}) : 遍历过滤出一个新的子数组， 返回条件为true的值
42     var arr2 = arr.filter(function (item, index) {
43         return item > 4
44     });
45     console.log(arr, arr2);
46 
47 
48 </script>
49 </body>
50 </html>

 

 

 

 
posted @ 2020-03-23 19:38  范仁义  阅读(176)  评论(0)  编辑  收藏  举报