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]);
	}
}
相关推荐
码艺-Alimjan9 小时前
Vue项目源码备份最佳实践:无视node_modules,打包体积仅2MB
前端·javascript·vue.js
mqiqe9 小时前
线程调度与 Schedulers:Project Reactor 并发模型的核心引擎
java·开发语言·网络
xixiaoyunya10 小时前
JavaScript 异步编程全解析:从回调地狱到 async/await 的演进之路
开发语言·javascript·ecmascript
张元清11 小时前
React useScrollLock Hook:为弹窗锁住页面滚动 (2026)
javascript·react.js
Sayai11 小时前
【无标题】ECharts 实现日志量异常检测:基线 ±Kσ 基带 + 灵敏度切换(Vue2 实战)
前端·javascript·echarts
精英的英11 小时前
记一次 Qt5 Language Server 开发
开发语言·vscode·qt
烧酒同学11 小时前
【C++】记录size of std::vector的巧妙坑
开发语言·c++·图形渲染
周周哈哈哈11 小时前
线程创建、执行、退出、回收
java·开发语言
gb421528712 小时前
python中Web应用服务器
开发语言·前端·python
默_笙12 小时前
💌 为了把"主题色"传给孙子组件,我翻了五层楼——直到遇见了 useContext
前端·javascript