javascript高级
数组及操作方法
数组就是一组数据的集合，javascript中，数组里面的数据可以是不同类型的。
定义数组的方法
//对象的实例创建
var aList = new Array(1,2,3); //直接量创建
var aList2 = [1,2,3,'asd'];
操作数组中数据的方法
1、获取数组的长度：aList.length;
var aList = [1,2,3,4];
alert(aList.length); // 弹出4
2、用下标操作数组的某个数据：aList[0];
var aList = [1,2,3,4];
alert(aList[0]); // 弹出1
3、join() 将数组成员通过一个分隔符合并成字符串
var aList = [1,2,3,4];
alert(aList.join('-')); // 弹出 1-2-3-4
4、push() 和 pop() 从数组最后增加成员或删除成员
var aList = [1,2,3,4];
aList.push(5);
alert(aList); //弹出1,2,3,4,5
aList.pop();
alert(aList); // 弹出1,2,3,4
5、reverse() 将数组反转
var aList = [1,2,3,4];
aList.reverse();
alert(aList); // 弹出4,3,2,1
6、indexOf() 返回数组中元素第一次出现的索引值
var aList = [1,2,3,4,1,3,4];
alert(aList.indexOf(1));
7、splice() 在数组中增加或删除成员
var aList = [1,2,3,4];
aList.splice(2,1,7,8,9); //从第2个元素开始，删除1个元素，然后在此位置增加'7,8,9'三个元素
alert(aList); //弹出 1,2,7,8,9,4
多维数组
多维数组指的是数组的成员也是数组的数组。
var aList = [[1,2,3],['a','b','c']];
alert(aList[0][1]); //弹出2;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// 创建数组
// 第一种方式：
var aList01 = new Array(1,2,3); // 第二种方式：
var aList02 = ['a','b','c','d','e']; // 获取数组成员的个数
var iLen = aList02.length;
//alert(iLen); // 操作数组的某个成员
// alert( aList02[2] ); // 在数组后面增加成员
//alert(aList02)
aList02.push('f');
//alert(aList02); // 删除数组最后一个成员
aList02.pop();
//alert(aList02); // 获取某个成员在数组中第一次出现的索引值
var aList03 = ['a','b','c','d','a','b','c','d'];
var iPos = aList03.indexOf('c');
// 如果成员不存在，得到的值是 -1
var iPos2 = aList03.indexOf('f'); // alert(iPos);
// alert(iPos2); // 在数组中增加或者删除成员
alert(aList03);
aList03.splice(4,2)
alert(aList03); // a,b,c,d,c,d
aList03.splice(4,2,'e','f','g');
alert(aList03); // 将数组通过某个字符拼接成一个大的字符串
var sTr = aList03.join('-');
var sTr2 = aList03.join('');
alert(sTr);
alert(sTr2); </script> </head>
<body> </body>
</html>
数组操作
批量操作数组中的数据，需要用到循环语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var aList = ['a','b','c','d','e','f'];
var iLen = aList.length; for(var i=0;i<iLen;i++){
alert( aList[i] );
} </script>
</head>
<body> </body>
</html>
for循环操作数组
循环语句
程序中进行有规律的重复性操作，需要用到循环语句。
for循环
for(var i=0;i<len;i++)
{
......
}
课堂练习
1、数组去重
var aList = [1,2,3,4,4,3,2,1,2,3,4,5,6,5,5,3,3,4,2,1]; var aList2 = []; for(var i=0;i<aList.length;i++)
{
if(aList.indexOf(aList[i])==i)
{
aList2.push(aList[i]);
}
} alert(aList2);
2、将数组数据放入页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.list{
list-style:none;
padding:0px;
margin:50px auto 0px;
width:300px;
} .list li{
line-height:50px;
border-bottom:1px dotted black;
} </style>
<script>
window.onload = function(){
var aList = ['一部好戏','碟中谍6','蚁人2','熊出没','小猪佩奇','哆啦A梦']
var oUl = document.getElementById('list');
var sTr = ''; for(var i=0;i<aList.length;i++){
sTr += '<li>' +aList[i]+'</li>';
} //alert(sTr);
oUl.innerHTML = sTr;
} </script>
</head>
<body>
<ul class="list" id="list">
<!-- <li>电影名称排行</li>
<li>电影名称排行</li>
<li>电影名称排行</li>
<li>电影名称排行</li>
<li>电影名称排行</li>
<li>电影名称排行</li> -->
</ul>
</body>
</html>
定时器
定时器在javascript中的作用
1、定时调用函数
2、制作动画
定时器类型及语法
/*
定时器：
setTimeout 只执行一次的定时器
clearTimeout 关闭只执行一次的定时器
setInterval 反复执行的定时器
clearInterval 关闭反复执行的定时器 */ var time1 = setTimeout(myalert,2000);
var time2 = setInterval(myalert,2000);
/*
clearTimeout(time1);
clearInterval(time2);
*/
function myalert(){
alert('ok!');
}
课堂实例
1、定时器制作移动动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
background:gold;
position: fixed;
left:0px;
top:100px;
}
</style>
<script>
window.onload = function(){
var oBox = document.getElementById('box'); var iLeft = 0; var oTimer = setInterval(fnMove,30); function fnMove(){
iLeft += 3; if(iLeft>600){
clearInterval(oTimer);
} oBox.style.left = iLeft + 'px';
} } </script>
</head>
<body>
<div class="box" id="box"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
width:200px;
height: 200px;
background:gold;
position:fixed;
left:0px;
top:100px;
} </style>
<script>
window.onload = function(){
var oBox = document.getElementById('box'); var iLeft = 0;
var iSpeed = 3; var oTimer = setInterval(fnMove,30); function fnMove(){
iLeft += iSpeed; // 到最右边的时候
if(iLeft>600){
iSpeed = -3;
} // 到最左边的时候
if(iLeft<0){
iSpeed = 3;
} oBox.style.left = iLeft + 'px';
} } </script>
</head>
<body>
<div class="box" id="box"></div>
</body>
</html>
定时器制作左右移动的动画
2、定时器制作无缝滚动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝滚动</title>
<style type="text/css">
body,ul{
margin:0;
padding:0;
} .list_con{ width:1000px;
height:200px;
border:1px solid #000;
margin:10px auto 0;
background-color:#f0f0f0;
position:relative;
overflow:hidden;
} .list_con ul{
list-style:none;
width:2000px;
height:200px;
position:absolute;
left:0;
top:0;
} .list_con li{
width:180px;
height:180px;
float:left;
margin:10px;
} .btns_con{
width:1000px;
height:30px;
margin:50px auto 0;
position:relative;
} .left,.right{
width:30px;
height:30px;
background-color:gold;
position:absolute;
left:-40px;
top:124px;
font-size:30px;
line-height:30px;
color:#000;
font-family: 'Arial';
text-align:center;
cursor:pointer;
border-radius:15px;
opacity:0.5;
}
.right{
left:1010px;
top:124px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oUl = document.getElementById('list');
var oBtn01 = document.getElementById('btn01');
var oBtn02 = document.getElementById('btn02');
var oSlide = document.getElementById('slide'); // 将ul中的5个li复制一份，成为10个li
oUl.innerHTML = oUl.innerHTML + oUl.innerHTML; var iLeft = 0;
var iSpeed = -3
// 定义一个变量来存iSpeed上一次的值
var iLastSpeed = -3; var oTimer = setInterval(fnMove,30); function fnMove(){
iLeft += iSpeed; // 当运动到最左边的时候
if(iLeft<-1000){
iLeft = 0;
}
// 当运动到最右边的时候(就是起始状态)
if(iLeft>0){
iLeft = -1000;
}
oUl.style.left = iLeft + 'px';
}
// 点击左边的按钮
oBtn01.onclick = function(){
iSpeed = -3;
}
// 点击右边的按钮
oBtn02.onclick = function(){
iSpeed = 3;
} // 绑定幻灯片外面容器标签的移入移出事件
oSlide.onmouseover = function(){
//clearInterval(oTimer);
iLastSpeed = iSpeed;
iSpeed = 0;
} oSlide.onmouseout = function(){
//oTimer = setInterval(fnMove,30);
iSpeed = iLastSpeed;
} } </script>
</head>
<body>
<div class="btns_con">
<div class="left" id="btn01"><</div>
<div class="right" id="btn02">></div>
</div>
<div class="list_con" id="slide">
<ul id="list">
<li><a href=""><img src="data:images/goods001.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="data:images/goods002.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="data:images/goods003.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="data:images/goods004.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="data:images/goods005.jpg" alt="商品图片"></a></li>
</ul> </div>
</body>
</html>
无缝滚动
字符串处理方法
1、字符串合并操作：“ + ”
var iNum01 = 12;
var iNum02 = 24;
var sNum03 = '12';
var sTr = 'abc';
alert(iNum01+iNum02); //弹出36
alert(iNum01+sNum03); //弹出1212 数字和字符串相加等同于字符串相加
alert(sNum03+sTr); // 弹出12abc
2、parseInt() 将数字字符串转化为整数
var sNum01 = '12';
var sNum02 = '24';
var sNum03 = '12.32';
alert(sNum01+sNum02); //弹出1224
alert(parseInt(sNum01)+parseInt(sNum02)) //弹出36
alert(parseInt(sNum03)) //弹出数字12 将字符串小数转化为数字整数
3、parseFloat() 将数字字符串转化为小数
var sNum03 = '12.32'
alert(parseFloat(sNum03)); //弹出 12.32 将字符串小数转化为数字小数
4、split() 把一个字符串分隔成字符串组成的数组
var sTr = '2017-4-22';
var aRr = sTr.split("-");
var aRr2= sTr.split(""); alert(aRr); //弹出['2017','4','2']
alert(aRr2); //弹出['2','0','1','7','-','4','-','2','2']
5、indexOf() 查找字符串是否含有某字符
var sTr = "abcdefgh";
var iNum = sTr.indexOf("c");
alert(iNum); //弹出2
6、substring() 截取字符串 用法： substring(start,end)（不包括end）
var sTr = "abcdefghijkl";
var sTr2 = sTr.substring(3,5);
var sTr3 = sTr.substring(1); alert(sTr2); //弹出 de
alert(sTr3); //弹出 bcdefghijkl
字符串反转
var str = 'asdfj12jlsdkf098';
var str2 = str.split('').reverse().join(''); alert(str2);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var iNum01 = 12;
var sNum01 = '12';
var sNum02 = '12.45'; //alert(iNum01 + 10);
//alert(sNum01 + 10);// '1210' //alert(parseInt(sNum01) +10 );
// 将整数的字符串转换为整数，用parseInt，如果是小数，会去掉小数位
//alert( parseInt(sNum02) +10); // 将小数的字符串转化为小数，用parseFloat
//alert( parseFloat(sNum02) +10); // 将字符串分割，返回一个数组
var sTr = '2018-09-23'; var aList = sTr.split('-');
var aList2 = sTr.split(''); //alert(aList);
//alert(aList2); // 返回某小段字符在大段字符里面出现的索引值
var sTr2 = 'abcdefgh123ijkl123mn'; var iPos = sTr2.indexOf('123');
var iPos2 = sTr2.indexOf('1234'); //alert(iPos);
//alert(iPos2); // 字符串切片
var sTr3 = sTr2.substring(8,12);
// 只写一个数字，表示从这个这个数字对应的字符一直切到结尾
var sTr4 = sTr2.substring(8);
alert(sTr3);
alert(sTr4); </script>
</head>
<body> </body>
</html>
字符串操作
变量作用域
变量作用域指的是变量的作用范围，javascript中的变量分为全局变量和局部变量。
1、全局变量：在函数之外定义的变量，为整个页面公用，函数内部外部都可以访问。
2、局部变量：在函数内部定义的变量，只能在定义该变量的函数内部访问，外部无法访问。
// 定义全局变量
var a = 12;
function myalert()
{
// 定义局部变量
var b = 23;
alert(a);
// 修改全局变量
a++;
alert(b);
}
myalert(); // 弹出12和23
alert(a); // 弹出13
alert(b); // 出错
javascript高级的更多相关文章
- 《JavaScript高级程序设计（第3版）》笔记-序
很少看书,不喜欢看书,主要是上学时总坐不住,没有多大定性,一本书可以两天看完,随便翻翻,也可以丢在角落里几个月不去动一下. 上次碰到了<JavaScript高级程序设计(第3版)>感觉真的 ...
- 《JavaScript高级程序设计（第3版）》阅读总结记录第一章之JavaScript简介
前言: 为什么会想到把<JavaScript 高级程序设计(第 3 版)>总结记录呢,之前写过一篇博客,研究的轮播效果,后来又去看了<JavaScript 高级程序设计(第3版)&g ...
- 【javascript学习——《javascript高级程序设计》笔记】DOM操作
DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘了一个层次节点树,允许开发人员添加.移除和修改. 1.节点层次 <html> <head& ...
- 读javascript高级程序设计00-目录
javascript高级编程读书笔记系列,也是本砖头书.感觉js是一种很好上手的语言,不过本书细细读来发现了很多之前不了解的细节,受益良多.<br/>本笔记是为了方便日后查阅,仅作学习交流 ...
- 《JavaScript高级程序设计》读书笔记--前言
起因 web编程过程使用javascript时感觉很吃力,效率很低.根本原因在于对javascript整个知识体系不熟,看来需要找些书脑补一下,同时欢迎众网友监督. 大神推荐书籍 看了博客大神们推荐的 ...
- 阅读摘录《javascript 高级程序设计》01
前言: 因为工作需要,所以开始主攻前台JS方面的技术.在以前的工作中,使用过这门脚本语言.但是都是比较凌乱的,用到什么学什么,只是为了实现业务,而去使用. 不会考虑到代码优化,封装对象等.今次特意借了 ...
- 《JavaScript高级程序设计》学习笔记(5)——面向对象编程
欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 本节内容对应<JavaScript高级程序设计>的第六章内容. 1.面向对象(Object ...
- 《JavaScript高级程序设计》学习笔记(4)——引用类型
欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 本节内容对应<JavaScript高级程序设计>的第五章内容. 在ECMAScript中, ...
- 《JavaScript高级程序设计》学习笔记(3)——变量、作用域和内存问题
欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 本节内容对应<JavaScript高级程序设计>的第四章内容. 1.函数:通过函数可以封装 ...
- 1 《JavaScript高级程序设计》学习笔记(1)
欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 首先,我将从<JavaScript高级程序设计>这本JavaScript学习者必看的经典教 ...
随机推荐
- laravel5.7 前后端分离开发 实现基于API请求的token认证
最近在学习前后端分离开发,发现 在laravel中实现前后台分离是无法无法使用 CSRF Token 认证的.因为 web 请求的用户认证是通过Session和客户端Cookie的实现的,而前后端分离 ...
- 小试wsl
安装 管理员权限运行powershell,执行如下命令: Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Su ...
- 大佬是怎么思考设计MySQL优化方案的？
在进行MySQL的优化之前,必须要了解的就是MySQL的查询过程,很多查询优化工作实际上就是遵循一些原则,让MySQL的优化器能够按照预想的合理方式运行而已. 一.优化的哲学 注:优化有风险,涉足需谨 ...
- Q语言-[帝王三国送将辅助]
纯属自己写的, 玩同一个游戏的朋友,需要送将的, 把需要送的将改名为送, 然后启动辅助即可 本辅助只支持1024x576 191dpi 附上源码 //本源码初始化分辨率1024x576[夏天] Dim ...
- [系统相关]WPS Office 2016 专业增强版 10.8.0.6470 免序列号无限制
WPS Office (10.8.0.6470) 新增功能列表 ============================================= 改进功能列表 ------------ W ...
- Java中静态变量与实例变量
知识回顾 上一篇总结了java中成员变量和局部变量的区别,这一篇将总结静态变量和实例变量的一些特性和区别. 示例代码 package Variable; public class VariableDe ...
- elasticsearch_.net_client_nest2.x_到_5.x常用方法属性差异
目录: Elasticsearch .net client NEST 5.x 使用总结 elasticsearch_.net_client_nest2.x_到_5.x常用方法属性差异 Elastics ...
- 【BZOJ5194】Snow Boots
[原题题面]传送门 [简化题意] 给定一个长度为n的序列. 有m次询问,每次询问给定两个数si,di.你一开始站在0,每次你可以走不超过di,但你到达的位置的数不能超过si.问能否走到n+1. n,m ...
- gulp自动化构建工具的使用
gulp自动化构建工具: 把前端开发常见的处理(“搬砖”)程序,通过一个工具模块管理起来,只需配置一次,达到自动处理目的,简化开发,提高效率!! 安装: 1.全局安装(全局安装一个gulp命令) A. ...
- eclipse报错：Multiple annotations found at this line: - String cannot be resolved to a type解决方法实测
Multiple annotations found at this line:- String cannot be resolved to a type- The method getContext ...