共计 8613 个字符，预计需要花费 22 分钟才能阅读完成。
概述
介绍 javascript 数组和字符串的操作方法、循环语句、定时器的使用及实例、变量作用域、封闭函数的使用场景。
一、数组&字符串的操作
1. 数组及操作方法
数组就是一组数据的集合，javascript 中，数组里面的数据可以是不同类型的, 这里的数组就相当于我们 python 中的列表
定义数组的方法
数组定义形式:
第一种:
var 数组名 = new Array(元素一, 元素二, 元素三...)
第二种:
var 数组名 = [元素一, 元素二, 元素三...]例如:
// 对象的实例创建
var aList = new Array(1,2,3);
// 直接量创建
var aList2 = [1,2,3,'asd'];2. 数组常见的操作方法:
1、获取数组的长度：
一般我们获取数组长度使用: length
var aList = [1,2,3,4];
// 打印输出数组 aList 的长度
console.log(aList.length)结果:
4var aList = [‘光头强’, ‘熊大’, ‘熊二’, ‘翠花’, ‘吉吉’, ‘萝卜头]
2、下标索引的使用：
和python一样, 我们也可以利用下标索引的思想来操作数组中某一个元素: aList[0]
var aList = [1,2,3,4];
console.log(aList[0]); 结果:
1var aList = [‘美羊羊’, ‘慢羊羊’, ‘红太狼’, ‘喜羊羊’, ‘懒羊羊’]
3、join(分隔符)
将数组成员通过一个分隔符合并成字符串
var aList = [1, 2, 3, 4]
var newList = aList.join('-')
console.log(newList)
console.log(typeof(newList)) 结果:
1-2-3-4
stringvar aList = [‘七龙珠’, ‘史努比’, ‘铁壁阿童木’, ‘忍者神龟’, ‘兔八哥’]
4、push( ) 和 pop( )
从数组最后增加成员或删除成员
var aList = [1,2,3,4];
aList.push(5);
console.log(aList)
aList.pop()
console.log(aList)结果:
[1, 2, 3, 4, 5]
[1, 2, 3, 4]var aList = [‘灌篮高手’, ‘邋遢大王奇遇记’, ‘变形金刚’]
5、reverse( )
将数组反转
var aList = [3,2,1,4];
aList.reverse();
console.log(aList)结果:
[4, 1, 2, 3]var aList = [‘蜡笔小新’, ‘舒塔和贝塔’, ‘魔神英雄坛’, ‘棒球英豪’]
6、indexOf( )
返回数组中元素第一次出现的索引值:
- 如果有, 则正常返回索引值
- 如果检索的内容不存在于数组中, 则返回 -1
var aList = [1,2,3,4,1,3,4];
console.log( aList.indexOf(4) )
console.log( aList.indexOf(5) )结果:
3
-1var aList = [‘美少女战士’, ‘犬夜叉’, ‘黄金圣斗士’, ‘猫和老鼠’, ‘美少女战士’, ‘猫和老鼠’]
7、splice( )
在数组中增加或删除成员
使用格式:
数组名.splice(index,howmany,item1,.....,itemX)index: 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany: 必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, …, itemX: 可选。向数组添加的新项目。
例如:
var aList = [1,2,3,4];
// 从第2个元素开始，删除1个元素，然后在此位置增加'7,8,9'三个元素
aList.splice(2,1,7,8,9);
alert(aList); //弹出 1,2,7,8,9,48. 多维数组
多维数组指的是数组的成员也是数组的数组。
var aList = [[1,2,3],['a','b','c']];
alert(aList[0][1]); //弹出2;批量操作数组中的数据，需要用到循环语句
2. 循环
程序中进行有规律的重复性操作，需要用到循环语句。
for循环
使用格式:
for (var i=0;i<5;i++)
{
console.log(i)
}打印结果:
20
1
2
3
4课堂练习
1、数组去重
var aList = [1,2,3,4,4,3,2,1,2,3,4,5,6,5,5,3,3,4,2,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++){
var value = aList[i]
if (aList2.indexOf(value) + 1){
console.log('重复了',value)
} else {
aList2.push(value)
}
}
console.log(aList2)
// 第二种方法:
for(var i=0;i<aList.length;i++)
{
if(aList.indexOf(aList[i])==i)
{
aList2.push(aList[i]);
}
}
// 第三种方法
for (var i = 0; i < arr.length; i++) {
if (arr.indexOf(arr[i]) != i) {
arr.splice(i, 1);
i--;
}
}
alert(arr);
alert(aList2);2、将数组数据放入页面
var list = [‘弱点’, ‘看不见的客人’, ‘摔跤吧, 爸爸’, ‘龙猫’, ‘全民目击’, ‘触不可及’, ‘萨利机长’,’消失的爱人]
JS部分:
<script>
window.onload = function () {
var ul = document.getElementById('ulbox')
var list = ['弱点','看不见的客人','摔跤吧, 爸爸','龙猫','全民目击','触不可及','萨利机长']
var str = ''
for (var i=0;i<list.length;i++){
value = list[i]
str += '<li>' + value + '</li>'
}
console.log(str)
ul.innerHTML = str
}
</script>
HTML部分:
<ul id="ulbox">
</ul>3. 字符串处理方法
1、+ 运算符
如果是两个数字进行相加运算, 得到的是 两个数的和
如果是两个字符串进行相加运算, 得到的是 两个字符串的拼接
如果是一个字符串, 一个数字的相加运算, 得到的是 拼接的结果
var iNum01 = 12;
var iNum02 = 24;
var sNum03 = '12';
var sTr = 'abc';
alert( iNum01 + iNum02 ); // 弹出36
alert( iNum01 + sNum03 ); // 弹出1212 数字和字符串相加等同于字符串相加
alert( sNum03 + sTr ); // 弹出12abc2、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 aStr1 = sTr.split("-");
var aStr2 = sTr.split("");
var aStr3 = sTr.split();
console.log(aStr1);
console.log(aStr2);
console.log(aStr3) 结果:
['2017','4','22']
['2','0','1','7','-','4','-','2','2']
['2017-4-22']练习: var str=”How are you doing today?”
如果把空字符串 (“”) 用作 separator，那么 stringObject 中的每个字符之间都会被分割。
注意： split() 方法不改变原始字符串。
<p id="demo">单击按钮显示分割后的数组.</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
var str="How are you doing today?";
var n=str.split(" ");
document.getElementById("demo").innerHTML=n;
}
</script>5、indexOf()
方法可返回某个指定的字符串值在字符串中首次出现的位置。
如果要检索的字符串值没有出现，则该方法返回 -1。
var sTr = "abcdefgh";
var iNum = sTr.indexOf("c");
alert(iNum); // 弹出26、substring( )
截取字符串
左闭右开 [start, stop) start <= x < stop
使用方法:
字符串.substring(start,stop)start: 必需。一个非负的整数，规定要提取的子串的第一个字符在 字符串 中的位置。
stop: 可选。一个非负的整数，比要提取的子串的最后一个字符在 字符串 中的位置多 1。如果省略该参数，那么返回的子串会一直到字符串的结尾。
例如:
var sTr = "abcdefghijkl";
var sTr2 = sTr.substring(3,5);
var sTr3 = sTr.substring(1);
alert(sTr2); // 弹出 de
alert(sTr3); // 弹出 bcdefghijkl7. 字符串反转:
将字符串的内容颠倒过来, 不是排序
var str = 'asdfj12jlsdkf098';
var str2 = str.split('').reverse().join('');
console.log(str2);结果:
890fkdslj21jfdsa思考:
如果我们把上面的式子写成下面的样子, 能否达到同样的效果:
var str = 'asdfj12jlsdkf098';
var str2 = str.split().reverse().join('');
console.log(str2);结果:
asdfj12jlsdkf098二. 调试程序的方法
- alert
使用方式:
alert(要展示的内容)
alert展示内容的形式是弹出一个对话框, 然后把内容添加上去.
通常用于程序需要暂时停止的情况- console.log
使用方式:
console.log(要展示的内容)
console.log()方法能够帮助我们将调试的代码展示在浏览器的控制台
一般我们使用这样的调试方式较多, 而且浏览器控制台能够直接修改代码, 方便我们多次调试- document.title
使用方法:
document.title = 要显示的内容
这样的方式可以把要调试的内容,展示在网页的标题区域
这样的方式适合于偶尔展示- document.write( )
使用方法:
document.write(exp1,exp2,exp3,....)
write() 方法可向文档写入 HTML 表达式或 JavaScript 代码
可列出多个参数(exp1,exp2,exp3,...) ，它们将按顺序被追加到文档中。
一般不怎么使用, 偶尔可用三 . 定时器
定时器在 javascript 中的作用
- 定时调用函数
- 制作动画
- 模拟网络延时的情况
1. 定时器的种类:
- 执行一次的定时器: setTimeout
- 执行多次的定时器: setInterval
- 关闭只执行一次的定时器: clearTimeout
- 关闭反复执行的定时器: clearInterval
定时器的使用方式:
setInterval(code,millisec)code 必需。要调用的函数或要执行的代码串。
millisec 必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。
例如:
// 设置定时器
var time1 = setTimeout(myalert,2000);
var time2 = setInterval(myalert,2000);
// 去除定时器
clearTimeout(time1);
clearInterval(time2);
// 定时器调用的方法
function myalert(){
alert('ok!');
}1. 使用定时器 —– 使方框移动
CSS部分:
<style>
.box{
width:300px;
height:300px;
background:gold;
position:fixed;
left:0px;
top:100px;
}
</style>
JS部分:
<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>
HTML部分:
<div class="box" id="box"></div>2. 使方框左右移动:
CSS部分:
<style>
.box{
width:300px;
height:300px;
background:gold;
position:fixed;
left:0px;
top:100px;
}
</style>
JS部分:
<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>
HTML部分:
<div class="box" id="box"></div>3. 无限轮播动画
CSS部分:
<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>
JS部分:
<script type="text/javascript">
window.onload = function(){
// 获取图片的容器
var oUl = document.getElementById('list');
// 获取左右两个按钮
var oLeft = document.getElementById('btn01');
var oRight = document.getElementById('btn02');
// ul的容器
var oSlide = document.getElementById('slide');
// 将ul中的5个li复制一份
oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
var iLeft = 0;
var iSpeed = -3;
// 定义变量存储iSpeed的值
var iLastSpeed = 0;
var oTimer = setInterval(fnMove,30);
function fnMove(){
iLeft += iSpeed;
// 当移动到最左边的时候
if(iLeft<-1000)
{
iLeft = 0;
}
// 当移动到最右边的时候
if(iLeft>0){
iLeft = -1000;
}
oUl.style.left = iLeft + 'px';
}
oLeft.onclick = function(){
iSpeed = -3;
}
oRight.onclick = function(){
iSpeed = 3;
}
// 定义鼠标移入事件
oSlide.onmouseover = function(){
iLastSpeed = iSpeed;
iSpeed = 0;
//clearInterval(oTimer);
}
// 定义鼠标移出事件
oSlide.onmouseout = function(){
iSpeed = iLastSpeed;
//oTimer = setInterval(fnMove,30);
}
}
</script>
HTML部分:
<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="images/goods001.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="images/goods002.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="images/goods003.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="images/goods004.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="images/goods005.jpg" alt="商品图片"></a></li>
</ul>
</div>
</body>四 . 变量作用域
变量作用域指的是变量的作用范围，javascript 中的变量分为全局变量和局部变量。
全局变量：在函数之外定义的变量，为整个页面公用，函数内部外部都可以访问。
局部变量：在函数内部定义的变量，只能在定义该变量的函数内部访问，外部无法访问。
<script type="text/javascript">
// 定义全局变量
var a = 12;
function myalert()
{
// 定义局部变量
// a = 12
var b = 23;
alert(a);
// 修改全局变量
a++;
alert(b);
}
myalert(); // 弹出12和23
alert(a); // 弹出13
alert(b); // 出错
</script>五. 封闭函数
封闭函数是 javascript 中匿名函数的另外一种写法，创建一个一开始就执行而不用命名的函数。
一般定义的函数和执行函数：
function myalert(){
alert('hello!');
};
myalert();封闭函数：
(function(){
alert('hello!');
})();还可以在函数定义前加上“~”和“!”等符号来定义匿名函数
!function(){
alert('hello!');
}()封闭函数的作用
封闭函数可以创造一个独立的空间
在封闭函数内定义的变量和函数不会影响外部同名的函数和变量，可以避免命名冲突
在页面上引入多个 js 文件时，用这种方式添加 js 文件比较安全，比如：
var iNum01 = 12;
function myalert(){
alert('hello!');
}
(function(){
var iNum01 = 24;
function myalert(){
alert('hello!world');
}
alert(iNum01);
myalert()
})()
alert(iNum01);
myalert();