大厂高频手撕算法题

客官°小女子只卖身不卖艺 2022-12-11 06:28 135阅读 0赞

> 目前互联网行业目前正在处于内卷状态，各个大厂不断提高招人门槛，前端工程师找工作也越发艰难，为了助力各位老铁能够在面试过程中脱颖而出，我结合自己的面试经验，准备了这三十六道面试过程中的手撕算法题，与各位共享。  
>

## 一、冒泡排序 ##

> 冒泡排序的思路：遍历数组，然后将最大数沉到最底部；  
> 时间复杂度：O(N^2)；  
> 空间复杂度：O(1)

## 二、选择排序 ##

> 选择排序的实现思路：遍历数组，把最小数放在头部；  
> 时间复杂度：O(N^2)；  
> 空间复杂度：O(1)

## 三、插入排序 ##

> 插入排序实现思路：将一个新的数，和前面的比较，只要当前数小于前一个则和前一个交换位置，否则终止；  
> 时间复杂度：O(N^2)；  
> 空间复杂度：O(1)

## 四、归并排序 ##

> 归并排序的思路：  
> 1.先左侧部分排好序  
> 2.再右侧部分排好序  
> 3.再准备一个辅助数组，用外排的方式，小的开始填，直到有个动到末尾，将另一个数组剩余部分拷贝到末尾  
> 4.再将辅助数组拷贝回原数组  
> 时间复杂度:O(N \* logN)  
> 空间复杂度:O(N)

// 递归实现
    
    function mergeSort(arr){
        if(arr == null  || arr.length <= 0){
            return [];
        }
        sortProcess(arr, 0, arr.length - 1);
        return arr;
    }
    
    function sortProcess(arr, L, R){
        //递归的终止条件，就是左右边界索引一样
        if(L == R){
            return;
        }
        var middle = L + ((R - L) >> 1);//找出中间值
        sortProcess(arr, L, middle);//对左侧部分进行递归
        sortProcess(arr, middle + 1, R);//对右侧部分进行递归
        merge(arr, L, middle, R);//然后利用外排方式进行结合
    }
    
    function merge(arr, L, middle, R){
        var help = [];
        var l = L;
        var r = middle + 1;
        var index = 0;
        //利用外排方式进行
        while(l <= middle && r <= R){
            help[index++] = arr[l] < arr[r] ? arr[l++] : arr[r++];
        }
        while(l <= middle){
            help.push(arr[l++]);
        }
        while(r <= R){
            help.push(arr[r++]);
        }
    
        for(var i = 0; i < help.length; i++) {
            arr[L + i] = help[i];
        }
        //arr.splice(L, help.length, ...help);//这个利用了ES6的语法
    }

// 循环实现
    
    function mergeSort(arr){
        if(arr ==null || arr.length <= 0){
            return [];
        }
        var len = arr.length;
        //i每次乘2，是因为每次合并以后小组元素就变成两倍个了
        for(var i = 1; i < len; i *= 2){
            var index = 0;//第一组的起始索引
            while( 2 * i  + index <= len){
                index += 2 * i;
                merge(arr, index - 2 * i, index - i, index);
            }
            //说明剩余两个小组，但其中一个小组数据的数量已经不足2的幂次方个
            if(index + i < len){
                merge(arr, index, index + i, len);
            }
        }
        return arr;
    }
    
    //利用外排的方式进行结合
    function merge(arr, start, mid, end){
        //新建一个辅助数组
        var help = [];
        var l = start, r = mid;
        var i = 0;
        while(l < mid && r < end){
            help[i++] = arr[l] < arr[r] ? arr[l++] : arr[r++];
        }
        while(l < mid){
            help[i++] = arr[l++];
        }
        while(r < end){
            help[i++] = arr[r++];
        }
        for(var j = 0; j < help.length; j++){
            arr[start + j] = help[j];
        }
    }

## 五、快速排序 ##

> 快速排序实现思路：随机取出一个值进行划分，大于该值放右边，小于该值放左边（该算法在经典快排的基础上经过荷兰国旗思想和随机思想进行了改造）  
> 时间复杂度：O(N\*logN)   
> 空间复杂度：O(logN)

## 六、堆排序 ##

> 堆排序思路：  
> 1.让数组变成大根堆  
> 2.把最后一个位置和堆顶做交换  
> 3.则最大值在最后，则剩下部分做heapify，则重新调整为大根堆，则堆顶位置和该部分最后位置做交换  
> 4.重复进行，直到减完，则这样最后就调整完毕，整个数组排完序（为一个升序）  
> 时间复杂度:O(N \* logN)  
> 空间复杂度:O(1)

## 七、桶排序 ##

> 桶排序会经历三次遍历：准备一个数组、遍历一遍数组、重构一遍数组，是非基于比较的排序，下面以一个问题来阐述其思路。  
> 问题：  
> 给定一个数组，求如果排序之后，相邻两个数的最大差值，要求时间复杂度O(N),且要求不能用基于比较的排序  
> 思路：  
> 1.准备桶：数组中有N个数就准备N+1个桶  
> 2.遍历一遍数组，找到最大值max和最小值min 。若min = max，则差值=0；若min≠max，则最小值放在0号桶，最大值放在N号桶，剩下的数属于哪个范围就进哪个桶  
> 3.根据鸽笼原理，则肯定有一个桶为空桶，设计该桶的目的是为了否定最大值在一个桶中，则最大差值的两个数一定来自于两个桶，但空桶两侧并不一定是最大值  
> 4.所以只记录所有进入该桶的最小值min和最大值max和一个布尔值表示该桶有没有值  
> 5.然后遍历这个数组，如果桶是空的，则跳到下一个数，如果桶非空，则找前一个非空桶，则最大差值=当前桶min - 上一个非空桶max，用全局变量更新最大值  
> 时间复杂度：O(N)  
> 空间复杂度：O(N)

## 八、new ##

![format_png][]

## 九、instanceof ##

![format_png 1][]

function Instanceof(left, right) {
        let leftVal = Object.getPrototypeOf(left);
        const rightVal = right.prototype;
    
        while (leftVal !== null) {
            if (leftVal === rightVal)
                return true;
            leftVal = Object.getPrototypeOf(leftVal);
        }
        return false;
    }

## 十、 Object.create() ##

![format_png 2][]

Object.ObjectCreate = (proto, propertiesObject)=> {
        // 对输入进行检测
        if (typeof proto !== 'object' && typeof proto !== 'function' && proto !== null) {
            throw new Error(`Object prototype may only be an Object or null:${proto}`);
        }
        // 新建一个对象
        const result = {};
        // 将该对象的原型设置为proto
        Object.setPrototypeOf(result, proto);
        // 将属性赋值给该对象
        Object.defineProperties(result, propertiesObject);
        // 返回该对象
        return result;
    }

## 十一、 Object assign() ##

![format_png 3][]

## 十二、 map ##

![format_png 4][]

Array.prototype.myMap = function(fn) {
        // 判断输入的第一个参数是不是函数
        if (typeof fn !== 'function') {
            throw new TypeError(fn + 'is not a function');
        }
    
        // 获取需要处理的数组内容
        const arr = this;
        const len = arr.length;
        // 新建一个空数组用于装载新的内容
        const temp = new Array(len);
    
        // 对数组中每个值进行处理
        for (let i = 0; i < len; i++) {
            // 获取第二个参数，改变this指向
            let result = fn.call(arguments[1], arr[i], i, arr);
            temp[i] = result;
        }
        // 返回新的结果
        return temp;
    }

## 十三、 filter ##

![format_png 5][]

Array.prototype.myFilter = function (fn) {
        if (typeof fn !== 'function') {
            throw new TypeError(`${fn} is not a function`);
        }
    
        // 获取该数组
        const arr = this;
        // 获取该数组长度
        const len = this.length >>> 0;
        // 新建一个新的数组用于放置该内容
        const temp = [];
    
        // 对数组中每个值进行处理
        for (let i = 0; i < len; i++) {
            // 处理时注意this指向
            const result = fn.call(arguments[1], arr[i], i, arr);
            result && temp.push(arr[i]);
        }
    
        return temp;
    }

## 十四、 reduce ##

![format_png 6][]

Array.prototype.myReduce = function(fn) {
        if (typeof fn !== 'function') {
            throw new TypeError(`${fn} is not a function`);
        }
    
        const arr = this;
        const len = arr.length >>> 0;
        let value;// 最终返回的值
        let k = 0;// 当前索引
    
        if (arguments.length >= 2) {
            value = arguments[1];
        } else {
            // 当数组为稀疏数组时，判断数组当前是否有元素，如果没有索引加一
            while (k < len && !( k in arr)) {
                k++;
            }
            // 如果数组为空且初始值不存在则报错
            if (k >= len) {
                throw new TypeError('Reduce of empty array with no initial value');
            }
            value = arr[k++];
        }
        while (k < len) {
            if (k in arr) {
                value = fn(value, arr[k], k, arr);
            }
            k++;
        }
    
        return value;
    }

## 十五、 flat ##

![format_png 7][]

// 使用reduce和concat
    Array.prototype.flat1 = function () {
        return this.reduce((acc, val) => acc.concat(val), []);
    }

// 使用reduce + concat + isArray +recursivity
    Array.prototype.flat2 = function (deep = 1) {
        const flatDeep = (arr, deep = 1) => {
            // return arr.reduce((acc, val) => Array.isArray(val) && deep > 0 ? [...acc, ...flatDeep(val, deep - 1)] : [...acc, val], []);
            return deep > 0 ? arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? flatDeep(val, deep - 1) : val), []) : arr.slice();
        }
    
        return flatDeep(this, deep);
    }

// 使用forEach + concat + isArray +recursivity
    // forEach 遍历数组会自动跳过空元素
    Array.prototype.flat3 = function (deep = 1) {
        const result = [];
        (function flat(arr, deep) {
            arr.forEach((item) => {
                if (Array.isArray(item) && deep > 0) {
                    flat(item, deep - 1);
                } else {
                    result.push(item);
                }
            })
        })(this, deep);
    
        return result;
    }

// 使用for of + concat + isArray +recursivity
    // for of 遍历数组会自动跳过空元素
    Array.prototype.flat4 = function (deep = 1) {
        const result = [];
        (function flat(arr, deep) {
            for(let item of arr) {
                if (Array.isArray(item) && deep > 0) {
                    flat(item, deep - 1);
                } else {
                    // 去除空元素，因为void 表达式返回的都是undefined，不适用undefined是因为undefined在局部变量会被重写
                    item !== void 0 && result.push(item);
                }
            }
        })(this, deep);
    
        return result;
    }

// 使用堆栈stack
    Array.prototype.flat5 = function(deep = 1) {
        const stack = [...this];
        const result = [];
        while (stack.length > 0) {
            const next = stack.pop();
            if (Array.isArray(next)) {
                stack.push(...next);
            } else {
                result.push(next);
            }
        }
    
        // 反转恢复原来顺序
        return result.reverse();
    }

## 十六、 call ##

![format_png 8][]

Function.prototype.call1 = function(context, ...args) {
        // 获取第一个参数（注意第一个参数为null或undefined是，this指向window），构建对象
        context = context ? Object(context) : window;
        // 将对应函数传入该对象中
        context.fn = this;
        // 获取参数并执行相应函数
        let result = context.fn(...args);
        delete context.fn;

## 十七、 apply ##

![format_png 9][]

Function.prototype.apply1 = function(context, arr) {
        context = context ? Object(context) : window;
        context.fn = this;
    
        let result = arr ? context.fn(...arr) : context.fn();
    
        delete context.fn;
    
        return result;
    }

## 十八、 bind ##

![format_png 10][]

Function.prototype.bind1 = function (context, ...args) {
        if (typeof this !== 'function') {
            throw new TypeError('The bound object needs to be a function');
        }
    
        const self = this;
        const fNOP = function() {};
        const fBound = function(...fBoundArgs) {
            // 指定this
            // 当作为构造函数时，this 指向实例，此时 this instanceof fBound 结果为 true
            return self.apply(this instanceof fNOP ? this : context, [...args, ...fBoundArgs]);
        }
    
        //  修改返回函数的 prototype 为绑定函数的 prototype,为了避免直接修改this的原型，所以新建了一个fNOP函数作为中介
        if (this.prototype) {
            fNOP.prototype = this.prototype;
        }
        fBound.prototype = new fNOP();
    
        return fBound;
    }

## 十九、 防抖 ##

![format_png 11][]

## 二十、 节流 ##

![format_png 12][]

// 时间戳版本
    function throttle(fn, wait) {
        // 上一次执行时间
        let previous = 0;
        return function(...args) {
            // 当前时间
            let now = +new Date();
            if (now - previous > wait) {
                previous = now;
                fn.apply(this, args);
            }
        }
    }

// 定时器版本
    function throttle(fn, wait) {
        let timer = null;
        return function(...args) {
            if (!timer) {
                timer = setTimeout(() => {
                    fn.apply(this, args);
                    timer = null;
                }, wait)
            }
        }
    }

## 二十一、深拷贝 ##

![format_png 13][]

// 乞巧版
    function cloneDeep1(source) {
        return JSON.parse(JSON.stringify(source));
    }

// 递归版
    function cloneDeep2(source) {
        // 如果输入的为基本类型，直接返回
        if (!(typeof source === 'object' && source !== null)) {
            return source;
        }
    
        // 判断输入的为数组函数对象，进行相应的构建
        const target = Array.isArray(source) ? [] : {};
    
        for (let key in source) {
            // 判断是否是自身属性
            if (Object.prototype.hasOwnProperty.call(source, key)) {
                if (typeof source === 'object' && source !== null) {
                    target[key] = cloneDeep2(source[key]);
                } else {
                    target[key] = source[key];
                }
            }
        }
    
        return target;
    }

// 循环方式
    function cloneDeep3(source) {
        if (!(typeof source === 'object' && source !== null)) {
            return source;
        }
    
        const root = Array.isArray(source) ? [] : {};
        // 定义一个栈
        const loopList = [{
            parent: root,
            key: undefined,
            data: source,
        }];
    
        while (loopList.length > 0) {
            // 深度优先
            const node = loopList.pop();
            const parent = node.parent;
            const key = node.key;
            const data = node.data;
    
            // 初始化赋值目标，key为undefined则拷贝到父元素，否则拷贝到子元素
            let res = parent;
            if (typeof key !== 'undefined') {
                res = parent[key] = Array.isArray(data) ? [] : {};
            }
    
            for (let key in data) {
                if (data.hasOwnProperty(key)) {
                    if (typeof data[key] === 'object' && data !== null) {
                        loopList.push({
                            parent: res,
                            key: key,
                            data: data[key],
                        });
                    } else {
                        res[key] = data[key];
                    }
                }
            }
        }
    
        return root;
    }

## 二十二、 根据Promise/A+规范实现Promise ##

> 人家有相关标准，我们就要遵守，毕竟遵纪守法才是好公民，现在只能硬着头皮把这个标准过一遍。

![format_png 14][]

> 下面就是基于Promise/A+规范实现的代码，已经经过promises-aplus-tests库进行了验证。

## 二十三、 Promise.resolve() ##

![format_png 15][]

class Promise {
        // ...
        // 将现有对象转为 Promise 对象
        static resolve(value) {
            // 如果参数是 Promise 实例，那么Promise.resolve将不做任何修改、原封不动地返回这个实例。
            if (value instanceof Promise) return value;
    
            // 参数是一个thenable对象（具有then方法的对象）,Promise.resolve方法会将这个对象转为 Promise 对象，然后就立即执行thenable对象的then方法。
            if (typeof value === 'object' || typeof value === 'function') {
                try {
                    let then = value.then;
                    if (typeof then === 'function') {
                        return new Promise(then.bind(value));
                    }
                } catch (e) {
                    return new Promise((resolve, reject) => {
                        reject(e);
                    })
                }
            }
    
            // 参数不是具有then方法的对象，或根本就不是对象,Promise.resolve方法返回一个新的 Promise 对象，状态为resolved。
            return new Promise((resolve, reject) => {
                resolve(value);
            })
        }
    }

## 二十四、 Promise.reject() ##

![format_png 16][]

class Promise {
        // ...
        // 返回一个新的 Promise 实例，该实例的状态为rejected。
        static reject(reason) {
            return new Promise((resolve, reject) => {
                reject(reason);
            })
        }
    }

## 二十五、 Promise.all() ##

![format_png 17][]

class Promise {
        // ...
        // 用于将多个 Promise 实例，包装成一个新的 Promise 实例。只有所有状态都变为fulfilled，p的状态才会是fulfilled
        static all(promises) {
            const values = [];
            let resolvedCount = 0;
            return new Promise((resolve, reject) => {
                promises.forEach((p, index) => {
                    Promise.resolve(p).then(value => {
                        resolvedCount++;
                        values[index] = value;
                        if (resolvedCount === promises.length) {
                            resolve(values);
                        }
                    }, reason => {
                        reject(reason);
                    })
                })
            })
        }
    }

## 二十六、 Promise.race() ##

![format_png 18][]

class Promise {
        // ...
         // 只要有一个实例率先改变状态，状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给回调函数。
        static race(promises) {
            return new Promise((resolve, reject) => {
                promises.forEach((p, index) => {
                    Promise.resolve(p).then(value => {
                        resolve(value);
                    }, reason => {
                        reject(reason);
                    })
                })
            })
        }
    }

## 二十七、 Promise.catch() ##

![format_png 19][]

class Promise {
        // ...
        // 是.then(null, rejection)或.then(undefined, rejection)的别名，用于指定发生错误时的回调函数。
        catch(onRejected) {
            return this.then(undefined, onRejected);
        }
    }

## 二十八、 Promise.finally() ##

![format_png 20][]

class Promise {
        // ...
        // 用于指定不管 Promise 对象最后状态如何，都会执行的操作。
        finally(callback) {
            return this.then(
                value => Promise.resolve(callback()).then(() => value),
                reason => Promise.resolve(callback()).then(() => { throw reason })
            )
        }
    }

## 二十九、Async实现原理 ##

![format_png 21][]

> 这是Async的实现原理，即将Generator函数作为参数放入run函数中，最终实现自动执行并返回Promise对象。

## 三十、发布订阅模式 ##

![format_png 22][]

// 发布订阅（TypeScript版）
    interface Publish {
        registerObserver(eventType : string, subscribe : Subscribe) : void;
        remove(eventType : string, subscribe ?: Subscribe) : void;
        notifyObservers(eventType : string) : void;
    }
    interface SubscribesObject{
        [key : string] : Array<Subscribe>
    }
    class ConcretePublish implements Publish {
        private subscribes : SubscribesObject;
    
        constructor() {
            this.subscribes = {};
        }
    
        registerObserver(eventType : string, subscribe : Subscribe) : void {
            if (!this.subscribes[eventType]) {
                this.subscribes[eventType] = [];
            }
    
            this.subscribes[eventType].push(subscribe);
        }
    
        remove(eventType : string, subscribe ?: Subscribe) : void {
            const subscribeArray = this.subscribes[eventType];
            if (subscribeArray) {
                if (!subscribe) {
                    delete this.subscribes[eventType];
                } else {
                    for (let i = 0; i < subscribeArray.length; i++) {
                        if (subscribe === subscribeArray[i]) {
                            subscribeArray.splice(i, 1);
                        }
                    }
                }
            }
        }
    
        notifyObservers(eventType : string, ...args : any[]) : void {
            const subscribes = this.subscribes[eventType];
            if (subscribes) {
                subscribes.forEach(subscribe => subscribe.update(...args))
            }
        }
    }
    
    interface Subscribe {
        update(...value : any[]) : void;
    }
    
    class ConcreteSubscribe1 implements Subscribe {
        public update(...value : any[]) : void {
            console.log('已经执行更新操作1，值为', ...value);
        }
    }
    class ConcreteSubscribe2 implements Subscribe {
        public update(...value : any[]) : void {
            console.log('已经执行更新操作2，值为', ...value);
        }
    }
    
    function main() {
        const publish = new ConcretePublish();
        const subscribe1 = new ConcreteSubscribe1();
        const subscribe2 = new ConcreteSubscribe2();
    
        publish.registerObserver('1', subscribe1);
        publish.registerObserver('2', subscribe2);
    
        publish.notifyObservers('2', '22222');
    }
    
    main();

## 三十一、懒加载 ##

> 1)首先，不要将图片地址放到src属性中，而是放到其它属性(data-original)中。  
> 2)页面加载完成后，根据scrollTop判断图片是否在用户的视野内，如果在，则将data-original属性中的值取出存放到src属性中。  
> 3)在滚动事件中重复判断图片是否进入视野，如果进入，则将data-original属性中的值取出存放到src属性中。  
> elementNode.getAttribute(name)：方法通过名称获取属性的值。  
> elementNode.setAttribute(name, value)：方法创建或改变某个新属性。  
> elementNode.removeAttribute(name)：方法通过名称删除属性的值。

//懒加载代码实现
    var viewHeight = document.documentElement.clientHeight;//可视化区域的高度
    
    function lazyload () {
        //获取所有要进行懒加载的图片
        let eles = document.querySelectorAll('img[data-original][lazyload]');//获取属性名中有data-original的
        Array.prototype.forEach.call(eles, function(item, index) {
            let rect;
            if(item.dataset.original === '') {
                return;
            }
    
            rect = item.getBoundingClientRect();
    
            //图片一进入可视区，动态加载
            if(rect.bottom >= 0 && rect.top < viewHeight) {
                !function () {
                    let img = new Image();
                    img.src = item.dataset.original;
                    img.onload = function () {
                        item.src = img.src;
                    }
                    item.removeAttribute('data-original');
                    item.removeAttribute('lazyload');
                }();
            }
        })
    }
    
    lazyload();
    
    document.addEventListener('scroll', lazyload);

## 三十二、FileReader使用 ##

## 三十三、Ajax使用（非Promise版） ##

## 三十四、Ajax使用（Promise版） ##

//Promise形式
    function ajaxPromise(method, url, data) {
        var xhr = null;
        if(window.ActiveXObject) {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }else{
            xhr = new XMLHttpRequest();
        }
    
        return new Promise(function(resolve, reject) {
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4 ) {
                    if(xhr.status === 200) {
                        resolve(JSON.parse(xhr.responseText));
                    }else{
                        reject(xhr.status);
                    }
                }
            };
    
            if(method.toUpperCase() == "GET") {
                var arr = [];
                for(var key in data) {
                    arr.push(key + '=' + data[key]);
                }
    
                var getData = arr.join('&');
                xhr.open("GET", url + "?" + getData, true);//true表示异步
                xhr.send(null);
            }else if(method.toUpperCase() == "POST") {
                xhr.open("POST", url, true);
                xhr.responseType = "json";
                xhr.setRequestHeader('Content', 'application/x-www-form-urlencoded;charset=utf-8');
                xhr.send(data);
            }
    
    
        })
    }

## 三十五、JsonP ##

## 三十六、将一个字符串转换为驼峰形式 ##

//方式一：操作字符串数组
    function transformStr2Hump1(str) {
        if(str == null) {
            return "";
        }
        var strArr = str.split('-');
        for(var i = 1; i < strArr.length; i++) {
            strArr[i] = strArr[i].charAt(0).toUpperCase() + strArr[i].substring(1);
        }
        return strArr.join('');
    }
    
    //方式二：操作字符数组
    function transformStr2Hump2(str) {
        if(str == null) {
            return "";
        }
        var strArr  =str.split('');
        for(var i = 0; i < strArr.length; i++) {
            if(strArr[i] == "-"){
                //删除-
                strArr.splice(i, 1);
                //将该处改为大写
                if(i < strArr.length) {
                    strArr[i] = strArr[i].toUpperCase();
                }
            }
        }
        return strArr.join("");
    }
    
    //方式三：利用正则
    function transformStr2Hump3(str) {
        if(str == null) {
            return "";
        }
        var reg = /-(\w)/g;//匹配字母或数字或下划线或汉字
        return str.replace(reg, function($0, $1) {
            return $1.toUpperCase();
        })
    }

[format_png]: /images/20221123/568e24235c8544c4a6c925497ac7b4c3.png
[format_png 1]: /images/20221123/cda795c661464848ba092210ce0da170.png
[format_png 2]: /images/20221123/bcda0e12cc1c473588390d3851d7e0e6.png
[format_png 3]: /images/20221123/2af3e28f49af47f8940398378293c2a0.png
[format_png 4]: /images/20221123/118085f2faf54f8fb1e2874f3d67636c.png
[format_png 5]: /images/20221123/69dba678a25147a0a6d768907e216b90.png
[format_png 6]: /images/20221123/c240f4768f6f4f6c87457705d6f0f4ed.png
[format_png 7]: /images/20221123/e9ac0f0422184118b9de4457efa4934c.png
[format_png 8]: /images/20221123/10bac76326a242fc9aa0e5a8b541043a.png
[format_png 9]: /images/20221123/3962f26d71ca4ed093289e2e75aa71a0.png
[format_png 10]: /images/20221123/3f639a2e586848f2b0b12d0cead4b7b8.png
[format_png 11]: /images/20221123/53ed85a541c64b9a999f7b8309c31d00.png
[format_png 12]: /images/20221123/e93594d1ff7d46cfb9c6e1ea51c5d35c.png
[format_png 13]: /images/20221123/2b6ece6847194d63a0f0bfd6500701f6.png
[format_png 14]: /images/20221123/8410d7681f754daba9f12077f5851435.png
[format_png 15]: /images/20221123/384419cb44034877877a8fda1e557375.png
[format_png 16]: /images/20221123/02f8ea302610440e9a52e7d6af909195.png
[format_png 17]: /images/20221123/c567e8689b9b4f0ea0535edd14c97764.png
[format_png 18]: /images/20221123/079a6994acc44d2c83f433137e871d79.png
[format_png 19]: /images/20221123/07249928386d437198795787cf7fc596.png
[format_png 20]: /images/20221123/cf8f3b320468458b8e051a95bb1e4452.png
[format_png 21]: /images/20221123/f53d5d3c21764d71908e9854306095ed.png
[format_png 22]: /images/20221123/12bd2ce0858540e8a5ef3e03f1a7907a.png