javascript权威指南学习笔记-数组1(八)

最新推荐文章于 2020-03-13 23:05:58 发布

飞天代码

最新推荐文章于 2020-03-13 23:05:58 发布

阅读量388

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/weiyongliang_813/article/details/50186377

版权

javascript 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

本文深入探讨JavaScript中数组的基本操作方法，包括添加、删除元素的常见方法如push、pop、unshift、shift等，并详细介绍了如何通过原型继承扩展数组方法以实现更高效的数据处理。此外，文章还提供了一种根据数组值进行删除操作的实用技巧，以及如何使用splice方法进行更灵活的数组元素管理。

摘要由CSDN通过智能技术生成

数组是js里面最常用的对象了，日常开发许多时候都是面向一个数组在编程：
常用方法：数组元素添加和删除
提到添加删除，最先想到的是push、pop、unshift、shift

//push在数组尾部添加元素
var userName=["wangwu"];
//在数组的尾部追加了2个元素
userName.push("zhangsan","lisi");
//从数组尾部删除了一个元素
userName.pop();
console.log(userName);//输出["wangwu", "zhangsan"]

其实在开发过程中push用的比较多，而pop用的比较少，因为实际编程中，大部分应该是传入一个值，根据值进行删除操作，而直接从尾部删除一个元素的情况是比较少的：

    //写个根据数组值进行删除操作 采用数组的delete方法来实现
    function getAryIndex(array,val){
    //如果是ECMAScript5直接调用
        if(typeof array.indexOf=="function"){
            return array.indexOf(val);
        }else{
        //如果不支持ECMAScript5 则循环比较获取
            for(var num=0;num<array.length;num++){
                if(array[num]==val){
                    return num;
                }
            }
            return -1;
        }
    }
    function deleteEl(array,val){
        //查找元素在数组中的位置， 当然ECMAScript5里面已经存在了获取元素序号的方法，但ECMAScript3 是没有的
        var index=getAryIndex(array,val);
        if(index>0){
             delete(array[index]);
        }   
    }
    var userName=["wangwu","zhangsan","lisi"];
    deleteEl(userName,"zhangsan");
    console.log(userName);
    //输出["wangwu", 2: "lisi"]
     console.log(userName[1]);//输出为undefined

其实这种删除在程序里也比较少，一般希望删除了该元素，就不希望该元素在数组中还占有位置，而delete删除是不会改变数组的length，为了修改length属性，可以采用splice来实现数组的删除

  function deleteEl(array,val){
        //查找元素在数组中的位置， 当然ECMAScript5里面已经存在了获取元素序号的方法，但ECMAScript3 是没有的
        var index=getAryIndex(array,val);
        if(index>0){
             array.splice(index,1);
        }   
    }
       console.log(userName);//输出["wangwu", "lisi"]
       //这就是想要的删除操作咯

但又会感觉代码写的有点别扭，为啥要把数组作为参数传递进去呢，不简洁也麻烦，可以将deleteEl改造成数组的原型方法，通过原型继承扩展的方式来实现



    function getAryIndex(array,val){
        if(typeof array.indexOf=="function"){
            return array.indexOf(val);
        }else{
            for(var num=0;num<array.length;num++){
                if(array[num]==val){
                    return num;
                }
            }
            return -1;
        }
    }
    //通过原型继承对数组对象进行方法扩展
    Array.prototype.deleteEl=function(val){
        var index=getAryIndex(this,val);
        if(index>0){
            this.splice(index,1);
        }
    }
    var userName=["wangwu","zhangsan","lisi"];
    userName.deleteEl("zhangsan");//这样写更加直观了
    console.log(userName);//输出["wangwu", "lisi"]

当然我们还可以将getAryIndex方法也通过原型继承方式将方法扩展了。

//unshift在数组头部插入一个元素、shift方法在数组头部删除元素

//push在数组尾部添加元素
var userName=["wangwu"];
//在数组的尾部追加了2个元素
userName.unshift("zhangsan","lisi"); 
console.log(userName);//输出var userName=["wangwu"];
    //在数组的尾部追加了2个元素
userName.unshift("zhangsan","lisi");
console.log(userName);//输出["zhangsan", "lisi", "wangwu"]