版权声明：浅弋、璃鱼的原创 https://blog.csdn.net/qq_35709559/article/details/82885675
一、循环:
1.语句:
1.1 for循环: for循环一般用于遍历数组(明确次数)
for(初始条件;判断条件;参数改变) {
循环体;
}
1.2 for-in循环:用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作)–了解
for(变量 in 对象){
循环体;
}
1.3 while循环:
如果想要指定次数,应设置参数的改变:i++
while(判断条件) {
循环体;
}
1.4 do-while循环:
do{
循环体;
}while(判断条件);
1.5 代码实现:
<script>
// 1. for-in循环:
var arr = ["张三", "李斯", "王五", "赵六"]
for(x in arr){
console.log("for-in循环: " + arr[x])
}
// 2.for循环:
for(var i = 0; i<5; i++){
console.log("for循环: " + i)
}
// 3.while循环
var i = 1;
while (i < 3){
console.log("while循环: " + i)
i++;
}
// 4.do-while循环:
var i = 1
do{
console.log("do-while循环:" + i)
i++;
}while(i < 3);
</script>
运行结果:
二、数组及操作方法:
数组就是一组数据的集合, js中数组里边的数据可以是不同类型的.
1.定义数组的方法:
- js中所有对象(除了函数)都是object类型;(所以说js是基于对象的语言,即基于object语言).
- js中的数组可以存放不同数据类型的数据,但是一般是存放同一数据类型的数据.
- js中所有对象(除了函数)，都是object类型
var arr1 = []; // 空数组
var arr2 = ["鸣人","佐助", "小樱"]; // 字符串数组
var arr3 = new Array("a", "b", "c");
var arr4 = new Array()
2.数组的长度(重要的属性):
数组名.length // length是数组的一个属性
通过下标获取值和修改值
3. 数组的遍历:
var arr5 = ["aaa", "bbb", "ccc"];
for(var i = 0; i < arr5.length, i++) {
console.log(arr5[i])
}
4.代码实现:
<script>
// 1.数组的定义
var arr = ["鸣人", "佐助", "小樱"];
console.log(arr, typeof(arr))
// 2. 数组的长度
var len = arr.length
console.log("数组的长度是:" + len)
// 3.索引值
// 获取数据
console.log(arr[0])
console.log(arr[2])
console.log(arr[3]); //索引越界
// 设置值
arr[2] = "卡卡西"
console.log(arr[2])
// 4.遍历数组
for(var i = 0; i < arr.length; i++){
console.log(arr[i])
}
</script>
运行结果:
三、数组的API:(增删改查/反转排序/合成字符串)
1.增删改查:
var arr2 = ["鸣人","佐助", "小樱"]; //定义一各目标数组
1.1 增:
Array.push(): 在数组的末尾添加数据
arr2.push("卡卡西");
1.2 删:
Array.pop(): 删除末尾的数据, 有返回值.返回被删除的元素
var ele = arr2.pop()
1.3 改: 任意位置的添加/删除/替换…(重要):
Array.aplice(start, step, *args):
参数一: start:从哪个索引值开始操作
参数二: step:要删除那几个(0:不删除元素)
参数三: *args: 新替换的元素
指定添加:
arr2.splice(1, 0, "卡卡西"); // 在"鸣人"和"佐助"中间添加"卡卡西"
指定删除:
arr2.splice(1,1); // 删除"佐助"
指定替换:
arr2.aplice(1, 1, 123,234,345,456); // 将"佐助"替换成 123, 234, 345, 456,
1.4 查:
Array.indexOf(ele); 返回数组中元素第一次出现的索引值,没有的话返回-1
1.5 反转:
Array.revers(): // 反转数组
var newArr = arr2.reserver()
1.6 排序: 排序的底层是冒泡排序
Array.sort(); //排序函数
sort方法衣服那个要传入匿名函数,指定排序格式:
newArr.sort(function(a, b) {
return a-b; //升序排序
return b-a; //降序排序
})
1.7 合并成字符串:
Array.join(“分隔符,默认使用’,'连接”)
1.8 代码演示:
script>
// 定义一个测试数组
var arr = ["鸣人", "佐助", "小樱"]
console.log(arr)
console.log("数组的初始数据为: " + arr)
console.log("")
// 1.增:arr.push
arr.push("卡卡西");
console.log("增加数据后的数组: " + arr)
console.log(arr)
console.log("")
// 2.删除: arr.pop() 有返回值
var ele = arr.pop()
console.log("删除末尾元素后的数组: " + arr)
console.log("被删除的元素为: " + ele)
console.log(arr)
console.log("")
// 3.改: splice()
// 指定位置添加
arr.splice(1, 0, "佐井")
console.log("在数组1索引处添加元素后: " + arr)
console.log(arr)
console.log("")
// 指定位置删除
arr.splice(1, 1)
console.log("将新添加的元素删除:" + arr)
console.log(arr)
console.log("")
// 指定位置替换
arr.splice(1, 1, "佐井", "鹿丸", "雏田", "小李")
console.log("将数组索引1开始之后的1个元素替换: " + arr)
console.log(arr)
console.log("")
// 4.查: indexOf(元素)
var index1 = arr.indexOf("雏田")
console.log("'雏田'在数组的中的索引:" + index1)
var index2 = arr.indexOf("卡卡西")
console.log("'卡卡西'在数组中的索引:" + index2)
console.log("")
// 5.反转: reverse()
arr.reverse()
console.log("反转后的数组为: " + arr)
console.log("")
// 6.排序: sort
var newArr = [3, 7, 6, 4, 5, 11, 2]
console.log("未排序的数组: " + newArr)
newArr.sort(function(a, b){
return a - b; // 升幂排序
})
console.log("数组升序排序: " + newArr)
newArr.sort(function(a, b){
return b - a; // 降幂排序
})
console.log("数组降序排序: " + newArr)
console.log("")
// 7. 数组元素拼接成字符串: join()
var str = arr.join() // 不传递参数，用逗号链接
console.log("默认拼接: " + str)
var str = arr.join(' ') // 传递参数空格，真的用空格链接
console.log("使用空格拼接: " + str)
var str = arr.join('-') // 传递参数空字符串，无缝链接
console.log("使用'-'拼接: " + str)
var str = arr.join('') // 传递参数空字符串，无缝链接
console.log("无缝拼接: " + str)
</script>
运行结果:
2. 拓展:
2.1 拓展1:二维数据:
数字套数组
2.2 拓展2: python中的字典{}, 对应js中的对象
var obj = {"name": "张三", "age": 18, "address": "三里屯"}
2.3 拓展3: 以后用的最多的还是数组中套对象
var newArr = [
{"name": "张三", "age": 18, "address": "三里屯"},
{"name": "李四", "age": 45, "address": "三里屯"},
{"name": "王五", "age": 25, "address": "三里屯"}
]
2.4 拓展4:数组中套对象,根据对象的键值排序:
var newArr = [
{"name": "张三", "age": 18, "address": "三里屯"},
{"name": "李四", "age": 45, "address": "三里屯"},
{"name": "王五", "age": 25, "address": "三里屯"}
]
newArr.sort(function(a, b) {
return a.age - b.age; //根据年龄升序排序
return b.age - a.zge; //根据年龄降序排序
})
5. 数组去重:
5代码演示:
<script>
// 数组去重
// 1.定义一个有重复数据的老数组和一个空的新数组
var oldArr = ['刘备','刘备','关羽','关羽','张飞','张飞']
var newArr = []
// 2.遍历老数组
for(var i = 0; i < oldArr.length; i++){
//3.判断新数组中是否存在
if(newArr.indexOf(oldArr[i]) == -1){
// 添加到新数组中
newArr.push(oldArr[i])
}
}
console.log('打印新数组:' + newArr)
</script>
6.数组中的数据放入页面(炒鸡重要):
代码演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05_数组元素添加到页面中</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none
}
h1 {
width: 500px;
margin: 50px auto;
}
ul {
width: 500px;
margin: 0 auto;
}
ul li {
font: 22px/50px 'simsun';
border-bottom: 1px dashed #ccc;
}
</style>
<script>
window.onload = function(){
// 1.定义一个数组
var arr = ['葫芦娃','功夫熊猫','风语咒','冰雪奇缘','海底两万里']
// 2.为ul的innerHTML属性赋值
var ul = document.getElementById('box')
var str = ""
// 重点:遍历数组,把数组中的元素拼接到ul-li并累加到str中
for(var i = 0;i < arr.length; i++){
str += '<li>' + arr[i] + '</li>'
}
// 3. 赋值
ul.innerHTML = str
}
</script>
</head>
<body>
<h1>动画片推荐</h1>
<ul id="box">
<!-- <li>肖申克的救赎</li>
<li>阿甘正传</li>
<li>战狼2</li>
<li>我不是药神</li>
<li>我是植物人</li> -->
</ul>
</body>
</html>
运行结果:
四、字符串及其操作:
1.字符串概述:
- 字符串是前后带引号的数据;
- 字符串是前后带引号的数据;
- 字符串是前后带引号的数据;
- 可以通过下标的形式获取字符串中的单个字符值;
- 字符串是不可变元素,所以不能修改;
- 字符串的连接"+", 如果连接的多个值(简单数据类型)中有一个是字符串,那么得到的是字符串 ==> 自动类型提升;
2. 字符串转换成数字:
2.1 截取整数,转换成数字:
string.parseInt();
2.2 截取浮点数,转换成小数:
string.parseFloat();
注意:数字在字符串中的位置对截取的影响, 只能截取以数字开头的那部分数字, 当字符串的开头不是数字事, 则不能截取.
字符串API:
因为字符串是不可变类型,所以,没有"增/删/改"
3. 查看:
var index = str.indexOf(“元素”); //如果有返回第一个值的索引,没有或者不完整返回-1
4.切割:
var arr = str.split(“分隔标志”); // 用什么切割这个字符串就不存在了
var arr = str.split(""); // 用空字符串切割,把字符串中的每个元素都分隔
5.截取:索引值包左不包右
str.substring(start, end); // 用的不多,是老方法
str.silce(); // 常用,新方法
6.反转(字符串反转没有API,需要借助数组):
var newStr = str.split(’’).reverse().join(’’)
7.替换:
var newStr = str.replace(“旧字符串”, “新字符串”)
6. 代码演示:
<script>
// 定义一个测试字符串
var str = "abcdefgh"
// 1.查看: indexOf()
console.log(str.indexOf("cde")) // 如果有返回第一个元素的索引值
console.log(str.indexOf('bd')) // 没有或者不完整，返回-1
// 2.切割: split()
var arr = str.split('d') // 用什么切割，这个字符串就不存在了。
console.log(arr)
var arr = str.split('') // 用空字符串切割，把字符串中的每一个元素都单独放入数组中。
console.log(arr)
// 3.截取: substring() slice()
console.log(str.substring(2, 5)) // 索引值：包左不包右
console.log(str.slice(2, 5)) // 索引值：包左不包右
// 4.反转:字符串没有API
var newStr = str.split('').reverse().join('')
console.log(newStr)
// 5.替换: replace();
var newStr = str.replace('d', 'D')
console.log(newStr)
</script>
五、JS程序的调试:
1. API调试:
输出变量和对象的方法：
1、alert
2、console.log
3、document.title
2.debug:
f12 -> sources
六、定时器(重重点):
1.定时器在JS中的作用:
固定时间执行某个程序
- 定时调用函数:
- 制作动画
2. 定时器：
setTimeout: 超时定时器 ==> 只执行一次的定时器
clearTimeout: 关闭只执行一次的定时器
setInterval: 中断定时器 ==> 反复执行的定时器
clearInterval: 关闭反复执行的定时器
3. 效果:
<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>09_定时器</title>
<script>
window.onload = function(){
// 定时器:固定时间执行的某个程序
// 1.获取元素
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
var btn4 = document.getElementById("btn4");
var interValue = document.getElementById("interval");
var timeoutValue = document.getElementById("timeout");
// 2.定时器一般设置为全局变量
var time1 = null; // 定时器默认返回一个数值
var time2 = null;
// 演示1: 中断定时器
var i = 0;
btn1.onclick = function() {
timer1 = setInterval(function() {
interValue.innerHTML = '我是中断定时器...' + i;
i++;
}, 1000)
}
//演示2: 超时定时器
btn2.onclick = function() {
timer2 = setTimeout(function() {
timeoutValue.innerHTML = '超时定时器触发...';
}, 3000)
}
// 3.关闭定时器:
// 关闭中断定时器
btn3.onclick = function() {
// 清除定时器，必须知道定时器的名字(编号)。
clearInterval(timer1)
}
// 关闭超时定时器
btn4.onclick = function() {
clearTimeout(time2)
}
}
</script>
</head>
<body>
<div>
<button id="btn1">setInterval定时器</button>
<span id="interval"></span>
<br><br>
<button id="btn3">清除setInterval定时器</button>
<br><br>
</div>
<div>
<br><br>
<button id="btn2">setTimeout定时器</button>
<span id="timeout"></span>
<br><br>
<button id="btn4">清除setTimeout定时器</button>
</div>
</body>
4. 定时器动画
代码演示:
<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>10_定时器完成动画</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
/* 向让盒子移动，最好给盒子定位。 */
#box1 {
position: absolute;
top: 10px;
left: 0;
width: 100px;
height: 100px;
background: skyblue;
}
#box2 {
position: absolute;
top: 200px;
left: 0;
width: 100px;
height: 100px;
background: yellowgreen;
}
</style>
<script>
window.onload = function() {
// 1. 获取元素
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
// 需求1: box1向左移动
// 定义一个变量用来存放left值
var num1 = 0;
//启动一个定时器
setInterval( function() {
// 向左移动,left为正值
num1 += 5;
box1.style.left = num1 + "px";
},100)
// 需求2: box2在一个范围内做往复运动
// 定义一个变量用来保存left值
var num2 = 0;
// 定义一个变量来保存步长
var step = 10;
//启动一个定时器
setInterval(function() {
// 判断方块该往左运动还是该往右运动
if(num2 <= 0 ){ // left < 0;此时方块需要向左运动
step = 10;
}
if(num2 >= 600 ){ // left < 1000;此时方块需要向右运动
step = -10;
}
// 通过步长, 规定方块的移动方向
num2 += step;
box2.style.left = num2 + "px";
},100)
}
</script>
</head>
<body>
<div id="box1">简单移动</div>
<div id="box2">往返移动</div>
</body>
六、变量的作用域:
1. 全局变量和局部变量
1.1 局部变量: 函数内部的变量
局部变量只能在函数内部使用,作用域是函数体内部
1.2 全局变量:
- 全局变量的作用域是从定义开始,至程序结束,不管函数内还是函数外,修改/获取变量不需要使用关键字.
- 当函数内部有与全局变量同名的局部变量,那么函数使用的是自身的局部变量
七、封闭函数(沙箱):
1.封闭函数的定义:
定义: 封闭函数就是匿名函数的自调用
2. 匿名函数自调用:
2.1 方法一:使用小括号把函数括起来成一个整体,然后再用()执行调用
(function(){
函数体;
})();
2.2 方法二: 使用! 声明之后的function为匿名函数整体,然后使用()调用
!function() {
函数体2;
}();
2.3 方法三: 使用~ 声明之后的function为匿名函数整体,然后使用()调用
~function() {
函数体2;
}();
3. 封闭函数的作用:
作用: 匿名函数自调用形成一个块级作用域.
八、js拓展:
1. 根据标签名/class/id名获取标签
1.1 通过id名获取元素
var ele = document.getElementById("id")
1.2 通过标签名
var eleList = document.getElementByTagName("标签名)
- 获取到该标签的所有元素;
- 返回值是一个数组;
- 没取到值返回一个空数组;
###1.3 通过类名:
var eleArr = document.getElementByClassName(“类名”) - 获取到该类名的所有元素;
- 返回值是一个数组;
- 没取到值返回一个空数组;
- 这是html5后新增的,IE678浏览器不支持
2. 通过标签找兄弟标签/子标签/父标签(访问关系/节点层级) :
2.1 找兄弟标签:
var nextEle = 标签.nextElementSibling; // 查找当前标签的下一个兄弟标签
var preEle = 标签.previousElementSibling; // 查找当前标签的上一个兄弟标签
2.2 找父节点:
var prientEle = 标签.parentNode
2.3 找子标签:
var firstEle = 标签.parentNode.firstElementChild
var lastEle = 标签.parentNode.lastElementChild
var childsArr = 标签
3. 节点操作(创建/添加/删除/复制/替换)
3.1 创建:
var newEle = document.createElement("新标签名")
3.2 添加:
父标签.appendChild(标签)
3.3 删除:
父标签.removeChild(标签)
4.DOM - (很重要!!)
4.1 DOM简介:
DOM: (Document Object Model):把整个页面上的所有标签加载到内存中以树状数据结构存储;
js方法获取的标签也被称为:节点、 js对象、 DOM对象、标签.
拓展书籍:
<JavaScript权威指南>、<JavaScript高级编程>