JavaScript数组、json对象、eval()函数用法实例分析


Posted in Javascript onFebruary 21, 2019

本文实例讲述了JavaScript数组、json对象、eval()函数用法。分享给大家供大家参考,具体如下:

一、JavaScript中的数组

数组使用[]new Array()new Array(count)进行创建

创建数组之后我们可以对其静态初始化,也可以对其动态赋值

数组的常用属性:length

数组的常用方法:toString()join()reverse()push()pop()

<script type="text/javascript">
  //静态初始化
  var myArray = [1,2,3,45,67];
  //获取数组中的个数
  alert("myArray.length="+myArray.length);
  for(var i=0;i<myArray.length;i++){
    alert("myArray["+i+"]="+myArray[i]);
  }
  //动态初始化
  //动态分配5个内存空间,手动赋值之前,系统默认值为undefined
  myArray = new Array(5);
  for(var i=0;i<myArray.length;i++){
    alert("myArray["+i+"]="+myArray[i]);
  }
  //对数组中的元素赋值
  myArray[0]=true;
  myArray[1]=1;
  myArray[2]="guoguo";
  myArray[3]= new Object();
  myArray[4]= new Object();
  myArray[5]= new Object();//虽然声明的时候数组长度为5,但实际上可以存储更多的内容
  for(var i=0;i<myArray.length;i++){
    alert("myArray["+i+"]="+myArray[i]);
  }
  //数组中的常用方法
  var myArray = [1,"abc",true,4.5,16];
  //toString()方法会用英文逗号把数组中的元素连接成字符串
  alert("myArray.toString()="+myArray.toString());//myArray.toString()=1,abc,true,4.5,16
  //join方法,以特殊符号连接数组中的每一个元素,最后生成一个字符串
  var str = myArray.join("-");
  alert("str="+str);//str=1-abc-true-4.5-16
  //反转数组中的元素
  myArray.reverse();
  str = myArray.join("-");
  alert("str="+str);//str=16-4.5-true-abc-1
  //pop()返回数组最右边的元素,并将其删除
  var elt = myArray.pop();
  alert("elt="+elt+",myArray.length="+myArray.length);//elt=1,myArray.length=4
  //push()将元素添加到数组最右边
  //push()和pop()模拟的是栈结构,最后入栈的先出栈
  myArray.push("end");
  str = myArray.join("-");
  alert("str="+str);//str=16-4.5-true-abc-end
</script>

二、JavaScript中的json对象

json对象使用{}进行创建,通常用在不同的语言之间进行数据交换,它是一种轻量级的数据传输格式

java可以在后台拼接json字符串,并将json字符串发送给浏览器,浏览器可以解析json格式的字符串,这样java和javascript就完成了数据传输

<script type="text/javascript">
  //创建json对象
  var user ={userCode:101,
        uerName:"guoguo",
        address:"瓦力瓦力"};
  alert("user.userCode="+user.userCode);//user.userCode=101
  alert("user.uerName="+user.uerName);//user.uerName=guoguo
  alert("user.address="+user.address);//user.address=瓦力瓦力
  //数组中的元素可以是json对象
  var userArray = [{userCode:101,
           uerName:"guoguo",
           address:"瓦力瓦力"},
           {userCode:102,
           uerName:"haha",
           address:"咕噜咕噜"}
          ];
  alert("userArray[1].userCode="+userArray[1].userCode);
  alert("userArray[1].uerName="+userArray[1].uerName);
  alert("userArray[1].address="+userArray[1].address);
</script>

三、JavaScript中的eval()函数

JS中eval()函数的作用是将普通字符串当做js代码来解释执行。

<script type="text/javascript">
  var str = "var i=10;";
  //eval函数的作用:将普通字符串当做js代码解释执行
  window.eval(str);
  alert("i="+i);//i=10
  //eval可以把json字符串转换成json对象,缺点:json变量的名称不可变
  var jsonStr = "var jsonObject = {userCode:'101',userName:'guoguo',age:'16'}";
  window.eval(jsonStr);
  alert("jsonObject.userCode="+jsonObject.userCode);//jsonObject.userCode=101
  alert("jsonObject.userName="+jsonObject.userName);//jsonObject.userName=guoguo
  alert("jsonObject.age="+jsonObject.age);//jsonObject.age=16
  //eval可以把json字符串转换成json对象,json变量的名称可自定义
  jsonStr = "{userCode:'102',userName:'haha',age:'16'}";
  //注意:eval()函数所需的参数必须是"({......})"格式
  var obj = eval("("+jsonStr+")");
  alert("obj.userCode="+obj.userCode);//obj.userCode=102
  alert("obj.userName="+obj.userName);//obj.userName=haha
  alert("obj.age="+obj.age);//obj.age=16
</script>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

Javascript 相关文章推荐
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
Mar 27 Javascript
ext form 表单提交数据的方法小结
Aug 08 Javascript
深入分析Javascript跨域问题
Apr 17 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
Jan 28 Javascript
原生js实现addclass,removeclass,toggleclasss实例
Nov 24 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
Jan 13 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
Apr 13 Javascript
JavaScript多线程运行库Nexus.js详解
Dec 22 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
May 05 Javascript
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
详解Vue-axios 设置请求头问题
Dec 06 Javascript
解决一个微信号同时支持多个环境网页授权问题
Aug 07 Javascript
ES6基础之解构赋值(destructuring assignment)
Feb 21 #Javascript
ES6基础之展开语法(Spread syntax)
Feb 21 #Javascript
ES6基础之默认参数值
Feb 21 #Javascript
微信小程序HTTP接口请求封装的实现
Feb 21 #Javascript
微信小程序控制台提示warning:Now you can provide attr &quot;wx:key&quot; for a &quot;wx:for&quot; to improve performance解决方法
Feb 21 #Javascript
Element-UI中Upload上传文件前端缓存处理示例
Feb 21 #Javascript
详解Puppeteer前端自动化测试实践
Feb 21 #Javascript
You might like
php 文件上传代码(限制jpg文件)
2010/01/05 PHP
PHP字符串处理的10个简单方法
2010/06/30 PHP
PHP对接微信公众平台消息接口开发流程教程
2014/03/25 PHP
Laravel框架实现的批量删除功能示例
2019/01/16 PHP
JavaScript监测ActiveX控件是否已经安装过的代码
2008/09/02 Javascript
for 循环性能比较 提高for循环的效率
2009/03/19 Javascript
jQuery中bind()方法用法实例
2015/01/19 Javascript
每天一篇javascript学习小结(RegExp对象)
2015/11/17 Javascript
AngularJS实现全选反选功能
2015/12/08 Javascript
jQuery打字效果实现方法(附demo源码下载)
2015/12/18 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
2016/03/28 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
2016/04/26 Javascript
jquery延迟对象解析
2016/10/26 Javascript
jquery利用json实现页面之间传值的实例解析
2016/12/12 Javascript
微信小程序开发(一) 微信登录流程详解
2017/01/11 Javascript
微信小程序 video详解及简单实例
2017/01/16 Javascript
Node.js使用Koa搭建 基础项目
2018/01/08 Javascript
vue 自定义 select内置组件
2018/04/10 Javascript
深入解析koa之中间件流程控制
2019/06/17 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
2019/06/18 Javascript
JavaScript实现网页计算器功能
2020/10/29 Javascript
详解vue 组件的实现原理
2020/11/12 Javascript
python编码最佳实践之总结
2016/02/14 Python
Python运行报错UnicodeDecodeError的解决方法
2016/06/07 Python
Python代码太长换行的实现
2019/07/05 Python
Python closure闭包解释及其注意点详解
2019/08/28 Python
python脚本调用iftop 统计业务应用流量的思路详解
2019/10/11 Python
浅谈pycharm导入pandas包遇到的问题及解决
2020/06/01 Python
python相对企业语言优势在哪
2020/06/12 Python
Python如何实现远程方法调用
2020/08/07 Python
移动端html5模拟长按事件的实现方法
2018/09/30 HTML / CSS
海外淘书首选:AbeBooks
2017/07/31 全球购物
房屋转让协议书
2014/04/11 职场文书
税务干部群众路线教育实践活动自我剖析材料
2014/09/21 职场文书
交通事故委托书范本精选
2014/10/04 职场文书
元旦主持词开场白
2015/05/29 职场文书