zoukankan      html  css  js  c++  java
  • javascript删除JSON元素

    首先要搞清JSON的数据格式,我这里所说的JSON都是指javascript中的。

    JSON数据是由对象和数组数据结构组成,我们只要学会javascript中对对象和数组的删除方法即可对JSON项进行删除操作

    javasscript删除数组的3种方法

    1,用shift()方法

    shift:删除原数组第一项,并返回删除元素的值;如果数组为空则返回undefined

    • var chaomao=[1,2,3,4,5]
    •  
    • var chaomao.shift() //得到1
    •  
    • alert(chaomao) //[2,3,4,5]
    var chaomao=[1,2,3,4,5]
    
    var chaomao.shift() //得到1
    
    alert(chaomao) //[2,3,4,5]

    2,用pop()方法

    pop:删除原数组最后一项,并返回删除元素的值;如果数组为空则返回undefined

    • var chaomao=[1,2,3,4,5]
    •  
    • var chaomao.pop() //得到5
    •  
    • alert(chaomao) //[1,2,3,4]
    var chaomao=[1,2,3,4,5]
    
    var chaomao.pop() //得到5
    
    alert(chaomao) //[1,2,3,4]

    前面的方法只能操作数组开头和结尾,无法操作中间项,如果要操作中间的项,使用splice方法

    3,用splice方法

    这个方法很强大,可以对数组任意项进行增加,删除,替换操作

    修改操作:

    • var chaomao=[1,2,3,4,5]
    •  
    • chaomao.splice(2,1,8,9)
    •  
    • alert(chaomao) //1,2,8,9,4,5
    var chaomao=[1,2,3,4,5]
    
    chaomao.splice(2,1,8,9)
    
    alert(chaomao) //1,2,8,9,4,5

    第一个参数是准备操作的数组位置,第二个参数是操作位置后面的数组项数,第三个以后的就是,被替换后的内容

    例子就是表示:从chaomao这个数组位置2开始(也就是值为3的那一项,数组下标从0开始的),位置2后的一项,替换成成8,9

    如果把第二个参数改为2,也就是chaomao.splice(2,2,8,9),也就是说位置2后面的两项换成8,9,打印出来的结果就是1,2,8,9,5,3和4这2两项被换掉了

    这里需要说明的是,被替换的项数不一定要和替换的项数相等,1项可以被换成3项,5项也可以被换成2项,基于这个原理,我们就用这个方法来对数组进行添加和删除操作

    删除操作:

    • var chaomao=[1,2,3,4,5]
    •  
    • chaomao.splice(2,1)
    •  
    • alert(chaomao) //1,2,4,5
    var chaomao=[1,2,3,4,5]
    
    chaomao.splice(2,1)
    
    alert(chaomao) //1,2,4,5

    上面例子中,把chaomao中的位置2后的1项替换成空的,因为后面没有内容,结果可以看到,把3这项删除了

    添加操作:

    • var chaomao=[1,2,3,4,5]
    •  
    • chaomao.splice(2,0,8,9)
    •  
    • alert(chaomao) //1,2,8,9,3,4,5
    var chaomao=[1,2,3,4,5]
    
    chaomao.splice(2,0,8,9)
    
    alert(chaomao) //1,2,8,9,3,4,5

    上面例子中,把chaomao中位置2后的0项换成8,9,也就等于添加了两项

    其实,删除和添加操作都只是splice修改方法的两种衍生罢了 其他不靠谱的数组删除方法

    之所以说不靠谱,是因为它没有真正删除数组项,而是是把它设置为空了,项本身的位置还在,数组项数没变

    不靠谱的数组删除方法1:

    • var chaomao = [1,2,3,4,5];
    •  
    • chaomao[1]=null;
    •  
    • alert(chaomao.length); //5
    var chaomao = [1,2,3,4,5];
    
    chaomao[1]=null;
    
    alert(chaomao.length); //5

    打印出的项数还是5,并没有删除它,只是把chaomao[1]这一项值设为null,chaomao[1]=undefined,这中方法也是一样,并没有删除数组项

    不靠谱的数组删除方法2:

    • var chaomao = [1,2,3,4,5];
    •  
    • delete chaomao[1];
    •  
    • alert(chaomao.length); //5
    var chaomao = [1,2,3,4,5];
    
    delete chaomao[1];
    
    alert(chaomao.length); //5

    和方法1的结果一样,并没有真正删除它,而只是把这一项设为undefined

     javascript删除对象的方法

    js中删除对象元素用delete操作符

    我们来看看一个例子

    • var p = {
    • "name": “chaomao”,
    • "age": 45,
    • "sex": "male"
    • };
    •  
    • delete p.name
    • for(var i in p){
    • console.log(i); //输出age,sex,name项已经被删除了
    • }
    var p = {
          "name": “chaomao”,
          "age": 45,
          "sex": "male"
    };
    
    delete p.name
    for(var i in p){
    console.log(i); //输出age,sex,name项已经被删除了
    }

    javascript删除JSON元素

    前面我们已经会了JS删除对象和数组的方法 我们下面进对一个具体的JSON数据进行操作

    • var computer = { //这个JSON数据由数组和对象结构组成
    • "cpu": ["intel","AMD"],
    • "harddisk": ["Western Digital","Seagate"],
    • "motherboard": ["ASUS","MSI"]
    • };
    var computer = { //这个JSON数据由数组和对象结构组成
          "cpu": ["intel","AMD"],
          "harddisk": ["Western Digital","Seagate"],
          "motherboard": ["ASUS","MSI"]
    };

    如果我们要删除CPU里面里intel这一个元素,因为这是数组里面的一项,所以我们用数组方法

    • computer.cpu.splice(0,1)
    • console.log(computer.cpu) //输出AMD,intel被删除了
    computer.cpu.splice(0,1)
    console.log(computer.cpu) //输出AMD,intel被删除了

    我们如果想删除harddisk这一项,因为它是对象的一项,所以我们要用对象的删除方法进行操作

    • delete computer.harddisk
    • for(var i in computer){
    • console.log(i) //输出CPU,motherboard,harddisk被删除了
    • }
    delete computer.harddisk
    for(var i in computer){
    console.log(i) //输出CPU,motherboard,harddisk被删除了
    }

    总结:JSON的主要数据结构是对象和数组,我们只要对相应的项的结构,进行相应的操作方法,就可以方便的删除JSON元素

  • 相关阅读:
    10.22(day58)
    10.21(day57)
    10.18(day56)http协议,wsgiref模块,jinja2模块,python三大主流web框架,django简介
    github神器--Atom编辑器初体验
    jQuery插件开发精品教程,让你的jQuery提升一个台阶
    node 通过指令创建一个package.json文件及npm安装package.json
    nodejs npm常用命令
    开源轻量级移动端友好的JS地图库——leaflet学习教程
    使用async属性异步加载执行JavaScript
    使用HTML5的页面资源预加载(Link prefetch)功能加速你的页面加载速度
  • 原文地址:https://www.cnblogs.com/yuhanzhong/p/3729775.html
Copyright © 2011-2022 走看看