妙味课堂: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属性是图片名字,是给百度搜索引擎抓取使用的.也有当图片地址不正 ...
随机推荐
- PHP7源码安装MongoDB和MongoDB拓展
一.安装MongoDB 1.创建mongodb用户组和用户 groupadd mongodb useradd -r -g mongodb -s /sbin/nologin -M mongodb 2.下 ...
- 第三方登录，一般都是遵循OAuth2.0协议。
1. QQ登录OAuth2.0协议开发流程 1.1 开发流程 申请接入,获取appid和appkey; 开发应用,设置协作者账号,上线之前只有协作者才能进行第三方登录 放置QQ登录按钮(这个自己可以用 ...
- esp8266 SDK开发之编译流程
最近刚完成自己8266的小项目,已经发布在github上,有兴趣的朋友可以看一下 github地址:esp-ujn 1. 通过MQTT协议与服务器交互 2. 内置HTTP服务器,支持通过浏览器进行参数 ...
- 深入理解java虚拟机_第三章（上）----->垃圾收集器与内存分配策略
1. 前言 这一版块内容比较多,分为两篇文章来做笔记.本文讲述上半部分垃圾收集部分;下一篇文章写内存分配部分. 概述 对象已死吗? 引用技术算法 可达性分析算法 再谈引用 两次标记 回收方法区 2. ...
- Java开发小技巧（四）：配置文件敏感信息处理
前言 不知道在上一篇文章中你有没有发现,jdbc.properties中的数据库密码配置是这样写的: jdbc.password=5EF28C5A9A0CE86C2D231A526ED5B388 其实 ...
- 王立平--WebView的缓存机制
WebView的缓存能够分为页面缓存和数据缓存. 1. 页面缓存是指载入一个网页时的html.JS.CSS等页面或者资源数据. 这些缓存资源是因为浏览器的行为而产生.开发人员仅仅能通过配置HTTP ...
- Spring MVC新手教程（二）
第一篇文章宏观讲了Spring MVC概念,以及分享了一个高速入门的样例. 这篇文章主要来谈谈Spring MVC的配置文件. 首先来谈谈web.xml: web项目启动时自己主动载入到内存中的信息, ...
- [基础规范]JavaBeans规范
本文来自维基百科:http://en.wikipedia.org/wiki/JavaBeans#JavaBean_conventions JavaBeans是Java语言中能够反复使用的软件组件,它们 ...
- 兔子-ps抠图
介绍2种方法:1.用高速选择工具 2.用铅笔工具 1.高速选择后.ctrl+c复制,新建空白图片,粘贴进去 2.用钢笔工具在图像的边缘定出若二个点,确定完毕之后按crtl+回车键选择.然后复制,新建空 ...
- JavaScript实现八大内部排序算法
注:基数排序中:r是关键字的基数,d是长度,n是关键字的个数 1.插入排序 基本思想:在序号i之前的元素(0到i-1)已经排好序,本趟需要找到i对应的元素x (此时即arr[i]) 的正确位置k,在寻 ...