妙味课堂: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属性是图片名字,是给百度搜索引擎抓取使用的.也有当图片地址不正 ...
随机推荐
- mysql分区分表
为毛要分表和分区,,,,所有数据库的通病,文件越大,性能越低...那问题就来了.数据越多文件越大...无解?哎,所以说知道 为毛要分区了吧!那分表又是毛线?分表就是把一张表拆分成若干表,,,根据情况常 ...
- Python面向对象解析
面向对象概述 什么是面向对象:从简单来说,如果程序中的所有功能都是用 类 和 对象 来实现,那么就是面向对象编程了. 面向过程:根据业务逻辑从上到下写垒代码 函数式:将某功能代码封装到函数中,日后便无 ...
- ABP module-zero +AdminLTE+Bootstrap Table+jQuery权限管理系统第十七节--Quartz与ABP框架Abp.Quartz及扩展
ABP+AdminLTE+Bootstrap Table权限管理系统一期 Github:https://github.com/Jimmey-Jiang/ABP-ASP.NET-Boilerplate- ...
- SQL Server 日志清理
--SQL2005: Backup Log DNName with no_log --这里的DNName是你要收缩的数据库名,自己注意修改下面的数据库名,我就不再注释了. go dump transa ...
- Scala入门系列（九）：函数式编程
引言 Scala是一门既面向对象,又面向过程的语言,Scala的函数式编程,就是Scala面向过程最好的佐证.也真是因此让Scala具备了Java所不具备的更强大的功能和特性. 而之所以Scala一直 ...
- JS 中对变量类型的五种判断方法
5种基本数据类型:undefined.null.boolean.unmber.string 复杂数据类型:object. object:array.function.date等 方法一:使用typeo ...
- 智能合约语言 Solidity 教程系列4 - 数据存储位置分析
写在前面 Solidity 是以太坊智能合约编程语言,阅读本文前,你应该对以太坊.智能合约有所了解, 如果你还不了解,建议你先看以太坊是什么 这部分的内容官方英文文档讲的不是很透,因此我在参考Soli ...
- WINDOWS java 不能正常卸载 问题， （其他系统问题 也可以试试）
1.JAVA 原安装包无法卸载 不知道 有没有通知 碰到过这种情况的 自己碰到过3次这种情况了, 卸载不掉, 在网上 找了N多中 方法, 注册表什么的都被翻烂了, 单还是没用,其中有一次还把 ...
- Android Things 专题6 完整的栗子：运用TensorFlow解析图像
文| 谷歌开发技术专家 (GDE) 王玉成 (York Wang) 前面絮叨了这么多.好像还没有一个整体的概念.我们怎样写一个完整的代码呢? 如今深度学习非常火,那我们就在Android Things ...
- Python的招牌菜xmlrpc
一.简单介绍 为了解决在系统的80port提供RPC的服务.而又不影响正在运行的WEB服务.人们想出了用HTTP协议传输RPC包的办法.对于差点儿是专门用于传输文本的HTTP协议.要在其上传输RPC封 ...