13 - JavaScript数组的四个基本方法&数组的遍历

港控/mmm° 2023-06-09 14:24 141阅读 0赞

## 前言 ##

**数组的四个基本方法如下**：

<table> 
 <thead> 
  <tr> 
   <th align="left">方法</th> 
   <th align="left">描述</th> 
   <th align="left">备注</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">push()</td> 
   <td align="left">向数组的<strong>最后面</strong>插入一个或多个元素，返回结果为<strong>该数组新的长度</strong></td> 
   <td align="left">会改变原数组</td> 
  </tr> 
  <tr> 
   <td align="left">pop()</td> 
   <td align="left">删除数组中的<strong>最后一个</strong>元素，返回结果为<strong>被删除的元素</strong></td> 
   <td align="left">会改变原数组</td> 
  </tr> 
  <tr> 
   <td align="left">unshift()</td> 
   <td align="left">在数组<strong>最前面</strong>插入一个或多个元素，返回结果为<strong>该数组新的长度</strong></td> 
   <td align="left">会改变原数组</td> 
  </tr> 
  <tr> 
   <td align="left">shift()</td> 
   <td align="left">删除数组中的<strong>第一个</strong>元素，返回结果为<strong>被删除的元素</strong></td> 
   <td align="left">会改变原数组</td> 
  </tr> 
 </tbody> 
</table>

**遍历数组的方法如下**：

<table> 
 <thead> 
  <tr> 
   <th align="left">方法</th> 
   <th align="left">描述</th> 
   <th align="left">备注</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">for循环</td> 
   <td align="left">这个大家都懂</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">forEach()</td> 
   <td align="left">和 for循环类似，但需要兼容IE8以上</td> 
   <td align="left">forEach() 没有返回值。也就是说，它的返回值是 undefined</td> 
  </tr> 
  <tr> 
   <td align="left">filter()</td> 
   <td align="left">返回结果是true的项，将组成新的数组。可以起到过滤的作用</td> 
   <td align="left">不会改变原数组</td> 
  </tr> 
  <tr> 
   <td align="left">map()</td> 
   <td align="left">对原数组中的每一项进行加工</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">every()</td> 
   <td align="left">如果有一项返回false，则停止遍历</td> 
   <td align="left">意思是，要求每一项都返回true，最终的结果才返回true</td> 
  </tr> 
  <tr> 
   <td align="left">some()</td> 
   <td align="left">只要有一项返回true，则停止遍历</td> 
   <td align="left"></td> 
  </tr> 
 </tbody> 
</table>

## 数组的四个基本方法（数组元素的添加和删除） ##

### push() ###

`push()`：向数组的**最后面**插入一个或多个元素，返回结果为**该数组新的长度**。

语法：

数组的新长度 = 数组.push(元素);

代码举例：

var arr = ["王一", "王二", "王三"];
    
    	var result1 = arr.push("王四"); // 末尾插入一个元素
    	var result2 = arr.push("王五", "王六"); // 末尾插入多个元素
    
    	console.log(result1); // 打印结果：4
    	console.log(result2); // 打印结果：6
    	console.log(JSON.stringify(arr)); // 打印结果：["王一","王二","王三","王四","王五","王六"]

### pop() ###

`pop()`：删除数组中的**最后一个**元素，返回结果为**被删除的元素**。

语法：

被删除的元素 = 数组.pop();

代码举例：

var arr = ["王一", "王二", "王三"];
    
    	var result1 = arr.pop();
    
    	console.log(result1); // 打印结果：王三
    	console.log(JSON.stringify(arr)); // 打印结果：["王一","王二"]

### unshift() ###

`unshift()`：在数组**最前面**插入一个或多个元素，返回结果为**该数组新的长度**。插入元素后，其他元素的索引会依次调整。

语法：

数组的新长度 = 数组.unshift(元素);

代码举例：

var arr = ["王一", "王二", "王三"];
    
    	var result1 = arr.unshift("王四"); // 最前面插入一个元素
    	var result2 = arr.unshift("王五", "王六"); // 最前面插入多个元素
    
    	console.log(result1); // 打印结果：4
    	console.log(result2); // 打印结果：6
    	console.log(JSON.stringify(arr)); // 打印结果：["王五","王六","王四","王一","王二","王三"]

### shift() ###

`shift()`：删除数组中的**第一个**元素，返回结果为**被删除的元素**。

语法：

被删除的元素 = 数组.shift();

代码举例：

var arr = ["王一", "王二", "王三"];
    
    	var result1 = arr.shift();
    
    	console.log(result1); // 打印结果：王一
    	console.log(JSON.stringify(arr)); // 打印结果：["王二","王三"]

## 数组的遍历 ##

遍历数组即：获取并操作数组中的每一个元素。在我们的实战开发中，使用得非常频繁。

遍历数组的方法包括：every()、filter()、forEach()、map()、some()

PS：这几个方法**不会修改原数组**。

语法格式：

数组/boolean/无 = 数组.every/filter/forEach/map/some(
                                function(element,index,arr){
                                                程序和返回值；

有了这几种方法，就可以替代一些for循环了。下面依次来介绍。

### for循环 遍历 ###

举例：

var arr = ["小米","大米","中米"];
            for(var i = 0;i<arr.length;i++){ 
                console.log(arr[i]);  // arr[i]代表的是数组中的每一个元素i
            }
    
            console.log(arr);

打印结果：

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

### forEach() 遍历 ###

> `forEach()` 这种遍历方法只支持IE8以上的浏览器。IE8及以下的浏览器均不支持该方法。所以如果需要兼容IE8，则不要使用forEach，改为使用for循环来遍历即可。

forEach()方法需要一个函数作为参数。这种函数，是由我们创建但是不由我们调用的，我们称为回调函数。

数组中有几个元素，该回调函数就会执行几次。执行完毕后，浏览器会将遍历到的元素。

回调函数中传递三个参数：

*  第一个参数，就是当前正在遍历的元素
 *  第二个参数，就是当前正在遍历的元素的索引
 *  第三个参数，就是正在遍历的数组

代码举例：

var arr = ["王一", "王二", "王三"];
    
        arr.forEach(function(item, index, obj) { 
        console.log("item:" + item);
        console.log("index:" + index);
        console.log("obj:" + obj);
        console.log("----------");
        });

打印结果：

item:王一
    index:0
    obj:王一,王二,王三
    ----------
    
    item:王二
    index:1
    obj:王一,王二,王三
    ----------
    
    item:王三
    index:2
    obj:王一,王二,王三
    ----------

注意，forEach() 的返回值是 undefined。也就是说，它没有返回值。如果你尝试 `tempArry = arr.forEach()`这种方式来接收，是达不到效果的。

### filter() ###

语法：

Array.prototype.filter(function(item, index){ })

解释：对数组中每一项运行回调函数，该函数返回结果是true的项，将组成新的数组（返回值就是这个新的数组）。

举例1：找出数组 arr1 中大于4的元素，返回一个新的数组。代码如下：

var arr1 = [1, 3, 6, 2, 5, 6];
    
        var arr2 = arr1.filter(function (item, index) { 
            return item > 4; //将arr1中大于4的元素返回
        })
        console.log(arr2);

打印结果：

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

举例2：

var arr1 = ["重庆", "渝中", "江北", "沙坪坝"];
    
        var arr2 = arr1.filter(function (element, index, array) { 
            if (element.length > 2) {  //arr1中的元素，如果是长度超过2个字符的，我就把它放到arr2中去
                return true;
            }
            return false;
        });
        console.log(arr1);
        console.log(arr2);

结果：

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

### map()方法 ###

解释：对数组中每一项运行回调函数，返回该函数的结果，组成的新数组（返回的是**加工之后**的新数组）。

比如说，有一个已知的数组arr1，我要求让arr1中的每个素加10，这里就可以用到map方法。举例：

var arr1 = [1, 3, 6, 2, 5, 6];
    
        var arr2 = arr1.map(function (item, index) { 
            return item + 10;  //让arr1中的每个元素加10
    
        })
        console.log(arr2);

打印结果：

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

举例2：

var arr1 = ["重庆", "渝中", "江北", "沙坪坝"];
    
        var arr2 = arr1.map(function (element, index, array) { 
            return element + "vae";  //给arr1中所有的元素增加字符串"vae"，放到arr2中。
        });
    
        console.log(arr1);
        console.log(arr2);

结果：

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

### every()方法 ###

解释：对数组中每一项运行回调函数，如果都返回true，every就返回true；如果有一项返回false，则停止遍历，此方法返回false。

注意：every()方法的返回值是boolean值，参数是回调函数。

举例：

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70]: /images/20230531/c79e7a43875c478193ad645a3669b27c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 1]: /images/20230531/3927dd874db046729d6e46426ac9d129.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 2]: /images/20230531/2766a7b19a174457ba716975e7fdaafe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 3]: /images/20230531/090010f3d1724407bd67bb227f5aaa6a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 4]: /images/20230531/a2f9a0865590489d961228886a1c7308.png