1.循环 开发语言

1.1 for循环的使用

• for循环操作标签

/* 数组：存放数据的容器，长度不限，类型不限，使用逗号隔开 []

length长度属性

通过下标取值: arr[下标]

*/

vararr= [100, true, 'abcd', null];

console.log(arr);

// length长度属性

console.log(arr.length); // 长度 4

​

// 通过下标取值: arr[下标]

console.log(arr[2]);

​

vararr= [

'加快建设农业强国，从“一号文件”开始！',

'共同开启中柬命运共同体建设新时代',

'2022年我国可再生能源发展取得了哪些新成绩？',

'土叙地震直击｜探访中国救援队营地',

]

​

// 通过js动态生成标签放到ul内容中

// 1.获取标签

varoUl=document.getElementsByTagName('ul')[0];

​

// 2.根据数据的长度生成对应个数的li

for(vari=0; i<arr.length; i++){

console.log(arr[i]); // 每一个数据

oUl.innerHTML+='<li>'+arr[i] +'</li>'; // 由于innerHTML具有覆盖的特性，使用累加

}

1.2 while和do-while

while:满足某个条件，执行某件事情

初始化循环变量

while(循环条件){

// 循环体

// 更新循环变量

}

do-while：先执行一次循环体，之后再判断循环条件

初始化循环变量

do{

// 循环体

// 更新循环变量

}while(循环条件)

vari=1; // 初始化循环变量

for(; i<=5; ){

// 循环体

console.log(i, 'for');

// 更新循环变量

i++;

}

​

// 初始化循环变量

varj=10;

while(j<=5){

// 循环体

console.log(j, 'while');

// 更新循环变量

j++;

}

​

// 初始化循环变量

vark=10;

do{

// 循环体

console.log(k, 'do-while');

// 更新循环变量

k++;

}while(k<=5);

• 区别：

• while满足某个条件，重复执行某件事情

• do-while先执行一次循环体，在判断是否满足循环条件，至少执行一次循环体

• 使用场景

• 开始条件和结束条件比较明确时，使用for更方便

• 循环条件比较明确时，使用while，满足某个条件，重复执行某件事情

1.3 break和continue

在循环中使用，用来中止循环

循环中遇到break，循环直接结束

continue跳过本轮循环，后续循环继续执行

for(vari=1; i<=10; i++){

if(i==5){

// continue; // 跳过本轮循环，后续循环继续执行

break; // 结束循环

}

console.log('在操场上第'+i+'圈');

}

1. 4.for循环的嵌套

for循环的嵌套/双重for循环：在for循环中嵌套一个for循环

for(初始化外循环变量；外循环条件；更新外循环变量){

for(初始化内循环变量；内循环条件；更新内循环变量){ .. }

}

1.5 for-in循环

字面量对象： 无序的数据集合，没有长度，一对一对的存储，键值对，key-value对 {}

varobj= {

name: '小明',

age: 20,

msg: '在学习',

height: 180

}

console.log(obj); // {name: '小明', age: 20, msg: '在学习'}

console.log(obj.length); // undefined 没有长度

​

// 取值：

console.log(obj.name); // 小明

console.log(obj.height); // 180

​

varh='height';

console.log(obj.h); // undefined

// .后边跟的是变量，使用[]代替

console.log(obj[h]); // 180

​

// 修改

obj.height=185; // 赋值可以进行修改

​

// 添加

obj.classId='web0813';

console.log(obj);

​

// 不能使用for循环遍历对象，没有长度

for(varkeyinobj){

console.log(key); // name age... 键名

console.log(obj[key]); // .后边跟的是变量，使用[]代替

}

2.this

---

this字面意思是当前，==当前执行代码的环境对象或者是上下文==。代表着当前函数执行的环境上下文，那么何为环境上下文，通俗的说，谁调用了函数，谁就是这个函数的环境上下文，this就指向谁。

2.1 this的指向

this一般在函数中使用，没有一个固定的值，在不同的地方所代表的含义不同，==取决于被调用时所处的上下文环境==，即this表示当前调用函数的对象，就是谁调用了这个函数，this就指向谁。

• 1.全局环境 -> window

• 2.对象的方法中 ->当前对象

• 3.在事件处理函数中 -> 触发事件的对象(点谁就是谁)

// 1.全局--> Window

console.log(this); // Window

​

// 2.在对象的方法中-->指向当前对象

varobj= {

name: 'Tom',

age: 18,

eat: function(){

console.log(this);

}

}

obj.eat(); // {name: 'Tom', age: 18, eat: ƒ} 指向当前对象

​

// 3.在事件处理函数中-->指向触发事件的对象(点谁就指向谁)

varoBtn=document.getElementsByTagName('button')[0];

oBtn.οnclick=function(){

console.log(this);

}

3.自定义属性

---

• 固有属性：html固定给的属性

• 自定义属性：自己添加的属性

• 写在开始标签上: 能看到，但是不能使用

• 通过js添加：看不到，可以使用

varoDiv=document.getElementById('con');

// 1.写在开始标签上

// 1.1 获取自定义属性： 标签.属性名

console.log(oDiv.index); // undefined 能看到但是不能使用

​

// 2.通过js添加：标签.属性名 = 值

oDiv.tag='abcd';

console.log(oDiv.tag); // abcd 可以获取使用

/*

解决：每一组都有属于自己的标识

方案：每一个元素添加自定义属性，相互独立

​

多组状态切换必须使用自定义属性完成

*/

// 1.获取标签

varoDiv=document.getElementsByTagName('div');

​

// 4.添加自定义属性：标签.属性名 = 值

/* for(var i = 0; i<oDiv.length; i++){

oDiv[i].tag = true; // 标识状态 true-40px false-100px

} */

​

// 2.循环添加点击事件

for(vari=0; i<oDiv.length; i++){

// 4.添加自定义属性：标签.属性名 = 值

oDiv[i].tag=true; // 标识状态 true-40px false-100px

​

oDiv[i].οnclick=function(){

// 3.根据标识设置被点击标签的高度

console.log(this);

console.log(this.tag); // 获取被点击标签的标识

if(this.tag){

// 当前为40，设置为100px

this.style.height='100px';

​

// 5.状态改变，标识保持同步

this.tag=false;

}else{

// 当前为100，设置为40px

this.style.height='40px';

​

// 5.状态改变，标识保持同步

this.tag=true;

}

}

}