JavaScript（js）中数组Array的常用方法

曾经终败给现在 2021-07-25 20:32 607阅读 0赞

**目录**

Array.indexOf()

Array.includes()

Array.some()

Array.map()

Array.foreach()

Array.filter()

Array.push()

Array.concat()

Array.toString()

Array.splice()

数组中根据指定索引删除：

数组中根据指定元素删除：

Array.join()

Array.entries()

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

# Array.indexOf() #

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

如果没有找到匹配的字符串则返回 -1。

**注意：** indexOf() 方法区分大小写。

console.log(["a", "b", "c"].indexOf("a")); // 0
        console.log(["a", "b", "c"].indexOf("d")); // -1

# Array.includes() #

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

console.log(["a", "b", "c"].includes("a")); // true
        console.log(["a", "b", "c"].includes("d")); // false

# Array.some() #

console.log([1, 2, 3, 4, 5].some(x => x > 3)); //true

some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。

some() 方法会依次执行数组的每个元素：

*  如果有一个元素满足条件，则表达式返回*true* , 剩余的元素不会再执行检测。
 *  如果没有满足条件的元素，则返回false。

**注意：** some() 不会对空数组进行检测。

**注意：** some() 不会改变原始数组。

# Array.map() #

console.log([1, 4, 9, 16].map(x => x * 2)); //[2, 8, 18, 32]

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原始数组元素顺序依次处理元素。

**注意：** map() 不会对空数组进行检测。

**注意：** map() 不会改变原始数组。

# Array.foreach() #

["a", "b", "c"].forEach(item => {
          console.log(item);
        });
        // a
        // b
        // c

forEach() 方法对数组的每个元素执行一次提供的回调函数。

**注意:** forEach() 对于空数组是不会执行回调函数的。

# Array.filter() #

console.log(
          ["c", "c++", "java", "javascript"].filter(item => item.length < 4)
        ); //["c", "c++"]

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

**注意：** filter() 不会对空数组进行检测。

**注意：** filter() 不会改变原始数组。

# Array.push() #

const arr = ["a", "b", "c"];
        let result = arr.push("d");//返回新的数组长度
    
        console.log(arr);//["a", "b", "c", "d"]
        console.log(result);// 4

push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。它直接修改当前数组，而不是创建一个新的数组。如果想象数组的开头添加元素，用**unshift()**方法，如下

const arr = ["a", "b", "c"];
        let result = arr.unshift("d"); //返回新的数组长度
    
        console.log(arr); //["d", "a", "b", "c"]
        console.log(result); // 4

# Array.concat() #

concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。

const arr = ["a", "b", "c"];
        const result = arr.concat(["d", "e", "f"]);
    
        console.log(result); //["a", "b", "c", "d", "e", "f"]
        console.log(arr); //["a", "b", "c"]

# Array.toString() #

console.log([1, 2, 'a', '1a'].toString()); // expected output: "1,2,a,1a"

toString()方法可以把数组转换为字符串，并返回结果

# Array.splice() #

let arr = [10, 12, 13, 14, 15];
        let result = arr.splice(2, 0, "hello");
    
        console.log(result); //[]
        console.log(arr); //[10, 12, "hello", 13, 14, 15]

let arr = [10, 12, 13, 14, 15];
        let result = arr.splice(2, 1, "hello");
    
        console.log(result); //[13]
        console.log(arr); //[10, 12, "hello", 14, 15]

let arr = [10, 12, 13, 14, 15, "hello"];
        let result = arr.splice(2, 3);
    
        console.log(result); //[13, 14, 15]
        console.log(arr); // [10, 12, "hello"]

let arr = [10, 12, 13, 14, 15, "hello"];
        let result = arr.splice(2);
    
        console.log(result); //[13, 14, 15, "hello"]
        console.log(arr); // [10, 12]

## 数组中根据指定索引删除：  ##

![20210502022409125.png][]![20210502022416325.png][]

let arr = ["vue", "react", "angular"];
        console.log("删除前arr:", arr);
    
        let result = arr.splice(0, 1); //第一个参数为删除值的索引
    
        console.log("删除值：", result);
        console.log("删除后arr:", arr);

##  数组中根据指定元素删除： ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]![20210502015336148.png][]

let arr = ["vue", "react", "angular"];
        console.log("删除前arr：", arr);
        for (let i in arr) {
          if (arr[i] === "react") {
            let result = arr.splice(i, 1);
            console.log("删除值:", result);
          }
        }
        console.log("删除后arr:", arr);

# Array.join() #

`join()` 方法将一个数组（或一个[类数组对象][Link 1]）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符。

join（）不会改变原始数组

join()会生成新的数组

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]![20210410234323778.png][]

const elements = ["C", "python", "Java"];
        let returnVal = elements.join();
    
        console.log(returnVal); 
        console.log(elements);
    
        console.log(elements.join(""));
        console.log(elements); 
    
        console.log(elements.join("-")); 
        console.log(elements);

# Array.entries() #

`entries()`方法返回一个新的**Array Iterator**对象，该对象包含数组中每个索引的键/值对。

![20210410230600208.png][]![20210410230609545.png][]

let iterator = ["a", "b", "c"].entries();
        console.log("iterator:", iterator);
    
        for (let item of iterator) {
          console.log("item", item);
          console.log("item[0]:", item[0]);
          console.log("item[1]:", item[1]);
        }

![20210410230931577.png][]![20210410231014293.png][]

let iterator = ["a", "b", "c"].entries();
        console.log("iterator:", iterator);
    
        for (const [index, item] of iterator) {
          console.log("index:", index);
          console.log("item:", item);
        }

[20210502022409125.png]: https://img-blog.csdnimg.cn/20210502022409125.png
[20210502022416325.png]: /images/20210725/040c56875fa241d4a3969fb87831b57f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210502015318288.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[20210502015336148.png]: /images/20210725/73d274b2fe8040a18b20d82fdf42fd27.png
[Link 1]: https://developer.mozilla.org/zh-CN//docs/Web/JavaScript/Guide/Indexed_collections#Working_with_array-like_objects
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210410234316251.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[20210410234323778.png]: /images/20210725/02ab4759fc1e4f6b8a3eec4806b33a75.png
[20210410230600208.png]: https://img-blog.csdnimg.cn/20210410230600208.png
[20210410230609545.png]: /images/20210725/e53f51aba22a407e8ceb9eddc1125cba.png
[20210410230931577.png]: https://img-blog.csdnimg.cn/20210410230931577.png
[20210410231014293.png]: /images/20210725/082f5decf2294727a23bbc1870304c32.png