数组的api归纳总结

1.小工具

  • Array.length
    除了直接拿来用,还可以判断数组是否为空,也可以直接截短数组(不常用)。

 [1, 2, 3, 4, 5].length = 2   // [1, 2]复制代码

  • Array.isArray
    使用此方法适合用于判断数组类型,返回的是布尔值。
  • Array.from
    类数组对象转数组, 像DOM的一些集合,arguments,还有Set/Map/String等具有遍历器接口的数据结构都可以转换。

let a = {
        '0': 'a',
        '1': 'b',
        '2': 'c',
        length: 3
    }
    let b = Array.from(a)   // ['a', 'b', 'c']复制代码

  • Array.of
    用于将一组值转换为数组。Array.of() 基本上可以用来替代 Array() 或 new Array() ,并且不存在由于参数不同而导致的重载,它的行为非常统一。Array.of() 总是返回参数值组成的数组。如果没有参数,就返回一个空数组。

    Array.of(3, 11, 8)      // [3,11,8]
    Array.of(3)         // [3]
    Array.of()          // []复制代码

  • fill
    填充一个数组,用于空数组的初始化非常方便。数组中已有的元素,会被全部抹去。该方法还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置。(含头不含尾)

['a', 'b', 'c'].fill(7, 1, 2)  //['a', 7, 'c']复制代码

2.增删改查

  • pop
    删除并返回数组的最后一个元素。如果数组为空,则返回undefined。
  • push
    向数组的末尾添加一个或多个元素,并返回新的长度。
  • shift
    把数组的第一个元素从其中删除,并返回第一个元素的值。
  • unshift
    向数组的开头添加一个或更多元素,并返回新的长度。
  • find
    用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。

[1, 5, 10, 15].find(function(value, index, arr) {
      return value > 9;
    })      // 10复制代码

  • findIndex
    数组实例的findIndex方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。

 [1, 5, 10, 15].findIndex(function(value, index, arr) { return value > 9; }) // 2复制代码

  • indexOf /lastIndexOf
    返回某个指定的字符串值在字符串中首次/最后一次出现的位置, 对大小写敏感。 如果要检索的字符串值没有出现,则该方法返回 -1

"Hello world!".indexOf("Hello")  // 0复制代码

  • includes
    返回一个布尔值,表示某个数组是否包含给定的值

[1, 2, 3].includes(2)     // true复制代码

  • slice(start, end)
    返回一个新的数组,包含从 start 到 end (不包括)
    start: 必需。
    end:可选。负数表示从末位开始算
  • splice(index, num, item1,..., itemx)
    用于添加或删除数组中的元素。会改变原始数组。
    index:必需。规定从何处添加/删除元素。
    num: 要删除的数量,
    item1, ..., itemx是可选参数,表示要添加到数组的新元素
  • concat
    用于连接两个或多个数组
  • join
    返回一个通过指定的分隔符进行分隔的一个字符串
  • copyWithin(target, start, end)
    在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。(ps: 此方法目前我还没用到过)
    target(必需):从该位置开始替换数据。如果为负值,表示倒数。
    start(可选):从该位置开始读取数据,默认为 0。如果为负值,表示从末尾开始计算。 end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示从末尾开始计算。 

[1, 2, 3, 4, 5].copyWithin(0, 3)     // [4, 5, 3, 4, 5]复制代码

3.迭代相关方法

  • forEach
    让数组的每一项都执行给定的函数。因为返回值是undefined,所以不能链式调用。使用breakreturn语句不能使其中止或者跳出forEach循环,除非抛出异常。(ps: 本人用的很少 ,一般会选择其他迭代api或者普通的for循环就很好)
  • for...in
    可以用于对数组或者对象的属性进行循环操作。
    注意:for..in遍历对象的时候,会把其原型(prototype)中方法与属性给遍历出来,可以在循环里使用对象的hasOwnProperty()方法去判断,来避免这个问题。或者直接选用ObjectAPIkeys/enenties/values 去遍历对象
  • for...of
    for...of 允许你遍历 DOM集合,Array(数组), String(字符串), Map(映射), Set(集合)等可迭代的数据结构等。
  • keys/enenties/values
    ES6 提供的三个新方法——entries()、keys()和values()——用于遍历数组。它们都返回一个遍历器对象,可以用for...of循环进行遍历,唯一的区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。
  • every
    对数组中每一项运行给定函数,如果该函数的每一项都符合条件,则返回true
  • some
    对数组中每一项运行给定函数,如果该函数有一项符合条件,则返回true
  • filter
    每个数组项调用给定函数,条件为true的将返到一个新数组中
  • map
    每个数组项调用给定函数,返回每次函数调用的结果组成一个新数组。
  • sort
    主要用于对数组的元素进行排序。如果没有传参将按字母顺序(字符编码顺序)对数组中的元素进行排序,如果想按照其他标准进行排序,就需要进行传一个回调函数,该函数要比较两个值用于排序
  • reverse
    用于颠倒数组中元素的顺序。该方法会改变原来的数组,而不会创建新的数组。
  • flat
    用来'拉平'数组。默认只会“拉平”一层,如果想要“拉平”多层的嵌套数组,参数可以传数字,表示想要拉平的层数。 传Infinity参数,表示不管有多少层嵌套,都要转成一维数组
  • flatMap
    参数是一个遍历函数, 对原数组的每个成员执行map,然后对返回值组成的数组执行flat()方法。该方法返回一个新数组,不改变原数组。通俗说,就是先map,再拉平一层
  • reduce
    此方法接收两个参数:一个是回调函数,一个是初始值。
    回调常用的参数只有两个:prev cur。接下来我们跟着实例来看看具体用法吧~ 利用reduce来计算一个字符串中每个字母出现次数。

    const str = 'jshdjsihh';
    const obj = str.split('').reduce((pre, cur) => {
       pre[cur] ? pre[cur]++ : pre[cur] = 1
       return pre
    }, {})
    console.log(obj)     // {j: 2, s: 2, h: 3, d: 1, i: 1}复制代码

4.数组api对于空位的处理

数组的空位指,数组的某一个位置没有任何值。比如,

[,,,1,2,3]

ES6 是明确将空位转为undefined,由于空位的处理规则非常不统一,所以建议避免出现空位。


  • foreach(), filter(), reduce(), every()some()都会跳过空位。
  • map()不会遍历空位,直接跳过,但会保留这个空位。

    let a = [1, , , 2]
    let b = a.map(item => ++item)    // [2, empty × 2, 3]复制代码

  • for...of循环会遍历空位, 直接将空位转为undefined。

    let a = [1, , , 2]
    for (let i of a) {
        console.log(i)
    }                       // 1, undefined, undefined, 2复制代码

  • for...in循环不会遍历空位,直接跳过。

    var a=[,,,2,3,]
    for(let i in a){
       console.log(i)
    }                   // 3, 4复制代码

  • fill()会将空位视为正常的数组位置,一样填充覆盖。

    [, , ,].fill(7)    //[7, 7, 7]复制代码

  • join()会将空位视为undefined,而undefinednull会被处理成空字符串。

    [1,,2].join('-')        // "1--2"复制代码

  • Array.from方法会将数组的空位,转为undefined

    Array.from([,,1])    //  [undefined, undefined, 1]复制代码

  • 扩展运算符(...)也会将空位转为undefined

    console.log(...[,,1])        // undefined undefined 1复制代码

  • copyWithin()会连空位一起拷贝。

  • entries()keys()values()find()findIndex()会将空位处理成undefined


转载于:https://juejin.im/post/5d2187b76fb9a07ed064d3cd

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值