JS基础运算符

红太狼 2023-10-06 21:38 24阅读 0赞

#### 阅读目录 ####

*  赋值运算符
 *  算术运算符
 *  复合运算符
 *  一元运算符
 *   *  前置操作
     *  后置操作
 *  比较运算符
 *   *  示例不允许年龄超过90岁
 *  逻辑运算符
 *   *  逻辑与
     *  逻辑或
     *  逻辑非
     *  优先级
     *  密码比对示例
     *   *  HTML DOM \`querySelectorAll()\` 方法
         *  \`querySelectorAll\` 与 \`querySelector\` 的区别
         *  JavaScript \`Array map()\` 方法
         *  JavaScript \`Math.sqrt()\` 方法
         *  JS中三个点（...）
         *   *  作用
         *  js 箭头函数
         *   *  this
     *  短路运算
     *   *  实例操作
         *  HTML DOM \`prompt()\` 方法
         *  HTML DOM \`addEventListener()\` 方法

## 赋值运算符 ##

使用 `=` 进行变量赋值

let url = 'https://wgchen.blog.csdn.net';

## 算术运算符 ##

包括以下几种算术运算符。

let a = 5,b = 3;
    console.log(a * b); //15
    console.log(a % b); //2

## 复合运算符 ##

可以使用 `=、/=、+=、-=、%=` 简写算术运算。即 `n*=2`等同于`n=n*2`。

let n = 2;
    n *= 2;
    console.log(n);

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

对变量加减相应数值。

let n = 2;
    n += 3;
    console.log(n); //5
    
    n -= 5;
    console.log(n); //0

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_16_color_FFFFFF_t_70_g_se_x_16]  
`n+=3` 是 `n=n+3` 的简写形式

## 一元运算符 ##

### 前置操作 ###

前置操作会在表达式最先执行。

let n = 1;
    ++n
    console.log(n);
    
    --n
    console.log(n);

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_18_color_FFFFFF_t_70_g_se_x_16]  
`++n` 就是 `n=n+1` 的简写形式。

let n = 2;
    let f = 30 + ++n;
    console.log(f);

使用后置操作符，`++n` 会在最先执行，所以f的结果是33。

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

### 后置操作 ###

后置操作会在表达式最后执行。

let n = 1;
    n++
    console.log(n);

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

let n = 2;
    let f = 30 + n++;
    console.log(f);

使用后置操作符，`n++` 会在最后执行，所以f的结果是32。  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 1]  
参与数学计算

let a = 1;
    b = a++ + 2;
    console.log(b); //3

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

## 比较运算符 ##

<table> 
 <thead> 
  <tr> 
   <th>运算符</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>&gt;</td> 
   <td>大于</td> 
  </tr> 
  <tr> 
   <td>&lt;</td> 
   <td>小于</td> 
  </tr> 
  <tr> 
   <td>&gt;=</td> 
   <td>大于或等于</td> 
  </tr> 
  <tr> 
   <td>&lt;=</td> 
   <td>小于等于</td> 
  </tr> 
  <tr> 
   <td>==</td> 
   <td>强制类型转换比较</td> 
  </tr> 
  <tr> 
   <td>===</td> 
   <td>不强制类型转换比较</td> 
  </tr> 
 </tbody> 
</table>

下面来体验不同类型的比较结果

let a = 1,b = 2,c = '1';
    
    console.log(a < b); //true
    console.log(a == b); //false
    console.log(a == c); //true
    console.log(a === c); //false
    console.log(a == true); //true
    console.log(a === true); //false

### 示例不允许年龄超过90岁 ###

<input type="text" name="age" />
    <span id="msg"></span>
    
    <script>
      let span = document.querySelector("#msg");
      document
        .querySelector('[name="age"]')
        .addEventListener("keyup", function() {
        
          span.innerHTML = this.value >= 90 ? "年龄不能超过90岁" : "";
        });
    </script>

![在这里插入图片描述][d93d503971e0410896601ede4f8dba27.png]

## 逻辑运算符 ##

### 逻辑与 ###

使用 `&&` 符号表示逻辑与，指符号两端都为 `true` 时表达式结果为 `true`。

let a = true,b = true;
    
    if (a && b) {
        
        console.log('表达式成立');
    }

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

### 逻辑或 ###

使用 `||` 符号表示逻辑或，指符号左右两端有一方为 `true`，表达式即成立。

let a = true,b = false;
    
    if (a || b) {
        
        console.log('表达式成立');
    }

### 逻辑非 ###

使用 `!` 符号表示逻辑非，即原来是 `true` 转变为 `false`，反之亦然。

let a = true,b = false;
    
    if (a && !b) {
        
        console.log('表达式成立');
    }

### 优先级 ###

下列中因为 `&&` 的优先级高，所以结果是 `true`。

console.log(true || false && false);

可以使用 `()` 来提高优先级

console.log((true || false) && false);

### 密码比对示例 ###

![在这里插入图片描述][d2a088df77104fbdb7d0bde6ee04967d.gif_pic_center]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
    
    <input type="text" name="password" />
    <input type="text" name="confirm_password" />
    <br />
    <span name="msg"></span>
    
    <script>
    
    function queryByName(name) {
        
        return document.querySelector(`[name='${
          name}']`);
    }
    
    let inputs = document.querySelectorAll(
        "[name='password'],[name='confirm_password']"
    );
    
    // console.log(inputs);
    // console.log([...inputs]);
    
    // [...inputs] 对象转数组
    [...inputs].map(item => {
        
        // console.log(item);
        item.addEventListener("keyup", () => {
        
            let msg = "";
            if (
                queryByName("password").value !=
                queryByName("confirm_password").value ||
                queryByName("password").value.length < 5
            ) {
        
                msg = "两次密码不一致或密码长度错误";
            }
            queryByName("msg").innerHTML = msg;
        });
    });
    </script>
    
    </body>
    </html>

console.log(inputs);

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

console.log([...inputs]);

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

console.log(item);

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

#### HTML DOM `querySelectorAll()` 方法 ####

定义与用法

`querySelectorAll()`返回文档中匹配指定 CSS 选择器的所有元素，返回 NodeList 对象。  
NodeList 对象表示节点的集合。可以通过索引访问，索引值从 0 开始。

提示: 你可以使用 NodeList 对象的 `length` 属性来获取匹配选择器的元素属性，然后你可以遍历所有元素，从而获取你想要的信息。

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

语法

elementList = document.querySelectorAll(selectors);

elementList 是一个静态的 NodeList 类型的对象。  
selectors 是一个由逗号连接的包含一个或多个 CSS 选择器的字符串。

#### `querySelectorAll` 与 `querySelector` 的区别 ####

说明：  
1. `querySelectorAll` 是找出所有匹配的节点后，返回对应的元素节点数组。  
2. `querySelector` 是找到一个后立刻返回找到的第一个节点对象，如果没有则返回 `null`。  
3. 返回的结果是静态的，之后对 `document` 结构的改变不会影响到之前取到的结果。

找出body标签下的第一个div
    document.body.querySelectorAll("div")[0]
     
    找出所有标签
    document.querySelectorAll("*")
     
    找出head下所有的标签
    document.head.querySelectorAll("*")
     
    找出所有class=box的标签
    document.querySelectorAll(".box")
     
    找出所有class=box的div标签
    document.querySelectorAll("div.box")
     
    找出所有id=lost的标签
    document.querySelectorAll("#lost")
     
    找出所有p标签并且id=lost的标签
    document.querySelectorAll("p#lost")
     
    找出所有name=qttc的标签
    document.querySelectorAll("*[name=qttc]")
     
    找出所有存在name属性的标签
    document.querySelectorAll("*[name]")
     
    找出所有class=hot并且存在name属性的p标签
    document.querySelectorAll("p.hot[name]")
    document.querySelectorAll("p[class=hot][name]")

#### JavaScript `Array map()` 方法 ####

<p id="demo"></p>
    
    <script>
    var numbers = [4, 9, 16, 25];
    
    (function myFunction() {
        
        x = document.getElementById("demo")
        x.innerHTML = numbers.map(Math.sqrt);
    })();
    
    </script>
    
    // 输出结果为: 2,3,4,5

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 7]  
定义和用法

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。  
map() 方法按照原始数组元素顺序依次处理元素。

注意： map() 不会对空数组进行检测。  
注意： map() 不会改变原始数组。

语法

array.map(function(currentValue,index,arr), thisValue)

<table> 
 <tbody> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td><em>function(currentValue, index,arr)</em></td> 
   <td>必须。函数，数组中的每个元素都会执行这个函数<br>函数参数:<br> 
    <table> 
     <tbody> 
      <tr> 
       <th>参数</th> 
       <th>描述</th> 
      </tr> 
      <tr> 
       <td><em>currentValue</em></td> 
       <td>必须。当前元素的值</td> 
      </tr> 
      <tr> 
       <td><em>index</em></td> 
       <td>可选。当前元素的索引值</td> 
      </tr> 
      <tr> 
       <td><em>arr</em></td> 
       <td>可选。当前元素属于的数组对象</td> 
      </tr> 
     </tbody> 
    </table> </td> 
  </tr> 
  <tr> 
   <td><em>thisValue</em></td> 
   <td>可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。<br>如果省略了 thisValue，或者传入 null、undefined，那么回调函数的 this 为全局对象。</td> 
  </tr> 
 </tbody> 
</table>

--------------------

这里的 map不是“地图”的意思，而是指“映射”。`[].map();` 基本用法跟 `forEach`方法类似：

--------------------

array.map(callback,[ thisObject]);

`callback` 的参数也类似：

[].map(function(value, index, array) {
        
        // ...
    });

map方法的作用不难理解，“映射”嘛，也就是原数组被“映射”成对应新数组。  
下面这个例子是数值项求平方：

var data = [1, 2, 3, 4];
    
    var arrayOfSquares = data.map(function (item) {
        
      return item * item;
    });
    
    alert(arrayOfSquares); // 1, 4, 9, 16

`callback`需要有`return`值，如果没有，就像下面这样：

var data = [1, 2, 3, 4];
    var arrayOfSquares = data.map(function() {
        });
    
    arrayOfSquares.forEach(console.log);

结果如下图，可以看到，数组所有项都被映射成了undefined：  
![在这里插入图片描述][58e86d701b2e4e51983f9b111157e306.png]  
在实际使用的时候，我们可以利用 `map` 方法方便获得对象数组中的特定属性值。  
例如下面这个例子（之后的兼容demo也是该例子）：

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

#### JavaScript `Math.sqrt()` 方法 ####

Math.sqrt()方法返回一个数的平方根。

如果传递的参数为负，则Math.sqrt()返回NaN。

因为sqrt()是Math的静态方法，所以您始终将其用作Math.sqrt()，而不是将其用作创建的Math对象的方法。

语法：  
Math.sqrt(x)

Math.sqrt(9);   // 3
    Math.sqrt(64);  // 8
    Math.sqrt(2);   // 1.414213562373095
    Math.sqrt(1);   // 1
    Math.sqrt(0);   // 0
    Math.sqrt(-1);  // NaN

#### JS中三个点（…） ####

三个点（…）真名叫扩展运算符，是在ES6中新增加的内容，它可以在函数调用/数组构造时，将数组表达式或者string在语法层面展开；还可以在构造字面量对象时将对象表达式按照key-value的方式展开。

字面量一般指 \[1,2,3\] 或者 \{name:‘chuichui’\} 这种简洁的构造方式,  
多层嵌套的数组和对象三个点就无能为力了。

说白了就是把衣服脱了，不管是大括号（\[\]）、花括号（\{\}），统统不在话下，全部脱掉脱掉！

// 数组
    var number = [1,2,3,4,5,6]
    console.log(...number) //1 2 3 4 5 6
    
    //对象
    var man = {
        name:'chuichui',height:176}
    console.log({
        ...man})

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

##### 作用 #####

赋值用它

//数组的复制
    var arr1 = ['hello']
    var arr2 =[...arr1]
    
    arr2 // ['hello']
    
    //对象的复制
    var obj1 = {
        name:'chuichui'}
    var obj2 ={
        ...arr}
    ob12 //  {name:'chuichui'}

合并用它

//数组的合并
    var arr1 = ['hello']
    var arr2 =['chuichui']
    var mergeArr = [...arr1,...arr2]
    mergeArr  // ['hello','chuichui']
    
    // 对象分合并
    var obj1 = {
        name:'chuichui'}
    var obj2 = {
        height:176}
    var mergeObj = {
        ...obj1,...obj2}
    mergeObj // {name: "chuichui", height: 176}

字符转数组用它

var arr1 = [...'hello']
    arr1 // ["h", "e", "l", "l", "o"]

函数传参用它  
可以和正常的函数相结合，灵活使用

function f(v,w,x,y,z){
         }
    var args = [2,3]
    f(1,...args,4,...[5])

当我们想把数组中的元素迭代为函数参数时，用它！

function f(x,y,z){
        }
    var args = [1,2,3]
    f(...args)
    
    // 以前的方法
    f.apply(null,args);

#### js 箭头函数 ####

ES6标准新增了一种新的函数：Arrow Function（箭头函数）。

为什么叫Arrow Function？  
因为它的定义用的就是一个箭头：

x => x * x
    
    上面的箭头函数相当于：
    function (x) {
        
        return x * x;
    }

箭头函数相当于匿名函数，并且简化了函数定义。

箭头函数有两种格式：  
一种像上面的，只包含一个表达式，连 `{ ... }` 和return都省略掉了。  
还有一种可以包含多条语句，这时候就不能省略 `{ ... }` 和 `return`：

x => {
        
        if (x > 0) {
        
            return x * x;
        }else {
        
            return - x * x;
        }
    }

如果参数不是一个，就需要用括号 `()` 括起来：

// 两个参数:
    (x, y) => x * x + y * y
    
    // 无参数:
    () => 3.14
    
    // 可变参数:
    (x, y, ...rest) => {
        
        var i, sum = x + y;
        for (i=0; i<rest.length; i++) {
        
            sum += rest[i];
        }
        return sum;
    }

如果要返回一个对象，就要注意，如果是单表达式，这么写的话会报错

// SyntaxError:
    x => {
         foo: x }
    
    因为和函数体的{
         ... }有语法冲突，所以要改为
    
    // ok:
    x => ({
         foo: x })

##### this #####

箭头函数看上去是匿名函数的一种简写，但实际上，箭头函数和匿名函数有个明显的区别：箭头函数内部的 `this` 是词法作用域，由上下文确定。

回顾前面的例子，由于JavaScript函数对 `this` 绑定的错误处理，下面的例子无法得到预期结果：

现在，箭头函数完全修复了 `this` 的指向，`this` 总是指向词法作用域，也就是外层调用者obj：

var obj = {
        
        birth: 1990,
        getAge: function () {
        
            var b = this.birth; // 1990
            // this指向obj对象
            var fn = () => new Date().getFullYear() - this.birth;
            return fn();
        }
    };
    obj.getAge(); // 25

由于 `this` 在箭头函数中已经按照词法作用域绑定了，所以，用 `call()` 或者 `apply()` 调用箭头函数时，无法对 `this` 进行绑定，即传入的第一个参数被忽略：

### 短路运算 ###

下例中 `a` 为真值，就已经知道结果了就不会再判断 `f` 的值了。

let a = true,f = false;
    console.log(a || f);

同理当 f 值为假时，就已经可以判断 && 的结果了，就没有判断 a 的必要了。

let a = true,f = false;
    console.log(f && a);

使用短路特性赋值

let sex = prompt("你的性别是？") || "保密";
    console.log(sex);

![在这里插入图片描述][3aae8bd5a5cc4a2dad1cda761b1b83dd.gif_pic_center]  
当 `opt.url` 没有值时，使用短路特性设置 `url` 的值

let opt = {
        
        url: ''
    };
    
    function getUrl(opt) {
        
        opt.url = 'https://wgchen.blog.csdn.net';
    }
    
    opt.url || getUrl(opt);
    console.log(opt.url);

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

#### 实例操作 ####

下面的例子在用户输入表单项并接收协议后才可提交

<form action="https://www.houdunren.com" id="form">
        用户名: <input type="text" name="username" />
        <hr />
        <input type="checkbox" name="copyright" /> 接收协议
        <hr />
        <input type="submit" />
    </form>
    
    <script>
        function query(el) {
        
            return document.querySelector(el);
        }
        query("#form").addEventListener("submit", function (event) {
        
            let username = query('input[name="username"]').value;
            let copyright = query('input[name="copyright"]').checked;
            
            console.log(!!username);
    
            if (!username || copyright === false) {
        
                alert("请填写用户名并接受协议");
                event.preventDefault();
            }
        });
    </script>

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

#### HTML DOM `prompt()` 方法 ####

定义和用法  
`prompt()` 方法用于显示可提示用户进行输入的对话框。

语法

prompt(text,defaultText)

<table> 
 <tbody> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>text</td> 
   <td>可选。要在对话框中显示的纯文本（而不是 HTML 格式的文本）。</td> 
  </tr> 
  <tr> 
   <td>defaultText</td> 
   <td>可选。默认的输入文本。</td> 
  </tr> 
 </tbody> 
</table>

说明  
如果用户单击提示框的取消按钮，则返回 null。如果用户单击确认按钮，则返回输入字段当前显示的文本。

在用户点击确定按钮或取消按钮把对话框关闭之前，它将阻止用户对浏览器的所有输入。在调用 prompt() 时，将暂停对 JavaScript 代码的执行，在用户作出响应之前，不会执行下一条语句。

<html>
    <head>
    <script type="text/javascript">
    function disp_prompt()
    {
        
      var name=prompt("Please enter your name","")
      if (name!=null && name!="")
        {
        
        document.write("Hello " + name + "!")
        }
    }
    </script>
    </head>
    <body>
    
    <input type="button" onclick="disp_prompt()"
    value="Display a prompt box" />
    
    </body>
    </html>

#### HTML DOM `addEventListener()` 方法 ####

<p>该实例使用 addEventListener() 方法来向按钮添加点击事件。</p>
    <button id="myBtn">点我</button>
    <p id="demo"></p>
    
    <script>
    document.getElementById("myBtn").addEventListener("click", function()
    {
        
        document.getElementById("demo").innerHTML = "Hello World";
    });
    </script>

定义和用法  
addEventListener() 方法用于向指定元素添加事件句柄。

提示： 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。

语法  
`element.addEventListener(event, function, useCapture)`

<table> 
 <tbody> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td><em>event</em></td> 
   <td>必须。字符串，指定事件名。<br><br><strong>注意:</strong> 不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。 <br><br><strong>提示：</strong> 所有 HTML DOM 事件，可以查看我们完整的 <a rel="nofollow">HTML DOM Event 对象参考手册</a>。</td> 
  </tr> 
  <tr> 
   <td><em>function</em></td> 
   <td>必须。指定要事件触发时执行的函数。 <br><br>当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。</td> 
  </tr> 
  <tr> 
   <td><em>useCapture</em></td> 
   <td> 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。<br><br>可能值: 
    <ul> 
     <li>true - 事件句柄在捕获阶段执行</li> 
     <li>false- false- 默认。事件句柄在冒泡阶段执行</li> 
    </ul> </td> 
  </tr> 
 </tbody> 
</table>

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>wgchen</title>
        <style>
            div {
        
                background-color: coral;
                border: 1px solid;
                padding: 50px;
            }
        </style>
    </head>
    
    <body>
    
        <p>该实例演示了在添加事件监听时冒泡与捕获阶段的不同。</p>
        <div id="myDiv">
            <p id="myP">点击该段落， 我是冒泡</p>
        </div><br>
        <div id="myDiv2">
            <p id="myP2">点击该段落， 我是捕获</p>
        </div>
        <script>
            document.getElementById("myP").addEventListener("click", function () {
        
                alert("你点击了 P 元素!");
            }, false);
            document.getElementById("myDiv").addEventListener("click", function () {
        
                alert("你点击了 DIV 元素!");
            }, false);
            document.getElementById("myP2").addEventListener("click", function () {
        
                alert("你点击了 P 元素!");
            }, true);
            document.getElementById("myDiv2").addEventListener("click", function () {
        
                alert("你点击了 DIV 元素!");
            }, true);
        </script>
    
    </body>
    
    </html>

![在这里插入图片描述][3905d59c22794ae2bf50f0750053601a.gif_pic_center]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/f0b2f2807b0f43dba2cbb5fabc375dbe.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_16_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/32b8725b0d134c63b1377f017dad2540.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_16,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_18_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/04c72bf6c1d04b30af60243557f195ce.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_18,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_16_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/fe3f1a63939e46f384c7618edc75f566.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_16,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_18_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/444fc77bca7649aaa46acd7822d660e9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_18,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/6895a487b28b4f469584bf094def7e3b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_17_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/148fc7cd25fd4a14963c0f2c7cac4d52.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_17,color_FFFFFF,t_70,g_se,x_16
[d93d503971e0410896601ede4f8dba27.png]: https://img-blog.csdnimg.cn/d93d503971e0410896601ede4f8dba27.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/c22c458a0d964bedbd8652d802eb63fc.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[d2a088df77104fbdb7d0bde6ee04967d.gif_pic_center]: https://img-blog.csdnimg.cn/d2a088df77104fbdb7d0bde6ee04967d.gif#pic_center
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/52af88cc1cf44b0f9f8429f178560334.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/5bab7d73f0b04fceb89b95eb1fcc2941.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 5]: https://img-blog.csdnimg.cn/87d18970487f47e1ab1a87c3a87f732f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 6]: https://img-blog.csdnimg.cn/e7d8837851b54bca9a36f48a15e078fe.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 7]: https://img-blog.csdnimg.cn/72e5a9e4741a424685eb2777585c7ddd.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[58e86d701b2e4e51983f9b111157e306.png]: https://img-blog.csdnimg.cn/58e86d701b2e4e51983f9b111157e306.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 8]: https://img-blog.csdnimg.cn/83c1fd00aa36418ca8d57ff016a2f600.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 9]: https://img-blog.csdnimg.cn/ff3173eabbe8494abfabc2e7a972af34.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[3aae8bd5a5cc4a2dad1cda761b1b83dd.gif_pic_center]: https://img-blog.csdnimg.cn/3aae8bd5a5cc4a2dad1cda761b1b83dd.gif#pic_center
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 10]: https://img-blog.csdnimg.cn/72c138372d6a443e834e9ed9d2a0b7f3.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 11]: https://img-blog.csdnimg.cn/353a34c227064bc8b1143d2a6bd98283.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[3905d59c22794ae2bf50f0750053601a.gif_pic_center]: https://img-blog.csdnimg.cn/3905d59c22794ae2bf50f0750053601a.gif#pic_center