JS 数组 Array 对象详解与 for...of 增强型迭代

小灰灰 2022-04-22 12:16 68阅读 0赞

**目录**

Array 对象简介

Array 对象属性

Array 对象方法

数组迭代遍历

二维数组的创建与迭代

for ... of 增强型迭代

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

# Array 对象简介 #

1、Array 对象用于在单个的变量中存储多个值，js 的 Array 如同 Java 的 list 一样，它的长度是可以自动调整的。**创建 Array 对象的语法：**

> new Array();  
> new Array(size);  
> new Array(element0, element1, ..., elementn);

2、参数 *size* 是期望的数组元素个数，length 属性将被设为 *size* 的值。

3、参数 *element* ..., *elementn* 是参数列表，当使用这些参数来调用构造函数 Array() 时，新创建的数组的元素就会被初始化为这些值，它的 length 属性也会被设置为参数的个数。

4、如果调用构造函数 Array() 时没有使用参数，那么返回的数组为空，length 字段为 0，可以后面使用 length() 方法进行设置长度。

5、当调用构造函数时只传递给它一个数字参数，该构造函数将返回具有指定个数、元素为 undefined 的数组。

# Array 对象属性 #

<table> 
 <tbody> 
  <tr> 
   <th style="width:114px;">属性</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td style="width:114px;"><a href="http://www.w3school.com.cn/jsref/jsref_constructor_array.asp" rel="nofollow">constructor</a></td> 
   <td>返回对创建此对象的数组函数的引用。</td> 
  </tr> 
  <tr> 
   <td style="width:114px;"><a href="http://www.w3school.com.cn/jsref/jsref_length_array.asp" rel="nofollow">length</a></td> 
   <td> <p>1）设置或返回数组中元素的数目。语法：arrayObject.length。数组的 length 属性总是比数组中定义的最后一个元素的下标大 1。数组的 length 属性在用构造函数 Array() 创建数组时被初始化。<br> 2）<span style="color:#f33b45;">给数组添加新元素时，如果实际的元素个数超过 length，则将自动更新 length 的值。</span><br> 3）设置 length 属性可改变数组的大小，如果设置的值比其当前值小，数组将被截断，其尾部的元素将丢失。如果设置的值比它的当前值大，数组将增大，新的元素被添加到数组的尾部，它们的值为 undefined。</p> </td> 
  </tr> 
  <tr> 
   <td style="width:114px;"><a href="http://www.w3school.com.cn/jsref/jsref_prototype_array.asp" rel="nofollow">prototype</a></td> 
   <td>使您有能力向对象添加属性和方法。</td> 
  </tr> 
 </tbody> 
</table>

![20200408095957450.png][]

# Array 对象方法 #

<table> 
 <tbody> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/jsref/jsref-concat-array.html" rel="nofollow">concat()</a></td> 
   <td>连接两个或更多的数组，并返回结果。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/jsref/jsref-copywithin.html" rel="nofollow">copyWithin()</a></td> 
   <td>从数组的指定位置拷贝元素到数组的另一个指定位置中。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/jsref/jsref-entries.html" rel="nofollow">entries()</a></td> 
   <td>返回数组的可迭代对象。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/jsref/jsref-every.html" rel="nofollow">every()</a></td> 
   <td>检测数值元素的每个元素是否都符合条件。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/jsref/jsref-fill.html" rel="nofollow">fill()</a></td> 
   <td>使用一个固定值来填充数组。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/jsref/jsref-filter.html" rel="nofollow">filter()</a></td> 
   <td>检测数值元素，并返回符合条件所有元素的数组。<a href="https://wangmaoxiong.blog.csdn.net/article/details/84196581" rel="nofollow">蚩尤后裔</a></td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/jsref/jsref-find.html" rel="nofollow">find()</a></td> 
   <td>返回符合传入测试（函数）条件的数组元素。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/jsref/jsref-findindex.html" rel="nofollow">findIndex()</a></td> 
   <td>返回符合传入测试（函数）条件的数组元素索引。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/jsref/jsref-foreach.html" rel="nofollow">forEach()</a></td> 
   <td>数组每个元素都执行一次回调函数。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/jsref/jsref-from.html" rel="nofollow">from()</a></td> 
   <td>通过给定的对象中创建一个数组。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/jsref/jsref-includes.html" rel="nofollow">includes()</a></td> 
   <td>判断一个数组是否包含一个指定的值。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/jsref/jsref-indexof-array.html" rel="nofollow">indexOf()</a></td> 
   <td>搜索数组中的元素，并返回它所在的位置。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/jsref/jsref-isarray.html" rel="nofollow">isArray()</a></td> 
   <td>判断对象是否为数组。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/jsref/jsref-join.html" rel="nofollow">join()</a></td> 
   <td>把数组的所有元素放入一个字符串。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/jsref/jsref-keys.html" rel="nofollow">keys()</a></td> 
   <td>返回数组的可迭代对象，包含原始数组的键(key)。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/jsref/jsref-lastindexof-array.html" rel="nofollow">lastIndexOf()</a></td> 
   <td>返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/jsref/jsref-map.html" rel="nofollow">map()</a></td> 
   <td>通过指定函数处理数组的每个元素，并返回处理后的数组。<a href="https://wangmaoxiong.blog.csdn.net/article/details/84196581" rel="nofollow">蚩尤后裔</a></td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/jsref/jsref-pop.html" rel="nofollow">pop()</a></td> 
   <td>删除数组的最后一个元素并返回删除的元素。<a href="https://wangmaoxiong.blog.csdn.net/article/details/84196581" rel="nofollow">蚩尤后裔</a></td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/jsref/jsref-push.html" rel="nofollow">push()</a></td> 
   <td>向数组的末尾添加一个或更多元素，并返回新的长度。<a href="https://wangmaoxiong.blog.csdn.net/article/details/84196581" rel="nofollow">蚩尤后裔</a></td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/jsref/jsref-reduce.html" rel="nofollow">reduce()</a></td> 
   <td>将数组元素计算为一个值（从左到右）。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/jsref/jsref-reduceright.html" rel="nofollow">reduceRight()</a></td> 
   <td>将数组元素计算为一个值（从右到左）。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/jsref/jsref-reverse.html" rel="nofollow">reverse()</a></td> 
   <td>反转数组的元素顺序。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/jsref/jsref-shift.html" rel="nofollow">shift()</a></td> 
   <td>删除并返回数组的第一个元素。<a href="https://wangmaoxiong.blog.csdn.net/article/details/84196581" rel="nofollow">蚩尤后裔</a></td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/jsref/jsref-slice-array.html" rel="nofollow">slice()</a></td> 
   <td>选取数组的的一部分，并返回一个新数组。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/jsref/jsref-some.html" rel="nofollow">some()</a></td> 
   <td>检测数组元素中是否有元素符合指定条件。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/jsref/jsref-sort.html" rel="nofollow">sort()</a></td> 
   <td>对数组的元素进行排序。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/jsref/jsref-splice.html" rel="nofollow">splice()</a></td> 
   <td>从数组中添加或删除元素。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/jsref/jsref-tostring-array.html" rel="nofollow">toString()</a></td> 
   <td>把数组转换为字符串，并返回结果。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/jsref/jsref-unshift.html" rel="nofollow">unshift()</a></td> 
   <td>向数组的开头添加一个或更多元素，并返回新的长度。<a href="https://wangmaoxiong.blog.csdn.net/article/details/84196581" rel="nofollow">蚩尤后裔</a></td> 
  </tr> 
  <tr> 
   <td><a href="http://www.runoob.com/jsref/jsref-valueof-array.html" rel="nofollow">valueOf()</a></td> 
   <td>返回数组对象的原始值。</td> 
  </tr> 
 </tbody> 
</table>

# 数组迭代遍历 #

1、forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数，forEach() 对于空数组是不会执行回调函数的。

语法：array.forEach(function(currentValue, index, arr), thisValue)

<table> 
 <tbody> 
  <tr> 
   <th style="width:271px;">参数</th> 
   <th style="width:578px;">描述</th> 
  </tr> 
  <tr> 
   <td style="width:271px;"><em>function(currentValue, index, arr)</em></td> 
   <td style="width:578px;">必需。 数组中每个元素需要调用的函数。<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 style="width:271px;"><em>thisValue</em></td> 
   <td style="width:578px;">可选。传递给函数的值一般用 "this" 值。<br> 如果这个参数为空， "undefined" 会传递给 "this" 值</td> 
  </tr> 
 </tbody> 
</table>

# 二维数组的创建与迭代 #

1、JavaScript 没有直接创建二维数组的功能，但是可以用一维数组间接创建，即将一维数组的值也设置为数组即可。

![20200408101244689.gif][]

# for ... of 增强型迭代 #

1、for...of 可以迭代任何可以迭代的对象，如 数组、类数组、maps、sets、DOM 集合、string，类似 Java 的增强型 for 循环.

**数组迭代**

//迭代数组。for...of 循环遍历 ids 的每一项，迭代项被赋值给变量 id.
        var ids = ["1100U", "9987Y", "00PP7"];
        for (var id of ids){
            console.log(id);
        }

**类数组迭代**

1、for...of 可以用于迭代类数组对象，arguments 是函数体内的特殊变量，包含函数的所有参数，这是一个经典的类数组对象。

//求和函数
        function sun() {
            var sun = 0;
            // 循环遍历类数组 arguments 中的每一个数
            for (var arg of arguments) {
                sun += arg;
            }
            return sun;
        }
        console.log(sun(1, 4, 8, 9));//输出 22

**字符串迭代**

1、JavaScript 的基础类型 string 是可迭代的，因此可以轻松地遍历字符串的字符。

var str = "Hello 中国!";
        for (var s of str) {
            console.log(s);
        }

**Map 和 Set 迭代**

var map = new Map();
        map.set("id", 9527);
        map.set("name", "华安");
        //迭代器返回一个数组 [key，value] ，然后使用 var [m_k, m_v] 对对数组进行解构.
        for (var [m_k, m_v] of map) {
            console.log(m_k + "=" + m_v);
        }
    
        var set = new Set();
        set.add("大秦");
        set.add("大魏");
        for (var s of set) {
            console.log(s);
        }

**json 对象迭代**

//forEach 遍历方式
        Object.keys(json).forEach(function (key) {
            console.log(key + "=" + json[key]);
        });
    
        //for in 遍历方式
        for (var key in json) {
            console.log(key + "=" + json[key]);
        }
    
        //for...in 遍历方式
        for (var [key, value] of Object.entries(json)) {
            console.log(key + "=" + value);
        }

**遍历 DOM 集合**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div>
        <p>万里长城</p>
        <p>阿房宫</p>
        <p>骊山</p>
    </div>
    </body>
    <script type="text/javascript">
        var pDomObjs = document.querySelectorAll('p');
        for (var pDom of pDomObjs) {
            console.log(pDom.innerHTML);
        }
    </script>
    </html>

![20200408101434876.gif][]

[20200408095957450.png]: /images/20220422/f488e1b538ef493488eb3ed04cd66368.png
[20200408101244689.gif]: /images/20220422/171812feb72a49c0830022dae6a79edb.png
[20200408101434876.gif]: /images/20220422/998d66e2d7c549a192c3e54371b4f191.png