zoukankan      html  css  js  c++  java
  • 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>
     
  • 相关阅读:
    Eclipse 插件Maven在使用 add dependency,找不到包,解决办法
    SimpleDateFormat是线程不安全的,切忌切忌!
    JNative 传递参数bug
    oracle存储过程递归调用
    oracle调用DLL
    telnet和Netstat使用
    notepad++搭配dev配置运行C++
    ubuntu第一次安装登陆密码不正确问题
    区分形参和实参
    爬虫2
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/12554339.html
Copyright © 2011-2022 走看看