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实现动态菜单添加的实例代码
Jul 05 Javascript
写出高效jquery代码的19条指南
Mar 19 Javascript
jquery无法设置checkbox选中即没有变成选中状态
Mar 27 Javascript
jQuery实现ichat在线客服插件
Dec 29 Javascript
第二篇Bootstrap起步
Jun 21 Javascript
Google 地图控件集详解及实例代码
Aug 06 Javascript
Node.js中路径处理模块path详解
Nov 14 Javascript
js实现移动端编辑添加地址【模仿京东】
Apr 28 Javascript
vue router2.0二级路由的简单使用
Jul 05 Javascript
vue-router跳转时打开新页面的两种方法
Jul 29 Javascript
layui table单元格事件修改值的方法
Sep 24 Javascript
Js图片点击切换轮播实现代码
Jul 27 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手册及PHP编程标准
2006/12/17 PHP
PHP分页效率终结版(推荐)
2013/07/01 PHP
phpstorm编辑器乱码问题解决
2014/12/01 PHP
ThinkPHP路由详解
2015/07/27 PHP
php验证手机号码
2015/11/11 PHP
PHP实现的简单组词算法示例
2018/04/10 PHP
PHP session垃圾回收机制实例分析
2019/06/28 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
JQuery获取浏览器窗口内容部分高度的代码
2012/02/24 Javascript
jquery入门—数据删除与隔行变色以及图片预览
2013/01/07 Javascript
JavaScript多图片上传案例
2015/09/28 Javascript
js+canvas绘制矩形的方法
2016/01/28 Javascript
微信小程序 textarea 详解及简单使用方法
2016/12/05 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
2017/02/13 Javascript
浅谈JavaScript作用域和闭包
2017/09/18 Javascript
vue页面加载闪烁问题的解决方法
2018/03/28 Javascript
vue中watch和computed的区别与使用方法
2020/08/23 Javascript
解决vue项目axios每次请求session不一致的问题
2020/10/24 Javascript
[04:53]DOTA2英雄基础教程 祈求者
2014/01/03 DOTA
[01:33:14]LGD vs VP Supermajor 败者组决赛 BO3 第二场 6.10
2018/07/04 DOTA
PHP魔术方法__ISSET、__UNSET使用实例
2014/11/25 Python
flask中使用蓝图将路由分开写在不同文件实例解析
2018/01/19 Python
Python实现连接两个无规则列表后删除重复元素并升序排序的方法
2018/02/05 Python
Python中logging日志库实例详解
2020/02/19 Python
用python写PDF转换器的实现
2020/10/29 Python
python海龟绘图之画国旗实例代码
2020/11/11 Python
让IE可以变相支持CSS3选择器
2010/01/21 HTML / CSS
css3高级选择器使用方法
2013/12/02 HTML / CSS
外语学院毕业生的自我鉴定
2013/11/28 职场文书
新春联欢会主持词
2014/03/24 职场文书
现实表现材料范文
2014/12/23 职场文书
2016入党积极分子党课培训心得体会
2016/01/06 职场文书
nginx常用命令放入shell脚本详解
2021/03/31 Servers
新手必备Python开发环境搭建教程
2021/05/28 Python
MyBatis 动态SQL全面详解
2021/10/05 MySQL
纯CSS实现一个简单步骤条的示例代码
2022/07/15 HTML / CSS