javascript 对yield生成器的理解

什么情况下可以使用yield,如果你后端传过来的数据量较大,你可以使用yield来进行懒加载,避免一次性的加载对前端造成卡顿,或长时间渲染等待,比较如说加载10万或几十万条数据时,前端一方面要读取一方面还要渲染

yield生成器,在函数名前加*号,返回时用yield

javascript 复制代码
function *gen(data)
{
	yield data;
	return true;
}

//使用方法
let arr=[1,2,3,4,5,6];
let splitdata=get(arr),
a=splitdata.next();
//输出数组
console.info(a.value);

//如果数据量比较大可以函数进行分割成小数组,100个为一组,如果上万条就1000个为一组,解决前端压力,每次只渲染1千,按下一页或向下滑再渲染新数据出来
function *group(data)
{
	let result=[];
        let groupItem=[];

        for(let k=0;k<data.length;k++)
        {
            if(k%100===0)
            {
                !!groupItem && result.push(groupItem);
                groupItem=[];
            }
            groupItem.push(data[k]);
        }

        result.push(groupItem);

        yield result;
        return true;
}
//arr如果有1万条以上数据,则会被分割
let splitdata2=group(arr);
let s=splitdata2.next();
for(let k=0;k<s.value.length;s++)
{
	//判断数组不为空
	if(s.value[k].length>0)
	{
		console.info(s.value[k]);
	}
}
相关推荐
多加点辣也没关系7 小时前
JavaScript|第24章:事件循环与并发模型
开发语言·javascript·ecmascript
ん贤7 小时前
怎么设计,才算一个优秀审计模块
大数据·开发语言·设计·审计
l1t7 小时前
测试用rust重写的postgresql: pgrust
开发语言·postgresql·rust
2501_948106917 小时前
计算机毕业设计之jsp-智慧旅游分享平台
java·开发语言·spark·汽车·课程设计·旅游
阿里云云原生8 小时前
Agent 不再是“玩具”!AgentScope Java 2.0 GA 发布:构建企业级分布式智能体底座
java·开发语言·分布式·agentscope
BIM云平台开发8 小时前
【App.vue里跟踪页面跳转和用户ID】
开发语言·前端·javascript
NiceCloud喜云8 小时前
ClaudeAPI 接入 n8n / Dify / Open WebUI 实战:Base URL 配置、调用示例与排错
开发语言·ai·chatgpt·aigc
庵中十三居士8 小时前
【纯AI无人工修改】AI Agent从0到1实战:50行Python手写核心循环,一次看懂所有Agent框架的底层逻辑
开发语言·人工智能·python
甄同学8 小时前
第二十篇:MCP协议集成,Claude Code如何扩展AI Agent的能力边界
开发语言·人工智能·qt
有同事要进步8 小时前
python常见问题--2
开发语言·python