JS Array 对象常用方法 unshift / push 、shift / pop 、filter() / map()

待我称王封你为后i 2022-04-16 05:58 291阅读 0赞

**目录**

push() 末尾添加元素

unshift() 首部添加元素

shift / pop 方法删除数组首/尾元素

filter() 方法过滤元素

map() 方法处理元素

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

# push() 末尾添加元素 #

1、push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。新元素将添加在数组的末尾， 此方法改变原数组的长度。

**2、语法：***array*.push(*item1*, *item2*, ..., *itemX*)

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <title>数组测试</title>
        <script>
            /**
             * 为数组 arr1 在末尾逐个添加元素
             * @type {string[]}
             */
            let arr1 = ["A", "B", "C"];
            for (let i = 0; i < 5; i++) {
                let arr1Length = arr1.push(i);
                console.log("arr1=" + arr1.toString(), "数组长度：" + arr1Length);
            }
            console.log("---------------1--------------------");
            /**
             * 为数组 arr2 中的元素前后调换顺序
             * @type {number[]}
             */
            let arr2 = [1, 2, 3, 4, 5];
            console.log("原数组 arr2=" + arr2.toString());
    
            let arr2_2 = [];
            while (arr2.length > 0) {
                /**删除原数组末尾的元素，然后添加到新数组末尾*/
                let delPop = arr2.pop();
                arr2_2.push(delPop);
            }
            console.log("调换顺序后 arr2_2=" + arr2_2.toString());
    
            console.log("---------------2--------------------");
            let arr3 = ["A", "B", "C"];
            /**可以为数组同时添加多个元素*/
            let size = arr3.push(1, 2, 3);
            console.log(arr3.toLocaleString(), "数组大小：" + size);
    
            /**数组中的元素可以是任意类型，如对象，数组，JSON 等*/
            size = arr3.push({"name": "华安", "age": 35});
            console.log(arr3.toLocaleString(), "数组大小：" + size, "最后一个元素：" + JSON.stringify(arr3[size - 1]));
        </script>
    </head>
    <body>
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70][]

# unshift() 首部添加元素 #

1、unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。该方法将改变原数组的数目。

2、所有主要浏览器都支持 unshift()方法，Internet Explorer 8 及更早IE版本不支持，返回 *undefined*。

3、语法：*array*.unshift(*item1*,*item2*, ..., *itemX*)

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <title>数组测试</title>
        <script>
            /**
             * 为数组 arr1 在首部逐个添加元素
             * @type {string[]}
             */
            let arr1 = ["A", "B", "C"];
            for (let i = 0; i < 5; i++) {
                let arr1Length = arr1.unshift(i);
                console.log("arr1=" + arr1.toString(), "数组长度：" + arr1Length);
            }
            console.log("---------------1--------------------");
            /**
             * 为数组 arr2 中的元素前后调换顺序
             * @type {number[]}
             */
            let arr2 = [1, 2, 3, 4, 5];
            console.log("原数组 arr2=" + arr2.toString());
    
            let arr2_2 = [];
            while (arr2.length > 0) {
                /**删除原数组第一个元素，然后添加到新数组首部*/
                let delPop = arr2.shift();
                arr2_2.unshift(delPop);
            }
            console.log("调换顺序后 arr2_2=" + arr2_2.toString());
    
            console.log("---------------2--------------------");
            let arr3 = ["A", "B", "C"];
            /**可以为数组同时添加多个元素*/
            let size = arr3.unshift(1, 2, 3);
            console.log(arr3.toLocaleString(), "数组大小：" + size);
    
            /**数组中的元素可以是任意类型，如对象，数组，JSON 等*/
            size = arr3.unshift({"name": "华安", "age": 35});
            console.log(arr3.toLocaleString(), "数组大小：" + size, "第一个元素：" + JSON.stringify(arr3[0]));
        </script>
    </head>
    <body>
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 1][]

# shift / pop 方法删除数组首/尾元素 #

1、shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。此方法将改变原数组的长度！

2、pop() 方法用于删除数组的最后一个元素，并返回删除的元素。此方法将改变原数组的长度！

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <title>数组测试</title>
        <script>
            let arr1 = new Array(1, 2, 3, 4, 5);
            console.log("原数组arr1=：" + arr1.toString());
            /** 遍历删除原数组所有元素--每次删除第一个元素*/
            while (arr1.length > 0) {
                let delShift = arr1.shift();
                console.log("删除第一个元素：" + delShift, "arr1=" + arr1.toString());
            }
            console.log("-------------------------");
            let arr2 = new Array(1, 2, 3, 4, 5);
            console.log("原数组arr2=：" + arr2.toString());
            /** 遍历删除原数组所有元素--每次删除最后一个元素*/
            while (arr2.length > 0) {
                let delPop = arr2.pop();
                console.log("删除最后一个元素：" + delPop, "arr2=" + arr2.toString());
            }
        </script>
    </head>
    <body>
    
    </body>
    </html>

# filter() 方法过滤元素 #

1、filter() 方法创建一个新的数组，新数组中的元素是通过检查数组中符合条件的所有元素。

2、filter() 不会对空数组进行检测，也不会改变原始数组，而是返回一个新的数组。

3、注意与《[JavaScript Array map() 方法》][JavaScript Array map_]的区别，map 与 filter 都是在函数中处理原数组中的每一个元素，并且返回新的数组，原数组不变。不同的是 map 方法对每个元素的处理结果必须返回，即无论对元素做了什么操作，但必须返回一个结果；而 filter 方法处理每个元素重点是判断元素是否符合某个条件，如果处理结果为 true ，则返回此元素，否则不再返回此元素。

**4、语法：**array.filter(function(currentValue,index,arr), thisValue)

<table> 
 <tbody> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td><em>function(currentValue, index,arr)</em></td> 
   <td>必须。函数，数组中的每个元素都会执行这个函数<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 ，"this" 的值为 "undefined"</td> 
  </tr> 
 </tbody> 
</table>

# map() 方法处理元素 #

1、通过指定函数处理数组的每个元素，并返回处理后的数组。map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

2、map() 方法按照原始数组元素顺序依次处理元素， map() 不会对空数组进行检测，map() 不会改变原始数组。

3、语法：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> 函数参数: 
    <table> 
     <tbody> 
      <tr> 
       <th>参数</th> 
       <th>描述</th> 
      </tr> 
      <tr> 
       <td><em>currentValue</em></td> 
       <td>必须。当前元素的值</td> 
      </tr> 
      <tr> 
       <td><em>index</em></td> 
       <td>可选。当前元素的索引值，从0开始</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 ，"this" 的值为 "undefined"</td> 
  </tr> 
 </tbody> 
</table>

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <title>箭头函数</title>
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    
        
        <script type="module">
            $(function () {
                let arr1 = [1, 2, 3, 4, 5];
                /**
                 * 通过指定函数处理数组的每个元素，并返回处理后的数组。
                 * 如下所示对数组中的每个元素进行平方操作
                 * @type {Array}
                 */
                let arr2 = arr1.map(function (currentValue, index) {
                    console.log("当前处理数组元素，index=" + index + ",value=" + currentValue);
                    return currentValue * currentValue;
                });
                console.log(arr1.toString());//原数组的值不变
                console.log(arr2.toString());//新数组的值为原数组的值的平方
            });
        </script>
    </head>
    <body>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70]: /images/20220416/a73a8469760a4cbc9c0fee9789152777.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 1]: /images/20220416/9284e4c6d77a4b91b0be73b95f161e76.png
[JavaScript Array map_]: https://blog.csdn.net/wangmx1993328/article/details/84066490