JS数组方法大全(含示例)

提示：本文整理了21个JS中的数组方法，便于大家查阅。

           写于2022年最后一天，愿2023本鹅与你所愿，都能如愿！

---

      -总览-

方法名	功能	是否改变原数组
concat()	合并两个或多个数组	❌
join()	使用分隔符，将数组转为字符串并返回	❌
pop()	删除最后一位，并返回删除的数据	✔️
shift()	删除第一位，并返回删除的数据	✔️
unshift()	在第一位新增一或多个数据，返回长度	✔️
push()	在最后一位新增一或多个数据，返回长度	✔️
reverse()	反转数组，返回结果	✔️
slice()	截取指定位置的数组，并返回	❌
sort()	排序（字符规则），返回结果	✔️
splice()	删除指定位置，并替换，返回删除的数据	✔️
toString()	直接转为字符串，并返回	❌
valueOf()	返回数组对象的原始值	❌
indexOf()	查询并返回数据的索引	❌
lastIndexOf()	反向查询并返回数据的索引	❌
forEach()	参数为回调函数，会遍历数组所有的项，回调函数接受三个参数，分别为value，index，self；forEach没有返回值	❌
map()	同forEach，同时回调函数返回数据，组成新数组由map返回	❌
filter()	同forEach，同时回调函数返回布尔值，为true的数据组成新数组由filter返回	❌
every()	同forEach，同时回调函数返回布尔值，全部为true，由every返回true	❌
some()	同forEach，同时回调函数返回布尔值，只要由一个为true，由some返回true	❌
reduceRight()	反向归并，同forEach，迭代数组的所有项，并构建一个最终值，由reduceRight返回	❌

1、concat()；

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

​
<script>
    const arr1 = ['新', '年'];
    const arr2 = ['快', '乐'];
    const arr3 = arr1.concat(arr2);
    console.log(arr3);  // ['新', '年', '快', '乐']
</script>

​

---

2、join()；

        join() 方法将一个数组（或一个类shuzuduix）的所有元素连接成一个字符串并返回这个字符串，用逗号或指定的分隔符字符串分隔。如果数组只有一个元素，那么将返回该元素而不使用分隔符。

<script>
    const arr = ['连', '起', '来'];
    console.log(arr.join());    // "连,起,来"
    console.log(arr.join(''));  // "连起来"
    console.log(arr.join('-')); // "连-起-来"
</script>

---

3、pop()；

        pop() 方法从数组中删除最后一个元素，并返回该元素的值。此方法会更改数组的长度。

<script>
    const role = ['Ironman', 'Spiderman', 'Thor', 'Loki', 'Thanos'];
    console.log(role.pop());  // "Thanos"
    console.log(role);    // ["Ironman", "Spiderman", "Thor", "Loki"]
    role.pop();
    console.log(role);    // ["Ironman", "Spiderman", "Thor"]
</script>

---

4、shift()；

        shift() 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。

<script>
    const arr = [1, 2, 3];
    const firstEle = arr.shift();
    console.log(firstEle);  // 1
    console.log(arr);  // [2, 3]
</script>

---

5、unshift()；

        unshift() 方法将一个或多个元素添加到数组的开头，并返回新数组的长度。

<script>
    const arr = ['临', '风'];
    console.log(arr.unshift('玉', '树'));  // 4
    console.log(arr);  // ['玉', '树', '临', '风']
</script>

---

6、push()；

        push() 方法将一个或多个元素添加到数组的末尾，并返回新数组的长度。

<script>
    const arr = ['C', 'S'];
    const count = arr.push('D', 'N');
    console.log(count);  // 4
    console.log(arr);  // ['C', 'S', 'D', 'N']
</script>

---

7、reverse()；

        reverse() 方法将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组。

<script>
    const arr1 = [' 1', ' 2', ' 3'];
    console.log('arr1:', arr1);  //  "arr1:" [" 1", " 2", " 3"]
    const reversed = arr1.reverse();
    console.log('reversed:', reversed);  //  "reversed:" [" 3", " 2", " 1"]
    console.log('arr1:', arr1);  //  "arr1:" [" 3", " 2", " 1"]
</script>

---

8、sort()；

        sort() 方法对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的 UTF-16 代码单元值序列时构建的

<script>
    const num = ['b', 'a', 'd', 'ac'];
    num.sort();
    console.log(num);  // ['a', 'ac', 'b', 'd']
    const arr1 = [1, 30, 4, 21, 'f', 'a', 100000];
    arr1.sort();
    console.log(arr1);  // [1, 100000, 21, 30, 4, 'a', 'f']
</script>

---

9、slice()；

           截取指定位置的数组，并且返回截取的数组，不会改变原数组。

           参数：slice(startIndex, endIndex)

　　　注意：可从已有的数组中返回选定的元素。该方法接收两个参数slice(start,end)，strat为必选，表示从第几位开始；end为可选，表示到第几位结束(不包含end位)，省略表示到最后一位；start和end都可以为负数，负数时表示从最后一位开始算起，如-1表示最后一位。

<script>
    const role = ['Naruto', 'Sasuke', 'Itachi', 'Madara', 'Obito'];
    console.log(role.slice(2));  //  ["Itachi", "Madara", "Obito"]
    console.log(role.slice(2, 4));  //  ["Itachi", "Madara"]
    console.log(role.slice(1, 5));  //  ["Sasuke", "Itachi", "Madara", "Obito"]
    console.log(role.slice(-2));  //  ["Madara", "Obito"]
    console.log(role.slice(2, -1));  //  ["Itachi", "Madara"]
    console.log(role.slice());  //  [" Naruto", "Sasuke", "Itachi", "Madara", "Obito"]
</script>

---

10、splice()；

        splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组形式返回被修改的内容。此方法会改变原数组。

<script>
    const num = ['1', '3', '4', '5'];
    num.splice(1, 0, '2');  // 在下标为1的位置插入'2'
    console.log(num);  // ["1", "2", "3", "4", "5"]
    num.splice(4, 1, '6');  // 将下标为4的这1个元素替换为'6'
    console.log(num);  // ["1", "2", "3", "4", "6"]
</script>

---

11、toString()；

        toString() 方法返回一个字符串，表示指定的数组及其元素。

<script>
    const array1 = [1, 2, 'a', '1a'];
    console.log(array1.toString());  // "1,2,a,1a"
</script>

---

12、valueOf()；

        返回数组的原始值（一般情况下其实就是数组自身），一般由js在后台调用，并不显式的出现在代码中。

<script>
    var arr = ['a','b','c'];
    console.log(arr.valueOf());     //['a','b','c']
    console.log(arr);         //['a','b','c']
</script>

---

13、indexOf()；

        indexOf() 方法返回在数组中可以找到给定元素的第一个索引，如果不存在，则返回 -1。（如果找到该数据，立即返回该数据的索引，不再往后继续查找）

        参数：indexOf(value, start);value为要查询的数据；start为可选，表示开始查询的位置，当start为负数时，从数组的尾部向前数；如果查询不到value的存在，则方法返回-1

<script>
    var arr = ["h", "e", "l", "l", "o"];
    console.log(arr.indexOf("l"));        //2
    console.log(arr.indexOf("l", 3));      //3
    console.log(arr.indexOf("l", 4));      //-1
    console.log(arr.indexOf("l", -1));     //-1
    console.log(arr.indexOf("l", -3));     //2
</script>

---

14、lastIndexOf()；

        根据指定的数据，从左向右，查询在数组中出现的位置，如果不存在指定的数据，返回-1，找到了指定的数据返回该数据的索引。

        参数：indexOf(value, start);value为要查询的数据；start为可选，表示开始查询的位置，当start为负数时，从数组的尾部向前数；如果查询不到value的存在，则方法返回-1

<script>
    const role = ['Ezreal', 'Yasso', 'LeeSin', 'Ezreal'];
    console.log(role.lastIndexOf('Ezreal'));  // 3
    console.log(role.lastIndexOf('Yasso'));  // 1
</script>

---

15、forEach()；

        ES5新增的方法，用来遍历数组，没有返回值，

　    参数：forEach(callback);callback默认有三个参数，分别为value(遍历到的数组的数据)，index(对应的索引)，self(数组自身)。

<script>
    const array1 = ['a', 'b', 'c'];
    array1.forEach(element => console.log(element));
    // "a"
    // "b"
    // "c"
</script>

---

 16、map()；

        功能同forEach()，与forEach()区别在于map()会返回一个新数组。

<script>
    const arr = [1, 4, 9, 16];
    const map1 = arr.map(val => val * 2);
    console.log(map1);  // [2, 8, 18, 32]
</script>

---

17、filter()；

        filter的回调函数需要返回布尔值，当为true时，将本次数组的数据返回给filter，最后filter将所有回调函数的返回值组成新数组返回（此功能可理解为“过滤”）。

<script>
    const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
    const result = words.filter(word => word.length > 6);
    console.log(result);  // ["exuberant", "destruction", "present"]
</script>

---

18、every()；

        判断数组中每一项是否都满足条件，只有所有项都满足条件，才会返回true。

<script>
    const isBelowThreshold = (val) => val < 40;
    const arr = [1, 30, 39, 29, 10, 13];
    console.log(arr.every(isBelowThreshold)); // true
</script>

---

19、some()；

        判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。

   注：如果用一个空数组进行测试，在任何情况下它返回的都是false。

<script>
    const arr = [1, 2, 3, 4, 5];
    const even = (val) => val > 4;
    console.log(arr.some(even));  // true
</script>

---

 20、reduce()；

        从数组的第一项开始，逐个遍历到最后，迭代数组的所有项，然后构建一个最终返回的值。

        参数：reduce()接收一个或两个参数：第一个是回调函数，表示在数组的每一项上调用的函数；第二个参数（可选的）作为归并的初始值，被回调函数第一次执行时的第一个参数接收。 reduce(callback,initial);callback默认有四个参数，分别为prev，now，index，self。 callback返回的任何值都会作为下一次执行的第一个参数。 如果initial参数被省略，那么第一次迭代发生在数组的第二项上，因此callback的第一个参数是数组的第一项，第二个参数就是数组的第二项。

<script>
    const arr = [1, 2, 3, 4];
    // 0 + 1 + 2 + 3 + 4
    const initialValue = 0;
    const sumWithInitial = arr.reduce(
        (accumulator, currentValue) => accumulator + currentValue,
        initialValue
    );
    console.log(sumWithInitial);  // 10
</script>

---

21、reduceRight()；

        （与reduce类似）从数组的最后一项开始，向前逐个遍历到第一位，迭代数组的所有项，然后构建一个最终返回的值。

<script>
    const arr = [[0, 1], [2, 3], [4, 5]];
    const result = arr.reduceRight((accumulator, currentValue) => accumulator.concat(currentValue));
    console.log(result);  // [4, 5, 2, 3, 0, 1]
</script>

---

总结

       以上就是JS中的21个数组方法，其中以下7个会影响原数组，其余无影响

       unshift(); push()；shift();  pop();  sort();  reverse();  splice();