JavaScript流程控制与数据操作
本文详细介绍了JavaScript中的流程控制语句，包括顺序结构、选择结构（分支结构：if-else, switch）、循环结构（for, while, do-while）。重点讲解了for循环的双重使用，用于遍历数组和生成标签。同时，解释了while和do-while循环的差异，以及break和continue在循环中的作用。此外，还讨论了JSON数据的操作，如属性访问和for-in循环的使用。最后，提到了this关键字在事件处理函数中的应用场景以及自定义属性的设置。
流程控制语句
-
顺序结构
-
选择结构(分支结构)：if if-else if-else if -else switch
-
循环结构(for while do-while for-in)
2.1for循环
for(初始化循环变量;循环判断条件;更新循环变量){
重复执行的代码(循环体)
}
2.2双重for循环
-
基础用法
<script>
// 双重for循环
for (var i = 0; i < 5; i++) {//i = 0 1 2 3 4
for (var j = 0; j < 3; j++) {
console.log("文字");
}
}
/*
i=0
j=0 1 2
i=1
j=0 1 2
i=2
j=0 1 2
i=3
j=0 1 2
i=4
j=0 1 2
i=5
*/
//双重for循环数组
var arr = [
["哈哈", "呵呵", "嘻嘻", null],//4
["1", "2", "3"],//3
["周一", "周二", "周三"],//3
[true, false]//3
];
// console.log(arr[0][0]);//"哈哈"
// console.log(arr[0][1]);//"呵呵"
// console.log(arr[0][2]);//"嘻嘻"
// console.log(arr[1][0]);//"1"
// console.log(arr[1][1])//"2"
// console.log(arr[1][2])//"3"
// console.log(arr[2][0])//"周一"
// console.log(arr[2][1])//"周二"
// console.log(arr[2][2])//"周三"
for (var i = 0; i < 3; i++) {//外层循环 i = 0 1 2
for (var j = 0; j < 3; j++) {
// console.log(i, j);
console.log(arr[i][j]);
}
}
//循环次数根据length确定
for (var i = 0; i < arr.length; i++) {//外层循环 i = 0 1 2
for (var j = 0; j < arr[i].length; j++) {
// console.log(i, j);
console.log(arr[i][j]);
}
}
</script>
-
双重for循环生成标签
<script>
// 模拟后台的数据结构
var arr = [
["唐朝诡事录", "诛仙", "庆余年", "雪中悍刀行", "仙剑奇侠传3", "行尸走肉"],
["流浪地球", "绿皮书", "肖申克的救赎", "寄生虫", "釜山行", "谋杀1"],
["火影忍者", "蜡笔小新", "东京喰种", "名侦探柯南"],
["火影忍者", "蜡笔小新", "东京喰种", "名侦探柯南1"],
]
// arr[0] 给第一个ul arr[1] 给第二个ul arr[2] 给第三个ul
var oUl = document.getElementsByTagName("ul");
// for (var i = 0; i < arr[0].length; i++) {
// oUl[0].innerHTML += "<li>" + arr[0][i] + "</li>";
// }
// for (var i = 0; i < arr[1].length; i++) {
// oUl[1].innerHTML += "<li>" + arr[1][i] + "</li>";
// }
// for (var i = 0; i < arr[2].length; i++) {
// oUl[2].innerHTML += "<li>" + arr[2][i] + "</li>";
// }
// 双重for循环
for (var j = 0; j < arr.length; j++) {//j = 0 1 2
for (var i = 0; i < arr[j].length; i++) {
oUl[j].innerHTML += "<li>" + arr[j][i] + "</li>";
}
}
/*
j = 0
i= 0 i<arr[0].length i++
oul[0].inerHTML = "<li>"+arr[0][i]+"</li>"
j = 1
i=0 i<arr[1].length i++
oul[1].inerHTML = "<li>"+arr[1][i]+"</li>"
*/
</script>
2.3while循环
-
基础语法
1.初始化循环变量
while(循环结束条件){
重复执行的代码(循环体)
更新循环条件
}
-
基础使用
<script>
for (var i = 1; i <= 10; i++) {
console.log(i);
}
//输出1-10之间的数
var i = 1;
while (i <= 10) {
console.log("while", i);
i++;
}
</script>
2.4do-while循环
-
基础语法
1.初始化循环变量;
do{
循环体;
更新循环变量;
}while(循环判断条件)
-
使用
<script>
//1-10之间的数
var i = 1;
do {
console.log(i);
i++
} while (i <= 10)
</script>
-
==while和do-while的区别==
while：先判断后执行，如果初始条件为false 循环体一次也不执行 do-while:先执行后判断，如果初始条件为false 循环体至少会执行一次
2.5break和continue
-
break 结束整个循环
-
continue 结束本次循环
<script>
for (var i = 1; i <= 10; i++) {
// 吃到第5个水饺的时候 碗里面进了一个苍蝇
if (i == 5) {
console.log("掉进去一个苍蝇");
break;//结束后面整个循环
}
console.log("这是第" + i + "个水饺")
}
for (var i = 1; i <= 10; i++) {
if (i == 5) {
console.log("这个水饺掉了");
continue;//结束本次循环
}
console.log("这是第" + i + "个水饺");
}
</script>
3.json数据和for-in
3.1json数据
-
JSON数据/object类型数据/对象类型：一组无序的，没有长度的数据
属性值/value/键值：可以是任意数据类型
{
"属性名":属性值,
"属性名"：属性值,
属性名:属性值,
key:value,
键名：键值
}
建议：属性名带"" 值和值之间用逗号隔开
-
获取属性值：obj.属性名
script>
/* JSON数据/object类型数据/对象类型：一组无序的，没有长度的数据 */
var obj = {
"name": "小候老师",
"age": 18,
isOn: true,
skill: ["前端", "讲课", "做饭"],
a: undefined,
b: null,
c: {},
d: function () { }//函数在对象中不叫函数，叫方法
}
console.log(obj);//
console.log(obj.length);//undefined 没有长度
//获取对象中的属性值 对象名.属性名
console.log(obj.name);//"小候老师"
console.log(obj.skill);//["前端", "讲课", "做饭"]
console.log(obj.b);//null
</script>
-
==注意1：obj后面跟的就是属性名，没有变量的概念 如果跟的是变量 用[]代替 对象名[变量名]==
-
==注意2：注意2：style中碰见变量，也是[]代替==
//注意1：obj后面跟的就是属性名，没有变量的概念 如果跟的是变量 用[]代替 对象名[变量名]
var a1 = "name";
console.log(obj[a1]);//小候老师
//注意2：style中碰见变量 也是[]代替
var oDiv = document.getElementsByTagName("div")[0];
//获取样式 标签.style.样式名
console.log(oDiv.style.width);//100px
var a2 = "width";
console.log(oDiv.style[a2]);
-
设置对象中的属性
var obj1 = {
age: 20,
};
//2.直接设置属性名 对象名.属性名 = 值;
obj1.name = "王昭君";
obj1.age = 30;
console.log(obj1);
3.2for-in
-
基础语法
对象：是一组无序的 没有长度的数据
for-in:遍历对象
for(var 变量名 in 循环对象){
循环体
}
<script>
var obj = {
"name": "小候老师",
"age": 18,
"isOn": true,
}
//for-in 遍历对象 根据对象中的值自动循环
for (var key in obj) {//key=name age isOn
console.log(key);
// 对象.属性名
console.log(obj[key]);
}
</script>
4.this
4.1为什么使用this
<script>
// 点击谁 就将谁的文本内容输出
// 批量添加点击事件
var oLi = document.getElementsByTagName("li");
console.log(oLi.length);//集合标签的长度
for (var i = 0; i < oLi.length; i++) {// i = 0 1 2 3....9
oLi[i].onclick = function () {
console.log(i);//10
//输出文本内容
// console.log(oLi[i].innerHTML);
}
}
//i = 10
/*
i为什么嘛输出10
因为for循环只是添加事件，并不会执行事件中的代码
*/
</script>
4.2this的概念
-
this:这个
-
概念：在不同的地方 代表的值不同 取决于当前函数被调用时所处的环境
-
事件处理函数：标签.事件类型= function(){ }
-
在事件处理函数中使用this this指向当前触发事件的对象
<body>
<button>按钮1</button>
<button>按钮2</button>
<script>
var btn = document.getElementsByTagName("button");
// 在事件处理函数中 this指向当前触发事件的对象 点谁指向谁
btn[0].onclick = function () {
console.log(this);
}
btn[1].onclick = function () {
console.log(this);
}
</script>
5.自定义属性
-
属性分类
-
固有属性 本身自带的属性 class id style src alt等等
-
操作固有属性：标签.属性值名
-
-
自定义属性
<div class="box" id="wrap" a="这是一个自定义属性" b="123"></div> <script> var oDiv = document.getElementsByTagName("div")[0]; // 1.操作固有属性 取赋值一体化 标签.属性名 class需要改成className console.log(oDiv.className);//"box" console.log(oDiv.id);//"wrap" oDiv.className = "box1"; //2.如何设置自定义属性 //2.1 直接在标签上添加属性,在结构上能看到 但是在js中无法获取 console.log(oDiv.a);//undefined console.log(oDiv.b);//undefined // 2.2通过js设置 在结构上看不到 但是可以在js中使用 标签.属性名 = 值 oDiv.c = "456"; console.log(oDiv.c);//456 </script> -
5.1单组开关灯效果
-
单组开关等实现步骤
-
现象：一个事件中有2种状态，此时就可以使用开关灯效果
-
<body>
<img src="./img/dark.jpg" alt="">
<script>
var oImg = document.getElementsByTagName("img")[0];
//如果没有判断条件 就自己创造判断条件
var tag = true;//true 显示开灯bright.jpg false显示关灯dark.jpg
oImg.onclick = function () {
// 为什么不能用src来做判断
console.log(oImg.src);//不要用src做判断
if (tag == true) {
oImg.src = "./img/bright.jpg";
// 一定要更改tag的值 方便下次做判断
tag = false;
} else {
oImg.src = "./img/dark.jpg";
tag = true;
}
}
</script>
</body>
5.2多组开关灯效果
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<script>
/*
问题1：在点击事件中，可以拿到oDiv[i]吗
解决： i的值始终都是4 所以用this代替oDiv[i]
*/
/*
问题2：在交叉点击div的时候 出现bug
解决：所有的div共用了一个判断条件tag，给每个div都单独设置一个判断条件
*/
// 循环添加点击事件
var oDiv = document.getElementsByTagName("div");
//给每个div都添加一个判断条件 添加自定义属性tag=true
// oDiv[0].tag = true;
// oDiv[1].tag = true;
// oDiv[2].tag = true;
// oDiv[3].tag = true;
// for (var i = 0; i < oDiv.length; i++) {
// oDiv[i].tag = true;
// }
for (var i = 0; i < oDiv.length; i++) {
oDiv[i].tag = true;
oDiv[i].onclick = function () {
// console.log(i);//4 拿到的是i最后一次的值
// console.log(oDiv[i]);//undefined
if (this.tag) {
this.style.height = "100px";
this.tag = false;
} else {
this.style.height = "20px";
this.tag = true;
}
}
}
</script>
扫一扫
1394
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
