ES6 迭代器 生成器 Set

本文介绍了ES6中的rest参数如何简化函数参数处理,迭代器和生成器在遍历和异步编程中的应用,包括使用yield操作和生成器解决回调地狱。同时涉及了Set数据结构的使用以及求交集示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

ES6中引入了rest参数用于获取函数的实参用来代替arguments

arguments函数内部的参数(用来获取调用函数的实参) 呈现的方式 是个对象 当函数被调用多次的时候每一次都会重新执行一遍  注意: 不管实参是否有形参进行接收 都会出现在arguments 里

在使用rest 的时候要在函数中定义形参的时  function data1 (...变量名) {console.log(变量名);}  才能进行使用 通常变量名用args (为arguments缩写) 拿到实参 会以数组的形式出现 方便对数组进行操作 使用rest 时必须放到参数最后面 注意:当有参数被形参接收的时候 数组内是不会出现被接收过的参数只会接收剩余参数

       使用扩展运算符的时候可以将 伪数组 转化为真数组

ES6中的迭代器 (iterator) 只要有了iterator接口 就可以完成遍历操作 而iterator 就是用来使用for…of 而存在的 他的方式是遍历键值  与 for…in相反(遍历键)

 迭代器的应用 当我们要遍历对象内部的一个数组的时候要拿到 数组的键值, 使用for…of 就需要iterator 的接口(函数) 就直接在对象内部

        const gongsi = {
            name: '信息部',
            stus: [
                '我',
                '雄',
                '大炳',
                '阳哥',
                '王哥',
                '肖哥'
            ],
            // for ... of 循环的接口 
                    
          [Symbol.iterator]() {  // 是个函数 函数内部 要return一个对象 
                let index = 0
                let _this = this   // this指向有为题  可以 使用箭头函数  或者保存this 
                return {  // 对象内有next 函数 
                    next: function () {
                         if(index < _this.stus.length) {
                             index++
                            return { value: _this.stus[index] ,done:false }  
    // 函数内在return 对象 对象内 有 value 返回的值 还有 是否终止 进行下次执行的标志
                         } else {
                            return { value:_this.stus[index] ,done:true }
                         }
                    }
                }
            }
        }

      for(let v of gongsi){
            console.log(v);  // 就能循环 stus 对象了 
        }

生成器

       生成器就是一个特殊的函数 异步编程纯回调函数 特殊声明方式 function* fn1 () {} 使用这个函数的时候要调用fn1.next()  这样才会执行内部代码 

        在生成器内部 我没可以使用yield语法 

简单了解一下yield 

yield是ES6的新关键字,使生成器函数执行暂停,yield关键字后面的表达式的值返回给生成器的调用者。它可以被认为是一个基于生成器的版本的return关键字。

yield关键字实际返回一个IteratorResult(迭代器)对象,它有两个属性,value和done,分别代表返回值和是否完成。

yield无法单独工作,需要配合generator(生成器)的其他函数,如next,懒汉式操作,展现强大的主动控制特性

        好接下来我们上代码

    function* fn1() {
            console.log('生成器');
           let y1 =  yield '1111'
            const.log(y1)  // 1
            yield '2222'
            yield '3333'
        }
      // 获取迭代器 对象
       const fn =  fn1()  // { 迭代器 }
        console.log(fn.next());  // {value: '1111', done: false}
        console.log(fn.next(1111));  // {value: '2222', done: false}
        console.log(fn.next());  // {value: '3333', done: false}
        console.log(fn.next());  // {value: undefined, done: true}
    // 由此可见 他是调用一次 执行一个  yield 而返回的就是  yield  对应的值 和 是否有值的状态
    // 而且我们是可以在调用next传入参数 参数会作为整个 yield 的返回值 第二个next 会作为第一个yield 返回参数 一次类推

使用生成器 可以解决回调地狱


        function one() {
            setTimeout(() => {
                console.log(111);
                fn22.next()
            }, 1000)
        }
        function two() {
            setTimeout(() => {
                console.log(222);
                fn22.next()
            }, 2000)
        }
        function therr() {
            setTimeout(() => {
                console.log(333);
                fn22.next()
            }, 3000)
        }

        function* fn2() {
        yield one()
        yield two()
        yield therr()
        }

        const fn22 = fn2()
        fn22.next()

对set集合简单介绍

        const s1 =  new Set(['大事儿','小事儿' , '喜事儿', '没事儿', '小事儿'])
        s1.add('坏事儿')
        s1.delete('没事儿')
        console.log( s1.has('坏事儿'));  // 返回 布尔值
        s1.clear()
        console.log(s1);
        
        for(let v of s1 ) {
           const.log(v)    
        }
 // 就是增删改查

set求交集

  /* 求交集 */
        const arr = [1,2,3,4,56,8,5,,13,5,44,4,2,3]
        const arr1 = [55,66,77,88,222,44,12,13]
        const newArr = [...new Set(arr)].filter(item =>{
            let newArr1 = new Set(arr1)
            if(newArr1.has(item)) {
             return true
            } else {
                return false
            }
        })
        console.log(newArr);

 // 简写
        const newArr3 = [...new Set(arr)].filter(item =>  new Set(arr1).has(item))
        console.log(newArr3);

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值