数组的方法总结

Lee（小白打怪）

已于 2023-02-28 20:06:28 修改

阅读量158

点赞数 1

文章标签： javascript 开发语言 ecmascript Powered by 金山文档

于 2023-02-28 20:02:10 首次发布

本文链接：https://blog.csdn.net/Lee_Morphine/article/details/129247449

版权

引用参考链接：https://blog.csdn.net/qq_39132756/article/details/85007082

原ES5数组方法：

concat() ——合并数组，返回合并后的数据

语法：array1.concat(array2,array3,...,arrayN)

<script>
        var Array = ["hello", "word"];
        var ArrayItem = ["java", "C++", "C#"];
        var ArrayData = ["name"];
        var ArrayTime = ['2023',"0227"]
        var my = Array.concat(ArrayItem, ArrayData,ArrayTime);
        console.log(my);

        // 输出的结果为：
        // ['hello', 'word', 'java', 'C++', 'C#', 'name', '2023', '0227']

    </script>

该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。在没有给 concat()方法传递参数的情况下，它只是复制当前数组并返回副本。

<script>
    var arr=[1,2,3,4];
    var arr2=[11,12,13] 
    var arrCopy = arr.concat(arr2);
    console.log(arr.concat()); // [1, 2, 3, 4] (复制数组)
    console.log(arrCopy); // [1, 2, 3, 4, 11, 12, 13]
    console.log(arr); // [1, 2, 3, 4] (原数组未改变)
</script>

join() ——数组转字符串

join方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。

join方法可以用符不同的分隔符来构建这个字串。join方法值接受一个参数，即用作分隔符的字符串，然后返回所有数组项的字符串。

<script>
        var arr = ['my','Lee','0227']
        console.log(arr);  //['my', 'Lee', '0227']
        console.log(arr.join());  // my,Lee,0227
        // 因为join方法的参数不传或者传入undefined会默认用逗号分隔。
        console.log(arr.join(';')); // my;Lee;0227
    </script>

pop()和push() ——数组尾操作

pop()：删除数组的最后一位元素，并返回删除的数值

push()：在数组的尾部新增一或多个元素，并返回新的长度

<script>
        var arr = ['my','Lee','0227']
        //pop
        console.log(arr.pop());  // 返回删除的最后一位元素：0227
        console.log(arr);       //['my', 'Lee']

        //push
        console.log(arr.push('Sun')); // 返回新增后的长度：3
        console.log(arr);             // ['my', 'Lee', 'Sun']
      
    </script>

shift()和unshift() ——数组首操作

shift()：删除数组的第一位元素，并返回删除的数值

unshift()：在数组的开头新增一或多个元素，并返回新的长度

 <script>
        var arr = ['my','Lee','0227']
        //pop
        console.log(arr.shift());  // 返回删除的第一位元素：my
        console.log(arr);       //['Lee','0227']

        //push
        console.log(arr.unshift('Sun','Happy')); // 返回新增后的长度：4
        console.log(arr);             // ['Sun','Happy', 'Lee', 'Sun']
      
    </script>

sort() ——对数组的元素进行排序

sort() 方法用原地算法对数组的元素进行排序，并返回数组。

5.1默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列时构建的

字符串排序直接使用sort（）方法

var arr = [15,68,3,2,89];
arr.sort();
console.log(arr)  //[15, 2, 3, 68, 89]

var arr1 = ['h','a','k','c','e'];
arr1.sort();
console.log(arr1)  // ["a", "c", "e", "h", "k"]

5.2升序降序

比较数字而非字符串，a-b升序 b-a降序

var arr = [15,68,3,2,89];
arr.sort((a,b)=>a-b);
console.log(arr)  // [2, 3, 15, 68, 89] 升序
 
var arr = [15,68,3,2,89];
arr.sort((a,b)=>b-a);
console.log(arr)  // [89, 68, 15, 3, 2] 降序

5.3依据对象的某个属性排序

<script>
        var arr = [
            { name: 'Li', age: 18 },
            { name: 'Liu', age: 19 },
            { name: 'Yin', age: 22 },
            { name: 'Luo', age: 20 },
            { name: 'Jack', age: 21 },
        ]
        //依据age排序
        arr.sort( (a, b) =>a.age - b.age);
        console.log(arr);
        //结果
        // 0: {name: 'Li', age: 18}
        // 1: {name: 'Liu', age: 19}
        // 2: {name: 'Luo', age: 20}
        // 3: {name: 'Jack', age: 21}     
        // 4: {name: 'Yin', age: 22}

        //依据name排序
        arr.sort(function(a,b){
            if(a.name<b.name){return -1}
            if(a.name>b.name){return 1}
            return 0
        })
        console.log(arr);
        //结果：
        // 0:{name: 'Jack', age: 21}
        // 1:{name: 'Li', age: 18}
        // 2:{name: 'Liu', age: 19}
        // 3:{name: 'Luo', age: 20}
        // 4:{name: 'Yin', age: 22}

    </script>

reverse() ——颠倒数组中元素的顺序

要注意的是，这个方法会改变原来的数组，而不会创建新的数组

  var arr=[12,39,7,99,86,4]
        console.log(arr.reverse());  //[4, 86, 99, 7, 39, 12]
        console.log(arr);            //[4, 86, 99, 7, 39, 12]

配合split()方法和join()方法，比如在日期格式反转的场景中。

 var str = '2023-02-27'
        console.log(str.split('-').reverse().join('-')); // 01-04-2020

slice() ——截取指定位置的数组，并返回

语法：arr.slice(start , end);

start：可选。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。

end：可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

返回值：返回一个新的数组，包含从 start 到 end （不包括该元素）的 arr 中的元素。

   <script>
        var arr=[12,39,7,99,86,4]
        console.log(arr.slice(1));  //[39,7,99,86,4]
        console.log(arr);           //[12,39,7,99,86,4] (原数组未改变)
        console.log(arr.slice(0,-1));  //[12,39,7,99,86]
        console.log(arr.slice(-3,-1)); //[99,86]                
        console.log(arr.slice(-6,-3)); //[12,39,7]      
        console.log(arr.slice(-4,3)); //[7]
        console.log(arr);            //[12,39,7,99,86,4]  (原数组未改变) 
    </script>

原文链接：https://blog.csdn.net/qq_39132756/article/details/85007082

splice() ——删除指定位置并替换，返回删除的数据。会改变数组

arr.splice(index , howmany , item1,.....,itemX)

index：必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。

howmany：必需。要删除的项目数量。如果设置为 0，则不会删除项目。

item1, ..., itemX：可选。向数组添加的新项目。

返回值：含有被删除的元素的数组，若没有删除元素则返回一个空数组

 <script>
        var arr=[12,39,7,99,86,4]
        console.log(arr.splice(1));  //从index=1开始删除，返回删除的数据[39, 7, 99, 86, 4]
        console.log(arr);           //原数组改变,[12]

        //将sss替换成810
        var arr1=['yyy','bbb','sss','aaa','666']        
        console.log(arr1.splice(2,1,'810'));  //成功替换掉，['sss']
        console.log(arr1);       //['yyy', 'bbb', '810', 'aaa', '666']    
                      
    </script>

toString() ——直接转为字符串并返回

返回由数组中每个值的等效字符串拼接而成的一个由逗号分隔的字符串

let colors = ['red','green','blue'];

console.log(colors.toString());    // 'red,green,blue'

有关链接：https://blog.csdn.net/qq_45677671/article/details/124797383

<script>
        console.log([new Date(), 123, '23'].toString()); // Tue Feb 28 2023 15:59:20 GMT+0800 (中国标准时间),123,23
        console.log([{}, 123].toString()); // [object Object],123
        console.log([1, 2, [3, 4]].toString()); // 1,2,3,4
    </script>

从上面的例子中，我们会发现一个如果是多维数组，通过toString转换出来的结果其实和一维数组调用toString转换出来的结果是一样的。这个时候我们就能考虑到数组的toString的另外一个用法就是可以将多维数组一维化（或者说是数组的扁平化），其实这个将数组进行一维化的方是有一个弊端的，就是不区分数字类型的值字符串的值举个例子：

 <script>
       console.log([1, [2, 3, 4]].toString());  // 1,2,3,4
       console.log(['1', [2, '3', 4]].toString()); // 1,2,3,4
    </script>

valueOf() ——返回数组对象的原始值

什么是原始值：

原始值：不可变更的值，包括undefined、null、布尔值、数字、和字符串。看下面这张图，列出了一些基本的类型转换

var array = ["ABC", true, 12, -5];
console.log(array.valueOf() === array);   // true

有关链接：https://blog.csdn.net/wzg0817/article/details/105375683

ES5数组新增方法：

PS：转载于链接https://blog.csdn.net/qq_39132756/article/details/85007082

2个索引方法：indexOf()和lastIndexOf()

两个方法都返回要查找的项在数组中首次出现的位置，在没找到的情况下返回-1

indexOf()--------array.indexOf(item,start) （从数组的开头（位置 0）开始向后查找）

item：必须。查找的元素。

start：可选的整数参数。规定在数组中开始检索的位置。如省略该参数，则将从array[0]开始检索。

lastIndexOf()--------array.lastIndexOf(item,start) （从数组的末尾开始向前查找）

item：必须。查找的元素。

start：可选的整数参数。规定在数组中开始检索的位置。如省略该参数，则将从 array[array.length-1]开始检索。

<script>
    var arr = [1,4,7,10,7,18,7,26];
    console.log(arr.indexOf(7));        // 2
    console.log(arr.lastIndexOf(7));    // 6
    console.log(arr.indexOf(7,4));      // 4
    console.log(arr.lastIndexOf(7,2));  // 2
    console.log(arr.indexOf(5));        // -1        
</script>

5个迭代方法：forEach()、map()、filter()、some()、every()

这几个方法语法都一样，都不会改变原数组。

forEach()：对数组进行遍历循环，这个方法没有返回值。jquery()也提供了相应的方法each()方法。

const arr = [2023, 219, 18, "cheese", "eggs", "milk"]
        const [a, b, c, ...args] = arr

        arr.forEach((value, index, self) => {
            console.log(value + "--" + index + "--" + (arr === self));
        }
        )
        //打印结果：
        // 2023--0--true
        // 219--1--true
        // 18--2--true
        // cheese--3--true
        // eggs--4--true
        // milk--5--true

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

语法：array.map(function(currentValue , index , arr){//do something}, thisValue)

map方法实现数组中每个数求平方：

 <script>
        var arr = [1,4,7,8,10];
        var arr2 = arr.map(a=>a**2)
        console.log(arr2);  // [1, 16, 49, 64, 100]
    </script>

filter()： “过滤”功能，方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。和filter() 方法类似，jquery中有个 grep()方法也用于数组元素过滤筛选。

语法： array.filter(function(currentValue , index , arr){//do something}, thisValue)

filter方法实现筛选排除掉所有小于5的元素：

<script>
        var arr = [1,4,6,8,10];
        
        var result1 = arr.filter(a=>a>5);
        console.log(result1);  // [6, 8, 10]

        var result2 = arr.filter(a=>"5");
        console.log(result2);  // [6, 8, 10]
    </script>

当我们分别设置item > 5和item > "5"时, 返回的结果是一样的，由此我们可以看出函数支持弱等于（==），不是必须全（===）。

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

语法： array.every(function(currentValue , index , arr){//do something}, thisValue)

<script>
        var arr = [1,4,6,8,10];
        
        var result1 = arr.every(function(currentValue){
            return currentValue< 12;
        });
        console.log(result1);  // true

        var result2 = arr.every(a=>a>1);
        console.log(result2);  // false
    </script>

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

语法： array.some(function(currentValue , index , arr){//do something}, thisValue)

<script>
        var arr = [1,4,6,8,10];

        var result1 = arr.some(function(currentValue){
            return currentValue> 12;
        });
        console.log(result1);  // false

        var result2 = arr.some(a=>a>1);
        console.log(result2);  // true
    </script>

2个归并方法：reduce()、reduceRight()

这两个方法都会迭代数组中的所有项，然后生成一个最终返回值。他们都接收两个参数，第一个参数是每一项调用的函数，函数接受四个参数分别是初始值，当前值，索引值，和当前数组，函数需要返回一个值，这个值会在下一次迭代中作为初始值。第二个参数是迭代初始值，参数可选，如果缺省，初始值为数组第一项，从数组第一个项开始叠加，缺省参数要比正常传值少一次运算。

reduce()方法从数组的第一项开始，逐个遍历到最后。而 reduceRight()则从数组的最后一项开始，向前遍历到第一项。

reduce()语法：arr.reduce(function(total , cur , index , arr){//do something}, initialValue)

reduceRight()语法：arr.reduceRight(function(total , cur , index , arr){//do something}, initialValue)

total ：必需。初始值, 或者计算结束后的返回值。

cur ：必需。当前元素。

index ：可选。当前元素的索引。

arr：可选。当前元素所属的数组对象。

initialValue：可选。传递给函数的初始值。

<script>
    var arr = [1,2,3,4,5];
    var result1 = arr.reduce(function(total,cur,index,arr){    
        console.log("total:"+total+",cur:"+cur+",index:"+index);
        return total+cur;
    });
    console.log("结果："+result1);
    // 输出
    // total:1,cur:2,index:1
    // total:3,cur:3,index:2
    // total:6,cur:4,index:3
    // total:10,cur:5,index:4
    // 结果：15
    var result2 = arr.reduce(function(total,cur,index,arr){    
        console.log("total:"+total+",cur:"+cur+",index:"+index);
        return total+cur;
    },10);
    console.log("结果："+result2);
    // 输出
    // total:10,cur:1,index:0
    // total:11,cur:2,index:1
    // total:13,cur:3,index:2
    // total:16,cur:4,index:3
    // total:20,cur:5,index:4
    // 结果：25
</script>

从上面代码我们可以看出，当我们不给函数传递迭代初始值时初始值 total 为数组第一项，函数从数组第二项开始迭代；若我们给函数传递迭代初始值，则函数从数组第一项开始迭代。

ES6数组新增方法：

Array.from()

Array构造函数提供一个from()方法，它可接受一个伪数组作为参数，返回值为伪数组转化后的结果，这个结果是一个真正的数组

<script>
        var demo={
            name:'a',
            age:'b',
            sex:'c',
            //length:3
        }
        var ary=Array.from(demo)
        console.log(ary);
        // (3) [undefined, undefined, undefined]
        // 0:undefined
        // 1:undefined
        // 2:undefined
        // length:3

        //用法一：将类数组或可遍历对象转换为真正的数组
        let arr={
            '0':'a',
            '1':'b',
            '2':'c',
            length:3
        }
        console.log(arr);
        let arr1=Array.from(arr)
        console.log(arr1);

        //用法二：对每个元素进行处理，将处理之后的值放入返回的数组
        let arr3={
            '0':1,
            '1':2,
            '2':3,
            length:3
        }
        let arr2=Array.from(arr3,function(item){
            //console.log(item);
            return item*2
        })
        //等价于
        //let arr2=Array.from(arr3,item=>item*2)
        console.log(arr2);

    </script>

Array.of()

方法是将一组值转变为数组，参数不分类型，只分数量，数量为0返回空数组。

 <script>
    let arr1 = Array.of(1,2,3);    
    let arr2 = Array.of([1,2,3]);
    let arr3 = Array.of(undefined);
    let arr4 = Array.of();
    console.log(arr1); // [1, 2, 3]
    console.log(arr2); // [[1, 2, 3]]
    console.log(arr3); // [undefined]
    console.log(arr4); // []
</script>

find()

用于在数组中查找出第一个符合条件的数组成员。方法为数组中的每个元素都调用一次函数执行。当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。如果没有符合条件的元素返回 undefined。

回调函数可以接收3个参数，依次为当前的值（currentValue）、当前的位置（index）、原数组（arr）

注意：find() 对于空数组，函数是不会执行的。find() 并没有改变数组的原始值。

<script>
        // find()-实例方法
        // 语法：用于找到第一个符合条件的数组成员，如果没有找到返回undefined
        // 参数：一个函数
        let ary=[{
            id:1,
            name:'li'
        },{
            id:2,
            name:'liu'
        }]
        let ary2=ary.find(function(item,index){
            // console.log(index,item);
            return item.id==2
        })
        console.log(ary2);

    </script>

findIndex()

用于在数组查找出第一个符合条件的数组成员的索引，如果没有找到则返回-1。其用法与find()方法非常类似。

<script>
        // findIndex()-实例方法
        // 语法：用于找出**第一个**符合条件的数组成员的位置，若没有找到返回-1
        let ary=[1,2,5,7,8,26,10]
        let index =ary.findIndex((value,index)=>value>9)
        //等价于
        let index1=ary.findIndex(function(value,index){
            // console.log(value);
            // console.log(index);
            return value>9
        })
        console.log(index1);  //26

fill()

fill()方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

语法：array.fill(value, start, end)

value：必需。填充的值。

start：可选。开始填充位置。如果这个参数是负数，那么它规定的是从数组尾部开始算起。

end：可选。停止填充位置 (默认为 array.length)。如果这个参数是负数，那么它规定的是从数组尾部开始算起。

<script>
    let arr = [1,2,3,4,5,6];
    arr.fill(0);  // [0, 0, 0, 0, 0, 0]
    arr.fill(0,1);  // [1, 0, 0, 0, 0, 0] 
    arr.fill(0,1,2);  // [1, 0, 3, 4, 5, 6]
    arr.fill(0,-1);  // [1, 2, 3, 4, 5, 0]
    arr.fill(0,1,-1);  // [1, 0, 0, 0, 0, 6]
</script>

6. includes()

该方法可以表示为某个数组是否包含给定的值，返回一个布尔值，true表示包含给定的值，false表示不包含给定的值

<script>
        // includes()-实例方法
        //语法：表示某个数组是否包含给定的值，返回布尔值
        //True表示包含给定的值，fales表示不包含给定的值
        let ary=[1,2,34,5]
        console.log(ary.includes(1));  //true
        console.log(ary.includes(3));  //false
    </script>

Lee（小白打怪）

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
数组的方法总结

引用参考链接：https://blog.csdn.net/qq_39132756/article/details/85007082语法：array1.concat(array2,array3,...,arrayN)该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。在没有给 concat()方法传递参数的情况下，它只是复制当前数组并返回副本。join() ——数组转字符串join方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。join方法可以用符不同的分隔符来构建这个字串
复制链接

扫一扫