JS数组的方法大全

最新推荐文章于 2024-09-08 13:45:44 发布

旭日之温

最新推荐文章于 2024-09-08 13:45:44 发布

阅读量1.5k

点赞数 7

文章标签： javascript css vue.js html5 node.js

本文链接：https://blog.csdn.net/weixin_44146288/article/details/109047165

版权

JavaScript 数组的力量隐藏在数组方法中。js数组的方法有很多，这里给大家总结一些常用的方法以及用法。

数组的方法主要有以下几种

join()
pop()
push()
shift()
unshift()
splice()
slice()
concat()
sort()
reverse()
forEach()
map()
filter()
reduce()
reduceRight()
every()
some()
indexOf()
lastIndexOf()
find()
findIndex()

下面开始一一介绍上述方法的使用

1、join() 将数组以规定的符号整合成字符串，默认是逗号。该方法不改变原数组。


  var arr = ["Banana", "Orange","Apple", "Mango"];
  var fruits  = arr.join(" * "); 
  console.log(fruits);  //  Banana * Orange * Apple * Mango
  console.log(arr)  // 原数组不变["Banana", "Orange","Apple", "Mango"]

2、pop() 方法从数组中删除最后一个元素，返回值是删除的元素：


    var arr = ["Banana", "Orange","Apple", "Mango"];
    var fruits  = arr.pop(); 
    console.log(fruits);  //  返回值为 Mango

3、push() 方法向数组结尾处添加一个新的元素：


    var arr = ["Banana", "Orange","Apple", "Mango"];
    var fruits  = arr.push("Kiwi");
    console.log(fruits);  // 返回值是新数组长度 5

4、shift()方法删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined 。这和pop()正好相反。


    var arr = ["Banana", "Orange","Apple", "Mango"];
    var fruits  = arr.shift();
    console.log(fruits);  // 返回删除的元素值 Banana

5、unshift()方法向数组头部添加元素，返回新数组的长度。这和push()正好相反。


    var arr = ["Banana", "Orange","Apple", "Mango"];
    var fruits  = arr.unshift('Kiwi');
    console.log(fruits);  // 返回新数组长度 5

6、splice()方法功能比较强大，可以实现对数组元素的删除、添加、替换。
该方法接受三个参数：

   第一个参数定义了应添加新元素的位置（下标）。
   第二个参数定义应删除多少个元素。
   其余参数定义要添加的新元素。

向数组添加元素 ( 从下标2开始删除0项元素，并从下标2处插入元素 'Lemon','Kiwi' )
    var arr = ["Banana", "Orange","Apple", "Mango"];
    var fruits  = arr.splice(2,0,'Lemon','Kiwi');
    console.log(fruits);  // 返回删除元素组成的数组 []
    console.log(arr)  // ["Banana", "Orange", "Lemon", "Kiwi", "Apple", "Mango"]

删除数组的元素 ( 从下标2开始删除2项元素，并从下标2处插入元素 'Lemon','Kiwi' )
    var arr = ["Banana", "Orange","Apple", "Mango"];
    var fruits  = arr.splice(2,2,'Lemon','Kiwi');
    console.log(fruits);  // 返回删除元素组成的数组 ["Apple", "Mango"]
    console.log(arr)  // ["Banana", "Orange", "Lemon", "Kiwi"]

替换数组的元素 ( 从下标2开始删除1项元素，并从下标2处插入元素 'Lemon'，其实和删除数组是同样的 )
    var arr = ["Banana", "Orange","Apple", "Mango"];
    var fruits  = arr.splice(2,1,'Lemon');
    console.log(fruits);  // 返回删除元素组成的数组 ["Apple"]
    console.log(arr)  // ["Banana", "Orange", "Lemon", "Mango"]

7、slice() 方法用数组的某个片段切出新数组。该方法不改变原数组
该方法接收两个参数：

   第一个参数是开始截取位置
   第二个参数是结束位置，但不包含
   例如 arr.slice(2,4)表示从下标2开始到下标4结束，但是不包含下标为4的那一项元素，所以截取的是下标为2和3的两项


    var arr = ["Banana", "Orange","Apple", "Mango"];
    var fruits  = arr.slice(2,3);
    console.log(fruits);  // 返回截取出来的元素组成的新数组["Apple"]
    console.log(arr)  // 原数组未改变 ["Banana", "Orange", "Apple", "Mango"]

   如果第二个参数省略不写的话，则会截取数组剩余的部分


    var arr = ["Banana", "Orange","Apple", "Mango"];
    var fruits  = arr.slice(1);
    console.log(fruits);  // ["Orange","Apple", "Mango"]
    console.log(arr)  // ["Banana", "Orange", "Apple", "Mango"]

   参数也可以是负数，这时就是从原数组的后面往前截取
   例如：arr.slice(1,-2) 从数组下标为1开始截取到倒数第二项（不包含）


    var arr = ["Banana", "Orange","Apple", "Mango"];
    var fruits  = arr.slice(1,-2);
    console.log(fruits);  // ["Orange"]
    console.log(arr)  // ["Banana", "Orange", "Apple", "Mango"]

8、concat() 方法用来合并数组，通过向原数组添加参数来创建一个新数组，不改变原数组


    var myGirls = ["Cecilie", "Lone"];
    var myBoys = ["Emil", "Tobias", "Linus"];
    var myChildren = myGirls.concat(myBoys);
    console.log(myChildren);  // ["Cecilie", "Lone", "Emil", "Tobias", "Linus"]

9、sort() 方法以字符编码顺序对数组进行排序，默认升序。

    var myGirls = ['a', 'e', 'd', 'c', 'b'];
    console.log(myGirls.sort());  // ["a", "b", "c", "d", "e"]

   如果是数字的话，就会出现排序不正确。因为sort()是按照字符编码的顺序进行排序。
   这时需要通过一个比值函数来修正此问题，也就是sort（）传入一个函数。

    var myGirls = [21, 48, 6, 13, 38];
    console.log(myGirls.sort());  // 排序错误[13, 21, 38, 48, 6]
    
    var myGirls = [21, 48, 6, 13, 38];
    // myGirls.sort(function(a,b){return a-b})  a-b是升序
    // myGirls.sort(function(a,b){return b-a})  b-a是降序
    console.log(myGirls.sort(function(a,b){return a-b}));  // 排序正确[6, 13, 21, 38, 48]
    console.log(myGirls.sort(function(a,b){return b-a}));  // 排序正确[48, 38, 21, 13, 6]

   也可以以随机顺序进行排序，这时sort()的比值函数要写成 function(a, b){return 0.5 - Math.random()}

    var points = [40, 100, 1, 5, 25, 10];
    points.sort(function(a, b){return 0.5 - Math.random()}); 
    console.log(points);  //每一次的结果都不相同 [10, 100, 5, 40, 25, 1]

   JavaScript 数组经常会包含对象：
   var cars = [{type:"Volvo", year:2016},{type:"Saab", year:2001},{type:"BMW", year:2010}]，
   即使对象拥有不同数据类型的属性，sort() 方法仍可用于对数组进行排序。
   解决方法是通过比较函数来对比属性值：

     var cars = [{type:"Volvo", year:2016},
                 {type:"Saab", year:2001},
                 {type:"BMW", year:2010}]
     cars.sort(function(a, b){return a.year - b.year});
     console.log(cars)  // [{type:"Saab", year:2001},{type:"BMW", year:2010},{type:"Volvo", year:2016},]

10、reverse() 方法, 反转数组中的元素。该方法会改变原数组。

    var myBoys = ["Emil", "Tobias", "Linus"];
    console.log(myBoys.reverse());  // ["Linus", "Tobias", "Emil"]
    console.log(myBoys);  // 原数组改变了 ["Linus", "Tobias", "Emil"]

   当然你也可以结合sort()对数组进行降序排序

    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    fruits.sort();        // 先对 fruits 中的元素进行升序排序
    fruits.reverse();     // 反转元素顺序
    console.log(fruits);  // 得到降序 ["Orange", "Mango", "Banana", "Apple"]

11、forEach() 对数组进行遍历循环，该方法没有返回值，不改变原数组，参数是一个function。

    回调函数接收三个参数： 项目值 、项目索引 、数组本身

    var numbers = [45, 4, 9, 16, 25];
    numbers.forEach(function(item, index, arr){
        console.log(item)
    })
    // 打印结果 45， 4， 9， 16， 25
    // 箭头函数写法
    numbers.forEach((item, index, arr) => {
        console.log(item);
    })

12、map() 方法指“映射”，对数组中的每一项参数执行给定函数，返回每次函数调用的结果组成的数组。

   回调函数接收三个参数： 项目值 、项目索引 、数组本身

    var numbers1 = [45, 4, 9, 16, 25];
    var numbers2 = numbers1.map(function myFunction(value, index, array) {
                    return value * 2;
                    });
    console.log(numbers1);  // 原数组未改变 [45, 4, 9, 16, 25]
    console.log(numbers2);  // 返回值为函数执行后结果组成的数组[90, 8, 18, 32, 50]

13、filter() 方法，‘过滤’数组符合条件的元素，返回值为符合条件元素组成的新数组。

    回调函数接收三个参数： 项目值 、项目索引 、数组本身

    var numbers = [45, 4, 9, 16, 25];
    var over18 = numbers.filter(function myFunction(value) {
                    return value > 18;
                 });
    console.log(numbers);  // 原数组不改变 [45, 4, 9, 16, 25]
    console.log(over18);   // 返回值 [45,25]

14、reduce()和 reduceRight()
这两个方法都会实现迭代数组的所有项，然后构建一个最终返回的值。reduce()方法从数组的第一项开始，逐个遍历到最后。而 reduceRight()则从数组的最后一项开始，向前遍历到第一项。
这两个方法都接收两个参数：一个在每一项上调用的函数和（可选的）作为归并基础的初始值。
传给 reduce()和 reduceRight()的函数接收 4 个参数：前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数就是数组的第二项。
下面代码用reduce()实现数组求和，数组一开始加了一个初始值10。

    var values = [1,2,3,4,5];
    var sum = values.reduceRight(function(prev, cur, index, array){
    return prev + cur;
    },10);
    console.log(sum); //25

15、every() 方法检查数组每一项的值是否通过条件。返回true或false。只有每一项都通过，才会返回true。

    这个例子检查所有数组值是否大于 18：

    var numbers = [45, 4, 9, 16, 25];
    var allOver18 = numbers.every(function myFunction(value, index, array) {
    return value > 18;
    });
    // 箭头函数写法
    // var allOver18 = numbers.every((value, index, array) => {
    // return value > 18;
    // });
    console.log(numbers);  // [45, 4, 9, 16, 25]
    console.log(allOver18);   // false

16、some() 方法检查数组某一项的值是否通过条件。返回true或false。只要有一项通过，就会返回true。

   这个例子检查数组的值有没有大于 18的：

    var numbers = [45, 4, 9, 16, 25];
    var allOver18 = numbers.some(function myFunction(value, index, array) {
    return value > 18;
    });
    // 箭头函数写法
    // var allOver18 = numbers.some((value, index, array) => {
    // return value > 18;
    // });
    console.log(numbers);  // [45, 4, 9, 16, 25]
    console.log(allOver18);   // true

17、indexOf() 方法在数组中搜索元素值并返回其位置。接受两个参数，第一个参数是要查找的元素，第二个参数是从哪里开始查找.
如果未找到项目，Array.indexOf() 返回 -1。
如果项目多次出现，则返回第一次出现的位置。

    var fruits = ["Apple", "Orange", "Apple", "Mango"];
    var a = fruits.indexOf("Apple");
    var b = fruits.indexOf("Apple",2);
    var c = fruits.indexOf("BBB")
    console.log(fruits);  // ["Apple", "Orange", "Apple", "Mango"]
    console.log(a);   // 多次出现返回第一次出现的位置 0
    console.log(b);   // 2
    console.log(c);   // 找不到就返回 -1

18、lastIndexOf() 方法和indexOf()的区别是，lastindexOf()是从数组尾部往前查找。其他都相同
19、find() 方法返回通过测试函数的第一个数组元素的值。

    回调函数接受3个参数:项目值、项目索引、数组本身
    这个例子查找（返回）大于 18 的第一个元素的值

    var numbers = [4, 9, 16, 25, 29];
    var first = numbers.find(function myFunction(value, index, array) {
    return value > 18;
    });

    console.log(numbers);  // [4, 9, 16, 25, 29]
    console.log(first);   // 25

20、findIndex() 方法返回通过测试函数的第一个数组元素的索引。

     回调函数接受3个参数:项目值、项目索引、数组本身
     这个例子查找（返回）大于 18 的第一个元素的索引

    var numbers = [4, 9, 16, 25, 29];
    var first = numbers.findIndex(function myFunction(value, index, array) {
    return value > 18;
    });

    console.log(numbers);  // [4, 9, 16, 25, 29]
    console.log(first);   // 3