笔记:js数组常用方法

  1. join():将数组内的所有元素连接在一起转换为字符串,有一个可选参数表示每个元素之间的连接符,并返回这个字符串

    var arr = [1, 2, 3, 4]
    arr.join()  //返回”1,2,3,4“
    arr.join('-')  //返回”1-2-3-4“
    
  2. sort():将数组中的每个元素按一定条件排序后并返回排序后的新数组,一个参数(会改变原数组)
    所以在排序时默认按照字母表顺序进行排列,若首字母相同,则按第二个字母的先后顺序排列。

    var arr = ['cherry', 'apple', 'banana']
    arr.sort() // 返回['apple', 'banana', 'cherry']
    
    var arr = [54, 78, 12, 64]
    arr.sort(function (a, b) {
        return a - b
    })
    console.log(arr)        //返回  [12, 54, 64, 78]  升序排列,反之
    
  3. reverse():将数组中的元素颠倒,并返回颠倒后的数组,没有参数(会改变原数组)

    var arr = [54, 78, 12, 64]
    arr.reverse()
    console.log(arr)       //返回  [64, 12, 78, 54]
    
  4. concat():调用每一个参数创建并返回一个数组,有一个或多个参数(不会改变原数组)
    当省略参数时,则表示创建一个新的空数组,将原始数组的数据传入这个空数组中;当传入1个或多个参数时,则表示创建一个新的空数组,将原始数组的数据和每个参数都添加到这个空数组中。

    var arr = [1,2,3,4]
    var new_arr = arr.concat([5,6,7,8,[9,10]])
    console.log(new_arr)     //返回  [1,2,3,4,5,6,7,8,[9,10]]
    
  5. slice():返回指定的一个数组片段,该方法有两个参数,分别代表了数组片段的起始位置和结束位置
    第一个参数不能省略,第二个参数可以省略;取到的片段是从第一个参数表示的位置取到第二个参数表示的位置的前一个元素。
    若省略第二个参数,则表示从第一个参数表示的位置一直取到最后一个元素
    负数表示元素位置时,是从末尾往前数,分别为-1 、-2 、-3……

    var arr = [1,2,3,4,5,6,7]
    arr.slice(1,3)                //返回  [2,3]
    arr.slice(3)                  //返回  [4,5,6,7]
    arr.slice(4,-1)               //返回  [5,6]
    arr.slice(-3)                 //返回  [5,6,7]
    arr.slice(-3,-2)              //返回  [5]
    
  6. splice():在数组指定位置插入或删除元素,并返回删除元素组成的数组,多个参数(会改变原数组)
    第一个参数:删除或插入元素的起始位置
    第二个参数:从起始位置开始往后需要删除的元素个数。若该元素省略,则表示从起始位置开始到最后的所有元素都删除
    第三个参数及之后的所有参数:将该值作为数组的元素依次插入到第一个参数表示的位置上

    var arr = [1,2,3,4,5,6,7]
    arr.splice(4)             //返回 [5,6,7],此时arr为[1,2,3,4]
    arr.splice(1, 2)          //返回 [2,3],此时arr为[1,4]
    arr.splice(1, 0, 'new1', 'new2') //返回[],此时arr为[1,'new1','new2',4]
    
  7. pop():删除数组的最后一个元素,并返回该元素(会改变原数组)

  8. push():在数组的尾部添加一个或多个元素,并返回数组的长度,有1个或多个参数(会改变原数组)
    该函数的函数依次获取每个参数将其插入到数组的末尾

    var arr = []
    arr.push(1)       //返回 1, 此时arr为 [1]
    arr.push(5)       //返回 2, 此时arr为 [1,5]
    arr.push(3,2)     //返回 4, 此时arr为 [1,5,3,2]
    
  9. unshift():在数组的头部添加一个或多个元素,有1个或多个参数,并返回数组的长度(会改变原数组)
    该函数的,函数依次获取每个参数将其插入到数组的最前面

    var arr = []
    arr.unshift(1)       //返回 1, 此时arr为 [1]
    arr.unshift(5)       //返回 2, 此时arr为 [5,1]
    arr.unshift(3,2)     //返回 4, 此时arr为 [2,3,5,1]
    
  10. shift():删除数组的第一个元素,并返回该元素,没有参数(会改变原数组)

    var arr = [6,8,7]
    arr.shift()          //返回 6, 此时arr为 [8,7]
    arr.shift()          //返回 8, 此时arr为 [7]
    arr.shift()          //返回 7, 此时arr为 []
    
  11. toString():将数组的每个元素转换为用逗号分隔连接起来的字符串(不会改变原数组)
    遇到数组里嵌套数组,也会将该嵌套数组里的每个元素转化为字符串并连接起来

    [1,2,3].toString()              //返回 '1,2,3'
    ['cherry','apple','bannana'].toString()    //返回 'cherry,apple,banana'
    [1,2,[6,7]].toString()          //返回 '1,2,6,7'
    [1,[3,6,[8,9]]].toString()      //返回 '1,3,6,8,9'
    
  12. forEach():es5新增,用来为每个元素调用指定的函数(可以改变原数组)
    该方法只有一个参数,该参数为回调函数,该回调函数有三个参数,这三个参数的含义分别为数组元素元素的索引数组本身

    var a = [1,2,3,4,5]
    a.forEach(function (value, index, arr) {
        arr[index] = value + 2
    })
    console.log(a)          // [3,4,5,6,7]
    
  13. map():es5新增,他是将调用的数组的每个元素传递给指定的函数,把每次调用回调函数的返回值存入到一个新的数组中,返回新数组(不会改变原数组)
    该方法只有一个参数,该参数为回调函数,该回调函数只有一个参数,该参数的含义是数组的每个元素

    var arr = [1,2,3,4,5]
    var new_arr = arr.map(function (value) {
        return value * value
    })
    console.log(new_arr)      //  [1, 4, 9, 16, 25]
    
  14. filter():es5新增,相当于一个过滤器,它是通过回调函数里的逻辑判断来过滤掉不需要的元素,剩下的元素返回一个新数组(不会改变原数组)
    该方法只有一个参数,该参数为回调函数,该回调函数有两个参数,他们的含义分别为数组中的元素元素的索引
    当回调函数的返回值为true时,即return true时,该元素将被加入到新的数组中;反之,该元素将被不被加入到新的数组中

    var arr = [6, 12, 7, 1, 9, 3, 0, 19]
    var new_arr = arr.filter(function (value) {
        return value < 6
    })
    console.log(new_arr)        // [1, 3, 0]
    
  15. every():针对一个数组的逻辑判断,有一个参数(不会改变原数组)
    参数为回调函数,该回调函数有一个参数,该参数含义是数组中的每个元素
    每个元素调用回调函数的返回值全部都true时,最后返回true;相反,只要有一个元素调用回调函数,返回的值不为true,最后都会返回false

    var arr = [1,2,3,4,5,6,7,8]
    var result = arr.every(function (value) {
        return value < 10
    })
    console.log(result)          // true, 表示该数组所有元素都小于10
    
  16. some()some()方法跟every()方法类似,只是逻辑判断略有不同,前者是当每个元素调用回调函数后的返回值中,只要有一个为true,则最终返回true;反之,只有当每个元素调用回调函数后的返回值全部都false时,最后才返回false

    var arr = [3, 8, 9, 45, 12]
    var result = arr.some(function (value) {
        return value === 12
    })
    console.log(result)      // true, 表示该数组中有元素12
    
  17. reduce():通过调用指定的回调函数将数组元素进行组合,并返回组合后的值(不会改变原数组)
    第一个参数:为回调函数,用于处理数组元素。该回调函数有两个参数xy,这两个参数都为调用数组的元素成员
    第二个参数:为可选参数,作为传递给回调函数的初始值。若省略该参数,则将数组的第一个数作为初初始值

    当省略了第二个参数时,该方法第一次调用回调函数时,将数组的第一个元素作为回调函数的第一个参数x的值,将数组的第二个元素作为回调函数的第二个参数y的值。然后运行回调函数里的代码,将return后的值作为下一次调用回调函数的第一个参数x的值,然后将数组的第三个元素作为参数y的值……以此类推,直到数组内所有元素都被调用以后,将最后一次调用回调函数的return值作为最终的返回值。

    如果给第二个参数赋值了的话,则在第一次调用回调函数时,是将第二个参数的值作为该回调函数的第一个参数x的值,将数组的第一个参数作为该回调函数的第二个参数y的值

    var arr = [1,2,3,4,5,6]
    var result = arr.reduce(function (x, y) {
        return x * y
    })
    console.log(result)          // 720
    
  18. indexO():获取某元素在数组中的索引,并且只返回第一个匹配到的元素的索引;若该元素不在数组中,则返回 -1(不会改变原数组)
    第一个参数:必填,为需要查询的元素
    第二个参数:为可选参数,表示从数组的哪个位置开始搜索

    var arr = ['小红', '小明', '张三', '李四', '王五']
    var index = arr.indexOf('张三') + 1
    console.log(index)          // 3, 表示张三成绩排名第三
    
  19. lastIndexOf()lastIndexOf()方法与indexOf()类似,唯一的区别就是,前者是否数组的末尾开始搜索,后者是从数组的开头开始搜索。

  20. find():是ES6新增的,它是遍历数组,找出并返回第一个符合回调函数的元素(可以通过回调函数的某些参数对原数组进行改动)
    该方法只有一个参数,该参数为回调函数,该回调函数有三个参数,它们的含义分别为:数组元素元素的索引数组本身
    该方法是遍历数组的每一个元素,并依次调用回调函数,回调函数最先返回true的元素作为最终的返回值

    var arr = [1, 7, 3, 10, 12, 20]
    
    var result = arr.find(function (value) {
        return value > 10
    })
    
    console.log(result)   // 12, 表示数组中找到的第一个比10大的元素为12
    
  21. findIndexOf():是ES6新增的,它是遍历数组,找出第一个符合回调函数的元素的索引(不会改变原数组)
    该方法只有一个参数,那就是数组的元素

    var result = [3, 4, 10, 8, 9, 0].findIndex(function (value) {
        return value > 9
    })
    
    console.log(result)   // 2,表示该数组中第一个大于9的元素索引为2
    
  22. fill():是ES6新增方法,它是用于填充数组的(会改变原数组)
    第一个参数:表示用于填充数组的值
    第二个参数:可选参数,表示填充的起始位置
    第三个参数:可选参数,表示填充的结束位置,若省略该参数并且填写了第二个参数,则表示从起始位置开始一直到末尾的所有元素都被填充

    [1,2,3,4,5].fill(6)         //返回 [6, 6, 6, 6, 6]
    
    [1,2,3,4,5].fill(6, 2)      //返回 [1, 2, 6, 6, 6]
    
    [1,2,3,4,5].fill(6, 2, 3)   //返回 [1, 2, 6, 4, 5]
    
  23. includes():是ES6新增的非常实用的一个方法,它是判断一个数是否在该数组中的(不会改变原数组)
    第一个参数:该参数为需要判断是否存在于数组中的数
    第二个参数:表示搜索的起始位置,默认为0,即从头开始搜索。若为负数,则表示从倒数第几个开始搜索,若输入的位置超出了数组长度,则默认还是为0

    var arr = ['chery', 'banana', 'apple', 'watermelon']
    
    var result = arr.includes('banana', -2) //表示从倒数第二个开始找
    
    console.log(result) //false, 表示从倒数第二个开始找,没有找到banana
    

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值