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 相关文章推荐
js+CSS 图片等比缩小并垂直居中实现代码
Dec 01 Javascript
JavaScript 选中文字并响应获取的实现代码
Aug 28 Javascript
jquery选择器、属性设置用法经验总结
Sep 08 Javascript
AngularJS入门教程之Hello World!
Dec 06 Javascript
JavaScript检查数字是否为整数或浮点数的方法
Jun 09 Javascript
JavaScript中string对象
Jun 12 Javascript
jquery利用拖拽方式在图片上添加热链接
Nov 24 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
May 04 Javascript
微信小程序实战之自定义抽屉菜单(7)
Apr 18 Javascript
详谈js中标准for循环与foreach(for in)的区别
Nov 02 Javascript
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
微信小程序开发技巧汇总
Jul 15 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 一个页面执行时间类代码
2010/03/05 PHP
php生成随机密码自定义函数代码(简单快速)
2014/05/10 PHP
php str_replace替换指定次数的方法详解
2017/05/05 PHP
php mysql数据库操作类(实例讲解)
2017/08/06 PHP
laravel框架实现敏感词汇过滤功能示例
2020/02/15 PHP
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
2009/07/19 Javascript
flexigrid 类似ext grid的JS表格代码
2010/07/17 Javascript
js保留两位小数使用toFixed实现
2013/07/29 Javascript
JS 对输入框进行限制(常用的都有)
2013/07/30 Javascript
jQuery的attr与prop使用介绍
2013/10/10 Javascript
JS根据生日算年龄的方法
2015/05/05 Javascript
基于bootstrap插件实现autocomplete自动完成表单
2016/05/07 Javascript
Javascript防止图片拉伸的自适应处理方法
2017/12/26 Javascript
详解webpack运行Babel教程
2018/06/13 Javascript
vue开发简单上传图片功能
2020/06/30 Javascript
React实现全选功能
2020/08/25 Javascript
[05:00]第二届DOTA2亚洲邀请赛主赛事第三天比赛集锦.mp4
2017/04/04 DOTA
[51:44]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第二场
2018/04/04 DOTA
讲解python参数和作用域的使用
2013/11/01 Python
Python中除法使用的注意事项
2014/08/21 Python
Python 操作文件的基本方法总结
2017/08/10 Python
Python编程实现粒子群算法(PSO)详解
2017/11/13 Python
python三大神器之fabric使用教程
2019/06/10 Python
python计算Content-MD5并获取文件的Content-MD5值方式
2020/04/03 Python
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
2013/08/11 HTML / CSS
一款利用html5和css3实现的3D滚动特效的教程
2015/01/04 HTML / CSS
html5+css如何实现中间大两头小的轮播效果
2018/12/06 HTML / CSS
美体小铺奥地利官方网站:The Body Shop奥地利
2019/04/11 全球购物
苏格兰领先的多渠道鞋店:Begg Shoes
2019/10/22 全球购物
优秀的导游求职信范文
2014/04/06 职场文书
应届大专生求职信
2014/06/26 职场文书
2016七夕情人节广告语
2016/01/28 职场文书
《风娃娃》教学反思
2016/02/18 职场文书
写作技巧:如何撰写商业计划书
2019/08/08 职场文书
一行代码python实现文件共享服务器
2021/04/22 Python
微信小程序中wxs文件的一些妙用分享
2022/02/18 Javascript