妙味课堂: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属性是图片名字,是给百度搜索引擎抓取使用的.也有当图片地址不正 ...
随机推荐
- Spring MVC 学习总结（九）——Spring MVC实现RESTful与JSON（Spring MVC为前端提供服务）
很多时候前端都需要调用后台服务实现交互功能,常见的数据交换格式多是JSON或XML,这里主要讲解Spring MVC为前端提供JSON格式的数据并实现与前台交互.RESTful则是一种软件架构风格.设 ...
- POJ1273 网络流-->最大流-->模板级别-->最大流常用算法总结
一般预流推进算法: 算法思想: 对容量网络G 的一个预流f,如果存在活跃顶点,则说明该预流不是可行流. 预流推进算法就是要选择活跃顶点,并通过它把一定的流量推进到它的邻接顶点,尽可能将正的赢余减少为0 ...
- Gitlab一键端的安装汉化及问题解决(2017/12/14目前版本为10.2.4)
Gitlab的安装汉化及问题解决 一.前言 Gitlab需要安装的包太TM多了,源码安装能愁死个人,一直出错,后来发现几行命令就装的真是遇到的新大陆一样... ... 装完之后感觉太简单,加了汉化补丁 ...
- setTimeout和setInterval和单线程
我们知道,js是单线程执行的(单线程j就是说在程序执行时,所走的程序路径按照连续顺序排下来,前面的必须处理好,后面的才会执行).所以其实setTimeout和setInterval所谓的"异 ...
- Android研究之监听自身应用被卸载代码实现
1.通过jni实现函数 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 3 ...
- HBase1.0.1基本操作（java代码）
public class HQuery { private static ConnHBase connHbase=new ConnHBase(); /***************建表******** ...
- Django配置session
在settings.py文件里加入 #配置失效时间为半个小时 SESSION_COOKIE_AGE = 60*30 #关闭浏览器清除cookie SESSION_EXPIRE_AT_BROWSER_C ...
- 算法题：A除以B
题目描写叙述 本题要求计算A/B.当中A是不超过1000位的正整数,B是1位正整数.你须要输出商数Q和余数R,使得A = B * Q + R成立. 输入描写叙述: 输入在1行中依次给出A和B,中间以1 ...
- Android Library projetcts cannot be exported.
记一次比較无语的犯错,前几天我在紧急打包一个apk的时候.遇到了这样一个异常:Android Library projetcts cannot be exported. 异常提示截图例如以下: wat ...
- path和classpath细节
从学习java的最初我们就被要求先设置path变量和classpath变量.但是这两个环境变量到底有什么作用呢? 1.path环境变量 path环境变量的主要作用是告诉操作系统到哪里去寻找某个程序,如 ...