数组扩展

数组扩展

注:<mark>例子均来源于</mark>http://es6.ruanyifeng.com/

Array.of( )

  • Array.of方法用于将一组值,转换为数组

  • 其主要目的是弥补数组构造函数Array( )的不足:因为参数个数的不同,不导致Array()的行为有差异

    • 如:
      		let a  = Array()//[]
              let b = Array(3)//[empty*3]
              let c =Array(3,11,8)//[3,11,8]
      只有当参数大于2个时,Array才会返回由参数组成的新数组
      当参数只有1个时,实际上是指定数组的长度
      
  • Array.of基本可以替代Array()或new Array(),并且不存在由于参数不同而导致的重载,行为统一

  • 其总是返回参数值组成的数组,如果没有参数,就返回一个空数组

    • Array.of的模拟实现

       function Arrayof(){
             
                  return [].slice.call(arguments)//空数组指向函数参数
              }
              console.log(Arrayof(1,2,3))// [1, 2, 3]
              console.log(Arrayof(1))// [1]
              console.log(Arrayof())// []
              console.log(Arrayof(undefined))// [undefined]
              console.log(Arrayof(null))// [null]
             
      
  • Array.of和Array.from的区别

    • Array.from()适用于非数组对象转化为数组的场景,<mark>初衷就是为了解决将非数组对象转换为数组的问题</mark>
    • 准确来说,Array.from()并不能算创建数组的一种方式,尽管它有创建数组的功能

数组实例的copyWithin()

  • 在当前数组的内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组,使用这个方法

    会修改当前的数组

    Array.prototype.copyWithin(target,start,end)
    target:必须,从该位置开始替换数据,如果为负值表示倒数,数组从后往前是-1开始
    start:可选,从该位置开始读取数据,默认为0,若为负数,表示从末尾开始
    end:可选,到该位置前停止读取数据,默认等于数组长度
    
    这三个参数都应该是数值,如果不是,会自动转为数值。
    
    如[1,2,3,4,5].copyWithin(-1,-2)// [1, 2, 3, 4, 4]
    

数组实例的find()和findIndex ()方法

  • 数组的find()用于找出第一个符合条件的数组成员

    • 参数为回调函数,所有成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员,如果没有符合条件的成员,返回undefined

      该回调函数有三个参数
      value:当前的值
      index:当前的位置
      arr:原数组
      
  • findIndex方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1

  • 这两个方法都可以接受第二个参数,<mark>用来绑定回调函数的this对象</mark>

         function f(v){
         
                return v>this.age
            }
            let person ={
         name:'john',age:3}
           var a = [1,2,3,4,5].find(f,person)
           	//f()中this指向person
            console.log(a)//4
        
    
  • Object.is(value1, value2);
    value1:第一个需要比较的值。
    value2:第二个需要比较的值。
    

数组实例的fill()

  • fill方法使用给定值,填充一个数组
  • fill方法用于空数组的初始化,非常方便,<mark>数组中原有的元素会被全部抹去</mark>
  • 其可以接受第二个,第三个参数。用于指定填充的起始位置和结束为主
  • 如果填充的类型为对象,那么被赋值的是同一个内存地址的对象,而不是深拷贝对象

###数组实例的entries(),keys()和values()

  • entries(),keys()和values()用于遍历数组,都返回一个遍历器对象,可以用for…of循环遍历

    keys( )对键名的遍历

    values( )对键值的遍历

    entries( )对键值对的遍历

数组实例的includes( )

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

    与字符串的includes方法类似

  • 该方法的第二个参数表示搜索的起始位置,默认为0。若第二个参数为负数,则表示倒数的位置

    如果这时它大于数组的长度,则会重置从0开始

    注:

    如数组长度为3,第二个参数为-4,则重置从0开始

    如数组长度为3,第二个参数为4,则返回false,不会从0开始

  • 在数组没有includes之前,通常使用indexOf的方法,检查是否包含某个值

    var a = [NaN].indexOf(NaN)
     console.log(a) //-1
    而indexOf有两个缺点:
    1:不够语义化
    2:会对NaN误判,因为它内部使用的是(===)进行判断
    
        var b = [NaN].includes(NaN)// true
        //includes使用的是不一样的判断算法,就没有这个问题。
    
    • 注:map和set数据结构有一个has方法,与includes区别
      • map结构的has方法,用来查找键名的
      • set结构的has方法,用来查找值的

数组实例的flat(),flatMap()

  • 数组的成员有时还是数组,如[[],[],[]],即嵌套数组,Array.prototype.flat()用于将嵌套数组“拉平”,即变为一维数组

  • 该方法返回一个新数组,对元数据没有影响

  • flat()默认只会“拉平”一层,可以添加一个整数参数,“拉平多层

     var a = [1,2,[3,4]].flat()//[1, 2, 3, 4]
    
     var b = [1,[2,3,[4,5]]].flat()// [1, 2, 3, Array(2)]
    
     flat(整数参数)
     var c = [1,[2,3,[4,5]]].flat(2)// [1, 2, 3, 4, 5]
    
    
  • 如果不管有多少层嵌套,都要转成一维数组,可以用Infinity关键字作为参数。

    array.flat(Infinity)

如果原数组有空位,flat()方***跳过该空位

#### flatMap
  • flatMap()方法对原数组的每个成员执行一个函数(相当于执行Array.prototype.map()),然后对返回值组成的数组执行flat()方法

    该方法返回一个新数组,不改变原数组

  • <mark>flatMap()只能展开一层数组。</mark>

    如果遍历函数返回的是一个双层的数组,但是默认只能展开一层,因此flatMap()返回的还是一个嵌套数组。

  • flapMap()方法的第一个参数是一个遍历函数,可以接受3个参数

    flapMap(当前数组的成员,当前数组成员的位置,原数组)

    array.flatMap(function callback(currentValue[,index[,array]]){
         }[,thisAarg])
    
  • 第二个参数,用来绑定遍历函数里面的this

###数组的空位

  • 指数组的某一个位置没有任何值,如Array(3)返回[,,,]

    空位不是undefined,一个位置的值等于undefined依然是有值的.

    空位是没有任何值

  • ES5中,forEach(),filter(),reduce(),every(),some()都会跳过空格

    map()会跳过这个空位,但是会保留这个值

    join()和toString()会将空位视为undefined,而undefined和null会被处理成字符串

  • ES6中,明确将空位转为undefined,ntries()keys()values()find()findIndex()会将空位处理成undefined

  • <mark>由于空位的处理规则非常不统一,所以建议避免出现空位。</mark>

全部评论

相关推荐

评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客企业服务