码迷，mamicode.com
首页 > 编程语言 > 详细

JS数组方法大全

时间：2020-05-26 23:32:42      阅读：99      评论：0      收藏：0      [点我收藏+]

标签：fine   位置   详解   需要   判断   ruby   改变   自动调用   ==   

 

一、在使用数组的方法之前，需要先创建数组，创建数组有以下方式：

  • 字面量方式（json方式）
var arr1 = [];                    //创建一个空数组
var arr2 = [5];                   //创建一个具有单个元素的数组
var arr3 = [5,6,7];               //创建一个具有多个元素的数组
  • 构造函数方式
var arr1 = new Array();          //创建一个空数组
var arr2 = new Array(5);         //创建一个长度为5，值为空的数组
var arr3 = new Array(5,6,7);     //创建一个具有多个元素的数组

二、数组方法概括

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

三、方法详解

1.concat()

功能：用于连接两个或多个数组，该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
参数：concat(data1,data2,...);所有参数可选，要合并的数据；data为数组时，将data合并到原数组；data为具体数据时直接添加到原数组尾部；省略时创建原数组的副本。

    var arr1 = [1,2,3]
    var arr2 = arr1.concat();
    console.log(arr1);           //[1,2,3]---原数组
    console.log(arr1 === arr2);  //false
    console.log(arr2);           //[1,2,3]---原数组的副本
    
    console.log(arr1.concat("hello","world"));           //[1,2,3,"hello","world"]
    console.log(arr1.concat(["a","b"],[[3,4],{"name":"admin"}]));   //[1,2,3,"a","b",[3,4],{"name":"admin"}]
    console.log(arr1);           //[1,2,3]---原数组未改变

2.join()

功能：根据指定分隔符将数组中的所有元素放入一个字符串，并返回这个字符串。
参数：join(str);参数可选，默认为","号，以传入的字符作为分隔符。

    var arr = [1,2,3];
    console.log(arr.join());         //1,2,3
    console.log(arr.join("-"));      //1-2-3
    console.log(arr);                //[1,2,3]---原数组未改变

3.pop()

功能：方法用于删除并返回数组的最后一个元素。
参数：无

    var arr = [1,2,3];
    console.log(arr.pop());     //3
    console.log(arr);           //[1,2]---原数组改变

4.shift()

功能：方法用于删除并返回数组的第一个元素。
参数：无

    var arr = [1,2,3]
    console.log(arr.shift());       //1
    console.log(arr);               //[2,3]---原数组改变

5.unshift()

功能：向数组的开头添加一个或更多元素，并返回新的长度。
参数：unshift(newData1, newData2, ......)

    var arr = [1,2,3];
    console.log(arr.unshift("hello"));  //4
    console.log(arr);                   //["hello",1,2,3]---原数组改变
    console.log(arr.unshift("a","b"));  //6
    console.log(arr);                   //["a","b","hello",1,2,3]---原数组改变

6.push()

功能：向数组的末尾添加一个或更多元素，并返回新的长度。
参数：push(newData1, newData2, ......)

    var arr = [1,2,3];
    console.log(arr.push("hello"));  //4
    console.log(arr);                //[1,2,3,"hello"]---原数组改变
    console.log(arr.push("a","b"));  //6
    console.log(arr);                //[1,2,3,"hello","a","b"]---原数组改变

7.reverse()

功能：颠倒数组中元素的顺序。
参数：无

    var arr = [1,2,3];
    console.log(arr.reverse());     //[3,2,1]
    console.log(arr);               //[3,2,1]---原数组改变

8.slice()

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

    var arr = ["Tom","Jack","Lucy","Lily","May"];
    console.log(arr.slice(1,3));        //["Jack","Lucy"]
    console.log(arr.slice(1));          //["Jack","Lucy","Lily","May"]
    console.log(arr.slice(-4,-1));      //["Jack","Lucy","Lily"]
    console.log(arr.slice(-2));         //["Lily","May"]
    console.log(arr.slice(1,-2));       //["Jack","Lucy"]
    console.log(arr);                   //["Tom","Jack","Lucy","Lily","May"]---原数组未改变

9.sort()

功能：对数组中的元素进行排序，默认是升序。

    var arr = [6,1,5,2,3];
    console.log(arr.sort());    //[1, 2, 3, 5, 6]
    console.log(arr);           //[1, 2, 3, 5, 6]---原数组改变

但是在排序前，会先调用数组的toString方法，将每个元素都转成字符之后，再进行排序，此时会按照字符串的排序，逐位比较，进行排序。

    var arr = [6,1024,52,256,369];
    console.log(arr.sort());    //[1024, 256, 369, 52, 6]
    console.log(arr);           //[1024, 256, 369, 52, 6]---原数组改变

参数：sort(callback)
如果需要按照数值排序，需要传参。sort(callback)，callback为回调函数，该函数应该具有两个参数，比较这两个参数，然后返回一个用于说明这两个值的相对顺序的数字（a-b）。其返回值如下：
若 a 小于 b，返回一个小于 0 的值。
若 a 等于 b，则返回 0。
若 a 大于 b，则返回一个大于 0 的值。

    var arr = [6,1024,52,256,369];
    console.log(arr.sort(fn));  //[6, 52, 256, 369, 1024]
    console.log(arr);           //[6, 52, 256, 369, 1024]---原数组改变
    function fn(a,b){
        return a-b;
    }

10.splice()

功能：向数组中添加，或从数组删除，或替换数组中的元素，然后返回被删除/替换的元素。
参数：splice(start,num,data1,data2,...); 所有参数全部可选。
1>不传参时：无操作

    var arr = ["Tom","Jack","Lucy","Lily","May"];
    console.log(arr.splice());      //[]
    console.log(arr);               //["Tom","Jack","Lucy","Lily","May"]---无操作

2>只传入start：表示从索引为start的数据开始删除，直到数组结束

    var arr = ["Tom","Jack","Lucy","Lily","May"];    
    console.log(arr.splice(2));     //["Lucy", "Lily", "May"]
    console.log(arr);               //["Tom", "Jack"]---原数组改变

3>传入start和num：表示从索引为start的数据开始删除，删除num个

    var arr = ["Tom","Jack","Lucy","Lily","May"];    
    console.log(arr.splice(2,2));   //["Lucy", "Lily"]
    console.log(arr);               //["Tom", "Jack", "May"]---原数组改变

4>传入更多：表示从索引为start的数据开始删除，删除num个，并将第三个参数及后面所有参数，插入到start的位置

    var arr = ["Tom","Jack","Lucy","Lily","May"];    
    console.log(arr.splice(2,2,"a","b"));  //["Lucy", "Lily"]
    console.log(arr);                      //["Tom", "Jack", "a", "b", "May"]---原数组改变

5>传入更多：表示从索引为start的数据开始删除，删除num个，并将第三个参数及后面所有参数，插入到start的位置

    var arr = ["Tom","Jack","Lucy","Lily","May"];    
    console.log(arr.splice(2,0,"a","b"));  //[]
    console.log(arr);    //["Tom", "Jack", "a", "b", "Lucy", "Lily", "May"]---原数组改变

11.toString()

功能：转换成字符串，类似于没有参数的join()。该方法会在数据发生隐式类型转换时被自动调用，如果手动调用，就是直接转为字符串。
参数：无

    var arr = [1,2,3];
    console.log(arr.toString());     //1,2,3
    console.log(arr);                //[1,2,3]---原数组未改变

12.valueOf()

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

    var arr = [1,2,3];
    console.log(arr.valueOf());         //[1,2,3]
    console.log(arr);                   //[1,2,3]
    //为了证明返回的是数组自身
    console.log(arr.valueOf() == arr);  //true

13.indexOf()

功能：根据指定的数据，从左向右，查询在数组中出现的位置，如果不存在指定的数据，返回-1。该方法是查询方法，不会对数组产生改变。
参数：indexOf(value, start);value为要查询的数据；start为可选，表示开始查询的位置，当start为负数时，从数组的尾部向前数；如果查询不到value的存在，则方法返回-1

    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

14.lastIndexOf()

功能：根据指定的数据，从右向左，查询在数组中出现的位置，如果不存在指定的数据，返回-1。该方法是查询方法，不会对数组产生改变。
参数：lastIndexOf(value, start);value为要查询的数据；start为可选，表示开始查询的位置，当start为负数时，从数组的尾部向前数；如果查询不到value的存在，则方法返回-1

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

15.forEach()

功能：ES5新增方法，用来遍历数组，该方法没有返回值。forEach接收的回调函数会根据数组的每一项执行，该回调函数默认有三个参数，分别为：遍历到的数组的数据，对应的索引，数组自身。
参数：forEach(callback);callback默认有三个参数，分别为value，index，self。

    var arr = ["Tom","Jack","Lucy","Lily","May"];
    var a = arr.forEach(function(value,index,self){
        console.log(value + "--" + index + "--" + (arr === self));
    })
    // 打印结果为：
    // Tom--0--true
    // Jack--1--true
    // Lucy--2--true
    // Lily--3--true
    // May--4--true
    console.log(a);     //undefined---forEach没有返回值
    //该方法为遍历方法，不会修改原数组

16.map()

功能：1.同forEach功能；2.map的回调函数会将执行结果返回，最后map将所有回调函数的返回值组成新数组返回。
参数：map(callback);callback默认有三个参数，分别为value，index，self。

    //功能1：同forEach
    var arr = ["Tom","Jack","Lucy","Lily","May"];
    var a = arr.map(function(value,index,self){
        console.log(value + "--" + index + "--" + (arr === self))
    })
    // 打印结果为：
    // Tom--0--true
    // Jack--1--true
    // Lucy--2--true
    // Lily--3--true
    // May--4--true

    //功能2：每次回调函数的返回值被map组成新数组返回
    var arr = ["Tom","Jack","Lucy","Lily","May"];
    var a = arr.map(function(value,index,self){
        return "hi:"+value;
    })
    console.log(a);     //["hi:Tom", "hi:Jack", "hi:Lucy", "hi:Lily", "hi:May"]
    console.log(arr);   //["Tom", "Jack", "Lucy", "Lily", "May"]---原数组未改变

17.filter()

功能：1.同forEach功能；2.filter的回调函数需要返回布尔值，当为true时，将本次数组的数据返回给filter，最后filter将所有回调函数的返回值组成新数组返回（此功能可理解为“过滤”）。
参数：filter(callback);callback默认有三个参数，分别为value，index，self。

    //功能1：同forEach
    var arr = ["Tom","Jack","Lucy","Lily","May"];
    var a = arr.filter(function(value,index,self){
        console.log(value + "--" + index + "--" + (arr === self))
    })
    // 打印结果为：
    // Tom--0--true
    // Jack--1--true
    // Lucy--2--true
    // Lily--3--true
    // May--4--true

    //功能2：当回调函数的返回值为true时，本次的数组值返回给filter，被filter组成新数组返回
    var arr = ["Tom","Jack","Lucy","Lily","May"];
    var a = arr.filter(function(value,index,self){
        return value.length > 3;
    })
    console.log(a);         //["Jack", "Lucy", "Lily"]
    console.log(arr);       //["Tom", "Jack", "Lucy", "Lily", "May"]---原数组未改变

18.every()

功能：判断数组中每一项是否都满足条件，只有所有项都满足条件，才会返回true。
参数：every()接收一个回调函数作为参数，这个回调函数需要有返回值，every(callback);callback默认有三个参数，分别为value，index，self。

功能1：当回调函数的返回值为true时，类似于forEach的功能，遍历所有；如果为false，那么停止执行，后面的数据不再遍历，停在第一个返回false的位置。

    //demo1:
    var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
    var a = arr.every(function(value,index,self){
        console.log(value + "--" + index + "--" + (arr == self))
    })
    // 打印结果为：
    // Tom--0--true
    //因为回调函数中没有return true，默认返回undefined，等同于返回false

    //demo2:
    var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
    var a = arr.every(function(value,index,self){
        console.log(value + "--" + index + "--" + (arr == self))
        return value.length < 4;
    })
    // 打印结果为：
    // Tom--0--true
    // abc--1--true
    // Jack--2--true
    //因为当遍历到Jack时，回调函数到return返回false，此时Jack已经遍历，但是后面数据就不再被遍历了

    //demo3:
    var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
    var a = arr.every(function(value,index,self){
        console.log(value + "--" + index + "--" + (arr == self))
        return true;
    })
    // 打印结果为：
    // Tom--0--true
    // abc--1--true
    // Jack--2--true
    // Lucy--3--true
    // Lily--4--true
    // May--5--true
    //因为每个回调函数的返回值都是true，那么会遍历数组所有数据，等同于forEach功能

功能2：当每个回调函数的返回值都为true时，every的返回值为true，只要有一个回调函数的返回值为false，every的返回值都为false

    //demo1:
    var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
    var a = arr.every(function(value,index,self){
        return value.length > 3;
    })
    console.log(a);           //false

    //demo2:
    var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
    var a = arr.every(function(value,index,self){
        return value.length > 2;
    })
    console.log(a);           //true

19.some()

功能：判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。
参数：some()接收一个回调函数作为参数，这个回调函数需要有返回值，some(callback);callback默认有三个参数，分别为value，index，self。

功能1：因为要判断数组中的每一项，只要有一个回调函数返回true，some都会返回true，所以与every正好相反，当遇到一个回调函数的返回值为true时，可以确定结果，那么停止执行，后面都数据不再遍历，停在第一个返回true的位置；当回调函数的返回值为false时，需要继续向后执行，到最后才能确定结果，所以会遍历所有数据，实现类似于forEach的功能，遍历所有。

    //demo1:
    var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
    var a = arr.some(function(value,index,self){
        console.log(value + "--" + index + "--" + (arr == self))
        return value.length > 3;
    })
    // 打印结果为：
    // Tom--0--true
    // abc--1--true
    // Jack--2--true

    //demo2:
    var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
    var a = arr.some(function(value,index,self){
        console.log(value + "--" + index + "--" + (arr == self))
        return true;
    })
    // 打印结果为：
    // Tom--0--true

    //demo3:
    var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
    var a = arr.some(function(value,index,self){
        console.log(value + "--" + index + "--" + (arr == self))
        return false;
    })
    // 打印结果为：
    // Tom--0--true
    // abc--1--true
    // Jack--2--true
    // Lucy--3--true
    // Lily--4--true
    // May--5--true

功能2：与every相反，只要有一个回调函数的返回值都为true，some的返回值为true，所有回调函数的返回值为false，some的返回值才为false

    //demo1:
    var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
    var a = arr.some(function(value,index,self){
        return value.length > 3;
    })
    console.log(a);             //true

    //demo2:
    var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
    var a = arr.some(function(value,index,self){
        return value.length > 4;
    })
    console.log(a);             //false

19.reduce()

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

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

    //demo1:不省略initial参数，回调函数没有返回值
    var arr = [10,20,30,40,50];
    arr.reduce(function(prev,now,index,self){
        console.log(prev + "--" + now + "--" + index + "--" + (arr == self))
    }, 2019)
    // 打印结果为：
    // 2019--10--0--true
    // undefined--20--1--true
    // undefined--30--2--true
    // undefined--40--3--true
    // undefined--50--4--true
    // 此时回调函数没有return，所以从第二次开始，prev拿到的是undefined

    //demo2:省略initial参数，回调函数没有返回值
    var arr = [10,20,30,40,50];
    arr.reduce(function(prev,now,index,self){
        console.log(prev + "--" + now + "--" + index + "--" + (arr == self))
    })
    // 打印结果为：第一次，回调函数的第一个参数是数组的第一项。第二个参数就是数组的第二项
    // 10--20--1--true
    // undefined--30--2--true
    // undefined--40--3--true
    // undefined--50--4--true
    // 此时回调函数没有return，所以从第二次开始，prev拿到的是undefined

    //demo3:不省略initial参数，回调函数有返回值
    var arr = [10,20,30,40,50];
    arr.reduce(function(prev,now,index,self){
        console.log(prev + "--" + now + "--" + index + "--" + (arr == self));
        return "hello";
    }, 2019)
    // 打印结果为：
    // 2019--10--0--true
    // hello--20--1--true
    // hello--30--2--true
    // hello--40--3--true
    // hello--50--4--true
    // 此时回调函数有return，所以从第二次开始，prev拿到的是回调函数return的值

    //demo4:省略initial参数，回调函数有返回值
    var arr = [10,20,30,40,50];
    arr.reduce(function(prev,now,index,self){
        console.log(prev + "--" + now + "--" + index + "--" + (arr == self));
        return "hello";
    })
    // 打印结果为：第一次，回调函数的第一个参数是数组的第一项。第二个参数就是数组的第二项
    // 10--20--1--true
    // hello--30--2--true
    // hello--40--3--true
    // hello--50--4--true
    // 此时回调函数有return，所以从第二次开始，prev拿到的是回调函数return的值

    //demo5：使用reduce计算数组中所有数据的和
    var arr = [10,20,30,40,50];
    var sum = arr.reduce(function(prev,now,index,self){
        return prev + now;
    })
    console.log(sum);      //150
    // 回调函数的最后一次return的结果被返回到reduce方法的身上

    //demo6：使用reduce计算数组中所有数据的和
    var arr = [10,20,30,40,50];
    var sum = arr.reduce(function(prev,now,index,self){
        return prev + now;
    }, 8)
    console.log(sum);      //158
    // 回调函数的最后一次return的结果被返回到reduce方法的身上
    // 因为reduce有第二个参数initial，在第一次执行时被计算，所以最终结果被加上8

20.reduceRight()

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

 

 

JS数组方法大全

标签：fine   位置   详解   需要   判断   ruby   改变   自动调用   ==   

原文地址：https://www.cnblogs.com/llive/p/12969465.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！