JS基础数组类型

红太狼 2023-10-06 21:39 14阅读 0赞

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

*  声明数组
 *   *  创建数组
     *  Array.of
     *  类型检测
 *  类型转换
 *   *  字符串转数组
     *  Array.from 将类数组转换为数组
 *  展开语法
 *   *  数组合并
     *  函数参数
     *  节点转换
 *  解构赋值
 *   *  基本使用
     *  严格模式
     *  简洁定义
     *  默认值
     *  函数参数
 *  管理数组元素
 *   *  基本使用
     *  扩展语法
     *  push 压入元素
     *  pop 从末尾弹出元素
     *  shift 从数组前面取出一个元素
     *  unshift 从数组前面添加元素
     *  fill 填充数组元素
     *  slice 从数组中截取部分元素组合成新数组
     *  splice 添加、删除、替换数组中的元素
     *  清空数组
 *  合并拆分
 *   *  join 数组连接成字符串
     *  split 将字符串分割成数组
     *  concat 连接两个或多个数组
     *  copyWithin 从数组中复制一部分到同数组中的另外位置
 *  数组查找元素
 *   *  indexOf 从前向后查找元素出现的位置
     *  lastIndexOf 从后向前查找元素出现的位置
     *  includes 查找字符串返回值是布尔类型
     *  find 方法找到后会把值返回出来
     *  findIndex 返回索引值
     *  find 原理
 *  数组排序
 *   *  reverse 反转数组顺序
     *  sort 每次使用两个值进行比较
     *  排序原理
 *  循环遍历
 *   *  for 根据数组长度循环来遍历数组
     *  forEach 使函数作用在每个数组元素上，但是没有返回值。
     *  for/in 遍历时的 key 值为数组的索引
     *  for/of 每次循环取其中的值而不是索引
 *  迭代器方法
 *   *  keys 通过迭代对象获取索引
     *  values 通过迭代对象获取值
     *  entries 返回数组所有键值对
 *  扩展方法
 *   *  every 用于递归的检测元素
     *  some 递归的检测元素
     *  filter 滤数据中元素
     *  map 映射在数组所有元素上应用函数
     *  reduce 迭代数组的所有元素
     *   *  使用 reduce 实现数组去重
         *  示例
         *  统计元素出现的次数
         *  取数组中的最大值
         *  取价格最高的商品
         *  计算购物车中的商品总价
         *  获取价格超过1万的商品名称
 *  动画案例

## 声明数组 ##

数组是多个变量值的集合，数组是Array 对象的实例，所以可以像对象一样调用方法。

### 创建数组 ###

使用对象方式创建数组

console.log(new Array(1, 'wgchen', 'willem')); // [1, 'wgchen', 'willem']

使用字面量创建是推荐的简单作法

const array = ["wgchen", "willem"];

多维数组定义

const array = [["wgchen"], ["willem"]];
    console.log(array[1][0]); // willem

数组是引用类型可以使用 `const` 声明并修改它的值

const array = ["wgchen", "willem"];
    array.push("ycc");
    console.log(array); // ['wgchen', 'willem', 'ycc']

使用原型的 length 属性可以获取数组元素数量

let hd = ["wgchen", "willem"];
    console.log(hd.length); //2

数组可以设置任何值，下面是使用索引添加数组

let hd = ["wgchen"];
    hd[1] = "willem";
    
    console.log(hd) // ['wgchen', 'willem']

下面直接设置 `3` 号数组，会将 `1/2` 索引的数组定义为空值

let hd = ["wgchen"];
    hd[3] = "willem";
    console.log(hd.length); //4
    console.log(hd); // ['wgchen', 空 ×2, 'willem']

声明多个空元素的数组

let hd = new Array(3);
    
    console.log(hd.length);
    console.log(hd);

### Array.of ###

使用 Array.of 与 new Array 不同是设置一个参数时不会创建空元素数组

let hd = Array.of(3);
    console.log(hd); //[3]
    
    hd = Array.of(1, 2, 3);
    console.log(hd); //[1, 2, 3]

### 类型检测 ###

检测变量是否为数组类型

console.log(Array.isArray([1, "wgchen", "willem"])); //true
    console.log(Array.isArray(9)); //false

## 类型转换 ##

可以将数组转换为字符串也可以将其他类型转换为数组。

### 字符串转数组 ###

大部分数据类型都可以使用.toString() 函数转换为字符串。

console.log(([1, 2, 3]).toString()); // 1,2,3

也可以使用函数 String 转换为字符串。

console.log(String([1, 2, 3]));

或使用 join 连接为字符串

console.log([1, 2, 3].join("-"));//1-2-3

### Array.from 将类数组转换为数组 ###

使用 Array.from 可将类数组转换为数组，类数组指包含 length 属性或可迭代的对象。

第一个参数为要转换的数据  
第二个参数为类似于map 函数的回调方法

let str = 'wgcehn';
    console.log(Array.from(str)); // ['w', 'g', 'c', 'e', 'h', 'n']

为对象设置 length 属性后也可以转换为数组，但要下标为数值或数值字符串

let user = {
        
      0: 'wgchen',
      '1': 18,
      length: 2
    };
    console.log(Array.from(user)); // ["wgchen", 18]

DOM元素转换为数组后来使用数组函数，  
第二个参数类似于map 函数的方法，可对数组元素执行函数处理。

<body>
        <button message="wgchen">button</button>
        <button message="willem">button</button>
    </body>
    
    <script>
        let btns = document.querySelectorAll('button');
        console.log(btns); //包含length属性
        
        Array.from(btns, (item) => {
        
            item.style.background = 'red';
        });
    </script>

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

## 展开语法 ##

使用展开语法将 NodeList 转换为数组操作

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

### 数组合并 ###

使用展开语法来合并数组相比 concat 要更简单，使用 `...` 可将数组展开为多个值。

let a = [1, 2, 3];
    let b = ['a', 'wgchen', ...a];
    console.log(b); // ['a', 'wgchen', 1, 2, 3]

### 函数参数 ###

使用展示语法可以替代 arguments 来接收任意数量的参数

function hd(...args) {
        
      console.log(args);
    }
    
    hd(1, 2, 3, "wgchen"); // [1, 2, 3, 'wgchen']

也可以用于接收部分参数

function hd(site, ...args) {
        
      console.log(site, args); // 
    }
    
    hd("wgchen", 1, 2, 3);

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

### 节点转换 ###

可以将DOM节点转为数组，下面例子不可以使用 filter 因为是节点列表

<body>
        <button message="wgchen">button</button>
        <button message="willem">button</button>
    </body>
    
    <script>
        let btns = document.querySelectorAll('button');
        btns.map((item) => {
        
            console.log(item); //TypeError: btns.filter is not a function
        })
    </script>

使用展开语法后就可以使用数据方法

学习后面章节后也可以使用原型处理

<body>
        <button message="wgchen">button</button>
        <button message="willem">button</button>
    </body>
    
    <script>
        let btns = document.querySelectorAll('button');
        Array.prototype.map.call(btns, (item) => {
        
            item.style.background = 'red';
        });
    </script>

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

## 解构赋值 ##

解构是一种更简洁的赋值特性，可以理解为分解一个数据的结构

建设使用 `var/let/const` 声明

### 基本使用 ###

下面是基本使用语法

//数组使用
    let [name, url] = ['wgchen', 'ycc'];
    console.log(name);   // wgchen

解构赋值数组

function hd() {
        
        return ['wgchen', 'willem'];
    }
    
    let [a, b] = hd();
    console.log(a); // wgchen

剩余解构指用一个变量来接收剩余参数

let [a, ...b] = ['wgchen', 'ycc', 'willem'];
    console.log(b); // ['ycc', 'willem']

如果变量已经初始化过，就要使用 `()`定义赋值表达式，严格模式会报错所以不建议使用。

let web = "wgchen";
    [web, url] = ["wgchen", "ycc"];
    
    console.log(web); // wgchen

字符串解构

"use strict";
    const [...a] = "wgchen";
    
    console.log(a); // ['w', 'g', 'c', 'h', 'e', 'n']

### 严格模式 ###

非严格模式可以不使用声明指令，严格模式下必须使用声明。  
所以建议使用 let 等声明。

"use strict";
    
    [web, url] = ["wgchen", "ycc"];
    console.log(web); // Uncaught ReferenceError: web is not defined

### 简洁定义 ###

只赋值部分变量

let [,url]=['ycc','wgchen'];
    console.log(url); // wgchen

使用展开语法获取多个值

let [name, ...arr] = ['wgchen', 'willem', 'ycc'];
    console.log(name, arr); // wgchen ['willem', 'ycc']

### 默认值 ###

为变量设置默认值

let [name, site = 'wgchen'] = ['willem'];
    
    console.log(site); // wgchen
    console.log(name); // willem

### 函数参数 ###

数组参数的使用

function hd([a, b]) {
        
    	console.log(a, b); // wgchen ycc
    }
    
    hd(['wgchen', 'ycc']);

## 管理数组元素 ##

### 基本使用 ###

使用从0开始的索引来改变数组

let arr = [1, "wgchen", "willem"];
    arr[1] = 'wgchen.blog';
    
    console.log(arr); // [1, 'wgchen.blog', 'willem']

向数组追回元素

let arr = [1, "wgchen", "willem"];
    arr[arr.length] = 'wgchen.blog';
    
    console.log(arr); // [1, 'wgchen', 'willem', 'wgchen.blog']

### 扩展语法 ###

使用展示语法批量添加元素

let arr = ["wgchen", "willem"];
    let hd = ["wgchen.blog"];
    hd.push(...arr);
    
    console.log(hd); // ['wgchen.blog', 'wgchen', 'willem']

### push 压入元素 ###

压入元素，直接改变元数组，返回值为数组元素数量

let arr = ["wgchen", "willem"];
    console.log(arr.push('ycc', 'haoren')); // 4
    console.log(arr); // ['wgchen', 'willem', 'ycc', 'haoren']

根据区间创建新数组

function rangeArray(begin, end) {
        
        const array = [];
        for (let i = begin; i <= end; i++) {
        
            array.push(i);
        }
        return array;
    }
    
    console.log(rangeArray(1, 6)); // [1, 2, 3, 4, 5, 6]

### pop 从末尾弹出元素 ###

从末尾弹出元素，直接改变元数组，返回值为弹出的元素

let arr = ["wgchen", "willem"];
    console.log(arr.pop()); // willem
    console.log(arr); // ['wgchen']

### shift 从数组前面取出一个元素 ###

从数组前面取出一个元素

let arr = ["wgchen", "willem"];
    console.log(arr.shift()); // wgchen
    console.log(arr); // ['willem']

### unshift 从数组前面添加元素 ###

从数组前面添加元素

let arr = ["wgchen", "willem"];
    
    console.log(arr.unshift('ycc', 'wg')); //4
    console.log(arr); // ['ycc', 'wg', 'wgchen', 'willem']

### fill 填充数组元素 ###

使用 fill 填充数组元素

// Array(4) 0: "wgchen" 1: "wgchen" 2: "wgchen" 3: "wgchen" length: 4
    console.dir(Array(4).fill("wgchen"));

指定填充位置

console.log([1, 2, 3, 4].fill("wgchen", 1, 2)); // [1, 'wgchen', 3, 4]

### slice 从数组中截取部分元素组合成新数组 ###

使用 slice 方法从数组中截取部分元素组合成新数组（并不会改变原数组），不传第二个参数时截取到数组的最后元素。

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

不设置参数是为获取所有元素

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

### splice 添加、删除、替换数组中的元素 ###

使用 splice 方法可以添加、删除、替换数组中的元素，会对原数组进行改变，返回值为删除的元素。

删除数组元素第一个参数为从哪开始删除，第二个参数为删除的数量。

let arr = [0, 1, 2, 3, 4, 5, 6];
    
    console.log(arr.splice(1, 3)); //返回删除的元素 [1, 2, 3] 
    console.log(arr); //删除数据后的原数组 [0, 4, 5, 6]

通过修改 length 删除最后一个元素

let arr = ["wgchen", "willem"];
    
    arr.length = arr.length - 1;
    console.log(arr);  // ['wgchen']

通过指定第三个参数来设置在删除位置添加的元素

let arr = [0, 1, 2, 3, 4, 5, 6];
    console.log(arr.splice(1, 3, 'willem', 'ycc')); // [1, 2, 3]
    console.log(arr); // [0, 'willem', 'ycc', 4, 5, 6]

向末尾添加元素

let arr = [0, 1, 2, 3, 4, 5, 6];
    console.log(arr.splice(arr.length, 0, 'willem', 'ycc')); // []
    console.log(arr); // [0, 1, 2, 3, 4, 5, 6, 'willem', 'ycc']

向数组前添加元素

let arr = [0, 1, 2, 3, 4, 5, 6];
    console.log(arr.splice(0, 0, 'wgchen', 'willem')); // []
    console.log(arr); // ['wgchen', 'willem', 0, 1, 2, 3, 4, 5, 6]

数组元素位置调整函数

function move(array, before, to) {
        
      if (before < 0 || to >= array.length) {
        
        console.error("指定位置错误");
        return;
      }
      const newArray = [...array];
      const elem = newArray.splice(before, 1);
      newArray.splice(to, 0, ...elem);
      return newArray;
    }
    const array = [1, 2, 3, 4];
    console.table(move(array, 0, 3));

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

### 清空数组 ###

将数组值修改为 `[]` 可以清空数组，如果有多个引用时数组在内存中存在被其他变量引用。

let user = [{
         name: "wgchen" }, {
         name: "willem" }];
    let cms = user;
    user = [];
    
    console.log(user); // []
    console.log(cms); // [{…}, {…}]

将数组 length 设置为 0 也可以清空数组

let user = [{
         name: "wgchen" }, {
         name: "willem" }];
    user.length = 0;
    console.log(user); // []

使用 splice 方法删除所有数组元素

let user = [{
         name: "wgchen" }, {
         name: "willem" }];
    user.splice(0, user.length);
    console.log(user); // []

使用 `pop/shift` 删除所有元素，来清空数组

let user = [{
         name: "wgchen" }, {
         name: "willem" }];
    while (user.pop()) {
        }
    console.log(user); // []

## 合并拆分 ##

### join 数组连接成字符串 ###

let arr = [1, "wgchen", "willem"];
    console.log(arr.join('-')); // 1-wgchen-willem

### split 将字符串分割成数组 ###

split 方法用于将字符串分割成数组，类似join方法的反函数。

let price = "99,78,68";
    console.log(price.split(",")); //["99", "78", "68"]

### concat 连接两个或多个数组 ###

concat方法用于连接两个或多个数组，元素是值类型的是复制操作，如果是引用类型还是指向同一对象。

let array = ["wgchen", "willem"];
    let hd = [1, 2];
    let cms = [3, 4];
    console.log(array.concat(hd, cms)); // ['wgchen', 'willem', 1, 2, 3, 4]

也可以使用扩展语法实现连接

console.log([...array, ...hd, ...cms]);

### copyWithin 从数组中复制一部分到同数组中的另外位置 ###

使用 copyWithin 从数组中复制一部分到同数组中的另外位置。

语法说明

array.copyWithin(target, start, end)

参数说明

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><em>target</em></td> 
   <td>必需。复制到指定目标索引位置。</td> 
  </tr> 
  <tr> 
   <td><em>start</em></td> 
   <td>可选。元素复制的起始位置。</td> 
  </tr> 
  <tr> 
   <td><em>end</em></td> 
   <td>可选。停止复制的索引位置 (默认为 <em>array</em>.length)。如果为负值，表示倒数。</td> 
  </tr> 
 </tbody> 
</table>

## 数组查找元素 ##

数组包含多种查找的函数，需要把这些函数掌握清楚，然后根据不同场景选择合适的函数。

### indexOf 从前向后查找元素出现的位置 ###

使用 indexOf 从前向后查找元素出现的位置，如果找不到返回 -1。

let arr = [7, 3, 2, 8, 2, 6];
    console.log(arr.indexOf(2)); // 2 从前面查找2出现的位置

如下面代码查找一下，使用 indexOf 查找字符串将找不到，因为indexOf 类似于 `===` 是严格类型约束。

let arr = [7, 3, 2, '8', 2, 6];
    console.log(arr.indexOf(8)); // -1

第二个参数用于指定查找开始位置

let arr = [7, 3, 2, 8, 2, 6];
    
    //从第二个元素开始向后查找
    console.log(arr.indexOf(2, 3)); // 4

### lastIndexOf 从后向前查找元素出现的位置 ###

使用 lastIndexOf 从后向前查找元素出现的位置，如果找不到返回 -1。

let arr = [7, 3, 2, 8, 2, 6];
    console.log(arr.lastIndexOf(2)); // 4 从后查找2出现的位置

第二个参数用于指定查找开始位置

let arr = [7, 3, 2, 8, 2, 6];
    //从第五个元素向前查找
    console.log(arr.lastIndexOf(2, 5));
    
    //从最后一个字符向前查找
    console.log(arr.lastIndexOf(2, -2));

### includes 查找字符串返回值是布尔类型 ###

使用 includes 查找字符串返回值是布尔类型更方便判断

let arr = [7, 3, 2, 6];
    console.log(arr.includes(6)); //true

我们来实现一个自已经的 `includes` 函数，来加深对 `includes` 方法的了解

function includes(array, item) {
        
      for (const value of array)
        if (item === value) return true;
      return false;
    }
    
    console.log(includes([1, 2, 3, 4], 3)); //true

### find 方法找到后会把值返回出来 ###

如果找不到返回值为 `undefined`  
返回第一次找到的值，不继续查找

let arr = ["wgchen", "willem", "ycc"];
    
    let find = arr.find(function(item) {
        
      return item == "willem";
    });
    
    console.log(find); // willem

使用 `includes` 等不能查找引用类型，因为它们的内存地址是不相等的

const user = [{
         name: "李四" }, {
         name: "张三" }, {
         name: "王五" }];
    const find = user.includes({
         name: "张三" });
    console.log(find); // false

find 可以方便的查找引用类型

### findIndex 返回索引值 ###

findIndex 与 find 的区别是返回索引值，参数也是 : 当前值，索引，操作数组。

查找不到时返回 -1

let arr = [7, 3, 2, '8', 2, 6];
    
    console.log(arr.findIndex(function (v) {
        
    	return v == 8;
    })); //3

### find 原理 ###

下面使用自定义函数

解释  
`function(item)` 里的 item 就是 `callback(value)` 里的value。

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_15_color_FFFFFF_t_70_g_se_x_16]  
下面添加原型方法实现

## 数组排序 ##

### reverse 反转数组顺序 ###

let arr = [1, 4, 2, 9];
    console.log(arr.reverse()); //[9, 2, 4, 1]

### sort 每次使用两个值进行比较 ###

sort 每次使用两个值进行比较 `Array.sort((a,b)=>a-b`

*  返回负数 a 排在 b 前面，从小到大
 *  返回正数 b 排在a 前面
 *  返回 0 时不动

默认从小于大排序数组元素

let arr = [1, 4, 2, 9];
    console.log(arr.sort()); //[1, 2, 4, 9]

使用排序函数从大到小排序，参数一与参数二比较，返回正数为降序负数为升序

let arr = [1, 4, 2, 9];
    
    console.log(arr.sort(function (v1, v2) {
        
    	return v2 - v1;
    })); // [9, 4, 2, 1]

下面是按课程点击数由高到低排序

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

### 排序原理 ###

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

## 循环遍历 ##

### for 根据数组长度循环来遍历数组 ###

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

### forEach 使函数作用在每个数组元素上，但是没有返回值。 ###

下面例子是截取标签的五个字符。

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

### for/in 遍历时的 key 值为数组的索引 ###

let lessons = [
    	{
        title: '媒体查询响应式布局',category: 'css'},
        {
        title: 'FLEX 弹性盒模型',category: 'css'},
    	{
        title: 'MYSQL多表查询随意操作',category: 'mysql'}
    ];
    
    for (const key in lessons) {
        
        console.log(`标题: ${
          lessons[key].title}`);
    }

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

### for/of 每次循环取其中的值而不是索引 ###

let lessons = [
    	{
        title: '媒体查询响应式布局',category: 'css'},
        {
        title: 'FLEX 弹性盒模型',category: 'css'},
    	{
        title: 'MYSQL多表查询随意操作',category: 'mysql'}
    ];
    
    for (const item of lessons) {
        
      console.log(`
        标题: ${
          item.title}
        栏目: ${
          item.category == "css" ? "前端" : "数据库"}
      `);
    }

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_17_color_FFFFFF_t_70_g_se_x_16]  
使用数组的迭代对象遍历获取索引与值（有关迭代器知识后面章节会讲到）

const hd = ['wgchen', 'wgchen'];
    const iterator = hd.entries();
    
    console.log(iterator.next()); // value:{0:0,1:'wgchen'}
    console.log(iterator.next()); // value:{0:1,1:'willem'}

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_12_color_FFFFFF_t_70_g_se_x_16]  
这样就可以使用解构特性与 `for/of` 遍历并获取索引与值了

const hd = ["willem", "wgcehn"];
    
    for (const [key, value] of hd.entries()) {
        
      console.log(key, value); //这样就可以遍历了
    }

取数组中的最大值

function arrayMax(array) {
        
      let max = array[0];
      for (const elem of array) {
        
        max = max > elem ? max : elem;
      }
      return max;
    }
    
    console.log(arrayMax([1, 3, 2, 9]));

## 迭代器方法 ##

数组中可以使用多种迭代器方法，迭代器后面章节会详解。

### keys 通过迭代对象获取索引 ###

const hd = ['wgchen', 'willem'];
    const keys = hd.keys();
    console.log(keys.next());
    console.log(keys.next());

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

获取数组所有键

"use strict";
    const arr = ["a", "b", "c", "wgchen"];
    
    for (const key of arr.keys()) {
        
      console.log(key);
    }

![在这里插入图片描述][906e67e6942e45f28b962eb1230cda0f.png]  
使用 while 遍历

let arr = ["wgchen", "willem", "ycc"];
    let i = 0;
    while (arr[i]) {
        
        console.log(arr[i]);
        i++;
    }

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

### values 通过迭代对象获取值 ###

获取数组的所有值

"use strict";
    const arr = ["a", "b", "c", "wgchen"];
    
    for (const value of arr.values()) {
        
      console.log(value);
    }

### entries 返回数组所有键值对 ###

下面使用解构语法循环

"use strict";
    const arr = ["a", "b", "c", "wgchen"];
    
    for (const [key, value] of arr.entries()) {
        
      console.log(key, value);
    }

![在这里插入图片描述][0cc18c5efd224e64a5b92eaa9c6f2ffd.png]  
解构获取内容（对象章节会详细讲解）

const hd = ["wgchen", "willem"];
    const iterator = hd.entries();
    
    let {
        done,value: [k, v]} = iterator.next();
    
    console.log(v); // wgchen

## 扩展方法 ##

### every 用于递归的检测元素 ###

要所有元素操作都要返回真结果才为真。

查看班级中同学的JS成绩是否都及格

标题的关键词检查

let words = ['wgchen', '北京'];
    let title = 'wgchen不断分享技术教程北京';
    
    let state = words.every(function (item, index, array) {
        
      return title.indexOf(item) >= 0;
    });
    
    console.log(state); // true
    
    // 标题必须包含所有关键词
    if (state == false) console.log('标题必须包含所有关键词');

### some 递归的检测元素 ###

使用 some 函数可以递归的检测元素，如果有一个返回 true，表达式结果就是真。第一个参数为元素，第二个参数为索引，第三个参数为原数组。

下面是使用 some 检测规则关键词的示例，如果匹配到一个词就提示违规。

let words = ['wgchen', '北京', '武汉'];
    let title = 'wgchen不断分享技术教程'
    
    let state = words.some(function (item, index, array) {
        
    	return title.indexOf(item) >= 0;
    });
    
    if (state) console.log('标题含有违规关键词'); // 标题含有违规关键词

### filter 滤数据中元素 ###

使用 filter 可以过滤数据中元素，下面是获取所有在CSS栏目的课程。

![在这里插入图片描述][111e3d8ae82543e887f5dda22127b454.png]  
我们来写一个过滤元素的方法来加深些技术

function except(array, excepts) {
        
      const newArray = [];
      
      for (const elem of array)
        if (!excepts.includes(elem)) newArray.push(elem);
        
      return newArray;
    }
    
    const array = [1, 2, 3, 4];
    console.log(except(array, [2, 3])); // [1,4]

### map 映射在数组所有元素上应用函数 ###

使用 map 映射可以在数组的所有元素上应用函数，用于映射出新的值。

获取数组所有标题组合的新数组

let lessons = [
      {
        title: '媒体查询响应式布局',category: 'css'},
      {
        title: 'FLEX 弹性盒模型',category: 'css'},
      {
        title: 'MYSQL多表查询随意操作',category: 'mysql'}
    ];
    
    console.log(lessons.map(item => item.title));

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

为所有标题添加上 wgchen

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

### reduce 迭代数组的所有元素 ###

使用 reduce 与 reduceRight 函数可以迭代数组的所有元素，reduce 从前开始 reduceRight 从后面开始。下面通过函数计算课程点击数的和。

第一个参数是执行函数  
第二个参数为初始值

*  传入第二个参数时将所有元素循环一遍
 *  不传第二个参数时从第二个元素开始循环

函数参数说明如下

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>prev</td> 
   <td>上次调用回调函数返回的结果</td> 
  </tr> 
  <tr> 
   <td>cur</td> 
   <td>当前的元素值</td> 
  </tr> 
  <tr> 
   <td>index</td> 
   <td>当前的索引</td> 
  </tr> 
  <tr> 
   <td>array</td> 
   <td>原数组</td> 
  </tr> 
 </tbody> 
</table>

#### 使用 reduce 实现数组去重 ####

let arr = [1, 2, 6, 2, 1];
    
    let filterArr = arr.reduce((pre, cur, index, array) => {
        
      if (pre.includes(cur) === false) {
        
          pre = [...pre, cur];
      }
      return pre;
    }, [])
    
    console.log(filterArr); // [1,2,6]

#### 示例 ####

<p id="demo">输出了：100</p>
    
    const numbers = [175, 50, 25];
    document.getElementById("demo").innerHTML = numbers.reduce(myFunc);
    
    function myFunc(total, num) {
        
      return total - num;
    }

定义和用法

reduce() 方法将数组缩减为单个值。  
reduce() 方法为数组的每个值（从左到右）执行提供的函数。

函数的返回值存储在累加器中（结果/总计）。  
注释：对没有值的数组元素，不执行 reduce() 方法。  
注释：reduce() 方法不会改变原始数组。

const numbers = [175, 50, 25];
    numbers.reduce(myFunc);
    
    function myFunc(total, num) {
        
      console.log(total,num);
    }

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

const numbers = [175, 50, 25,30];
    numbers.reduce(myFunc);
    
    function myFunc(total, num) {
        
      console.log(total,num);
    }

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

#### 统计元素出现的次数 ####

function countArrayELem(array, elem) {
        
      return array.reduce((total, cur) => (total += cur == elem ? 1 : 0), 0);
    }
    
    let numbers = [1, 2, 3, 1, 5];
    console.log(countArrayELem(numbers, 1)); //2

#### 取数组中的最大值 ####

function arrayMax(array) {
        
      return array.reduce(
      	(max, elem) => (max > elem ? max : elem), array[0]
      );
    }
    
    console.log(arrayMax([1, 3, 2, 9]));

#### 取价格最高的商品 ####

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

#### 计算购物车中的商品总价 ####

#### 获取价格超过1万的商品名称 ####

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

## 动画案例 ##

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

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>wgchen</title>
    </head>
    
    <style>
        body {
        
          width: 100vw;
          height: 100vh;
          display: flex;
          justify-content: center;
          align-items: center;
          background: #2c3e50;
        }
      
        * {
        
          padding: 0;
          margin: 0;
        }
        div {
        
          color: #9b59b6;
          font-size: 5em;
          font-weight: bold;
          text-transform: uppercase;
          cursor: pointer;
        }
        div > span {
        
          position: relative;
          display: inline-block;
        }
        .changeColor {
        
          animation-name: changeColor;
          animation-duration: 1s;
          animation-direction: alternate;
          animation-iteration-count: 2;
          animation-timing-function: linear;
        }
        @keyframes changeColor {
        
          50% {
        
            color: #f1c40f;
            transform: scale(1.5);
          }
          to {
        
            color: #9b59b6;
            transform: scale(0.5);
          }
        }
      </style>
      
      <body>
        <div>wgchen.blog.csdn.net</div>
      </body>
      
      <script>
        let div = document.querySelector("div");
        /*
            console.log([...div.textContent]); 
            ['w', 'g', 'c', 'h', 'e', 'n', '.', 'b', 'l', 'o', 'g', '.', 'c', 's', 'd', 'n', '.', 'n', 'e', 't']
        */
    
        [...div.textContent].reduce((pre, cur, index) => {
        
            // console.log(pre); // 0
          pre == index && (div.innerHTML = "");
    
          let span = document.createElement("span");
          span.textContent = cur;
          div.appendChild(span);
    
          span.addEventListener("mouseover", function() {
        
            this.classList.add("changeColor");
          });
    
          span.addEventListener("animationend", function() {
        
            this.classList.remove("changeColor");
          });
    
        }, 0);
      </script>
    
    </html>

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/d793307aadc844f4af98e47ae9f0ca8b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[b0466353692e4a1bbad1b039db9d8466.gif_pic_center]: https://img-blog.csdnimg.cn/b0466353692e4a1bbad1b039db9d8466.gif#pic_center
[bd117953428f4ee2be4e37af6dfb7de1.png]: https://img-blog.csdnimg.cn/bd117953428f4ee2be4e37af6dfb7de1.png
[cd15b9a75732443ba3d07e4aa0c69408.png]: https://img-blog.csdnimg.cn/cd15b9a75732443ba3d07e4aa0c69408.png
[1e8c8113add64350a2250dc1500eab81.png]: https://img-blog.csdnimg.cn/1e8c8113add64350a2250dc1500eab81.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_15_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/8371ff3cdb664286aa4485eec50f29c7.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_15,color_FFFFFF,t_70,g_se,x_16
[95fc79fc0f4a421d8cce6345bc733d10.png]: https://img-blog.csdnimg.cn/95fc79fc0f4a421d8cce6345bc733d10.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/0f8e952b4d9f47338e0db6343e788bc0.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 2]: https://img-blog.csdnimg.cn/38a02241da6a4ca6b3dcfd759b526766.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_19_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/e564d4d0277e41cfbefdf063c4c1021f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_19,color_FFFFFF,t_70,g_se,x_16
[b474890f7e4446388e58c6b2bcdc91b9.png]: https://img-blog.csdnimg.cn/b474890f7e4446388e58c6b2bcdc91b9.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_17_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/355d847bab214ace95ce24fa3b94f812.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_17,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_12_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/19bdfbddff984a849f56365071c4e75d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_12,color_FFFFFF,t_70,g_se,x_16
[417bd1d8c0ea443db6f8f5e84f85d565.png]: https://img-blog.csdnimg.cn/417bd1d8c0ea443db6f8f5e84f85d565.png
[906e67e6942e45f28b962eb1230cda0f.png]: https://img-blog.csdnimg.cn/906e67e6942e45f28b962eb1230cda0f.png
[b954fdbfbb9c4d6da03d83e53980a14f.png]: https://img-blog.csdnimg.cn/b954fdbfbb9c4d6da03d83e53980a14f.png
[0cc18c5efd224e64a5b92eaa9c6f2ffd.png]: https://img-blog.csdnimg.cn/0cc18c5efd224e64a5b92eaa9c6f2ffd.png
[111e3d8ae82543e887f5dda22127b454.png]: https://img-blog.csdnimg.cn/111e3d8ae82543e887f5dda22127b454.png
[7dd2e12f63bc4777b1d54f8069bf8c7a.png]: https://img-blog.csdnimg.cn/7dd2e12f63bc4777b1d54f8069bf8c7a.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_19_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/7742c7e202404fa9848f2d49e431fee9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_19,color_FFFFFF,t_70,g_se,x_16
[dc5b9dfda05b490abdfef60d309e7efa.png]: https://img-blog.csdnimg.cn/dc5b9dfda05b490abdfef60d309e7efa.png
[b067dde34bf549f291c34eaafd7e4194.png]: https://img-blog.csdnimg.cn/b067dde34bf549f291c34eaafd7e4194.png
[94b879356587469ba1adef0675772fcf.png]: https://img-blog.csdnimg.cn/94b879356587469ba1adef0675772fcf.png
[0c08426f34d84ef09ea1c4b61b99b9a1.png]: https://img-blog.csdnimg.cn/0c08426f34d84ef09ea1c4b61b99b9a1.png
[612175c53b8a4ab180e7125178d0d11c.gif_pic_center]: https://img-blog.csdnimg.cn/612175c53b8a4ab180e7125178d0d11c.gif#pic_center