石川ES6视频学习笔记

浅浅的花香味﹌ 2022-04-23 10:00 138阅读 0赞

视频来源：石川blue讲解  
参考笔记：https://github.com/able8/hello-es6

**1.ES6怎么来的**

ECMAScript 和 JavaScript：  
1.ECMA 是标准，JS 是实现  
2.ECMAScript 简称 ECMA 或 ES

历史版本：  
1996, ES1.0 Netscape 将 JS 提交给 ECMA 组织，ES 正式出现  
1999, ES3.0 被广泛支持  
2011, ES5.1 成为 ISO 国际标准  
2015, ES6.0 正式发布

**2.ES6兼容性**

ES6(ES2015) 支持的环境 IE10+, Chrome, FireFox, 移动端, NodeJS

解决不兼容办法，编译、转换  
1在线转换（例如引入browser.js）；  
2.或者提前编译

Babel 中文网  
Babel 入门教程 阮一峰  
Babel 是一个 JavaScript 编译器  
一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行  
现在就用 ES6 编写程序，而不用担心现有环境是否支持

ES6：变量、函数、数组、字符串、面向对象、Promise、generator、模块化等

**3.变量 let 和 常量 const**

var 的问题：  
1.可以重复声明，没有报错和警告  
2.无法限制修改  
3.没有块级作用域， \{ \}

let 和 const：  
1.不能重复声明(let a=5; let a=3 报错 不能重复声明，const同理)  
2.都是块级作用域, \{ \} 块内声明的，块外无效  
3.let 是变量，可以修改（let a=5; a=3 没问题 可以修改）  
4.const 是常量，不能修改

块级作用域举例：  
1.原来用 var 的方式，结果弹出的都是 3  
2.或者将变量 封装到函数里，限制作用域，但比较麻烦  
3.用 let 最简单，直接 var 改 let，解决作用域问题

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script>
            window.onload= function () {
                /*
                var aBtn = document.getElementsByTagName('input')
                for (var i=0; i < aBtn.length; i++) {
                    aBtn[i].onclick = function () {
                        alert(i)
                    }
                }*/
                var aBtn = document.getElementsByTagName('input')
                for (let i = 0; i < aBtn.length; i++) {
                    aBtn[i].onclick = function () {
                        alert(i)
                    }
                }
                /*
                var aBtn = document.getElementsByTagName('input')
                for (var i = 0; i < aBtn.length; i++) {
                    // 封装到函数里，限制作用域
                    (function (i) {
                        aBtn[i].onclick = function () {
                            alert(i)
                        }
                    })(i)
                }*/
            }
        </script>
    </head>
    <body>
        <input type="button" value="按钮1">
        <input type="button" value="按钮2">
        <input type="button" value="按钮3">
    </body>
    </html>

**4.函数-箭头函数**

箭头函数：

把之前的函数模型改成了(小括号 箭头 大括号)，也就是function一去，换成箭头=>，而且只有一个参数时候()可以省略，只有一个return语句时候\{\}可以省略。

箭头函数，就是函数的简写：  
1.如果只有一个参数，() 可以省  
2.如果只有一个return语句，\{\}可以省

// 普通函数
    function name() {
    
    }
    // 箭头函数，去掉 function， 加上 =>
    () => {
    
    }
    
    //对比
    let show1 = function () {
        console.log('abc')
    }
    
    let show2 = () => {
        console.log('abc')
    }
    
    show1() // 调用函数
    show2()
    
    let show4 = function (a) {
        return a*2
    }
    
    let show5 = a => a * 2  //简洁，类似python lambda 函数
    
    console.log(show4(10))
    console.log(show5(10))

**5.函数-参数**

1参数扩展／展开 …args

*  收集剩余的参数，必须当到最后一个参数位置
 *  展开数组，简写，效果和直接把数组的内容写在这儿一样

2.默认参数

参数扩展（…）作用：收集剩余的参数；展开数组（相当于把数组内容取出来展开）

//...args 就是剩余参数（但是必须是最后一个参数位置）
    function show(a, b, ...args) {
        console.log(a)
        console.log(b)
        console.log(args)
    }
    console.log(show(1, 2, 3, 4, 5))
    
    //展开数组（...arr1就是把arr1数组内容取出来展开）
    let arr1 = [1, 2, 3]
    let arr2 = [4, 5, 6]
    let arr3 = [...arr1, ...arr2]
    console.log(arr3) //1 2 3 4 5 6
    
    //默认参数
    function show2(a, b=5, c=8) {
        console.log(a, b, c)
    }
    show2(88, 12)

**6.解构赋值**

let [a, b, c] = [1, 2, 3]
    console.log(a, b, c)
    
    let {x, y, z} = {x: 1, y: 2, z: 3}
    console.log(x, y, z)
    
    let [json, arr, num, str] = [{ a: 1, b: 2 }, [1, 2, 3], 8, 'str']
    console.log(json, arr, num, str)

解构赋值:  
1.左右两个边结构必须一样（数组对数组，对象对对象，JSON对JSON，例如 \[\] = \{\}时就结构不一样了）  
2.右边必须是个东西(东西：数组、对象、JSON等，例如\{5,12\}就不对，不是数组也不是JSON)  
3.声明和赋值赋值不能分开，必须在一句话里（let \[a,b\];\[a,b\]=\[5,12\];）

**7.数组**

数组：  
1.新增4个方法(map、reduce、filter、forEach)

2.map（ 映射 ）一个对一个

let arr = [12, 5, 8]
    let result = arr.map(function (item) {
        return item*2
    })
    let result2 = arr.map(item=>item*2) // 简写
    console.log(result)
    console.log(result2)
    
    let score = [18, 86, 88, 24]
    let result3 = score.map(item => item >= 60 ? '及格' : '不及格')
    console.log(result3)
    
    // 结果
    [ 24, 10, 16 ]
    [ 24, 10, 16 ]
    [ '不及格', '及格', '及格', '不及格' ]

3.reduce （汇总） 一堆出来一个（用于比如，算个总数，算个平均）

参数含义是：tmp 上次结果，item当前数，index次数1开始，因为是循环计算，所以会产生tmp上次临时结果，那么这次要计算的是item。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]

var arr = [1, 3, 5, 7]
    var result = arr.reduce(function (tmp, item, index) {
        //tmp 上次结果，item当前数，index次数1开始
        console.log(tmp, item, index)
        return tmp + item
    })
    console.log(result)
    
    var arr = [1, 3, 5, 7]
    var result = arr.reduce(function (tmp, item, index) {
        if (index != arr.length - 1) { // 不是最后一次
            return tmp + item
        } else {
            return (tmp + item)/arr.length
        }
    })
    console.log(result)  // 平均值

4.filter （过滤器） 保留返回值为true的

var arr = [12, 4, 8, 9]
    var result = arr.filter(item => (item % 3 === 0) ? true : false)
    console.log(result)
    var result = arr.filter(item => item % 3 === 0)
    console.log(result)
    
    var arr = [
        { title: '苹果', price: 10 },
        { title: '西瓜', price: 20 },
    ]
    var result = arr.filter(json => json.price >= 20)
    console.log(result)

5.forEach （循环迭代）

var arr = [12, 4, 8, 9]
    var result = arr.forEach(item => console.log(item))
    var result = arr.forEach((item, index)=>console.log(item, index))

**8.字符串**

1.多了两个新方法:startsWith、endsWith

var url = 'http://qq.com'
    console.log(url.startsWith('http'))
    console.log(url.endsWith('com'))
    // 都是 true

2.字符串模版:使用反引号，$\{变量\}、可以折行

let a = 12
    let str1 = `asdf${a}`
    console.log(str1)
    
    let title = '标题'
    let content = '内容'
    let str = `<div>
    <h1>${title}</h1>
    <p>${content}</p>
    `
    /*之前拼接的过程
    str = `<div>\ 
    	<h1>`+title+`</h1>\
    	<p>'+contenr+'</p>\
    </dic>`;
    */
    
    console.log(str)
    <div>
    <h1>标题</h1>
    <p>内容</p>

**9.面向对象-基础**

原来写法：  
1.类和构造函数一样  
2.属性和方法分开写的

// 老版本 (类和构造函数一样)
    function User(name, pass) {
        this.name = name
        this.pass = pass
    }
    
    // 属性和方法分开写的
    User.prototype.showName = function () {
        console.log(this.name)
    }
    User.prototype.showPass = function () {
        console.log(this.pass)
    }
    
    var u1 = new User('able', '1233')
    u1.showName()
    u1.showPass()
    // 老版本继承
    function VipUser(name, pass, level) {
        User.call(this, name, pass) //通过call()继承构造器内容
        this.level = level
    }
    //基础继承方法
    VipUser.prototype = new User()
    VipUser.prototype.constructor = VipUser
    //添加自己的方法
    VipUser.prototype.showLevel = function () {
        console.log(this.level)
    }
    
    var v1 = new VipUser('blue', '1234', 3)
    v1.showName()
    v1.showLevel()

新版面向对象：  
1.有了 class 关键字、构造器  
2.class 里面直接加方法  
3.继承，super 超类==父类

class User {
        constructor(name, pass) {
            this.name = name
            this.pass = pass
        }
    
        showName() {
            console.log(this.name)
        }
        showPass() {
            console.log(this.pass)
        }
    }
    
    var u1 = new User('able2', '111')
    u1.showName()
    u1.showPass()
    
    // 新版本继承
    class VipUser extends User {
        constructor(name, pass, level) {
            super(name, pass)
            this.level = level
        }
        showLevel(){
            console.log(this.level)
        }
    }
    
    v1 = new VipUser('blue', '123', 3)
    v1.showLevel()

**10.面向对象应用**

React:  
1.用于构建用户界面的 JavaScript 库  
2.组件化，一个组件就是一个 class  
3.JSX == bable == browser.js

**11.json**

JSON 格式:  
1.JavaScript Object Notation 的缩写，是一种用于数据交换的文本格式  
2.JSON 是 JS对象 的严格子集  
3.JSON 的标准写法  
4.只能用双引号（`{"a": 12, "b": 4, "c": "abc"}或者{"a": "abc","b": 5}`）  
5.所有的key都必须用双引号包起来

JSON 对象:  
1.JSON 对象是 JavaScript 的原生对象，用来处理 JSON 格式数据，有两个静态方法  
2.JSON.parse(string) ：接受一个 JSON 字符串并将其转换成一个 JavaScript 对象。  
3.JSON.stringify(obj) ：接受一个 JavaScript 对象并将其转换为一个 JSON 字符串。

JSON字符串(我们一般用的JSON格式也就是JSON字符串)：`{"a": 12, "b": 4, "c": "abc"}`  
JavaScript对象：`{a: 12, b: 5}`

JavaScript对象：

person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};
    
    //本例使用函数来构造对象：
    function person(firstname,lastname,age,eyecolor)
    {
    this.firstname=firstname;
    this.lastname=lastname;
    this.age=age;
    this.eyecolor=eyecolor;
    }
    var myFather=new person("Bill","Gates",56,"blue");
    var myMother=new person("Steve","Jobs",48,"green");

JSON.parse(string)和JSON.stringify(obj) ：

var json = {a: 12, b: 5}
    var str = 'hi,' + JSON.stringify(json)
    var url = 'http://www.xx.com/' + encodeURIComponent(JSON.stringify(json))
    console.log(str)
    console.log(url)
    
    var str = '{"a": 12, "b": 4, "c": "abc"}'
    var json = JSON.parse(str)
    console.log(json)
    hi,{"a":12,"b":5}
    http://www.xx.com/%7B%22a%22%3A12%2C%22b%22%3A5%7D
    { a: 12, b: 4, c: 'abc' }

JSON简写：  
1.名字一样  
2.方法

//名字一样，JSON简写
    let json = {a:a,b:b};
    let json = {a,b};
    
    //JSON里面方法可以简写
    let json = {
    	a:12,
    	show:function(){
    	
    	}
    }
    //简写（新版本面向对象里面函数写法也类似，省略function）
    let json = {
    	a:12,
    	show(){
    	
    	}
    }

对象（object）：  
1.是 JavaScript 语言的核心概念，也是最重要的数据类型  
2.对象就是一组“键值对”（key-value）的集合，是一种无序的复合数据集合  
3.对象的所有键名都是字符串, 所以加不加引号都可以  
4.如果键名是数值，会被自动转为字符串  
5.对象的每一个键名又称为“属性”（property），它的“键值”可以是任何数据类型  
6.如果一个属性的值为函数，通常把这个属性称为“方法”，它可以像函数那样调用  
7.in 运算符用于检查对象是否包含某个属性（注意，检查的是键名，不是键值  
8.for…in循环用来遍历一个对象的全部属性

JSON对象 简写：  
1.key-value 一样时可以简写  
2.里面函数可以简写, 去掉

var a = 12, b = 5
    
    console.log({a:a, b:b})
    console.log({a, b})
    
    console.log({a, b, c:"c"})
    console.log({ a, b, show(){ console.log('a') }})
    { a: 12, b: 5 }
    { a: 12, b: 5 }
    { a: 12, b: 5, c: 'c' }
    { a: 12, b: 5, show: [Function: show] }

**12.Promise**

异步和同步：  
1.异步，操作之间没有关系，同时执行多个操作， 代码复杂  
2.同步，同时只能做一件事，代码简单

Promise 对象：  
1.用同步的方式来书写异步代码  
2.Promise 让异步操作写起来，像在写同步操作的流程，不必一层层地嵌套回调函数  
3.改善了可读性，对于多层嵌套的回调函数很方便  
4.充当异步操作与回调函数之间的中介，使得异步操作具备同步操作的接口

Promise 也是一个构造函数：  
1.接受一个回调函数f1作为参数，f1里面是异步操作的代码  
2.返回的p1就是一个 Promise 实例  
3.所有异步任务都返回一个 Promise 实例  
4.Promise 实例有一个then方法，用来指定下一步的回调函数

function f1(resolve, reject) {
      // 异步代码...
    }
    var p1 = new Promise(f1);
    p1.then(f2); // f1的异步操作执行完成，就会执行f2。

Promise 使得异步流程可以写成同步流程

// 传统异步写法
    step1(function (value1) {
      step2(value1, function(value2) {
        step3(value2, function(value3) {
          step4(value3, function(value4) {
            // ...
          });
        });
      });
    });
    
    // Promise 的写法
    (new Promise(step1))
      .then(step2)
      .then(step3)
      .then(step4);

Promise使用示例：

**Promise中resolve和then参数传递示例**

//成功之后利用resolve发送数据到.then，失败之后利用reject发送数据到.catch
    const p = new Promise((resolve,reject) => {
    	resolve('成功了');
    	reject(Error('失败了'));
    })
    p.then(function (arr){
    		alert('成功'+arr);
    	},function(err){
    		alert('失败了');
    });
    
    //输出 "成功成功了" resolve把参数传给then

Promise.all(promiseArray)方法:  
1.将多个Promise对象实例（比如上面的实例p，可以有p1，p2等）包装，生成并返回一个新的Promise实例  
2.promise数组中所有的promise实例都变为resolve的时候，该方法才会返回  
3.并将所有结果传递results数组中  
4.promise数组中任何一个promise为reject的话，则整个Promise.all调用会立即终止，并返回一个reject的新的promise对象

var p1 = Promise.resolve(1),
        p2 = Promise.resolve(2),
        p3 = Promise.resolve(3);
    Promise.all([p1, p2, p3]).then(function (results) {
        console.log(results);  // [1, 2, 3]
    });

Promise.all(promiseArray)使用实例：

Promise.race(\[p1, p2, p3\]):  
1.Promse.race就是赛跑的意思  
2.哪个结果获得的快，就返回那个结果  
3.不管结果本身是成功状态还是失败状态

**13.generator-认识生成器函数**

generator 生成器函数:  
1.普通函数，一路到底  
2.generator函数，中间可以停，到哪停呢，用 yield 配合，交出执行权  
3.yield 有 放弃、退让、退位的意思  
4.需要调用next()方法启动执行，需要遇到 yield 停, 踹一脚走一步  
5.generator函数前面加一个 \* 两边可以有空格，或靠近函数或function  
6.背后实际生成多个小函数，实现走走停停

function show() {
        console.log('a')
        console.log('b')
    }
    show() // 普通函数
    
    function *show2() {
        console.log('1')
        yield
        console.log('2')
    }
    let genObj = show2()
    genObj.next() // 1
    genObj.next() // 2
    genObj.next() // 最后了，没有结果

普通函数一路到底，generator函数中间能停,然后next一次执行一次。

generator相对传统回调的好处：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]

yield暂停原理：背后实际生成多个小函数，实现走走停停

function *show(){
    		alert("a");
    
    		yield; //暂时不向下执行，使函数可以暂停
    
    		alert("b");
    	}
    
    	//生成多个小函数
    	function show_1(){
    		alert("a");
    	}
    	function show_2(){
    		alert("b");
    	}
    	genObj.next(); //show_1
    	genObj.next(); //show_2

**14.generator-yield是啥**

yield：  
1.既可传参，又可以返回  
2.第一个next()传参无效，只用来启动  
3.var a = yield最初的值靠传参，yield 10（10是上一步返回值，可以类比洗好的菜）最后的value需要return返回

function *show(a,b){
    	console.log(a,b);   //最初的值靠传参
    	alert('a');
    	yield 12;
    	alert('b');
    	return 55;   //最后的value需要return返回
    }
    
    let gen = show(1,2);
    let res1 = gen.next();
    console.log(res1);   //{value:12,done:false}
    
    let res2 = gen.next();
    console.log(res2);   //{value:55,done:true}

如果函数前漏掉 \*：  
1.就是普通函数  
2.如果有yield会报错， ReferenceError: yield is not defined  
3.yield 只能在Generator函数内部使用

function * show() {
        console.log('1')
        var a = yield
        console.log('2')
        console.log(a)
    }
    // yield 传参
    var gen = show()
    gen.next() // 1
    gen.next() // 2 和 undefined 因为没有传参，yield没有返回值
    var gen = show()
    gen.next(10) // 1 第一次执行到yield，但没有执行赋值
    gen.next(20) // 2 和 20
    
    function* show2() {
        console.log('1')
        yield 10
        console.log('2')
    }
    // yield 返回
    var gen = show2()
    var res1 = gen.next()
    console.log(res1) // { value: 10, done: false } false表示函数没有走完
    var res2 = gen.next()
    console.log(res2) // { value: undefined, done: true } 最后的value需要return返回

yield可以类比做菜过程：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 2]  
var a = yield（a是上一步返回的值赋给新的一步）最初的值靠传参，yield 10（10是上一步返回值，可以类比洗好的菜）最后的value需要return返回

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 3]

**15.generator-实例**

function *(){
    	let data1 = yield $.ajax({url:'data/1.txt',dataType:'json'});
    	let data2 = yield $.ajax({url:'data/2.txt',dataType:'json'});
    	let data3 = yield $.ajax({url:'data/3.txt',dataType:'json'});
    
    	console.log(data1,data2,data3);
    }

异步：  
1.回调  
2.Promise  
3.generator  
4.async/await  
5.发布订阅模式

// 回调
    $.ajax({
    	url:xxx,
    	dataType:'json',
    	success(data2){
    		$.ajax({
    			url:xxx,
    			dataType:'json'
    			success(data3){
    				alert('完成');
    			},error(){
    				alert('错了');
    			}
    		});
    	},
    	error(){
    		alert('错了');
    	}
    }）;
    
    //Promise
    <script>
    	Promise.all([
    		$.ajax({url:'',dataType:'json'}),
    		$.ajax({url:'',dataType:'json'})
    	]).then(function(arr){
    		let [res1,res2] = arr;
    		alert("全部成功了");
    	}),function(){
    		alert("至少有一个失败了");
    	})
    </script>
    
    //generator
    runner(function *(){
    	let data1 = yield $.ajax({url:xxx,dataType:'json'});
    	let data2 = yield $.ajax({url:xxx,dataType:'json'});
    	let data3 = yield $.ajax({url:xxx,dataType:'json'});
    });

Promise 适合一次读一组  
generator 适合逻辑性的

// 带逻辑-generator
    runner(function * () {
        let userData = yield $.ajax({url: 'getUserData',dataType:'json'})
    
        if (userData.type == 'VIP') {
            let items = yield $.ajax({url: 'getVIPItems',dataType:'json'})
        } else {
            let items = yield $.ajax({url: 'getItems',dataType:'json'})
        }
    })
    
    
    //带逻辑-Promise
    Promise.all([
    	$.ajax({url:'getUserData',dataType:'json'})
    ]).then(results=>{
    	let userData = results[0];
    	if(userData.type == 'VIP'){
    		Promise.all([
    			$.ajax({url:'getVipItem',dataType:'json'})
    		]).then(results=>{
    			let items = results[0];
    		},err=>{
    			alert('错了');
    		});
    	}
    },err=>{
    		alert('失败');
    })
    
    // yield 实例，用同步方式写异步
    server.use(function * () {
        let data = yield db.query(`select * from user_table`)
        this.body = data
    })

koa使用generator示例：

**16.ES7 预览**

数组:  
1.arr.includes() 数组是否包含某个东西  
2.数组的 arr.keys(), arr,entries()  
3.for … in 遍历数组 下标 key  
4.for … of 遍历数组 值 value, 不能用于json

let arr = ['a', 'b', 'c']
    console.log(arr.includes(1))
    
    for (let i in arr) {
        console.log(i) // 循环的时下标 key
    }
    
    for (let i of arr) {
        console.log(i) // 循环的是值 value
    }
    for (let i of arr.keys()) {
        console.log('>'+i)
    }
    for (let [key, value] of arr.entries()) {
        console.log('>' + key + value)
    }
    
    let json = { a: 12, b: 5, c: 7 }
    for (let i in json) {
        console.log(i)
    }

字符串:  
padStart()/padEnd() 指定宽度，不够就补空格或指定字符

console.log('=' + 'abcd'.padStart(6, '0') + '=')
    console.log('=' + 'abcd'.padEnd(6, '0') + '=')
    =00abcd=
    =abcd00=

容忍度:  
1.\[1, 2, 3,\] 老版数组最后不能有逗号，新的可以有  
2.函数参数最后多的逗号也可以

async await:  
1.和 generator yield 类似  
2.generator 不可以写成箭头函数， async 可以

async function show() {
        console.log(1)
        await
        console.log(2)
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]: /images/20220321/424a6f707d3141d3aebd937431858c58.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]: /images/20220321/4e90a0df31a54d2f810665bb376bc655.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 2]: /images/20220321/f1ea54082c3a40b5848d30a9a66f8581.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 3]: /images/20220321/03491c08143f48629d908fd4f5e43c34.png