妙味课堂:JavaScript初级--第12课：json与数组
1、json数据格式及json语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script> var arr1 = [ 1,2,3 ];
var arr2 = [ 4,5,6 ];
var arr3 = [ 7,8,9 ]; alert( arr1.concat( arr2, arr3 ) );
var arr1 = [ 1,2,3,4,5,6 ]; // arr1.reverse();
//可以运用这个反转字符串。先字符串转换为数组，翻转后，在变成字符串
var str = 'abcdef';
// alert(str.split('').reverse().join('')); // 课上小练习：
// 随机产生 100 个从 0 ~ 1000 之间不重复的整数
// var str = 'aaasdlfjhasdlkfs';
// indexOf('s') —— 为数组编写该方法：indexOf('img/1.jpg') </body>
</html>
2、for-in遍历json
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
var json4 = { 'name' : 'miaov', 'age' : 3, 'fun' : '前端开发' }; for ( var attr in json4 ) {
// alert(attr) //找到键名
alert( json4[attr] );//找到值 attr加''就代表访问json里attr属性的值，不加引号就是遍历，找子集
} //for in 里可以嵌套for循环
var json5 = {
'url' : [ 'img/1.png', 'img/2.png', 'img/3.png', 'img/4.png' ],
'text' : [ '小宠物', '图片二', '图片三', '面具' ]
};
for ( var attr in json5 ) {
for ( var i=0; i < json5[attr].length; i++ ) {
alert( json5[attr][i] );
}
}
</script>
</body>
</html>
3、for-in遍历对象属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
var str = '';
var num = 0;
for ( var attr in document ) {
str += num + '. ' + attr + ':' +document[attr] + '<br />';
num ++;
}
document.body.innerHTML = str;
</script> </body>
</html>
4、关于for循环和for-in的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
var json = {
'url' : [ 'img/1.png', 'img/2.png', 'img/3.png', 'img/4.png' ],
'text' : [ '小宠物', '图片二', '图片三', '面具' ]
}; alert(json.length) //undefined json没有长度属性 不能使用for循环 var arr = [ 'a', 'b', 'c' ];
//数字可以使用for循环也可以使用for in
for ( var i in arr ) {
alert( arr[i] );
} </script> </body>
</html>
5、数组的定义及清空数组效率问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
var arr = [ 1,2,3 ];
var arr = new Array(1,2,3); //数组的对象定义
alert( arr ); // var arr = new Array(3); //解析成长度为3
// var arr = new Array('3');
// alert( arr.length ); //解析成长度为1 //数组的长度可以读 也可以写
var arr = [ 'aaa',2,3 ];
// alert( arr.length ); // 3
// arr.length = 0; //清空了数组
// arr = []; //效率高点 //字符串长度是不能写的
var str = 'aaaaa';
// str.length = 1;
alert(str.length); </script>
</body>
</html>
6、数组方法与技巧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
//1数组的添加
var arr = [ 1,2,3 ];
// alert( arr.push( 'abc' ) ); //往数组的最后一位添加 返回值是数组新的长度
//往数组前面添加
arr.unshift( 0 )
// alert( arr.unshift( 0 ) ); //返回值也是数组新的长度4 IE 6 7 不支持 unshift 返回值 //2数组的删除
var arr = [ 'TM', '钟毅', '张森', '杜鹏', 'Leo' ];
// alert( arr.pop() ); //删除最后一个
// alert( arr );
alert( arr.shift() ); //删除最前面的一个
// arr.shift();
alert( arr ); //3数组排队走
// arr.unshift(arr.pop()); //把最后一个扔到开头
// arr.unshift(arr.pop()); arr.push(arr.shift()) //把最前面的扔到后面 // alert( arr ); //4、数组的删除、替换、添加 arr.splice( 0, 2) //从第0位开始删除2个 返回值是删除的两个值
arr.splice( 0, 1,'mm') //mm替换了第一个 返回值是被替换的值
arr.splice( 1, 0, '钟毅媳妇儿~', '钟毅媳妇们~' ) //往第一个位置塞 //5、数组去重
var arr = [ 1,2,2,4,2 ]; for ( var i=0; i<arr.length; i++ ) {
for ( var j=i+1; j<arr.length; j++ ) {
if ( arr[i] == arr[j] ) { //第一个与第二个比较，相等就干掉一个
arr.splice( j, 1 );
j--;
}
}
}
alert( arr );
//6、数组排序
var arr = [ 'c', 'd', 'a', 'e' ];
arr.sort(); //按照字符的编码排序
var arr2 = [ 4,3,5,5,76,2,0,8 ];
arr2.sort();//先按字符串的方式比较'76'与8比较，7<8 需设置个函数
arr2.sort(function ( a, b ) {
return a - b; //由小到大排序 如果是整数就换下位置
});
// alert( arr2 ); //字符串式比较
var arrWidth = [ '345px', '23px', '10px', '1000px' ];
arrWidth.sort(function ( a, b ) {
return parseInt(a) - parseInt(b);
});
alert( arrWidth );
//7、数组随机排序
var arr = [ 1,2,3,4,5,6,7,8 ];
arr.sort(function ( a, b ) {
return Math.random() - 0.5;//正值交换负值
});
alert( arr ); // alert( Math.random() );//返回0-1之间的数字 </script>
</body>
</html>
7、随机函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body> <script>
// alert( Math.round(3.4) ); //四舍五入
// 0~1 : Math.round(Math.random()); //0 1随机 // alert( Math.round(Math.random()*10) ); //0-10之间随机数 // alert( Math.round( Math.random()*5 + 5 ) ); // 5~10之间随机数 // alert( Math.round( Math.random()*10 + 10 ) ); // 10~20之间随机数 // alert( Math.round( Math.random()*80 + 20 ) ); // 20~100之间随机数 // x ~ y
var x = 3;
var y = 49;
// alert( Math.round( Math.random()*(y-x) + x ) ); //可以返回x-y之间的随机数 // alert( Math.round( Math.random()*x) ); //0~x之间的随机数 alert( Math.ceil( Math.random()*x) ); //1~x之间的随机数 </script> </body>
</html>
8、链接数组contact与反转数组reverse
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script> var arr1 = [ 1,2,3 ];
var arr2 = [ 4,5,6 ];
var arr3 = [ 7,8,9 ]; alert( arr1.concat( arr2, arr3 ) );
var arr1 = [ 1,2,3,4,5,6 ]; // arr1.reverse();
//可以运用这个反转字符串。先字符串转换为数组，翻转后，在变成字符串
var str = 'abcdef';
// alert(str.split('').reverse().join('')); // 课上小练习：
// 随机产生 100 个从 0 ~ 1000 之间不重复的整数
// var str = 'aaasdlfjhasdlkfs';
// indexOf('s') —— 为数组编写该方法：indexOf('img/1.jpg') </body>
</html>
妙味课堂:JavaScript初级--第12课：json与数组的更多相关文章
- 妙味课堂:JavaScript初级--第11课：字符串、查找高亮显示
1.数字字母 Unicode 编码 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content- ...
- 妙味课堂——JavaScript基础课程笔记
集中时间把秒微课堂JS的基础课程看完,并且认真完成了课后练习.感觉在JS方面的技能算是入了个门了.课后练习的作业完成的代码我都汇总在了这里.至于视频课的学习笔记,则记录如下. 第01课JS入门基础_热 ...
- 妙味课堂——HTML+CSS(第四课)(二)
单开一篇来讲一个大点的话题——清浮动 来看下例: <!DOCTYPE html> <html> <head> <meta charset="U ...
- 妙味课堂——HTML+CSS(第四课)(一)
这一课学的东西真是太多了,还不赶快记下来,留待以后慢慢回味! 首先我们回顾一下inline-block的特性: 使块元素在一行显示 使内嵌支持宽高 换行被解析了(问题) 不设置宽度的时候,宽度由内容撑 ...
- 妙味课堂——HTML+CSS(第三课)
常见标签我已经在上一篇文章中提及,我们做前端设计时,主要也是用这些标签(最常用的). 然而有一个问题,就是有的标签都有自己的默认样式.试通过如下代码来说明: <!DOCTYPE html> ...
- 妙味课堂——HTML+CSS(第一课)
一句话,还记忆不如烂笔头,何况还这么笨,记下笔记,也是记录这一路学习的过程. 妙味课堂第一课并未一味地先讲HTML,而是穿插着CSS讲解,这一点不同于一些其他视频,这一点挺特别的!所以这一课涉及到HT ...
- 妙味课堂史上最全的javascript视频教程，前端开发人员必备知识点，新手易学，拔高必备！！！
妙味课堂是北京妙味趣学信息技术有限公司旗下的IT前端培训品牌, 妙味课堂是一支独具特色的IT培训团队,妙味反对传统IT教育枯燥乏味的教学模式,妙味提供一种全新的快乐学习方法! 妙味js视教第一部分 ...
- 妙味课堂——HTML+CSS基础笔记
妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...
- 妙味课堂——HTML+CSS(第二课)
常见标签——img标签 <img src="图片地址" alt="图片名"/> alt属性是图片名字,是给百度搜索引擎抓取使用的.也有当图片地址不正 ...
随机推荐
- 编写高质量代码—javascript的分层—base层
base层的功能是为common层和page层提供接口.封装不同浏览器下javaScript的差异,提供统一的接口 1.用getNextNode 函数封装IE和Firefox的差异: 2.透明度:封装 ...
- 一个js的动画，以前以为只有flash可以实现
11年刚干这行的时候,看到这种什么百叶窗的动画,以为都是flash实现的,最近突然灵光一闪,想到了用js实现(虽然我不是做前端的,本人做.net).代码虽然实现了,但是比较乱,先上个图: 代码主要就是 ...
- C++ list forward_list
list,forward_list list:双向链表 forward_list:单向链表 在任何位置添加元素,删除元素都很快,但随机访问元素则很慢 声明和初始化 list<T> l; l ...
- Unity 5--全局光照技术
本文整理自Unity全球官方网站,原文:UNITY 5 - LIGHTING AND RENDERING 简介全局光照,简称GI,是一个用来模拟光的互动和反弹等复杂行为的算法,要精确的仿真全局光照非常 ...
- ettercap的中间人欺骗+sslstrip过滤掉https协议
环境准备:kali系统 因为kali系统自带ettercap,比较方便, 不需要安装 ifcofing命令查看当前网关 ,当前的IP是: 172.16.42.1 查找局域网所有主机 通过netdisc ...
- maven jetty struts异常 There is no Action mapped for namespace [/] and action name [] associated with context path
毕业设计中用maven jetty插件调试时,struts出现这个错误,直接http://localhost:8080 无法进入默认主页,但换tomcat就没问题,最后在这篇文章找到答案 http:/ ...
- 《Linux Device Drivers》第十八章 TTY驱动程序——note
简单介绍 tty设备的名称是从过去的电传打字机缩写而来,最初是指连接到Unix系统上的物理或虚拟终端 Linux tty驱动程序的核心紧挨在标准字符设备驱动层之下,并提供了一系列的功能,作为接口被终端 ...
- 近期对FTP及Excel数据处理的一些摸索
一个多月没写随笔了,主要是发的东西,自己感觉也很垃圾,说又说回来,谁不是从垃圾变强的,所以不比比,还得努力.come on!! Python学习也有段时间了,近期为了解决同事的一个难题,所以我们决定联 ...
- [笔记]使用Keepalived实现Nginx主从热备
HA(High Available), 高可用性集群,是保证业务连续性的有效解决方案,一般有两个或两个以上的节点,且分为活动节点及备用节点. 1.1. 高可靠软件keepalived keepaliv ...
- [UWP]了解模板化控件(10)：原则与技巧
1. 原则 推荐以符合以下原则的方式编写模板化控件: 选择合适的父类:选择合适的父类可以节省大量的工作,从UWP自带的控件中选择父类是最安全的做法,通常的选择是Control.ContentContr ...