JS 笔记

1、reduce高阶函数**

返回过滤数据原始数组下标

let data=[{id:1,status:4},{id:2,status:5},{id:3,status:4},{id:4,status:5},{id:5,status:4}];
let indexs=data.reduce((prev,cur,index)=>{
	if('5'==cur.status){
		prev.push(index);
	}
	return prev;
},[]);
console.log(indexs);//1,3

2、字符串拼接标签模板函数

//字符串拼接标签模板函数
const highlight = (strings, ...values) => {
    return strings.reduce((prev, cur, index, arr) => {
        return `${prev}${cur}`.concat(values[index] ? `<span class='highlight'>${values[index]}</span>` : '');
    }, '');
};
//使用用例
const name = 'Alex';
const title = 'Developer';
console.log(highlight`Hello,I'm ${name} and I'm a ${title}`);
//Hello,I'm <span class='highlight'>Alex</span> and I'm a <span class='highlight'>Developer</span>

IntersectionObserver 分页

const loadingDom = document.querySelector('.loading');
let isLoading = false;
const ob =new IntersectionObserver( async (entries)=>{
	let lastRun= false;
	const entry = entries[0];
	if(!entry.isIntersection || isLoading ){
		return;
	}
	isLoading=true;
	lastRun=true;
	console.log(`start第${page}页isIntersection:${entry.isIntersection},${isLoading}`);
	while(lastRun){
		await addPage();//分页数据
		if(++page == 5){
			loadingDom.style='display:none;';
			console.log(loadingDom );
		}
		if(!entry.isIntersection){
			break;
		}
	}
	isLoading=false;
	console.log(`end第${page}页isIntersection:${entry.isIntersection},${isLoading}`);
},{root:null,threshold:0});
ob.observe(loadingDom);