1 for循环
什么时候需要使用for循环 多次重复执行 多次有规律的执行 for循环的作用 可以让特定的代码执行指定的次数
-
for循环的语法
for(表达式1;表达式2;表达式3){ 循环体(重复执行的代码) } for(初始化循环变量;循环条件;更新循环变量值){循环体(重复执行的代码)} for(var n=0;n<5;n++){ console.log("今天吃饭了") } 执行过程 1.初始化循环变量 var n = 0 2.判断循环条件 n<5 条件成立 执行循环体 条件不成立 结束循环 3.更新循环变量 n++ 4.回到步骤2
-
基础用法
<script> /* for(表达式1;表达式2;表达式3){ 循环体 } for(初始化循环变量;循环条件;更新循环变量值){ 循环体} */ for (var n = 1; n < 10; n++) { // n = 1 2 3 4 5 6 7 8 9 10 console.log("你今天吃饭了吗") } console.log(n);//10 </script>
-
循环数组
//循环数组 //array 数组类型 ["123",2,true,undefined,null] 数组可以存储多个数组 可以存储任意类型的数据 var arr = ["你好吗", 123, true, undefined, null]; console.log(arr); //获取数组中的某一项 语法 数组名[下标] // console.log(arr[0]) // console.log(arr[1]) // console.log(arr[2]) // console.log(arr[3]) // console.log(arr[4]) // for (var i = 0; i < 5; i++) { // i = 0 1 2 3 4 5 // console.log(i);// 0 1 2 3 4 console.log(arr[i]);// "你好吗" 123 true undefined null }
-
循环生成标签
body> <button>生成</button> <ul> </ul> <script> var arr = ["赵四成精", "刘能变形", "中国老年人才网正式上线", "拍婚纱照 新郎被劈死"] // 需求 点击生成按钮 生成四个新闻 // 1.获取元素 var btn = document.getElementsByTagName("button")[0]; var list = document.getElementsByTagName("ul")[0]; // 2.添加点击事件 btn.onclick = function () { for (var i = 0; i < 4; i++) { // i = 0 // 将原先的内容获取到 + 新内容 // arr[0] arr[1] arr[2] arr[3] list.innerHTML += "<li>" + arr[i] + "</li>" /* i=0 "<li>赵四成精</li>" i = 1 "<li>赵四成精</li>" + "<li>刘能变形</li>" i = 2 */ } } </script> </body>
-
循环添加点击事件
<body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <button>按钮5</button> <script> //点击哪个按钮 将哪个按钮的文本内容输出 var btn = document.getElementsByTagName("button"); // btn[0].onclick = function(){ // console.log(btn[0].innerText) // } // btn[1].onclick = function(){ // console.log(btn[1].innerText) // } // btn[2].onclick = function(){ // console.log(btn[2].innerText) // } // btn[3].onclick = function(){ // console.log(btn[3].innerText) // } // btn[4].onclick = function(){ // console.log(btn[4].innerText) // } for(var i = 0;i<5;i++){ // i = 0 1 2 3 4 5 btn[i].onclick = function(){ // console.log(btn[i].innerText);// 出现报错信息 因为此时i的值是5 // console.log(i);//5 } } </script> </body>
3.2 while与do-while
3.2.1 while语句
/* while语句 1.初始化循环变量 while(条件){ 循环体(重复执行的代码); 更新循环变量 } */ var a = 0; while(a < 3){ console.log("你好"); a++; }
3.2.2 do-while的语法
/* do-while语句 1.初始化循环变量 do{ 循环体; 更新循环变量 }while(条件) */ var b = 0 do{ console.log("摆烂"); b++; }while(b<3);
3.3.3 while和do-while的区别
-
while:==先判断后执行 最开始不成立 一次也不执行==
-
do-while :==先执行后判断 最开始不成立 也会执行一次==
// while和do-while有什么区别 var x = 0; while(x > 0){ //先判断后执行 最开始不成立 一次也不执行 console.log("马上下课了"); x++; } var x = 0; do{// 先执行后判断 最开始不成立 也会执行一次 console.log("还没有下课呢"); x++; }while(x<0)
.3 break与continue
-
continue 结束本次循环
-
break 结束整个循环
<script> // continue 结束本次循环 for(var i = 1;i<=10;i++){ if(i==5){ console.log("第五个水饺掉了"); continue; } console.log(i);// } //break 结束整个循环 for(var i = 1;i<=10;i++){ if(i==5){ console.log("吃到第五个汤圆的时候 碗里面进了一个苍蝇"); break; } console.log(i); } </script>
2.4 双重for循环
如果循环体又是一个循环 只有把内侧循环走完,才会继续执行外侧循环 <script> for (var i = 1; i < 5; i++) {// i = 1 2 3 4 console.log(123) for (var j = 1; j < 5; j++) { console.log("i=" + i, "j=" + j) } } /* 外侧循环 i = 1 for(var j = 1;j<5;j++){ console.log("i="+i,"j="+j) } j = 1 输出 i=1 j=1 j = 2 输出 i=1 j =2 j = 3 输出 i=1 j=3 j = 4 输出 i=1 j=4 j = 5 i = 2 for(var j = 1;j<5;j++){ console.log("i="+i,"j="+j) } j = 1 输出 i=2 j=1 j = 2 输出 i=2 j =2 j = 3 输出 i=2 j=3 j = 4 输出 i=2 j=4 j = 5 i=3 i=4 */ </script>
-
二维数组
<script> var arr = [1,"123",true,false,undefined,null];//一维数组 var arr1 = [ //二维数组 ["你好吗","我不好","我特别好"], ["嘿嘿","哈哈","嘻嘻","呵呵"], ["妲己","王昭君","安琪拉"] ] // 获取数组 console.log(arr1[0]);//['你好吗', '我不好', '我特别好'] console.log(arr1[1]);// ["嘿嘿","哈哈","嘻嘻","呵呵"] console.log(arr1[2]);// ["妲己","王昭君","安琪拉"] // 获取二维数组的值 console.log(arr1[0][0]);//"你好吗" console.log(arr1[1][3]);//"呵呵" </script>
-
双重for循环生成标签
<script> var arr1 = [ ["你好吗", "我不好", "我特别好"], ["嘿嘿", "哈哈", "嘻嘻", "呵呵"], ["妲己", "王昭君", "安琪拉"] ] //数组名.length // 1.利用双重for循环数组 for (var i = 0; i < 3; i++) {// i = 0 1 2 arr1[0] arr1[1] arr1[2] for (var j = 0; j < arr1[i].length; j++) { console.log(arr1[i][j]); } } /* i = 0 for(var j = 0;j<3;j++){ console.log(arr1[i][j]);/ } // j = 0 arr1[0][0] 你好吗 // j = 1 arr1[0][1] 我不好 // j = 2 arr1[0][2] 我特别好 // j = 3 i = 1 for(var j = 0;j<4;j++){ console.log(arr1[i][j]); } // j = 0 arr1[1][0] 嘿嘿 // j = 1 arr1[1][1] 哈哈 // j = 2 arr1[1][2] 嘻嘻 // j = 3 arr1[1][3] 呵呵 // j = 4 i = 2 */ //2利用双重for循环数组 var list = document.getElementsByClassName("list")[0]; for (var i = 0; i < arr1.length; i++) { for (var j = 0; j < arr1[i].length; j++) { list.innerHTML += "<li>" + arr1[i][j] + "</li>" } } </script>
2.5 JSON数据/object数据类型
-
object数据类型就是JSON数据,也叫对象
-
对象/object/JSON数据:一组无序的 没有长度的数据 也是可以存储多个 可以存储任意数据类型
{ 属性名/key/键:属性值/value/值 } 注意:属性名 可加可不加引号 注意:数据和数据之间用逗号隔开 { "name":"小候老师", "age":20, "sex":"男", "isOn":true }
-
基础用法
var obj = { "name": "小候老师", age: 20, "sex": "男", isOn: true, a: null, b: undefined, c: [1, 2, 3, 4], d: { "skill": "第一阶段" }, f: function () { } //函数 函数在对象里面 我们一般叫方法 } console.log(obj); console.log(obj.length);//undefined 对象没有长度 // 2.获取object中的属性值 obj.属性名 console.log(obj.name);//小候老师 console.log(obj.c);// [1,2,3,4] // 3.如果属性名是一个变量 obj[变量名] var s = "sex"; console.log(obj[s]); // 4.如果样式名是一个变量 标签.style[变量名] var odiv = document.getElementsByTagName("div")[0]; // 获取样式 标签.style.样式名 console.log(odiv.style.width) var w = "width"; console.log(odiv.style[w]) // 6.设置属性 obj.属性名 = 值 obj.name = "候世杰"; console.log(obj) //7.如果给一个不存在的属性添加值 是直接追加到对象中 obj.hobby = "敲代码"; console.log(obj)
2.6 for-in
<script> // for-in 遍历对象 var obj = { "name": "小候老师", age: 20, "sex": "男", isOn: true, a: null, b: undefined, c: [1, 2, 3, 4], d: { "skill": "第一阶段" }, f: function () { } //函数 函数在对象里面 我们一般叫方法 } // for(var 变量名 in 对象){ 循环体} // 注意 对象有几个数据就遍历几次 遍历完自动结束循环 for (var i in obj) { // i 里面存储的是属性名 i = "name" i="age" i="sex" // 如果属性名是一个变量 obj[变量名] console.log(obj[i]) } </script>