JavaScript 索引、关联、对象数组增删改查循环

- 日理万妓 2023-10-06 22:20 27阅读 0赞

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

*  索引数组
 *   *  增
     *  删
     *  改
     *  查
     *  循环
 *  关联数组
 *   *  增
     *  循环
 *  对象
 *   *  增
     *  删
     *  改
     *  查
     *  循环
 *  JavaScript中数组元素删除
 *   *  1、length
     *  2、delete 关键字
     *  3、栈方法
     *  4、队列方法
     *  5、操作方法
     *  6、迭代方法
     *  7、原型方法
 *  reverse 将数组反序
 *  类数组对象转换成数组
 *   *  slice() 方法可从已有的数组中返回选定的元素
     *  Array.from() 类数组转换为数组
     *  扩展运算符
     *  jquery 的 $.makeArray()
 *  JavaScript数组常用方法
 *   *  includes() 判断一个数组是否包含一个指定的值
     *  fill() 固定值填充一个数组
     *  find() 返回数组中满足提供的测试函数的第一个元素的值
     *  findIndex() 返回数组中满足提供的测试函数的第一个元素的索引
     *  Array.of() 将一组值转变为数组，参数是要转换成数组的值，返回值是新的数组实例
     *  Array.from() 类数组转换为数组
     *  reduce 为数组中的每一个元素依次执行回调函数
     *   *  注意：如果这个数组为空，运用 reduce 是什么情况 ？
         *  reduce 的简单用法
         *  计算数组中每个元素出现的次数
         *  数组去重
         *  将二维数组转化为一维
         *  将多维数组转化为一维
         *  对象里的属性求和
 *  es5中新增了5个迭代方法
 *   *  forEach() 遍历数组
     *  map 方法遍历加工数组
     *  filter 方法遍历过滤数组
     *  some 方法检测数组中是否有元素（some）满足条件
     *  every 方法检测数组中是否所有（every）元素满足条件
     *  splice 修改数组，既删除，又添加
     *  concat 将值或者数组拼接成新数组
     *   *  1、concat 拼接数组或者值
         *  2、concat 做数组的深度拷贝
     *  join 将一个数组（或一个类数组对象）的所有元素连接成一个字符串
     *  const 声明常量的本质
     *  JSON.stringify() 和 JSON.parse()
     *   *  1、判断数组是否包含某对象，或者判断对象是否相等
         *  2、localStorage/sessionStorage可以存储对象
     *  数组遍历的练习
     *  对象的小实例
     *  对象 json 写法
     *  for 杨辉三角
 *  查找数组元素位置
 *   *  indexOf() 方法查找元素在数组中出现的第一个位置
     *  lastIndexOf() 方法找到指定元素在数组中的最后一个的索引
 *  NaN的相等性判断
 *  如何使用unicode编码

## 索引数组 ##

//1、索引数组
    let arr=[1,2,3,4,5];
    console.log(arr);

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

### 增 ###

let arr=[1,2,3,4,5];
    arr.push(10);
    arr[11]=33;
    console.log(arr);

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_9_color_FFFFFF_t_70_g_se_x_16]

### 删 ###

let arr=[1,2,3,4,5];
    delete arr[1];
    console.log(arr);

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

### 改 ###

let arr=[1,2,3,4,5];
    arr[2]=99;
    console.log(arr);

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

### 查 ###

let arr=[1,2,3,4,5];
    console.log(arr[0]); // 1

### 循环 ###

let arr=[1,2,3,4,5];
    for(let i=0;i<=arr.length-1;i++){
        
        console.log(i,arr[i]);
    }

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

## 关联数组 ##

let arr=[1,2,3,4,5];
    arr["name"]="孙悟空";
    arr["age"]="18";

### 增 ###

let arr=[1,2,3,4,5];
    arr["name"]="孙悟空";
    arr["age"]="18";
    
    arr['a']=33;
    console.log(arr);

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_11_color_FFFFFF_t_70_g_se_x_16]

### 循环 ###

let arr=[1,2,3,4,5];
    arr["name"]="孙悟空";
    arr["age"]="18";
    arr['a']=33;
    
    for(let i in arr){
        
        console.log(i,arr[i]);
    }

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

let arr=[1,2,3,4,5];
    arr["name"]="孙悟空";
    arr["age"]="18";
    arr['a']=33;
    console.log(arr.length); // 5

let arr=[1,2,3,4,5];
    arr["name"]="孙悟空";
    arr["age"]="18";
    arr['a']=33;
    
    //只能获取索引数组部分
    for(let i=0;i<=arr.length-1;i++){
        
        console.log(i,arr[i]);
    }

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

## 对象 ##

let obj={
        name:'孙悟空',age:18};
    console.log(obj);

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_10_color_FFFFFF_t_70_g_se_x_16]

### 增 ###

let obj={
        name:'孙悟空',age:18};
    obj["aa"]="bb";
    console.log(obj);

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

### 删 ###

let obj={
        name:'孙悟空',age:18};
    delete  obj["name"];   
    console.log(obj);

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_10_color_FFFFFF_t_70_g_se_x_16 1]

### 改 ###

let obj={
        name:'孙悟空',age:18};
    obj["age"]=9999;
    console.log(obj);

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_10_color_FFFFFF_t_70_g_se_x_16 2]

### 查 ###

let obj={
        name:'孙悟空',age:18};
    console.log(obj["age"]); // 18

### 循环 ###

let obj={
        name:'孙悟空',age:18};
    
    for(let i in obj){
        
        console.log(i,obj[i]);
    }

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

## JavaScript中数组元素删除 ##

操作数组的 length 属性可以直接删除元素，用 delete 可以将元素置为 undefined。

在JavaScript中，除了Object之外，Array类型恐怕就是最常用的类型了。  
与其他语言的数组有着很大的区别，JavaScript中的Array非常灵活。  
今天我就来总结了一下JavaScript中Array删除的方法。

大致的分类可以分为如下几类：

1、length  
2、delete  
3、栈方法  
4、队列方法  
5、操作方法  
6、迭代方法  
7、原型方法

### 1、length ###

JavaScript 中 Array 的 length 属性非常有特点一一它不是只读的。  
因此，通过设置这个属性可以从数组的末尾移除项或添加新项，请看下面例子：

var colors = ["red", "blue", "grey"];   //创建一个包含3个字符串的数组
    colors.length = 2;
    console.log(colors[2]);  //undefined
    console.log(colors);

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

### 2、delete 关键字 ###

var arr = [1, 2, 3, 4];
    delete arr[0];
     
    console.log(arr);   //[undefined, 2, 3, 4]

可以看出来，delete 删除之后数组长度不变，只是被删除元素被置为 undefined 了。

### 3、栈方法 ###

var colors = ["red", "blue", "grey"];
    var item = colors.pop();
    
    console.log(item);      //"grey"
    console.log(colors.length);    //2

可以看出，在调用 Pop 方法时，数组返回最后一项，即 ”grey”，数组的元素也仅剩两项。

### 4、队列方法 ###

队列数据结构的访问规则是FIFO（先进先出），

队列在列表的末端添加项，从列表的前端移除项，使用 shift 方法，它能够移除数组中的第一个项并返回该项，并且数组的长度减 1。

var colors = ["red", "blue", "grey"];
    var item = colors.shift();
    
    console.log(item);      //"red"
    console.log(colors.length);    //2

### 5、操作方法 ###

splice() 恐怕要算最强大的数组方法了，  
他的用法有很多种，在此只介绍删除数组元素的方法。

在删除数组元素的时候，它可以删除任意数量的项，只需要指定2个参数：要删除的第一项的位置和要删除的项数，例如 splice(0, 2) 会删除数组中的前两项。

var colors = ["red", "blue", "grey"];
    var item = colors.splice(0, 1);
    
    console.log(item);      //"red"
    console.log(colors);    //["blue", "grey"]

### 6、迭代方法 ###

所谓的迭代方法就是用循环迭代数组元素发现符合要删除的项则删除，用的最多的地方可能是数组中的元素为对象的时候，根据对象的属性例如ID等等来删除数组元素。

下面介绍两种方法：

第一种用最常见的 ForEach 循环来对比元素找到之后将其删除：

var colors = ["red", "blue", "grey"];
    
    colors.forEach(function(item, index, arr) {
        
        if(item == "red") {
        
            arr.splice(index, 1);
        }
    });
    
    console.log(colors);

![在这里插入图片描述][4363e774e1e4454c861b44450fa405bb.png]  
第二种我们用循环中的 `filter` 方法：

var colors = ["red", "blue", "grey"];
     
    colors = colors.filter(function(item) {
        
      return item != "red"
    });
    
    console.log(colors);    //["blue", "grey"]

![在这里插入图片描述][a385c3da8e0e4146b662a3c0635abcbf.png]  
代码很简单，找出元素不是 ”red” 的项数返回给 colors（其实是得到了一个新的数组），从而达到删除的作用。

### 7、原型方法 ###

通过在 Array 的原型上添加方法来达到删除的目的：

Array.prototype.remove = function (dx) {
        
    
      if (isNaN(dx) || dx > this.length) {
        
        return false;
      }
    
      for (var i = 0, n = 0; i < this.length; i++) {
        
        if (this[i] != this[dx]) {
        
          this[n++] = this[i];
        }
      }
      this.length -= 1;
    };
    
    var colors = ["red", "blue", "grey"];
    colors.remove(1);
    console.log(colors); //["red", "grey"]

![在这里插入图片描述][4b1a369e9c004138b8c05e077381021a.png]  
在此把删除方法添加给了Array 的原型对象，则在此环境中的所有 Array 对象都可以使用该方法。

尽管可以这么做，但是我们不推荐在产品化的程序中来修改原生对象的原型。

道理很简单，如果因某个实现中缺少某个方法，就在原生对象的原型中添加这个方法，那么当在另一个支持该方法的实现中运行代码时，就可能导致命名冲突。

而且这样做可能会意外的导致重写原生方法。

## reverse 将数组反序 ##

reverse 方法的作用是将数组反序，不需要参数，返回值是反序的数组，影响原数组，并且返回值指向原数组。

let arr=[1,2,3];
    console.log(arr);
    
    let new_arr=arr.reverse();
    console.log(arr);
    console.log(new_arr);

![在这里插入图片描述][71207fc2ba0a4ba18ee63949b13609b4.png]  
1 作用：将数组反序  
2 参数：不需要参数  
3 返回值：反序的数组，指向原数组  
4 是否影响原数组：影响

## 类数组对象转换成数组 ##

### slice() 方法可从已有的数组中返回选定的元素 ###

最经典的方法，使用Array的slice方法，此方法如果不传参数的话会返回原数组的一个拷贝，因此可以用此方法转换类数组到数组；

function f1() {
        
        console.log(arguments);
        //console.log(arguments instanceof Array);
        //console.log(arguments instanceof Object);
    
        //console.log([]);
        // let arr = Array.prototype.slice.call(arguments);
        // console.log(arr);
        let arr1 = [].slice.apply(arguments);
        console.log(arr1);
    }
    f1(1,32,43,4);

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_14_color_FFFFFF_t_70_g_se_x_16]

### Array.from() 类数组转换为数组 ###

是ES6中的方法，用于将类数组转换为数组。  
只要有length属性的对象，都可以应用此方法转换成数组。

function f1() {
        
        console.log(arguments);
    
        let arr = Array.from(arguments);
        console.log(arr);
    }
    f1(1,32,43,4);

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_14_color_FFFFFF_t_70_g_se_x_16 1]

### 扩展运算符 ###

function f1() {
        
        console.log(arguments);
    
        //1,32,43,4
        console.log(...arguments);
        let arr = [...arguments];
        console.log(arr);
    }
    f1(1,32,43,4);

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_14_color_FFFFFF_t_70_g_se_x_16 2]

### jquery 的 $.makeArray() ###

jQuery的此方法可以将类数组对象转化为真正的数组

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_14_color_FFFFFF_t_70_g_se_x_16 3]

## JavaScript数组常用方法 ##

### includes() 判断一个数组是否包含一个指定的值 ###

includes() 方法用来判断一个数组是否包含一个指定的值，如果包含则返回 true，否则返回false。

参数是必带的 valueToFind，和可选的 fromIndex。includes() 方法和 indexOf 方法有点像，不同之处是indexOf方法是返回索引。

作用：  
includes() 方法用来判断一个数组是否包含一个指定的值，如果包含则返回 true，否则返回false。

includes 返回布尔值（利于 if 条件判断），indexOf 返回数值。

let arr=[23,43,5,43,2,1,32];
    let bool_val=arr.includes(43);
    console.log(bool_val); // true

let arr=[23,43,5,43,2,1,32];
    let bool_val=arr.includes(43,20);
    console.log(bool_val); // false

(function() {
        
        console.log([].includes.call(arguments, 'a')); // true
        console.log([].includes.call(arguments, 'd')); // false
    })('a','b','c');

### fill() 固定值填充一个数组 ###

fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。参数有必带参数value，可选参数起始索引和终止索引，返回值是修改后的数组，影响原数组

作用：fill()方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

参数：必带参数value（用来填充数组元素的值）、可选参数start（起始索引）和end（终止索引）

返回值：修改后的数组。  
是否修改原数组：影响原数组

let arr=[1,2,3,5,6,7,8];
    
    //let new_arr=arr.fill(4);
    //let new_arr=arr.fill(4,0,2);
    
    let new_arr=arr.fill(4,-5,-1);
    console.log(arr);
    console.log(new_arr);

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

### find() 返回数组中满足提供的测试函数的第一个元素的值 ###

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。参数是回调函数

作用：find() 方法返回数组中满足提供的测试函数的第一个元素的值。

参数：回调函数（回调函数参数必带element（当前元素）、可选index（当前元素下标）、可选array（当前数组））

返回值：数组中第一个满足所提供测试函数的元素的值，否则返回 undefined。

let arr=[12,32,43,2,4,11,55,12];
    let val=arr.find(function (ele,index) {
        
      return ele > 32;
    });
    console.log(val); // 43

### findIndex() 返回数组中满足提供的测试函数的第一个元素的索引 ###

作用：findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。

参数：回调函数（回调函数参数必带 element（当前元素）、可选 index（当前元素下标）、可选array（当前数组））

返回值：数组中通过提供测试函数的第一个元素的索引。否则，返回 -1

let arr=[12,32,43,2,4,11,55,12];
    
    let val=arr.findIndex(function (ele,index) {
        
      return ele>32;
    });
    
    console.log(val); // 2

### Array.of() 将一组值转变为数组，参数是要转换成数组的值，返回值是新的数组实例 ###

作用：将一组值转变为数组  
参数：要转换成数组的值，elementN  
返回值：新的数组实例

let arr=Array.of(1,3,'123',true);
    console.log(arr); // [1, 3, "123", true]

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

### Array.from() 类数组转换为数组 ###

Array.from() 方法的作用是将类数组或可迭代对象转换为数组，比如 String、Map、伪数组等，必带的参数是 arrayLike（想要转换成数组的伪数组对象或可迭代对象），Array.from()方法的返回值是新的数组实例，不影响原结构。

作用：将类数组或可迭代对象转换为数组  
参数：必带的 arrayLike（想要转换成数组的伪数组对象或可迭代对象）  
返回值：新的数组实例  
是否影响原结构：不影响

1、从 String 生成数组

let arr1=Array.from('foo');
    console.log(arr1);// [ "f", "o", "o" ]

![在这里插入图片描述][e309711ce4ec4c7e9543567f4c890eb0.png]  
2、从 Set 生成数组

const set = new Set(['foo', 'bar', 'baz', 'foo']);
    let arr2=Array.from(set);
    console.log(arr2);// [ "foo", "bar", "baz" ]

![在这里插入图片描述][4778ac52fcdc426c8b50eb08224062ff.png]  
3、从 Map 生成数组

const map = new Map([[1, 2], [2, 4], [4, 8]]);
    console.log(map);// {1 => 2, 2 => 4, 4 => 8}
    
    let arr3=Array.from(map);
    console.log(arr3);// [[1, 2], [2, 4], [4, 8]]

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_9_color_FFFFFF_t_70_g_se_x_16 1]

const mapper = new Map([['1', 'a'], ['2', 'b']]);
    console.log(mapper);// {"1" => "a", "2" => "b"}
    
    let arr4=Array.from(mapper.values());
    console.log(arr4);// ['a', 'b'];

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_8_color_FFFFFF_t_70_g_se_x_16]

let arr5=Array.from(mapper.keys());
    console.log(arr5);// ['1', '2'];

从类数组对象（arguments）生成数组

function f() {
        
    	console.log(arguments);
    	console.log(Array.from(arguments)); // [ 1, 2, 3 ]
    }
    
    console.log(Array);
    console.log(Array.from);
    console.log(Array.prototype);
    console.log([]);
    
    f(1, 2, 3);

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

### reduce 为数组中的每一个元素依次执行回调函数 ###

reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：

初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。

callback （执行数组中每个值的函数，包含四个参数）
    
    1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
    2、currentValue （数组中当前被处理的元素）
    3、index （当前元素在数组中的索引）
    4、array （调用 reduce 的数组）
    
    initialValue （作为第一次调用 callback 的第一个参数。）

var arr = [1, 2, 3, 4];
    
    var sum = arr.reduce(function(prev, cur, index, arr) {
        
        console.log(prev, cur, index);
        return prev + cur;
    })
    
    console.log(arr, sum);

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

var  arr = [1, 2, 3, 4];
    
    var sum = arr.reduce(function(prev, cur, index, arr) {
        
        console.log(prev, cur, index);
        return prev + cur;
    }，0) //注意这里设置了初始值
    
    console.log(arr, sum);

打印结果：

0 1 0
    1 2 1
    3 3 2
    6 4 3
    [1, 2, 3, 4] 10

这个例子 index 是从 0 开始的，第一次的 prev 的值是我们设置的初始值 0，数组长度是 4，reduce 函数循环 4 次。

结论：如果没有提供 initialValue，reduce 会从索引 1 的地方开始执行 callback 方法，跳过第一个索引。

如果提供 initialValue，从索引0开始。

#### 注意：如果这个数组为空，运用 reduce 是什么情况 ？ ####

var  arr = [];
    var sum = arr.reduce(function(prev, cur, index, arr) {
        
        console.log(prev, cur, index);
        return prev + cur;
    })
    //报错，"TypeError: Reduce of empty array with no initial value"

但是要是我们设置了初始值就不会报错，如下：

var  arr = [];
    
    var sum = arr.reduce(function(prev, cur, index, arr) {
        
        console.log(prev, cur, index);
        return prev + cur;
    }，0)
    
    console.log(arr, sum); // [] 0

#### reduce 的简单用法 ####

当然最简单的就是我们常用的数组求和，求乘积了。

var  arr = [1, 2, 3, 4];
    var sum = arr.reduce((x,y)=>x+y)
    var mul = arr.reduce((x,y)=>x*y)
    
    console.log( sum ); //求和，10
    console.log( mul ); //求乘积，24

#### 计算数组中每个元素出现的次数 ####

let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
    
    let nameNum = names.reduce((pre,cur)=>{
        
      if(cur in pre){
        
        pre[cur]++
      }else{
        
        pre[cur] = 1 
      }
      return pre
    },{
        })
    
    console.log(nameNum); // {Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_10_color_FFFFFF_t_70_g_se_x_16 3]

#### 数组去重 ####

let arr = [1,2,3,4,4,1]
    
    let newArr = arr.reduce((pre,cur)=>{
        
        if(!pre.includes(cur)){
        
          return pre.concat(cur)
        }else{
        
          return pre
        }
    },[])
    
    console.log(newArr);// [1, 2, 3, 4]

#### 将二维数组转化为一维 ####

let arr = [[0, 1], [2, 3], [4, 5]]
    
    let newArr = arr.reduce((pre,cur)=>{
        
        return pre.concat(cur)
    },[])
    
    console.log(newArr); // [0, 1, 2, 3, 4, 5]

#### 将多维数组转化为一维 ####

let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
    
    const newArr = function(arr){
        
       return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur) ? newArr(cur) : cur),[])
    }
    
    console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]

#### 对象里的属性求和 ####

## es5中新增了5个迭代方法 ##

### forEach() 遍历数组 ###

作用：遍历数组  
参数：回到函数，arr.forEach(callback(currentValue \[, index \[, array\]\]))  
返回值：无（undefined）  
是否影响原数组：不影响

let arr=[5,54,12,4,1,23,111];
    arr.forEach(function (value,index,array) {
        
        console.log(value);
        console.log(index);
        console.log(array);
    });

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_9_color_FFFFFF_t_70_g_se_x_16 2]  
forEach() 方法遍历 非连续数组

let arr=[];
    	arr[1]='a';
    	arr[5]='g';
    	arr[10]='h';
    	arr.forEach(function (value,index) {
        
    	    console.log(index);
    	    console.log(value);
    	});

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

### map 方法遍历加工数组 ###

let arr=[5,54,12,4,1,23,111];
    let new_arr=arr.map(function (value,index,array) {
        
        // console.log(value);
        // console.log(index);
        // console.log(array);
        return value+1000;
    });
    
    console.log(arr);
    console.log(new_arr);

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

### filter 方法遍历过滤数组 ###

let arr=[5,54,12,4,1,23,111];
    let new_arr=arr.filter(function (value,index,array) {
        
        return value>10;
    });
    
    console.log(arr);
    console.log(new_arr);

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

### some 方法检测数组中是否有元素（some）满足条件 ###

let arr=[5,54,12,4,1,23,111];
    let bool_val=arr.some(function (value,index,array) {
        
        return value>10;
    });
    
    console.log(arr);
    console.log(bool_val);

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

### every 方法检测数组中是否所有（every）元素满足条件 ###

let arr=[5,54,12,4,1,23,111];
    let bool_val=arr.every(function (value,index,array) {
        
        //return value>10;
        return value<1000;
    });
    
    console.log(arr);
    console.log(bool_val);

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

### splice 修改数组，既删除，又添加 ###

作用：从数组中删除元素、插入元素、或者同时完成这两种操作.

参数：  
必带参数start（指定修改的开始位置，可负数），可选参数 deleteCount，可选参数 item1, item2,…（表示要添加的元素）

返回值：被删除的元素组成的数组  
是否影响原数组：肯定影响

let arr=[1,2,3,4,5];
    let delete_arr=arr.splice(1,2,7,8);//在第1号位置删除两个，然后添加7和8
    
    console.log(delete_arr);// [2, 3]
    console.log(arr);// [1, 7, 8, 4, 5]

![在这里插入图片描述][e2e2f8ac7de44478a82597e1200f05ce.png]  
1、splice从数组中删除元素

let arr=[1,2,3,4,5];
    let delete_arr=arr.splice(1,2);//从1号位置删2个
    
    console.log(delete_arr);// [2, 3]
    console.log(arr);// [1, 4, 5]

![在这里插入图片描述][3bf04c4fef004444bf79b8eead04aac3.png]  
start 为负数，负数表示从倒数的第几个开始

let arr=[1,2,3,4,5];
    let delete_arr=arr.splice(-3,2);//从1号位置删2个
    
    console.log(delete_arr);// [3, 4]
    console.log(arr);// [1, 2, 5]
    
    let arr=[1,2,3,4,5];
    let delete_arr=arr.splice(-2,0,7,8);//在倒数第二个位置添加7和8
    
    console.log(delete_arr);// []
    console.log(arr);// [1, 2, 3, 7, 8, 4, 5]

splice向数组中添加元素

let arr=[1,2,3,4,5];
    let delete_arr=arr.splice(0,0,7,8);//在第 0 号位置添加7和 8
    
    console.log(delete_arr);// []
    console.log(arr);// [7, 8, 1, 2, 3, 4, 5]

删除数据的个数和添加数组的个数不一样

let arr=[1,2,3,4,5];
    let delete_arr=arr.splice(1,1,7,8,9);//在第1号位置删除1个，然后添加7和8和9
    
    console.log(delete_arr);// [2]
    console.log(arr);// [1, 7, 8, 9, 3, 4, 5]

### concat 将值或者数组拼接成新数组 ###

concat 方法的作用是将值或者数组拼接成新数组，参数是0到n个值或数组，返回值是合并好的新数组，并且不会影响原数组。

作用：将值或者数组拼接成新数组  
参数：值或者数组（0个到n个）  
返回值：返回合并好的新数组  
是否影响原数组：不会改变原数组

#### 1、concat 拼接数组或者值 ####

let arr1=[1,2,3];
    let val1=6;
    let arr2=[7,8,9];
    let val2=11;
    
    //参数为值形式
    let new_arr1=arr1.concat(val1);
    console.log(new_arr1);

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

let arr1=[1,2,3];
    let val1=6;
    let arr2=[7,8,9];
    let val2=11;
    
    // //参数为数组形式
    let new_arr2=arr1.concat(arr2);
    console.log(new_arr2);

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

let arr1=[1,2,3];
    let val1=6;
    let arr2=[7,8,9];
    let val2=11;
    
    let new_arr3=arr1.concat(val1,arr2,val2);
    console.log(new_arr3);

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_9_color_FFFFFF_t_70_g_se_x_16 3]

#### 2、concat 做数组的深度拷贝 ####

浅度拷贝：  
复制一层对象的属性，并不包括对象里面的为引用类型的数据，当改变拷贝的对象里面的引用类型时，源对象也会改变。

深度拷贝：  
重新开辟一个内存空间，需要递归拷贝对象里的引用，直到子属性都为基本类型。两个对象对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性。

浅拷贝

let arr1=[1,2,3];
    let arr2=arr1; //浅拷贝
    arr2.unshift(4,5,6);
    
    console.log(arr2);
    console.log(arr1);

![在这里插入图片描述][831c584fe0724c88805f084ec56a9adf.png]  
深拷贝

let arr1=[1,2,3];
    let arr2=arr1.concat();//深拷贝
    arr2.unshift(4,5,6);
    
    console.log(arr2);
    console.log(arr1);

![在这里插入图片描述][549e94921aeb43e38e53277fe1aff366.png]  
concat 做深度拷贝的不足

当数组内部的值是引用类型例如 Array、Object 时，还是浅拷贝。

let arr1=[1,2,3,{
        name:'悟空',age:13}];
    let arr2=arr1.concat();//深拷贝
    arr2.push(4,5,6);
    
    console.log(arr2);
    console.log(arr1);
    
    arr2[3]['name']='悟净';
    console.log(arr2);
    console.log(arr1);

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_9_color_FFFFFF_t_70_g_se_x_16 4]

### join 将一个数组（或一个类数组对象）的所有元素连接成一个字符串 ###

join 方法的作用是将一个数组（或一个类数组对象）的所有元素连接成一个字符串，参数是分割字符，返回值是连接号的字符串，不影响原数组。

作用：将一个数组（或一个类数组对象）的所有元素连接成一个字符串  
参数：连接数值的分割参数，如果参数为空则是用,（逗号）连接  
返回值：连接好的字符串  
是否影响原数组：不影响

let arr=[1,2,3];
    let arr_str=arr.join("-");
    console.log(arr_str);

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

let arr=[1,2,3];
    let arr_str=arr.join();
    
    console.log(arr);
    console.log(arr_str);
    console.log(typeof arr_str);

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

let arr=[1,2,3];
    
    //短线
    let arr_str=arr.join("-");
    console.log(arr_str);

let arr=[1,2,3];
    
    //空字符串
    let arr_str=arr.join("");
    console.log(arr_str);

连接类数组对象

function f(a, b, c) {
        
        var s = Array.prototype.join.call(arguments);
        console.log(s); // '1,a,true'
        console.log(typeof s);
    }
    f(1, 'a', true);

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

### const 声明常量的本质 ###

1、const 实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。

2、但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指针，const 只能保证这个指针是固定的，至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。

const foo = {
        };
    
    // 为 foo 添加一个属性，可以成功
    foo.prop = 123;
    foo.prop // 123
    
    // 将 foo 指向另一个对象，就会报错
    foo = {
        }; // TypeError: "foo" is read-only

上面代码中，常量 foo 储存的是一个地址，这个地址指向一个对象。

不可变的只是这个地址，即不能把 foo 指向另一个地址，但对象本身是可变的，所以依然可以为其添加新属性。

下面是另一个例子。

const a = [];
    a.push('Hello'); // 可执行
    a.length = 0;    // 可执行
    a = ['Dave'];    // 报错

上面代码中，常量 a 是一个数组，这个数组本身是可写的，但是如果将另一个数组赋值给a，就会报错。

如果真的想将对象冻结，应该使用 Object.freeze 方法。

const foo = Object.freeze({
        });
    
    // 常规模式时，下面一行不起作用；
    // 严格模式时，该行会报错
    foo.prop = 123;

上面代码中，常量 foo 指向一个冻结的对象，所以添加新属性不起作用，严格模式时还会报错。

除了将对象本身冻结，对象的属性也应该冻结。

下面是一个将对象彻底冻结的函数。

### JSON.stringify() 和 JSON.parse() ###

JSON.stringify() 的作用是将 JavaScript 对象转换为 JSON 字符串，而 JSON.parse() 可以将JSON字符串转为一个对象。

`localStorage/sessionStorage` 默认只能存储字符串，而实际开发中，我们往往需要存储的数据多为对象类型，那么这里我们就可以在存储时利用 json.stringify() 将对象转为字符串，而在取缓存时，只需配合 json.parse() 转回对象即可。

let arr = [1,2,3];
    JSON.stringify(arr);//'[1,2,3]'
    typeof JSON.stringify(arr);//string
    
    let string = '[1,2,3]';
    console.log(JSON.parse(string))//[1,2,3]
    console.log(typeof JSON.parse(string))//object

在使用 JSON.parse() 需要注意一点，由于此方法是将JSON字符串转换成对象，所以你的字符串必须符合JSON格式，即键值都必须使用双引号包裹：

let a = '["1","2"]';
    let b = "['1','2']";
    console.log(JSON.parse(a));// Array [1,2]
    console.log(JSON.parse(b));// 报错

![在这里插入图片描述][66cd46769f4c4bf3b80db3f1544fab8c.png]  
上面例子中变量b就无法转换，因为格式不符合。

#### 1、判断数组是否包含某对象，或者判断对象是否相等 ####

//判断数组是否包含某对象
    let data = [
    	    {
        name:'echo'},
    	    {
        name:'听风是风'},
    	    {
        name:'天子笑'},
        ],
        val = {
        name:'天子笑'};
        
    JSON.stringify(data).indexOf(JSON.stringify(val)) !== -1;//true
    
    //判断两数组/对象是否相等
    let a = [1,2,3],
        b = [1,2,3];
    JSON.stringify(a) === JSON.stringify(b);//true

#### 2、localStorage/sessionStorage可以存储对象 ####

`localStorage/sessionStorage` 默认只能存储字符串，而实际开发中，我们往往需要存储的数据多为对象类型，那么这里我们就可以在存储时利用 `json.stringify()` 将对象转为字符串，而在取缓存时，只需配合 `json.parse()` 转回对象即可。

//存
    function setLocalStorage(key,val){
        
        window.localStorage.setItem(key,JSON.stringify(val));
    };
    
    setLocalStorage('demo',[1,55,3]);

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_20_color_FFFFFF_t_70_g_se_x_16]

//取
    function getLocalStorage(key){
        
        let val = JSON.parse(window.localStorage.getItem(key));
        return val;
    };
    
    let  a = getLocalStorage('demo');//[1,2,3]

### 数组遍历的练习 ###

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

var arr=['猪八戒','白骨精','嫦娥','孙悟空','小白龙'];
    //console.log(arr[0]);
    
    //用循环来实现数组的遍历
    for(var i=0;i<arr.length;i++){
        
        console.log(arr[i]);
    }

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

var arr=[[1,2,3],[4,5,6]];
    arr[2]=[7,8,9];
    
    console.log(arr);
    console.log(arr[0]);
    console.log(arr[0][1]);
    console.log(arr[1][0]);

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

### 对象的小实例 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>对象的小实例</title>
    </head>
    <body>
    
    <script>
        var daXiong={
        
            name:'大雄',
            gender:'男',
            number:'001',
            score:{
        
                chinese:30,
                math:30
            }
        };
        var jingXiang={
        
            name:'静香',
            gender:'女',
            number:'002',
            score:{
        
                chinese:90,
                math:90
            }
        };
        var aMeng={
        
            name:'哆啦A梦',
            gender:'男',
            number:'003',
            score:{
        
                chinese:100,
                math:80
            }
        };
        if(daXiong.score.chinese>=jingXiang.score.chinese){
        
            //说明大雄的语文成绩比较好，就让大雄和哆啦A梦比
            if(daXiong.score.chinese>=aMeng.score.chinese){
        
                console.log(daXiong);
            }else{
        
                console.log(aMeng);
            }
        }else{
        
            //说明静香的语文成绩比较好，就让静香和哆啦A梦比
            if(jingXiang.score.chinese>=aMeng.score.chinese){
        
                console.log(jingXiang);
            }else{
        
                console.log(aMeng);
            }
        }
    </script>
    </body>
    </html>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_13_color_FFFFFF_t_70_g_se_x_16]

### 对象 json 写法 ###

var zhubajie={
        
        'name':'猪八戒',
        age:999,
        pet:{
        
            name:'哮天犬',
            age:18
        }
    };
    console.log(zhubajie);

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

### for 杨辉三角 ###

for(var i=0;i<5;i++){
        
        //内层循环是控制每一行*号的个数
        for(var j=0;j<i+1;j++){
        
            document.write('*');
        }
        document.write('<br>');
        // document.write('*****<br>');
    }

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

## 查找数组元素位置 ##

indexOf() 方法的作用是在数组中找到给定元素最开始出现的位置，  
lastIndexOf() 方法是找到给定元素最后出现的位置，  
参数有必带的 searchElement（要查找的元素），  
可选的fromIndex（要查找的位置），返回值是找到的索引位置，没找到就返回 -1。

### indexOf() 方法查找元素在数组中出现的第一个位置 ###

作用：在数组中找到一个给定元素的第一个索引  
参数：必选参数searchElement（要查找的元素），可选参数fromIndex（要查找的位置）  
返回值：首个被找到的元素在数组中的索引位置; 若没有找到则返回 -1  
是否影响原数组：不影响

let arr=[2,4,5,7,6,4,3];
    let index=arr.indexOf(4);
    console.log(index);//1

指定第二个参数 fromIndex（开始查找的位置）

let arr=[2,4,5,7,6,4,3];
    let index=arr.indexOf(4,2);
    console.log(index);//5

indexOf() 方法找出指定元素出现的所有位置

var indices = [];
    var array = ['a', 'b', 'a', 'c', 'a', 'd'];
    var element = 'a';
    var idx = array.indexOf(element);
    
    while (idx != -1) {
        
        indices.push(idx);
        idx = array.indexOf(element, idx + 1);
    }
    
    console.log(indices);
    // [0, 2, 4]

### lastIndexOf() 方法找到指定元素在数组中的最后一个的索引 ###

let arr=[2,4,5,7,6,4,3];
    let index=arr.lastIndexOf(4);
    console.log(index);//5

## NaN的相等性判断 ##

NaN和任何数都不相等，包括他本身，如果想判断一个数是否为NaN，可以用 isNaN() 函数。

/*
    * NaN和任何数都不相等，包括它本身
    * isNaN()函数专门用来判断一个数是不是NaN
    */
    var a=NaN;
    var b=NaN;
    var ans=a==b;
    
    console.log('ans='+ans);
    console.log(isNaN(a));
    console.log(isNaN(b));
    console.log(isNaN('hello'));
    console.log(+'hello');

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

## 如何使用unicode编码 ##

在js中用 `\u` 四位编码使用，在html中用 `&#` 编码; 使用。

\u四位编码：
    比如 console.log("\u2620");
    
    &#编码; 
    这里的编码需要的是10进制：比如 <h1 style="font-size: 200px;">☠</h1>

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>如何使用unicode编码</title>
        <script>
            console.log('\u4EFA');
            console.log('\u2665');
        </script>
    </head>
    <body>
    
    <span style="font-size: 100px;">仺</span>
    <span style="font-size: 100px;">♥</span>
    
    </body>
    </html>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_18_color_FFFFFF_t_70_g_se_x_16]

[0ac1908179194d32a18a3c211a2aa90a.png]: https://img-blog.csdnimg.cn/0ac1908179194d32a18a3c211a2aa90a.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_9_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/194f85c217444948aa13cea42cd227aa.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_9,color_FFFFFF,t_70,g_se,x_16
[36f6ed53abd4436086acfa1462b264c1.png]: https://img-blog.csdnimg.cn/36f6ed53abd4436086acfa1462b264c1.png
[155ce4b9ab8f4b18bb8ec91d1372b50c.png]: https://img-blog.csdnimg.cn/155ce4b9ab8f4b18bb8ec91d1372b50c.png
[c4b9915acca3455284e332c686b1a37b.png]: https://img-blog.csdnimg.cn/c4b9915acca3455284e332c686b1a37b.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_11_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/627fb86cd59249d59f5b219240379a3f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_11,color_FFFFFF,t_70,g_se,x_16
[60d323ca4d2943b7803298b11d9ca3aa.png]: https://img-blog.csdnimg.cn/60d323ca4d2943b7803298b11d9ca3aa.png
[54d661f053454fc883365064316b16aa.png]: https://img-blog.csdnimg.cn/54d661f053454fc883365064316b16aa.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_10_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/597a26987df748fabca064daed5c87f5.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_10,color_FFFFFF,t_70,g_se,x_16
[1094cc6c2daa497198eae187fe13538d.png]: https://img-blog.csdnimg.cn/1094cc6c2daa497198eae187fe13538d.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_10_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/1a5d94c93182463fb35e06ed2705e65c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_10,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_10_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/25f0613285c94913937b4f55ec986009.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_10,color_FFFFFF,t_70,g_se,x_16
[1c2c728d89ba40daae0d543e90b7f5bb.png]: https://img-blog.csdnimg.cn/1c2c728d89ba40daae0d543e90b7f5bb.png
[01d0c035e2504a4cadf74a203bd96723.png]: https://img-blog.csdnimg.cn/01d0c035e2504a4cadf74a203bd96723.png
[4363e774e1e4454c861b44450fa405bb.png]: https://img-blog.csdnimg.cn/4363e774e1e4454c861b44450fa405bb.png
[a385c3da8e0e4146b662a3c0635abcbf.png]: https://img-blog.csdnimg.cn/a385c3da8e0e4146b662a3c0635abcbf.png
[4b1a369e9c004138b8c05e077381021a.png]: https://img-blog.csdnimg.cn/4b1a369e9c004138b8c05e077381021a.png
[71207fc2ba0a4ba18ee63949b13609b4.png]: https://img-blog.csdnimg.cn/71207fc2ba0a4ba18ee63949b13609b4.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_14_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/1f7d9fc42d874d0e97ef1122f9bf17ef.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_14,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_14_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/e1525d882be44878988d8df7972869e3.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_14,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_14_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/bead29b8db764ea1ab532c93cef874fe.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_14,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_14_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/d480a74e43d744219f50962a814dbb4a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_14,color_FFFFFF,t_70,g_se,x_16
[d66196d11bfa4e1cb243af40599478f0.png]: https://img-blog.csdnimg.cn/d66196d11bfa4e1cb243af40599478f0.png
[de19eb4e0faa4fe79eb358dbce2869af.png]: https://img-blog.csdnimg.cn/de19eb4e0faa4fe79eb358dbce2869af.png
[e309711ce4ec4c7e9543567f4c890eb0.png]: https://img-blog.csdnimg.cn/e309711ce4ec4c7e9543567f4c890eb0.png
[4778ac52fcdc426c8b50eb08224062ff.png]: https://img-blog.csdnimg.cn/4778ac52fcdc426c8b50eb08224062ff.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_9_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/e3747fce314f4d38a34d956f3c48d856.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_9,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_8_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/e3cea04415954cbfa43cfd2dd0944523.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_8,color_FFFFFF,t_70,g_se,x_16
[ab5913a8c9394273ba9cf9e13e9afdb3.png]: https://img-blog.csdnimg.cn/ab5913a8c9394273ba9cf9e13e9afdb3.png
[48e6a4456c804023b94be17ebd0b4b6c.png]: https://img-blog.csdnimg.cn/48e6a4456c804023b94be17ebd0b4b6c.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_10_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/a4a29b930eae442b9a8075f42698c22b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_10,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_9_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/0064cb4e0d894e49965a4e21963f3c84.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_9,color_FFFFFF,t_70,g_se,x_16
[3d2f6dda6c5b4cf5b1827d94dfcea1f9.png]: https://img-blog.csdnimg.cn/3d2f6dda6c5b4cf5b1827d94dfcea1f9.png
[4581ebd10bd64148b2dbf835ee0d30eb.png]: https://img-blog.csdnimg.cn/4581ebd10bd64148b2dbf835ee0d30eb.png
[9e0432d518664007ac5fee7006ed159f.png]: https://img-blog.csdnimg.cn/9e0432d518664007ac5fee7006ed159f.png
[728b892bb39146dbb71e8d76c2eec83b.png]: https://img-blog.csdnimg.cn/728b892bb39146dbb71e8d76c2eec83b.png
[ae9e741f85344ec29d17169be6dc2c82.png]: https://img-blog.csdnimg.cn/ae9e741f85344ec29d17169be6dc2c82.png
[e2e2f8ac7de44478a82597e1200f05ce.png]: https://img-blog.csdnimg.cn/e2e2f8ac7de44478a82597e1200f05ce.png
[3bf04c4fef004444bf79b8eead04aac3.png]: https://img-blog.csdnimg.cn/3bf04c4fef004444bf79b8eead04aac3.png
[ab71ef2c4ba547069d66a4faca40aa39.png]: https://img-blog.csdnimg.cn/ab71ef2c4ba547069d66a4faca40aa39.png
[ce51ca54eb4c426086a38c9148f2754c.png]: https://img-blog.csdnimg.cn/ce51ca54eb4c426086a38c9148f2754c.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_9_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/270ab8325de34c328b5bfd70c39dd00a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_9,color_FFFFFF,t_70,g_se,x_16
[831c584fe0724c88805f084ec56a9adf.png]: https://img-blog.csdnimg.cn/831c584fe0724c88805f084ec56a9adf.png
[549e94921aeb43e38e53277fe1aff366.png]: https://img-blog.csdnimg.cn/549e94921aeb43e38e53277fe1aff366.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_9_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/38bdab0d475d4f67a09ede5528198840.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_9,color_FFFFFF,t_70,g_se,x_16
[8e8b490763fc4458b8097c2738a690c1.png]: https://img-blog.csdnimg.cn/8e8b490763fc4458b8097c2738a690c1.png
[11ddb1211e9d4da3899edb0df32ab64b.png]: https://img-blog.csdnimg.cn/11ddb1211e9d4da3899edb0df32ab64b.png
[454cdd48d4604320afd1282d5ec42045.png]: https://img-blog.csdnimg.cn/454cdd48d4604320afd1282d5ec42045.png
[66cd46769f4c4bf3b80db3f1544fab8c.png]: https://img-blog.csdnimg.cn/66cd46769f4c4bf3b80db3f1544fab8c.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/bae3e20c96a04de187e369d1f8176ad0.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_20,color_FFFFFF,t_70,g_se,x_16
[1b5bf2066559437a8fb35e1f9a71f24f.png]: https://img-blog.csdnimg.cn/1b5bf2066559437a8fb35e1f9a71f24f.png
[deac9482b45d461e97788f6718bbe42a.png]: https://img-blog.csdnimg.cn/deac9482b45d461e97788f6718bbe42a.png
[0322bdf71a7d4da0b3af1f7894b60845.png]: https://img-blog.csdnimg.cn/0322bdf71a7d4da0b3af1f7894b60845.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_13_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/65bff64a790e4acab480e150bd25d3b2.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_13,color_FFFFFF,t_70,g_se,x_16
[e7cf7f0001e44fdbbea9f4e3df6efd5f.png]: https://img-blog.csdnimg.cn/e7cf7f0001e44fdbbea9f4e3df6efd5f.png
[c81b659c16644cdda9ec78b5b61164b1.png]: https://img-blog.csdnimg.cn/c81b659c16644cdda9ec78b5b61164b1.png
[f6f9383009874390bd623a73034f65bc.png]: https://img-blog.csdnimg.cn/f6f9383009874390bd623a73034f65bc.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_18_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/b358b9a44c6940e0a50b271bf058d52b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_18,color_FFFFFF,t_70,g_se,x_16