妙味课堂: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属性是图片名字,是给百度搜索引擎抓取使用的.也有当图片地址不正 ...
随机推荐
- MongoDB优化与一些需要注意的细节
这里总结下这段时间使用mongo的心得,列出了几个需要注意的地方. 1. 系统参数及mongo参数设置 mongo参数主要是storageEngine和directoryperdb,这两个参数一开始不 ...
- PHP就业前景好不好一看便知，转行选择需谨慎！
随着互联网行业迎来新一波的热潮,更多的年轻人选择软件行业发展.由于互联网本身快速发展.不断创新的特点,决定了只有以快开发速度和低成本,才能赢得胜利,才能始终保持网站的领先性和吸引更多的网民. 互联网的 ...
- tp的秘密
入口文件index.php define('APP_DEBUG',True); 改为false* memory_get_usage 获取本套系统目前内存* tp框架中ThinkPHP\Library\ ...
- kubernetes nginx ingress 使用记录
前言 ingress是一种可以暴露k8s集群内部service的方式,用户编辑配置文件定义一个ingress资源即可实现外部网络访问内网service. ingress controller是来管理所 ...
- 《RabbitMQ Tutorial》译文 第 4 章 路由
原文来自 RabbitMQ 英文官网的教程(4.Routing),其示例代码采用了 .NET C# 语言. In the previous tutorial we built a simple log ...
- vue.js之生命周期，防止闪烁，计算属性的使用，vue实例简单方法和循环重复数据
摘要:今天是比较糟糕的一天没怎么学习,原因是学校的wifi连不上了~~.今天学习一下vue的生命周期,如何防止闪烁(也就是用户看得到花括号),计算属性的使用,vue实例简单方法,以及当有重复数据时如何 ...
- HDFS对象存储--Ozone架构设计
前言 如今做云存储的公司非常多,举2个比較典型的AWS的S3和阿里云.他们都提供了一个叫做对象存储的服务,就是目标数据是从Object中进行读写的,然后能够通过key来获取相应的Object,就是所谓 ...
- Codeforces Round #257 (Div. 2) A. Jzzhu and Children（简单题）
题目链接:http://codeforces.com/problemset/problem/450/A ------------------------------------------------ ...
- Android binder学习一：主要概念
要看得懂android代码,首先要了解binder机制.binder机制也是android里面比較难以理解的一块,这里记录一下binder的重要概念以及实现.作为备忘. 部分内容来源于网上,如有侵权. ...
- 指尖上的电商---(4).net开发solr
这一节我们看下如何把查询数据放到server端存储,这里我们须要使用client工具来操作与服务端数据打交道,网上有好多基于.NET开发的SOLRclient,我们这里选择easynet.solr,非 ...