请选择 进入手机版 | 继续访问电脑版

石家庄老站长

点击联系客服
客服QQ:509006671 客服微信:mengfeiseo
 找回密码
 立即注册
查看: 21|回复: 0

JavaScript阵列一般方法阵列原型扩充方法Object.defineProperty()会变更阵列的length属性特质

[复制链接]

1

主题

1

帖子

-7

积分

限制会员

积分
-7
发表于 2021-4-15 14:40:33 | 显示全部楼层 |阅读模式
javascript数组常用方法

1.push-在数组末尾添加元素(更改原始数组)2。4.shift  -向阵列头部添加元素(更改原始阵列)3。pop-从阵列末端移除元素(变更原始阵列)原始阵列的长度)6。splice  (index,num,insertValue)-可替换,删除,插入新数组,index为起始索引,num为删除,insertValue数组原型扩展方法(求和,替换(相同)11.sort()对数组中的元素进行排序,并返回已排序的数组。(更改原始数组)创建并返回一个新数组,该数组包含调用12.concat() - concat()的原始数组的元素和concat()的每个参数。13.slice() -返回指定数组的片断或子数组。(不更改原始数组)14.forEach() -从头到尾重复数组,并调用为每个元素指定的函数。15.map() -方法将调用数组的每个元素传递给指定函数,并返回包含函数返回值的数组。16.fliter() -将所有匹配的元素返回到数组17.some。找到满足条件的第一个元素后,停止循环,不再查找!如果满足不是true,则为false18.every()。如果所有元素都满足条件,则返回true如果没有满足一个元素,则返回false19.indexof()。在整个数组中搜索具有指定值的元素,找到的第一个元素的索引或20。lastindexof  ()-搜索整个数组中具有指定值的元素,返回找到的最后一个元素的索引,如果找不到,则返回-1。21.copy  with  (target,start,end)-将指定位置的元素复制到当前数组中的其他位置,以返回当前数组。22.from-将类似于数组的对象转换为实际数组。23.find-查找数组中满足条件的第一个值!找不到undefined24.findIndex() -在阵列中找到符合条件的第一个索引,并且找不到返回-125.includes()。检查数组是否包含值,并返回布尔值26。

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;ithis.length;i++){
            sum+=this;
        }
        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的特性

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

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|无图版|手机版|小黑屋|石家庄@IT精英团

    GMT+8, 2021-5-15 02:58 , Processed in 0.035040 second(s), 19 queries .

    Powered by Discuz! X3.4

    © 2001-2021 Comsenz Inc.

    快速回复 返回顶部 返回列表