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 相关文章推荐
清除div下面的所有标签的方法
Feb 17 Javascript
Javascript基础教程之函数对象和属性
Jan 18 Javascript
Jquery中offset()和position()的区别分析
Feb 05 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
Mar 10 Javascript
解决jquery无法找到其他父级子集问题的方法
May 10 Javascript
vue实现点击隐藏与显示实例分享
Feb 13 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
Jun 05 Javascript
javascript实现简易的计算器
Jan 17 Javascript
加速vue组件渲染之性能优化
Apr 09 Javascript
深入解读VUE中的异步渲染的实现
Jun 19 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
Nov 04 Javascript
微信小程序input抖动问题的修复方法
Mar 03 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 google或baidu分页代码
2009/11/26 PHP
PHP通过iconv将字符串从GBK转换为UTF8字符集
2011/07/18 PHP
PHP 文本文章分页代码 按标记或长度(不涉及数据库)
2012/06/07 PHP
CodeIgniter自定义控制器MY_Controller用法分析
2016/01/20 PHP
laravel config文件配置全局变量的例子
2019/10/13 PHP
js checkbox(复选框) 使用集锦
2009/04/28 Javascript
JQquery的一些使用心得分享
2012/08/01 Javascript
jQuery.fn和jQuery.prototype区别介绍
2013/10/05 Javascript
jquery validate 自定义验证方法介绍 日期验证
2014/02/27 Javascript
页面加载完后自动执行一个方法的js代码
2014/09/06 Javascript
JavaScript中的console.assert()函数介绍
2014/12/29 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
2015/03/11 Javascript
Angular.js自定义指令学习笔记实例
2017/02/24 Javascript
jQuery EasyUI ProgressBar进度条组件
2017/02/28 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
2017/07/04 Javascript
js实现1,2,3,5数字按照概率生成
2017/09/12 Javascript
javascript按钮禁用和启用的效果实例代码
2017/10/29 Javascript
vue中实现移动端的scroll滚动方法
2018/03/03 Javascript
解决vue keep-alive 数据更新的问题
2018/09/21 Javascript
vue项目前端埋点的实现
2019/03/06 Javascript
layui 表单标签的校验方法
2019/09/04 Javascript
Python实现方便使用的级联进度信息实例
2015/05/05 Python
浅谈编码,解码,乱码的问题
2016/12/30 Python
python XlsxWriter模块创建aexcel表格的实例讲解
2018/05/03 Python
wxPython的安装与使用教程
2018/08/31 Python
pycharm无法导入本地模块的解决方式
2020/02/12 Python
python 解决函数返回return的问题
2020/12/05 Python
VICHY薇姿美国官方网站:欧洲药房第一的抗衰老品牌
2017/11/22 全球购物
美国领先的奢侈手表在线零售商:WatchMaxx
2017/12/17 全球购物
Yves Rocher伊夫·黎雪美国官网:法国始创植物美肌1959
2019/01/09 全球购物
25岁生日感言
2014/01/13 职场文书
村委会贫困证明
2014/01/14 职场文书
2014年医学生毕业自我鉴定
2014/03/26 职场文书
外国人聘用意向书
2014/04/01 职场文书
2015年推普周活动总结
2015/03/27 职场文书
css3实现背景图片半透明内容不透明的方法示例
2021/04/13 HTML / CSS