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 相关文章推荐
jQuery 自动增长的文本输入框实现代码
Apr 02 Javascript
JavaScript中SQL语句的应用实现
May 04 Javascript
jQuery给动态添加的元素绑定事件的方法
Mar 09 Javascript
JS简单实现点击复制链接的方法
Aug 03 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
Oct 21 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
Nov 26 Javascript
Vue响应式添加、修改数组和对象的值
Mar 20 Javascript
前端Electron新手入门教程详解
Jun 21 Javascript
浅入深出Vue之组件使用
Jul 11 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
Aug 31 Javascript
js实现鼠标滑动到某个div禁止滚动
Sep 17 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
Sep 21 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操作数组的一些函数整理介绍
2011/07/17 PHP
php异步多线程swoole用法实例
2014/11/14 PHP
PHP生成图片验证码功能示例
2017/01/12 PHP
php数组指针操作详解
2017/02/14 PHP
php微信开发之谷歌测距
2018/06/14 PHP
ThinkPHP 3使用OSS的方法
2018/07/19 PHP
基于jquery的回到页面顶部按钮
2011/06/27 Javascript
根据表格中的某一列进行排序的javascript代码
2013/11/29 Javascript
详解JavaScript中的自定义事件编写
2016/05/10 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
2017/03/01 Javascript
vue将时间戳转换成自定义时间格式的方法
2018/03/02 Javascript
vue-router+nginx 非根路径配置方法
2018/06/30 Javascript
Vue.js实现数据响应的方法
2018/08/13 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
2018/08/24 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
2018/10/18 Javascript
微信小程序自定义弹窗wcPop插件
2018/11/19 Javascript
mock.js模拟前后台交互
2019/07/25 Javascript
vue.js实现回到顶部动画效果
2019/07/31 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
2019/09/16 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
2020/02/24 Javascript
微信小程序报错: thirdScriptError的错误问题
2020/06/19 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
2020/06/29 Javascript
vue中defineProperty和Proxy的区别详解
2020/11/30 Vue.js
Python多线程爬虫简单示例
2016/03/04 Python
pyhton列表转换为数组的实例
2018/04/04 Python
DataFrame 将某列数据转为数组的方法
2018/04/13 Python
Django框架模板文件使用及模板文件加载顺序分析
2019/05/23 Python
英国异国风情旅游网站:Travel Talk Tours(团体旅游、探险旅游、帆船假期)
2018/07/26 全球购物
李维斯牛仔裤荷兰官方网站:Levi’s NL
2020/08/23 全球购物
演讲稿的写法
2014/05/19 职场文书
物理课外活动总结
2014/08/27 职场文书
离职信范本
2015/06/23 职场文书
2016银行求职自荐信
2016/01/28 职场文书
pygame面向对象的飞行小鸟实现(Flappy bird)
2021/04/01 Python
MySQL之高可用集群部署及故障切换实现
2021/04/22 MySQL
漫画「你在春天醒来」第10卷封面公开
2022/03/21 日漫