当前位置：主页 > 查看内容

javascript数组常用方法+数组原型扩展方法+Object.definePropert

发布时间：2021-07-04 00:00| 有 位朋友查看

简介：javascript数组常用方法 1.push---在数组的尾部添加一个元素改变原始数组 2.unshift---在数组的头部添加一个元素改变原始数组 3.pop---在数组的尾部删除一个元素改变原始数组 4.shift---在数组的头部删除一个元素改变原始数组 5.delete---删除索引位置的元素……

javascript数组常用方法

1.push—在数组的尾部添加一个元素（改变原始数组）

            var arr=[1,2,3,4,5];
            arr.push(6);
            console.log(arr); //[1,2,3,4,5,6]

2.unshift—在数组的头部添加一个元素（改变原始数组）

            var arr=[1,2,3,4,5];
            arr.unshift(0)
            console.log(arr);//[0,1,2,3,4,5]

3.pop—在数组的尾部删除一个元素（改变原始数组）

            var arr=[1,2,3,4,5];
            arr.pop()
            console.log(arr);//[1,2,3,4]

4.shift—在数组的头部删除一个元素（改变原始数组）

            var arr=[1,2,3,4,5];
            arr.shift()
            console.log(arr);//[2,3,4,5]

5.delete—删除索引位置的元素（改变原始数组）(不改变原始数组的长度)

            var arr=[1,2,3,4,5];
            delete arr[4];
            console.log(arr);//[1, 2, 3, 4, empty]
            console.log(arr.length);// 5

6.splice(index,num,insertValue)—可以替换，删除，插入一个新数组，index为起始索引，num为要删除的个数，insertValue为要替换或者插入的新数组或者为一个元素,详情请看代码！

  • 删除
           var arr=[1,2,3,4,5];
           arr.splice(1,2);//意思是从索引为1的元素开始删除2个元素
           console.log(arr);//[1,4,5]
  • 插入
            var arr=[1,2,3,4,5];
            arr.splice(1,0,'tx');
            //意思是从索引为1的地方开始，不删除元素，插入一个'tx'
            console.log(arr);//[1, "tx", 2, 3, 4, 5]
            arr.splice(1,0,[0,0,0]);
            // 意思是从索引为1的地方开始，不删除元素。插入一个数组
            console.log(arr);//[1, Array(3), "tx", 2, 3, 4, 5]
            arr.splice(1,0,...[0,0,0]);
            //注意这里要插入的数值前面加上了...就可以直接插入
            console.log(arr);//[1, 0, 0, 0, Array(3), "tx", 2, 3, 4, 5]
  • 替换
            var arr=[1,2,3,4,5];
            arr.splice(1,1,'tx');//[1, "tx", 3, 4, 5]
            //从索引为1的地方开始，先删除1个元素，再插入'tx'
            console.log(arr);
            arr.splice(1,1,[0,0,0]);
            //从索引为1的地方开始，先删除1个元素，再插入数组
            console.log(arr);//[1, Array(3), 3, 4, 5]
            arr.splice(1,1,...[0,0,0]);
            //替换的数值前面加上了...就可以直接替换
            console.log(arr);//[1, 0, 0, 0, 3, 4, 5]

数组原型扩展方法（求和，替换（等量，不等量），删除，插入）

这里用到了数组的原型（不清楚原型的内容大家请看一下我之前写的原型扩展的内容，麻烦了）

  • 数组求和（数组的内容都要求是数值型）
    （当然如果存在字符型等其他类型可以通过JS的类型转换来转换为数值型求和）
Array.prototype.sum=function(){
    var sum=0;
    for(var i=0;i<this.length;i++){
        sum+=this[i];
    }
    return sum;
};//数组求和
    var arr=[1,2,3,4,5];
    var total=arr.sum();
    console.log(total);//15
  • 数组插入
Array.prototype.insert=function(x,newarr){//数组插入
    // x为要插入起始位置 newarr为要插入的数组
    this.splice(x,0,...newarr);
    return this;
};
var arr=[1,2,3,4,5];
arr.insert(1,[0,0,0]);
console.log(arr);//[1, 0, 0, 0, 2, 3, 4, 5]
  • 数值替换
Array.prototype.displace=function(x,y,newarr){ 
//数组替换(不等量替换) 替换的数组可替换指定的个数
    //x为要替换的起始位置 y表示要替换的个数  newarr表示要在这个位置替换的数组
    this.splice(x,y,...newarr);
    return this;
};
var arr=[1,2,3,4,5];
arr.displace(1,2,[0,0,0,0]);
console.log(arr);//[1, 0, 0, 0, 0, 4, 5]
//----------------------------------------------------------------------
Array.prototype.displaceEqual=function(x,newarr){ 
//数组替换(等量替换) 替换的数组多长就替换掉多少元素
    //x为要替换的起始位置  newarr表示要在这个位置替换的数组
    this.splice(x,newarr.length,...newarr);
    return this;
};
var arr=[1,2,3,4,5];
arr.displaceEqual(1,[0,0,0]);
console.log(arr);//[1, 0, 0, 0, 5]
  • 请大家一定要分清楚上面2个替换方式的不同，不等量替换意思是可以指定要替换掉的元素的长度
  • 而等量替换不能指定要替换掉的元素的长度，新来的数组有多长，就替换多长。

7.keys()—返回数组的索引

返回了数组的索引！数组也是特殊的对象 索引相当于属性名

             var  arr=[1,2,3,4,5];
             console.log(Object.keys(arr));
             //["0", "1", "2", "3", "4"]

             for(var i of arr.keys()){
                 console.log(i);
            }
            //输出：0 1 2 3 4

8.values()—返回数组各个元素

            var  arr=[1,2,3,4,5];
            console.log(Object.values(arr));
            //[1,2,3,4,5]
            for(var i of arr.values()){
                console.log(i);
            }
            //输出 1 2 3 4 5

9.join()—将数组中所有元素都转化为字符串并连接在一起，返回最后生成的字符串。

可以指定一个可选的字符串在生成的字符串中来分隔数组的各个元素。如果不指定分隔符，默认使用逗号。

            var arr=[1,2,3,4,5];
            console.log(arr.join("-"))
            //1-2-3-4-5
            console.log(arr.join("A"));
            //1A2A3A4A5

10.reverse()—将数组中的元素颠倒顺序，返回逆序的数组。

            var arr=[1,2,3,4,5];
            console.log(arr.reverse());//[5,4,3,2,1]

11.sort()—将数组中的元素排序并返回排序后的数组。(改变原数组)

当不带参数调用sort()时，数组元素以字母表顺序排序(如有必要将临时转化为字符串进行比较)。

            var arr=['E','C','A','B','A'];
            console.log(arr.sort());//["A", "A", "B", "C", "E"]
            console.log(arr);//["A", "A", "B", "C", "E"]

升序排列

            var arr=[1,3,4,1,2,3,5];
            var newArr=arr.sort(function(a,b){
                return a-b;
            })
            console.log(newArr);//[1, 1, 2, 3, 3, 4, 5]

降序排列

            var arr=[1,3,4,1,2,3,5];
            var newArr=arr.sort(function(a,b){
                return b-a;
            })
            console.log(newArr);//[5, 4, 3, 3, 2, 1, 1]

12.concat()—创建并返回一个新数组，它的元素包括调用concat()的原始数组的元素和concat()的每个参数。

            var arr=[1,2,3,4,5]
            var a1=arr.concat(10,20);
            var a2=arr.concat([10,20]);
            var a3=arr.concat([10,20],[30,40]);
            var a4=arr.concat([10,[20,30]]);
            console.log(a1);//[1, 2, 3, 4, 5, 10, 20]
            console.log(a2);//[1, 2, 3, 4, 5, 10, 20]
            console.log(a3);//[1, 2, 3, 4, 5, 10, 20, 30, 40]
            console.log(a4);//[1, 2, 3, 4, 5, 10, Array(2)]
            console.log([...arr,10,20]);//[1, 2, 3, 4, 5, 10, 20]

13.slice()—返回指定数组的一个片段或子数组。(不改变原数组)

它的两个参数分别指定了片段的开始和结束的位置。

            var arr=[1,2,3,4,5];
            console.log(arr.slice(1,2));//[2]

14.forEach()—从头至尾遍历数组，为每个元素调用指定的函数。

           var arr=[1,2,3,4,5];
           arr.forEach(function(value,index,arr){
               console.log(index +'----'+value);
               //0----1 1----2  2----3  3----4  4----5
           })

value为每个元素，index为索引，arr为整个数组

15.map()—方法将调用的数组的每个元素传递给指定的函数，并返回一个数组，它包含该函数的返回值。

            var arr=['tx','88','666'];
            var newArr=arr.map(function(value){
                return value.length
            })
            console.log(newArr);//[2, 2, 3]

16.fliter()—会把所有满足的元素返回成一个数组

        var arr=[12,66,4,12,88];
        var newArr=arr.filter(function(value,index,array){
            return value>=20;
        });
        console.log(newArr);//[66, 88]

17.some—如果找到第一个满足条件的元素，停止循环不再查找！满足就true 否则为false

  • filter会把所有满足的元素返回
  • some返回布尔值,找到一个满足条件的元素就停止循环，返回true,找不到就返回false
        var arr=[10,20,30,40];
        var flag=arr.some(function(value,index,array){
            return value>=50;
        })
        console.log(flag);//false

18.every()—所有元素都满足条件才返回true,有一个元素不满足就会返回false

        var arr=[10,20,30,40];
        var flag=arr.every(function(value,index,array){
            return value>=20;
        })
        console.log(flag);//false

19.indexOf()—搜索整个数组中具有给定值的元素，返回找到的第一个元素的索引或者如果没有找到就返回-1。

var arr=[10,20,30,40,10];
console.log(arr.indexOf(10));//0

20. lastIndexOf()—搜索整个数组中具有给定值的元素，返回找到的最后一个元素的索引或者如果没有找到就返回-1。

var arr=[10,20,30,40,10];
console.log(arr.lastIndexOf(10));//4

接下来是es6新增加的方法

21. copyWith(target, start, end )—会在当前数组内部将指定位置的元素复制到其他位置（会覆盖原有元素），返回当前数组。

  • target—必需。复制到指定目标索引位置。
  • start—可选。元素复制的起始位置。
  • end–可选。停止复制的索引位置 (默认为 array.length)。如果为负值，表示倒数。
  var arr = [1, 2, 3, 4, 5];
  console.log(arr.copyWithin(0, 2, 4));//[3, 4, 3, 4, 5]
  console.log(arr);//[3, 4, 3, 4, 5]

22.from—将类似数组的对象转换为真正的数组

let arr={
            '0':'1',
            '1':'2',
            '2':'3',
            length:3
        };
            let newArr=Array.from(arr,function(value){return value*2});
            console.log(newArr);//[2,4,6]
        }

23.find—查找数组中第一个满足条件的值！找不到就是undefined

 var ary=[
            {
                id:1,
                name:'tx'
            },
            {
                id:2,
                name:'tn'
            }
        ];
        var taget=ary.find(function(value){
            return value.id==2
        });
        console.log(taget);//{id: 2, name: "tn"}

24.findIndex()—查找数组中第一个满足条件的索引，找不到返回-1

let ary=[1,5,10,15];
        
        let index=ary.findIndex(item=>item>9);//2
        console.log(index);
        let index1=ary.findIndex(function(item){
            return item>=20
        })
        console.log(index1);//-1

25.includes()—查看某个数组是否包含某个值，返回布尔值

注意这里不能是NaN==NaN
但是用includes可以判断数组里面是否存在NaN

        var taget=[1,2,3].includes(5);
        console.log(taget);//false
        console.log(NaN==NaN);//false
        console.log([1,2,3,NaN].includes(NaN));//true

26.of—将一组数据转化为数组，索引为数据的顺序

            let arr=Array.of(1,2,3,4,5);
            let arr1=Array.of(1,'2','3','tx','tn')
            console.log(arr);//[1,2,3,4,5]
            console.log(arr1);//[1,'2','3','tx','tn']

27.fill()—全部替换或者部分替换

        var arr=[1,2,3,4,5,undefined,'6','7'];
        console.log(arr.fill(0));//全部替换为0
        //[0, 0, 0, 0, 0, 0, 0, 0]
        var arr1=[1,2,3,4,5,undefined,'6','7'];
        console.log(arr.fill('x',0,2)); //0的位置开始 替换掉2个元素 替为x
        //["x", "x", 0, 0, 0, 0, 0, 0]

最后讲解Object.defineProperty()改变数组的length属性特征
用法可以看我之前写的博客里面是详细介绍到Object.defineProperty()用法（麻烦了）

            let arr=[1,2,3];
            arr.length=5;
            console.log(arr);//[1, 2, 3, empty × 2]
            Object.defineProperty(arr,"length",{
                writable:false,
                configurable:false,
            });
            arr.length=3;
            console.log(arr.length);// 5 不会改变
            Object.defineProperty(arr,"length",{
                writable:true
            })//这里会直接报错 ，不能在修改length的特性

到这里我给大家介绍的内容就结束了，希望大家多支持点赞关注，谢谢大家了。

；原文链接：https://blog.csdn.net/qq_52168812/article/details/115647364
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！
上一篇：JS数组几种常见的操作方法集合 下一篇：没有了

推荐图文

  • 周排行
  • 月排行
  • 总排行

随机推荐