一、Promise.all 多接口请求，所有请求完成后打印所有请求结果

// 定义接口路径
const url = [100, 200, 300, 400, 500, 600, 700, 800, 900, 2000]
// 模拟请求
function request(u) {
	return new Promise(resolve => {
		setTimeout(() => {
			if (u === 500 || u === 700) {
				// 模拟请求报错时，防止 Promise.all 执行中断
				// 使用 resolve 而不使用 reject
				resolve('error')
			} else {
				// 成功时
				resolve(u)
		}, u)
	// return axios.get(url)
// Promise.all 等待所有都完成
async function allRequest(urls) {
	const res = await Promise.all(urls.map(u => {
		return request(u)
	}))
	const newRes = res.filter(r => r !== 'error')
	// Promise.all 等待请求全部完成才输出结果
	console.log(res)
	console.log(newRes)
// 调用
allRequest(url)
二、递归节点查找
 
// 模拟树
const treeData = [
    name: "节点1",
    children: [
        name: "节点1-1",
        children: [],
        name: "节点1-2",
        children: [
            name: "节点1-2-1",
            children: [],
    name: "节点2",
    children: [
        name: "节点2-1",
        children: [],
*方法一：
// 递归
function fn(arr, name, callback) {
	arr.forEach(v => {
		if (v.name === name) callback(v)
		if (v.children) fn(v.children, name, callback)
// 执行函数
fn(treeData, '节点1-2-1', res => {
	console.log(res)
*方法二：
function getTreeName(list, name) {
	let res = null
	for (let i = 0; i < list.length; i++) {
		let item = list[i]
		item.name === name ? res = item.name : ''
		if (res) break
		if (item.children.length) res = getTreeName(item.children, name)
	return res
const treeName = getTreeName(treeData, '节点2')
console.log(treeName)
三、渲染性能代码优化
 
1、代码优化




    
 
// 初始化 dom
const demo = document.createElement('div')
demo.setAttribute('id', 'demo')
document.body.append(demo)
// 原代码
const el = document.querySelector('#demo');
for (let i = 0; i < 1000; i++) {
	el .innerHTML += `<option value="${i}">第${i}个选项</option>`;
// 优化后
const el = document.querySelector('#demo');
let htmls = ''
for (let i = 0; i < 1000; i++) {
	htmls += `<option value="${i}">第${i}个选项</option>`;
el.innerHTML = htmls
2、再次优化，防抖？懒加载？？ 
// 初始化 dom
const demo = document.createElement('div')
demo.setAttribute('id', 'demo')
document.body.append(demo)
// 定义变量
let htmls = ''
let oldEl = ''
const el = document.querySelector('#demo');
// 防抖（只是在最后一次事件结束后才触发一次函数）
function fd(callback, delay) {
	let time = null
	return () => {
		clearTimeout(time)
		time = setTimeout(callback, delay)
// 懒加载
function lazy(callback, oldEl, noDataLength = 150) {
	if (oldEl.length >= noDataLength) {
		if (!document.getElementById('no-data')) {
			const div = document.createElement('div')
			div.setAttribute('id', 'no-data')
			div.innerText = '没有更多数据了...'
			el.appendChild(div)
		return false
	const st = document.documentElement.scrollTop // 滚动条滚动距离
	const cH = document.documentElement.clientHeight // 可视区高度
	const sH = document.body.scrollHeight // 浏览器所有内容高度
	if (st + cH > sH) callback()
// 初始化模拟数据
window.addEventListener('load', () => {
	for (let i = 0; i < 50; i++) {
		htmls += `<option value="${i}">第${i}个选项</option>`;
	el.innerHTML = htmls
// 使用防抖 + 懒加载
window.addEventListener('scroll', fd(() => {
	lazy(() => {
		oldEl = document.querySelectorAll('#demo option');
		for (let i = 0; i < 50; i++) {
			let option = document.createElement('option')
			option.setAttribute('value', oldEl.length + i)
			option.innerText = `第${oldEl.length + i}个选项`
			el.appendChild(option)
	}, oldEl, 100)
}, 500))
                    说明：可直接cv代码到控制台 F12 运行一、Promise.all 多接口请求，所有请求完成后打印所有请求结果// 定义接口路径const url = [100, 200, 300, 400, 500, 600, 700, 800, 900, 2000]// 模拟请求function request(u) {	return new Promise(resolve =&gt; {		setTimeout(() =&gt; {			if (u === 500 || u === 700) {
				在经典汉诺塔问题中，有 3 根柱子及 N 个不同大小的穿孔圆盘，盘子可以滑入任意一根柱子。一开始，所有盘子自上而下按升序依次套在第一根柱子上(即每一个盘子只能放在更大的盘子上面)。移动圆盘时受到以下限制:
(1) 每次只能移动一个盘子;
(2) 盘子只能从柱子顶端滑出移到下一根柱子;
(3) 盘子只能叠在比它大的盘子上。
请编写程序，用栈将所有盘子从第一根柱子移到最后一根柱子。
				今天拿到一个事，老板说有3000多条数据需要在里面填充经纬度，每一条都有一个地址，根据这个地址请求天地图官方解析出来的经纬度，将值填充进去。第一反应是网上搜索，捡现成的，看了下没搜出来就自己写逻辑了。其实很简单。
api 接口
// 这是简单的封装，针对post封装
const request = ({url, method = 'post', params = {}}) => {
  params = Object.assign(params, {key: keystr()})
  return n