js 再提高
11.8 js 再提高
- 循环
- 数组常用操作方法
- 工作场景实例
- 字符串及操作
- 定时器demo
- 补充知识点：变量作用域 调bug 封闭函数
1.循环for while
循环目的就是遍历，重复执行
for循环相比较更方便,因为while可能会忘记写增量，工作部署中会导致服务器宕机,下面给出语法规则：
while和for与c语言里用法一样
2.数组及操作方法
数组用于存储数据，相比变量，变量一次只能存一个，数组可以存多个。就像python中的列表
//var xx= 值
var arrNum = new Arrar(10, 20, 30, 'aaa')//用函数声明数组,可以存不同数据类型，尽量避免
常用创建方法；
var arr2 = [10, 20, 30, 40, 'abc']
相比而言，就是python里的列表
例如取哪个数组的哪个下标就是 arr2[2]
取长度， arr2.length
结尾添加arr2.push()
arr2.push('jka')
结尾删除pop
arr2.pop()
splice任意位置删除，添加
arr2.splice(位置下标，删除个数，添加的数据)
join(‘分割符号’)分割数组为字符串
数组反转 .reverse()
返回下标（返回这个数据第一次出现的下标）
arr2.indexOf(20)
前添加unshift 前删除shift
3.小demo
数组数据写入页面
获取元素，定义变量，拼接填充，innerHTML写入
4.数组去重
看数组的所有数据，如果是没有重复的，放到newArr中
重复，indexOf的下标与遍历的下标不相等
var arr = [10, 20, ...]
var newArr = []
for(var i=0;i5.调bug的方法
浏览器检查，console，有报错信息，有错误行
alert显示会断点，阻挡程序执行，我们可以改成console.log转化到日志输出，输出到控制台
document.title会让标题栏改变
6.字符串的操作方法
- parseInt(str字符串) 转化为整型
- parseFloat() 保留小数
- substring(开始下标，结束下标) 截取字符串，不包含结束位
- split(‘分割符’) 分割为数组
7.定时器
控制命令重复执行，用自己的延迟时间控制命令是否重复执行
单次定时器：用时间控制命令执行一次
多次循环定时器：用时间控制命令多次执行
//单次setTimeout()
//多次setInterval()
//函数都有相同的两个参数
参数1:命令-- 1.匿名函数形式 2.函数名形式
参数2；延迟时间，毫秒为单位
停止定时器clearInterval(定时器名字)
clearTimeout
var oTimer=null//定时器是对象型数据类型
oBtn1.onclick = function(){
setTime(function(){
alert('单次')
},2000)
}
funtion aa(){
alert('多次')
}
oBtn2.onclick= function(){
oTimer = setInterval(aa,2000)
}
oBtn3.onclick = function(){
clearInterval(oTimer)
oTimer = null//因为定时器里还有很多命令，为了释放浏览器缓存，将oTimer清空不保存
}
8.标签位移原理
用position absolute或者fiexd不定位
window.onload = function(){
var oBox = document.getElementById('box')
var num = 0;
var speed = 5;
setInterval(fnMove,30)
function fnMove(){
num += speed
if (num >600)
{
speed = -5
}
if (num <0)
{
speed = 5
}
oBox.style.left = num+'px'
}
}
9.轮播图无缝滚动实现
循环的滚动
复制一份整体的备份
在一边走到头的时候，快要留白，立马切换到重开始，就是left=0
注意的是要定时器的命名，定时器要记得清除