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 相关文章推荐
层序遍历在ExtJs的TreePanel中的应用
Oct 16 Javascript
默认让页面的第一个控件选中的javascript代码
Dec 26 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
Dec 16 Javascript
Angular实现form自动布局
Jan 28 Javascript
JQuery 的跨域方法推荐_可跨任何网站
May 18 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
Jul 09 Javascript
详解ES6语法之可迭代协议和迭代器协议
Jan 13 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
Feb 05 Javascript
用图片替换checkbox原始样式并实现同样的功能
Nov 15 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
Jan 06 Javascript
解决layui页面按钮点击无反应,也不报错的问题
Sep 29 Javascript
vue实现设置载入动画和初始化页面动画效果
Oct 28 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实现网上点歌(二)
2006/10/09 PHP
Zend Framework教程之Zend_Form组件实现表单提交并显示错误提示的方法
2016/03/21 PHP
javascript flash下fromCharCode和charCodeAt方法使用说明
2008/01/12 Javascript
jquery 得到当前页面高度和宽度的两个函数
2010/02/21 Javascript
JQuery文本框高亮显示插件代码
2011/04/02 Javascript
extjs实现选择多表自定义查询功能 前台部分(ext源码)
2011/12/20 Javascript
清除div下面的所有标签的方法
2014/02/17 Javascript
使用phantomjs进行网页抓取的实现代码
2014/09/29 Javascript
JavaScript中判断整数的多种方法总结
2014/11/08 Javascript
关于js里的this关键字的理解
2015/08/17 Javascript
举例讲解JavaScript中关于对象操作的相关知识
2015/11/16 Javascript
详谈JS中实现种子随机数及作用
2016/07/19 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
2019/04/28 Javascript
如何在Node和浏览器控制台中打印彩色文字
2020/01/09 Javascript
在vue中使用echarts(折线图的demo,markline用法)
2020/07/20 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
2020/09/09 Javascript
深入理解python中的闭包和装饰器
2016/06/12 Python
python妙用之编码的转换详解
2017/04/21 Python
Python自动化开发学习之三级菜单制作
2017/07/14 Python
python验证码识别的示例代码
2017/09/21 Python
人生苦短我用python python如何快速入门?
2018/03/12 Python
python 子类调用父类的构造函数实例
2020/03/12 Python
python 自定义异常和主动抛出异常(raise)的操作
2020/12/11 Python
解决virtualenv -p python3 venv报错的问题
2021/02/05 Python
css3中的calc函数浅析
2018/07/10 HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
2020/11/26 HTML / CSS
英国电动工具购买网站:Anglia Tool Centre
2017/04/25 全球购物
英国领先的汽车轮胎和快速健康中心:Kwik Fit
2017/10/29 全球购物
Tea Collection官网:一家位于旧金山的童装公司
2020/08/07 全球购物
广播电视新闻学专业应届生求职信
2013/10/08 职场文书
大学教师年终总结的自我评价
2013/10/29 职场文书
党的群众路线教育实践活动整改方案
2014/10/28 职场文书
工厂门卫岗位职责
2015/04/13 职场文书
歌舞青春观后感
2015/06/10 职场文书
2016年三八红旗手先进事迹材料
2016/02/26 职场文书
2016年中学端午节主题活动总结
2016/04/01 职场文书