最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • ES6数组的扩展

    正文概述 掘金(你不对劲_)   2020-12-27   244

    构造器上新增的方法

    • Array.of(),弥补了原本 Array 创建数组时传入一个参数的缺陷。

      console.log(Array()); // -> []
      console.log(Array.of()); // -> []
          
      // Array()传入的参数为一个时,指定的是数组的长度为 3
      console.log(Array(3)); // -> [empty × 3]
      console.log(Array.of(3)); // -> [3]
          
      console.log(Array(1, 2)); // -> [1, 2]
      console.log(Array.of(1, 2)); // -> [1, 2]
      
    • Array.from(),可以将类数组转和部署了iterator接口的对象转换为数组。可接收三个参数,第一个参数为arrayLike,要转换为数组的对象,第二个可选参数,mapFn,将转换成的数组进行二次处理,第三个可选参数改变this指向,后两个参数一般不会用到。

      function foo (a, b, c, d) {
        console.log(arguments); // -> Arguments(4) [1, 2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ]
        arguments = Array.from(arguments);
        console.log(arguments); // -> [1, 2, 3, 4]
      }
      foo(1, 2, 3, 4);
          
      let obj = {
        start: [1, 2, 3],
        end: [4, 5],
        [Symbol.iterator] () {
          let index = 0,
              arr = [...this.start, ...this.end],
              len = arr.length;
          return {
            next () {
              if(index < len){
                return {value: arr[index++], done: false}
              }else{
                return {value: undefined, done: true}
              }
            }
          }
        }
      }
      console.log(Array.from(obj)); // -> [1, 2, 3, 4, 5]
      

    原型上新增的方法

    • [].fill(value, start, end),填充数组(改变原始数组),第一个参数为指定填充的值,后两个参数无指定,默认填充整个数组。第二个参数为开始填充的索引(默认值为0)包含当前索引,第三个参数为结束填充的索引(默认值为this.length)不包含当前索引。

      let arr = [1, 2, 3, 4];
      arr.fill(5);
      console.log(arr); // -> [5, 5, 5, 5]
          
      arr.fill(5, 1);
      console.log(arr); // -> [1, 5, 5, 5]
          
      arr.fill(5, 1, 2);
      console.log(arr); // -> [1, 5, 3, 4]
          
      // 注意:这种方式对象也可以调用
      let obj = {
        length: 3
      };
      [].fill.call(obj, 4);
      console.log(obj); // ->  {0: 4, 1: 4, 2: 4, length: 3}
      
    • [].keys() / values() / entries(),返回值是一个遍历器(iterator)对象,就可以使用for of 遍历当前对应的值。

    • 注意: 与Object.keys() / values() / entries()的区别,对象构造器上的方法返回的是数组,而这里返回的是遍历器(iterator)对象。

      let arr = ['a', 'b', 'c'];
      console.log(arr.keys()); // -> Array Iterator {}
      console.log(arr.values()); // -> Array Iterator {}
      console.log(arr.entries()); // -> Array Iterator {}
          
      let iter = arr.values();
      console.log(iter.next()); // -> {value: 'a', done: false}
      console.log(iter.next()); // -> {value: 'b', done: false}
      console.log(iter.next()); // -> {value: 'c', done: false}
      console.log(iter.next()); // -> {value: undefined, done: true}
          
      for(let item of arr.entries()){
        console.log(item); // -> [0, 'a'] [1, 'b'] [2, 'c']
      }
      
    • [].find() / findIndex(),与map()等方法的使用方式一致,但返回值不同,返回的是当前符合回调函数条件的第一个成员,没有返回undefinedfindeIndex(),返回的是第一个符合条件成员的索引,没有返回-1。

      let arr = [1, 2, 3, 4];
      let res = arr.find((value, index, arr) => {
        return value > 2;
      })
      console.log(res); // -> 3
          
      let idx = arr.findIndex(value => value > 2); 
      console.log(idx); // -> 2
          
      // 改善了indexOf() 的缺陷
      console.log([NaN].indexOf(NaN)); // -> -1
          
      console.log([NaN].findIndex(val => Object.is(NaN, val))); // -> 0
      
    • [].includes(),查询数组中是否包含传入的参数,返回一个布尔值。

      console.log([1, 2, 4, NaN].includes(3)); // -> false
          
      console.log([1, 2, 4, NaN].includes(NaN)); // -> true
      

    起源地下载网 » ES6数组的扩展

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元