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 相关文章推荐
JavaScript confirm选择判断
Oct 18 Javascript
JQUERY 浏览器判断实现函数
Aug 20 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
Apr 24 Javascript
javascript实现手机震动API代码
Aug 05 Javascript
jQuery实现网页抖动的菜单抖动效果
Aug 07 Javascript
一步步教大家编写酷炫的导航栏js+css实现
Mar 14 Javascript
vue.js入门教程之基础语法小结
Sep 01 Javascript
JS触摸事件、手势事件详解
May 04 Javascript
javascript实现Emrips反质数枚举的示例代码
Dec 06 Javascript
angularJs在多个控制器中共享服务数据的方法
Sep 30 Javascript
Vue的H5页面唤起支付宝支付功能
Apr 18 Javascript
vue2.0实现列表数据增加和删除
Jun 17 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
thinkphp实现图片上传功能
2016/01/13 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
laravel添加前台跳转成功页面示例
2019/10/22 PHP
jQuery 事件队列调整方法
2009/09/18 Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
2012/05/23 Javascript
用js代码改变单选框选中状态的简单实例
2013/12/18 Javascript
JSON+HTML实现国家省市联动选择效果
2014/05/18 Javascript
confirm的用法示例用于按钮操作时确定是否执行
2014/06/19 Javascript
IE浏览器不支持getElementsByClassName的解决方法
2014/08/27 Javascript
JavaScript前补零操作实例
2015/03/11 Javascript
理解和运用JavaScript的闭包机制
2015/08/13 Javascript
JavaScript中Date对象的常用方法示例
2015/10/24 Javascript
javascript弹出窗口中增加确定取消按钮
2016/06/24 Javascript
基于jQuery实现淡入淡出效果轮播图
2020/07/31 Javascript
老生常谈JavaScript 函数表达式
2016/09/01 Javascript
babel的使用及安装配置教程
2018/02/22 Javascript
Vue.js更改调试地址端口号的实例
2018/09/19 Javascript
nodejs初始化init的示例代码
2018/10/10 NodeJs
vue设置动态请求地址的例子
2019/11/01 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
2019/11/01 jQuery
JS实现贪吃蛇游戏
2019/11/15 Javascript
Vuejs中的watch实例详解(监听者)
2020/01/05 Javascript
详解ES6实现类的私有变量的几种写法
2021/02/10 Javascript
[52:57]2014 DOTA2国际邀请赛中国区预选赛 LGD-CDEC VS HGT
2014/05/21 DOTA
[52:09]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第二场
2014/05/26 DOTA
Python实现端口复用实例代码
2014/07/03 Python
跟老齐学Python之正规地说一句话
2014/09/28 Python
python 打印出所有的对象/模块的属性(实例代码)
2016/09/11 Python
Python 最大概率法进行汉语切分的方法
2018/12/14 Python
python实现AES加密和解密
2019/03/27 Python
澳大利亚电子产品购物网站:Dick Smith
2017/02/02 全球购物
中学生团员自我评价分享
2013/12/07 职场文书
教师敬业奉献模范事迹材料
2014/05/18 职场文书
中秋联欢会主持词
2015/07/04 职场文书
2016春季运动会前导词
2015/11/25 职场文书
vue2实现provide inject传递响应式
2021/05/21 Vue.js