• 技术文章 >web前端 >js教程

    jquery下json数组的操作和each遍历实例代码详解

    伊谢尔伦伊谢尔伦2017-07-17 14:37:59原创705
    jquery中处理JSON数组的情况中遍历用到的比较多,但是用添加移除这些好像不是太多。

    1、数组的创建

    var arrayObj = new Array(); //创建一个数组 
    var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度 
    var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]); //创建一个数组并赋值

    要说明的是,虽然第二种方法创建数组指定了长度,但实际上所有情况下数组都是变长的,也就是说即使指定了长度为5,仍然可以将元素存储在规定长度以外的,注意:这时长度会随之改变。
    2、数组的元素的访问

    var testGetArrValue=arrayObj[1]; //获取数组的元素值 
    arrayObj[1]= "这是新值"; //给数组元素赋予新的值

    3、数组元素的添加

    arrayObj. push([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组结尾,并返回数组新长度 
    arrayObj.unshift([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组开始,数组中的元素自动后移,返回数组新长度 
    arrayObj.splice(insertPos,0,[item1[, item2[, . . . [,itemN]]]]);//将一个或多个新元素插入到数组的指定位置,插入位置的元素自动后移,返回""。

    4、数组元素的删除

    arrayObj.pop(); //移除最后一个元素并返回该元素值 
    arrayObj.shift(); //移除最前一个元素并返回该元素值,数组中元素自动前移 
    arrayObj.splice(deletePos,deleteCount); //删除从指定位置deletePos开始的指定数量deleteCount的元素,数组形式返回所移除的元素

    5、数组的截取和合并

    arrayObj.slice(start, [end]); //以数组的形式返回数组的一部分,注意不包括 end 对应的元素,如果省略 end 将复制 start 之后的所有元素 
    arrayObj.concat([item1[, item2[, . . . [,itemN]]]]); //将多个数组(也可以是字符串,或者是数组和字符串的混合)连接为一个数组,返回连接好的新的数组

    6、数组的拷贝

    arrayObj.slice(0); //返回数组的拷贝数组,注意是一个新的数组,不是指向 
    arrayObj.concat(); //返回数组的拷贝数组,注意是一个新的数组,不是指向

    7、数组元素的排序

    arrayObj.reverse(); //反转元素(最前的排到最后、最后的排到最前),返回数组地址 
    arrayObj.sort(); //对数组元素排序,返回数组地址

    8、数组元素的字符串化

    arrayObj.join(separator); //返回字符串,这个字符串将数组的每一个元素值连接在一起,中间用 separator 隔开。 
    toLocaleString 、toString 、valueOf:可以看作是join的特殊用法,不常用

    一个简单的jQuery的例子来遍历一个JavaScript数组对象。

    var json = [
    {"id":"1","tagName":"apple"},
    {"id":"2","tagName":"orange"},
    {"id":"3","tagName":"banana"},
    {"id":"4","tagName":"watermelon"},
    {"id":"5","tagName":"pineapple"}
    ];
     
    $.each(json, function(idx, obj) {
    alert(obj.tagName);
    });

    上面的代码片断工作正常,提示 “apple”, “orange” … 等,如预期一样。
    问题: JSON 字符串

    下面的例子中,声明了一个JSON字符串(随附单或双引号)直接地。

    var json = '[{"id":"1","tagName":"apple"},{"id":"2","tagName":"orange"},
    {"id":"3","tagName":"banana"},{"id":"4","tagName":"watermelon"},
    {"id":"5","tagName":"pineapple"}]';
     
    $.each(json, function(idx, obj) {
    alert(obj.tagName);
    });

    在Chrome中,它显示在控制台下面的错误:

    Uncaught TypeError: Cannot use 'in' operator to search for '156'
    in [{"id":"1","tagName":"apple"}...

    解决方案:JSON字符串转换为JavaScript对象
    要修复它,通过标准JSON.parse()或jQuery 的 $.parseJSON 将其转换为JavaScript对象。

    {"id":"3","tagName":"banana"},{"id":"4","tagName":"watermelon"},
    {"id":"5","tagName":"pineapple"}]';
     
    $.each(JSON.parse(json), function(idx, obj) {
    alert(obj.tagName);
    }); 
    //or
    $.each($.parseJSON(json), function(idx, obj) {
    alert(obj.tagName);
    });

    以上就是jquery下json数组的操作和each遍历实例代码详解的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:javascript jquery json
    上一篇:JavaScript json对象与数组转换简单实现方法实例详解 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• Angular开发问题记录:组件拿不到@Input输入属性• 浅析Node发起HTTP请求的6种方法• 带你了解Nodejs中的非阻塞异步IO• 聊聊基于Node实现单点登录(SSO)的方法• 深入了解Angular(新手入门指南)
    1/1

    PHP中文网