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实现计算代码行数的简单方法附代码
Aug 13 Javascript
jQuery 自动增长的文本输入框实现代码
Apr 02 Javascript
JS获取并操作iframe中元素的方法
Mar 21 Javascript
javascript实现根据3原色制作颜色选择器的方法
Jul 17 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
Aug 10 Javascript
js实现异步循环实现代码
Feb 16 Javascript
微信小程序  自定义创建详细介绍
Oct 27 Javascript
微信小程序 图片宽高自适应详解
May 11 Javascript
React利用插件和不用插件实现双向绑定的方法详解
Jul 03 Javascript
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
nuxt 每个页面head标签内容设置方式
Nov 05 Javascript
vue实现滑动解锁功能
Mar 03 Vue.js
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快速url重写 更新版[需php 5.30以上]
2010/04/20 PHP
如何用phpmyadmin设置mysql数据库用户的权限
2012/01/09 PHP
php设置允许大文件上传示例代码
2014/03/10 PHP
ThinkPHP标签制作教程
2014/07/10 PHP
php命令行(cli)模式下报require 加载路径错误的解决方法
2015/11/23 PHP
PHP实现微信模拟登陆并给用户发送消息的方法【文字,图片,图文】
2017/06/29 PHP
Alliance vs AM BO3 第二场2.13
2021/03/10 DOTA
JavaScript中实现块作用域的方法
2010/04/01 Javascript
jquery中动态效果小结
2010/12/16 Javascript
javascript基础知识大集锦(二) 推荐收藏
2011/01/13 Javascript
五个jQuery图片画廊插件 推荐
2011/05/12 Javascript
uploadify 3.0 详细使用说明
2012/06/18 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
2013/10/23 Javascript
正则验证小数点后面只能有两位数的方法
2017/02/28 Javascript
Node.js自定义实现文件路由功能
2017/09/22 Javascript
NodeJS安装图文教程
2018/04/19 NodeJs
axios向后台传递数组作为参数的方法
2018/08/11 Javascript
微信小程序实现类似微信点击语音播放效果
2020/03/30 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
2020/01/22 Javascript
vue父子组件间引用之$parent、$children
2020/05/20 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
2020/07/23 Javascript
[01:01:18]VP vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python中使用百度音乐搜索的api下载指定歌曲的lrc歌词
2014/07/18 Python
python实现发送邮件及附件功能
2021/03/02 Python
TensorFlow实现AutoEncoder自编码器
2018/03/09 Python
pycharm修改文件的默认打开方式的步骤
2019/07/29 Python
Python实现PyPDF2处理PDF文件的方法示例
2019/09/25 Python
Python实现分数序列求和
2020/02/25 Python
Django中的session用法详解
2020/03/09 Python
Foot Locker德国官方网站:美国运动服和鞋类零售商
2018/11/01 全球购物
美国豪华的多品牌精品店:The Webster
2019/07/31 全球购物
会计职业生涯规划范文
2014/01/04 职场文书
国际贸易专业个人鉴定
2014/02/22 职场文书
《白鹅》教学反思
2014/04/13 职场文书
2015关爱留守儿童工作总结
2014/12/12 职场文书
关于python类SortedList详解
2021/09/04 Python