javaScript数组常用方法

122 阅读6分钟

数组的常用方法1(会修改原数组)

    1.push()
        => 语法: 数组.push(数据)
        => 作用: 向数组末尾添加数据
        => 返回值: 添加数组后,数组的最新**长度**
        => 例子:
            [0,1,2].push("滚到后面去")  //4
            
    2.pop()
        =>语法: 数组.pop()
        =>作用: 删除数组末尾的数据
        =>返回值: 被删除的数据
        => 例子:
            [0,1,"最后一位"].pop()  // '最后一位'
            
    3.unshift()
        =>语法: 数组.unshift(数据)
        =>作用: 把一个数据插入到数组的最前面
        =>返回值: 添加数组后,数组的最新**长度**
        => 例子:
            [0,1,2].push("滚到前面去")  //4
        
    4.shift()
        =>语法: 数组.shift()
        =>作用: 删除数组最前面的数据
        =>返回值: 被删除的数据
        => 例子:
            ["第一位",1,2].shift()  //'第一位'
        
    5.reverse()
        =>语法: 数组.reverse()
        =>作用: 反转数组
        =>返回值: 反转后的数组
        => 例子:
            ["我","爱","你"].reverse()  //['你', '爱', '我']
        
    6.sort()
        =>语法: 
            -> 数组.sort()
                + 把 每一个数据一位一位的看待,进行排序的
            -> 数组.sort(function(a,b){return a-b})
                + 把所有数据进行升序排列
            -> 数组.sort(function(a,b){return b-a})
                + 把所有数据进行降序排列
        =>作用: 对数组进行排序
        =>返回值: 排序后的数组
        =>例子:
            [0,3,2].sort((a,b)=>{return a-b})  //[0, 2, 3]
          可以对字符串进行排序:
            ["b","c","a"].sort() //['a', 'b', 'c']
            
        
    7.splice()
        =>语法: 
            ->数组.splice(开始索引,多少个)
            ->数组.splice(开始索引,多少个,要插入的数据)
                + 可插入多个数据
                + 从哪一个索引开始删除,就从哪一个索引开始插入
        =>作用: 截取数组并选择性是否插入内容
        =>返回值:必然是一个新数组
            -> 截取多少内容,新数组就有多少内容
            -> 如果没有截取内容,就是空数组
        => 例子:
            [0,3,2].splice(0,2)  //[03]
            

数组常用方法2(不会改变原始数组)

    1.concat()
      + 语法:数组.concat(数据,数组,...)
      + 作用:进行数组的的拼接
      + 返回值:拼接好的数组
      + 注意:不会改变原始数组
      + 例子: 
          [1,2,3].concat(",","木",["头","人"]) //[1, 2, 3, ',', '木', '头', '人']
          
    2.join()
      + 语法:数组.join('连接符')
        => 不写连接符时,默认写逗号(,)
      + 作用:使用链接符把数组内的每一项连接成一个字符串
      + 返回值:链接好的字符串
      + 注意:不会改变原始数组
      + 例子:
          [1, 2, 3, ',''木''头''人'].join("") //'123,木头人'
          
    3.slice()
      + 语法:数组.slice(开始索引,结束索引)
        => 开始索引默认为 0
        => 结束索引默认为 length
      + 特点:
        =>包前不包后(包含开始索引,不包含结束索引)
        =>可以填写负整数,当你填写负整数的时候,等价于 负整数 + length
      + 作用:截取数组,从数组内赋值一些内容出来
      + 返回值:必然是新数组,截取多少,新数组内就有多少数据
                如果没有截取数据,则是空数组
      + 注意:不会改变原始数组
      + 例子:
          ["how","are","you"].slice(1) //['are', 'you']
          ["how","are","you"].slice(0,2) //['how', 'are', 'you']
          
    4.indexOf()
      + 语法:数组.indexOf(数据,开始索引)
        => 开始索引选项,默认值为0
      + 作用:从开始索引向后检索该数组中是否有该数据
      + 返回值:
        =>若检索到了该数据,则返回该数据第一次出现的索引位置
        =>若检索不到该数据,那么就是 -1
      + 注意:不会改变原始数组
      + 例子:
          ["I","love","you"].indexOf("love") // 1
          ["I","love","you"].indexOf("love",2) // -1
          
    5.lastIndexOf()
      + 语法:数组.lastIndexOf(数据,开始索引)
        =>开始索引选项,默认值为0 
      + 作用:从开始索引向前索引检索该数据
      + 返回值:
        =>若检索到了该数据,则返回该数据第一次出现的索引位置
        =>若检索不到该数据,那么就是 -1
      + 注意:
        =>不会改变原始数组
        =>不会改变索引位置
      + 例子:
          ["帅","哥","你","好","哇","!!"].lastIndexOf("帅") // 0
          ["帅","哥","你","好","哇","!!"].lastIndexOf("哥",0) // -1

数组常用方法3(不会改变原始数组,都以返回值的形式给出结果,相对第二种方法,复杂了一些)

    1.forEach()
        + 语法:数组.forEach(function(item,index,arr){})
            => 函数可以接收三个参数
            => 第一个参数:表示数组内的每一项
            => 第二个参数:表示数组内的每一项的数组
            => 第三个参数:表示原始数组
        + 作用:遍历数组
        + 返回值:没有 undefined
        + 原理:
        + 会根据数组内的成员数量分别调用 a 函数
        + 第一次调用 a(100,0,[100, 200, 333, 444])
        + 第二次调用 a(200,1,[100, 200, 333, 444])
        + 第三次调用 a(333,2,[100, 200, 333, 444])
        + 第四次调用 a(444,3,[100, 200, 333, 444])
        + 例子:
            ["s","u","a","i"].forEach((item,index) => console.log(item))
            控制台输出:
            s
            u
            a
            i
            undefined
        
    2.map()
        + 语法:数组.map(function(item,index,arr){})
        + 作用:映射数组
        + 返回值:
            => 是一个新数组,并且和原始数组长度一致
            => 新数组内每一个数据都是根据原始数组中每一个数据映射出来的
            => 映射条件以 return 的形式书写
            => 例子:
                ["酒精","过敏","的","帅","哥"].map((item) =>{return "♥" + item})
                //['♥酒精', '♥过敏', '♥的', '♥帅', '♥哥']
                
    3.filter()
        + 语法:数组.filter(function(item,index,arr){})
        + 作用:过滤数据
        + 返回值:
            => 是一个新数组
            => 数组内是原始数组中所有满足条件的项
            => 条件以 return 的形式书写
            => 例子:
               ["你","很","丑","丑","帅","丑"].filter(item=>{return item !== "丑"})
               //['你', '很', '帅']
               
    4.every()
        + 语法:数组.every(function(item,index,arr){})
        + 作用:判断数组中是不是每一个都满足条件
        + 返回值:一个布尔值
            => 如果数组中每一个都满足条件,返回true
            => 如果数组中任何一个不满足条件,返回false
        + 判断条件以 return 的形式书写
        + 例子:
            ["强","强","强"].every(item=>{return item!=="弱"}) //true

    5.some()
        + 语法:数组.some(function(item,index,arr){})
        + 作用:判断判断数组中是不是满足某一个条件
        + 返回值:一个布尔值
          => 如果数组中有任意一个满足条件,则返回 true
          => 如果数组中都不满足条件,返回false
          => 例子:
              ["拜托","你","很","强","唉"].some(item=>{return item=="强"}) //true
              ["拜托","你","很","强","唉"].some(item=>{return item=="弱"}) //false
              
    6.find()
        + 语法:数组.find(function(item,index,arr){})
        + 作用:查找数据中某一数据
        + 返回值:
          => 数组中你查找的该数据
        + 查找条件以 return 的形式书写
        + 用在复杂数据类型的查找
        + 例子:
            [{ id: 1, name: "阿鱼",myHeart:false},
            { id: 2, name: "阿橙",myHeart:false},
            { id: 3, name: "我",myHeart:true}].find(item => item.myHeart===true)
            //{id: 3, name: '我', myHeart: true}
            
    7.reduce()
        + 语法:数组.reduce(function(prev,item,index,arr){},初始值)
          => 函数,函数根据数组中的成员进行重复调用
            -> 第一个参数:初始值 或 每一个叠加后的结果
            -> 第二个参数:每一项
            -> 第三个参数:索引
            -> 第四个参数:原始数组
          =>初始值:默认值为0,表示从什么时候开始叠加
        + 作用:进行叠加累计
        + 例子:
           ["酒精","过敏","的","suai哥!!!"].reduce(function a(prev, item, index, arr) {return prev + item}, "一个")
           //'一个酒精过敏的suai哥!!!'
           ["酒精","过敏","的","suai哥!!!"].reduce(function a(prev, item, index, arr) {return prev + item})
           //'酒精过敏的suai哥!!!'