html5 函数遍历,JS中循环与函数以及常用DOM操作实例演示

一、循环

循环是只要满足条件就将不断执行重复的语句，循环可以减少代码的冗余性。

1.while()循环

while() 循环入口判断型：先判断条件再执行。

constarr=[1,2,3,4,5];

console.log("数组长度:"+arr.length);//arr.length 返回数组的长度

let i=0;//循环变量初始化

let sum=0;//求和

while(i

console.log(arr[i]);

sum=sum+arr[i];

i++;//等价于 i= i+1 i+=1 循环变量更新

}

console.log("和为:"+sum);

2.do-while循环

do-while循环 出口判断下:先执行一次再进行条件的判断，至少执行一次。

i=0;

do{

console.log(arr[i]);

i++;

}while(i

3.for循环

for循环：for(循环变量的初始化；循环条件；循环变量更新)

for循环中可以使用关键字break与continue，可以与if else混合使用。

for(let i=0;i

// if (i >= 3) break; //break关键词 达成条件终止循环

// console.log(arr[i]); //只输出前3个数

if(arr[i]%2===1)continue;//continue关键词 跳出本次循环继续执行下一次循环 %是取模/取余运算

console.log(arr[i]);//输出数组里的偶数 2 4

}

4.for-in循环

for-in循环可以以任意顺序遍历一个对象的除Symbol以外的可枚举属性。

for(键名/属性 in 对象)

constres={

name:"xue",

age:18,

sex:"man",

};//创建res对象

for(let key in res){

console.log(key,":",res[key]);

}

5.forEach()

forEach可以用来遍历数组,不能遍历对象

arr.forEach(function(值，索引，数组本身)｛｝)

arr.forEach(function(ele,key,arr){

console.log(ele,key,arr);//ele为当前数组项的值 key是数组的索引

});//arr为整个数组，也可以使用arr[key]取值，只有第一个参数是必选的

6.for-of()

for-of是es6的新增的，可以用来代替for-in和forEach()

for-of不能遍历自定义对象。

for-of可以略过数组里的键，直接取出数组里的值，运用比较多。

for(let value of arr){

console.log(value);//value指代数组里的某一成员

}

7.总结(资料)

for … in循环由于历史遗留问题，它遍历的实际上是对象的属性名称。一个Array数组实际上也是一个对象，它的每个元素的索引被视为一个属性。

for … in循环将把name包括在内，但Array的length属性却不包括在内。

for … of循环则完全修复了这些问题，它只循环集合本身的元素。

二、函数

1.函数的声明与调用

声明function fn1(){console.log(fn1.name)}

调用fn1()；

2.函数的参数与传参

传参fn1("xxx")；

默认参数function fn1(x=1){console.log(fn1.name)} 不传参时参数即为设置的默认值。es6之前不支持默认参数

剩余参数，也叫rest参数。...arr将传入的参数组成一个数组。

functionadd(...arr){

x=0;

console.log(arr);//rest参数组成一个数组

for(v of arr){

console.log(v);//for of方法遍历数组

x=x+v;

}

console.log(x);

}

add(1,2,3,4);//求和

展开运算符...sprend将数组展开成为一个个独立的单元

通过接口，外部请求或其他来源组成一个数组，使用展开运算符展开它。

...rest和...spread区别

...name用在函数的参数中就是将所有参数打包到一个数组fn(...name)｛｝

...name用在函数的调用参数时就是展开如sum(...name)

当参数不可预测的时候就可以用...name

4.函数的返回值

单值原则：函数默认返回一个值，如果要返回多个值，需要使用引用类型如对象，数组。

5.函数表达式

函数表达式又叫匿名函数用在回调方法中， 一般用于写一些异步回调，在回调函数里面会多次调用他

通常将函数表达式赋给一个变量从而引用它。 let fn1 = function(){}

6.箭头函数

es6新增，可以简化函数表达式。删除function，在参数和大括号之间添加加”=>”,

fn1 = (参数) => console.log("123");

箭头函数与函数表达式的区别：箭头函数没有this。

任何时候都要给参数加上括号

如果函数体就一行代码可以去掉大括号｛｝ ，多行代码不能省略

三、DOM操作

1.获取dom元素

使用标签获取：getElementsByTagName

使用id获取：getElementsById

使用class获取：getElementsByClassName

使用name获取：getElementsByName

使用jQuery选择器获取: querySelector querySelectorAll

使用标签、class、name与querySlectorAll获取dom元素的返回值都为类数组(HTMLAllCollection)，其特征是有一个length属性，有一个从0开始的索引，可以使用索引进行访问。而使用id获取和querySlector的返回值为第一个匹配到的结果。

dom操作