JavaScript基础【数组-for循环】（五）
一、数组
//数组是一种有序的数据格式.(纯对象是无序的)用arr存储了3个数据,1,2,3const arr = [1,2,3];let x = 1;let y = 2;let z = 3;- 创建数组方法
1.let arr = [1, 2, 3];2.let arr = new Array(1, 2, 3);// class01表示一个数组.// '张三', '王五', '李四', '赵六 => 数组的成员(元素).// 每个元素之间用,隔开. 书写时,后面有空格.const class01 = ['张三', '王五', '李四', '赵六'];// 通过下标(索引)来访问数组的元素.// 数组的下标默认从0开始,依次+1.// 下标 => 元素的门牌号.console.log(class01[3]);console.log(class01[2]);console.log(class01[1]);console.log(class01[0]);- 数组的长度（.length）
// length属性表示数组的元素个数.（也是数组的长度）console.log(class01.length);增删改查
增 => 数组[下标] = 新的值
改 => 数组[下标] = 新的值
查 => 数组[下标]
// 在最后的位置插入一个新元素.class0621[4] = '小陈';// 5-9的位置没有元素.这时数组的length是11而不是6.有5个空的元素.class0621[10] = '小邓';// 不存在的元素,空的元素,返回undefined.(访问对象不存在的属性也是undefined)console.log(class0621[5]);// 修改第一个元素class0621[0] = '小张';二、获取元素
111222333444555
querySelectorAll参数是选择器 => 获取匹配选择器的所有元素.
然后返回一个存储着这些元素的数组.
aDiv就是一个存储着5个div的数组.
- 单个标签推荐o开头,数组推荐用a开头.
const aDiv = document.querySelectorAll('div');
- 通过aDiv可以访问所有的标签
console.log(aDiv);
- 通过下标访问对应的标签
console.log(aDiv[2]);
- 通过下标修改指定标签样式.
aDiv[2].style.backgroundColor = 'red';
- 获取的标签个数
console.log(aDiv.length);
不能通过aDiv新增元素来在页面上新增标签。
页面上不会多出一个标签。
aDiv[5] = '666';
三、其他获取元素方法
111222333444555
- getElementsByTagName 的参数是标签名.
- 能够获取指定标签的元素.
- document.getElementsByTagName('div') => 只获取div标签
const aDiv = document.getElementsByTagName('div');console.log(aDiv.length);
- 获取匹配选择器.active的所有标签。
const aActive = document.querySelectorAll('.active');console.log(aActive);getElementsByClassName => 参数是类名.
const aBox = document.getElementsByClassName('active');console.log(aBox);四、获取元素
pppp
如果想要获取第一个div内的5个input，那么我们要怎么去获取?
- document => 整个页面
- document.querySelectorAll('[type="text"]') => 在整个页面中找input
const aInput = document.querySelectorAll('[type="text"]'); console.log(aInput);// 7个
const aDiv = document.querySelectorAll('div');
- 在第一个div中找input
const aIn = aDiv[0].querySelectorAll('input');console.log(aIn);// 5个
- 在第一个div中找input标签
const aIn = aDiv[0].getElementsByTagName('input');console.log(aIn);// 5个
- 在第一个div中找类是active的标签.
const aIn = aDiv[0].getElementsByClassName('active');console.log(aIn);// 5个五、单个元素的数组
11111
// document.getElementsByClassName('active');// document.getElementsByTagName('div');const aDiv = document.querySelectorAll('div');// 只有一个元素,aDiv也是一个数组console.log(aDiv);// 访问唯一的元素,也必须添加下标.// 通过下标修改标签背景色// aDiv[0].style.backgroundColor = 'red';// 修改数组的style属性的backgroundColor属性// 数组是没有style属性的,隐藏style属性是undefined.// 通过undefined修改backgroundColor属性,会报错.// Cannot set property 'backgroundColor' of undefined(报错信息)aDiv.style.backgroundColor = 'red';console.log(aDiv.style);六、循环
循环 => 批量处理相同的代码逻辑 => 可以减少重复的代码。
- 语法 => for (表达式1; 表达式2; 表达式3) { 重复执行的代码 }
- 循环什么时候会停止? => 表示式2返回false,循环就停止.返回true就一直循环.
- 永远停不下来的循环 => 死循环.
console.log(100);console.log(100);console.log(100);console.log(100);console.log(100);//列如几段没有用for循环来优化，则会出现很多的重复代码
- 表达式1 => 从几开始数数
- 表达式2 => 数到几
- 表达式3 => 几个几个数
- let i = 0 => 从0开始数
- i < 5 => 数到4
- i++ => 一个一个数
for (let i = 0; i < 5; i++) {console.log(100);}for (let i = 10; i < 15; i++) {console.log(100);}for (let i = 10; i < 20; i += 2) {console.log(100);}for (let i = 15; i > 10; i--) {console.log(100);} // 从20开始倒着数,每次数-2.for (let i = 20; i > 10; i -= 2) {console.log(100);}七、循环计数
以下三种形式，前两种是用简单的硬代码来写最后一种用for循环，可想而知使用for循环代码量的简化也会大大提高了工作效率。
// console.log(100);// console.log(200);// console.log(300);// console.log(400);// console.log(500);//硬代码// let i = 1;// console.log(100 * i);// i++;// console.log(100 * i);// i++;// console.log(100 * i);// i++;// console.log(100 * i);// i++;// console.log(100 * i);// 循环中的变量i => 循环计数// 每次循环,i的值都会变化.// i的值如何变化,取决于第三个表达式.for (let i = 1; i < 6; i++) {console.log(i);// 1,2,3,4,5console.log(100 * i);} let arr = ['张三', '李四', '王五', '赵六'];// console.log(arr[0]);// console.log(arr[1]);// console.log(arr[2]);// console.log(arr[3]);// let i = 0;// console.log(arr[i]);// i++;// console.log(arr[i]);// i++;// console.log(arr[i]);// i++;// console.log(arr[i]);for (let i = 0; i < 4; i++) {console.log(arr[i]);} //硬代码表示方式console.log('你1');console.log('我2');console.log('他3');console.log('你4');console.log('我5');console.log('他6');console.log('你7');console.log('我8');console.log('他9'); let arr = ['你', '我', '他'];for (let i = 1; i < 10; i++) {console.log(arr[(i-1) % 3] + i);}for (let i = 0; i < 3; i++) {console.log('你' + (i * 3 + 1));console.log('我' + (i * 3 + 2));console.log('他' + (i * 3 + 3));}for (let i = 1; i < 10; ) {console.log('你' + i++);console.log('我' + i++);console.log('他' + i++);}八、循环时如何运行的
for (表达式1;表达式2;表达式3) { 表达式4 };
以上表达式的执行顺序如何的?
表达式1 => 表达式2 => 表达式4 => 表达式3 => 表达式2 => 表达式4 => 表达式3 => .... => 直到表达式2返回false...
for (let i = 0; i < 3; i++) {console.log(i);// 0,1,2} //硬代码表示方式let i = 1;i < 10;console.log('你' + i++);console.log('我' + i++);console.log('他' + i++);i < 10;console.log('你' + i++);console.log('我' + i++);console.log('他' + i++);i < 10;console.log('你' + i++);console.log('我' + i++);console.log('他' + i++); // i < 10 => false 停止循环打印for (let i = 1; i < 10;) {console.log('你' + i++);console.log('我' + i++);console.log('他' + i++);}九、continue
continue => 跳过当前循环，继续后面的循环。
let arr = [1,2,3,4,5];for (let i = 0; i < 5; i++) {if (i == 2) {// 跳过当前循环，不执行continue后面的代码。后续循环还继续执行。continue;}console.log(arr[i]);}硬代码表示方法。
let i = 0;if (i != 2) {console.log(arr[i]);}i++;if (i != 2) {console.log(arr[i]);}i++;if (i != 2) {console.log(arr[i]);}i++;if (i != 2) {console.log(arr[i]);}i++;if (i != 2) {console.log(arr[i]);}十、break
break => 终止整个循环。
let arr = [1,2,3,4,5];for (let i = 0; i < arr.length; i++) {console.log(arr[i]);// 下标是2时，就终止整个循环。(提前结束循环)if (i == 2) {break;}}当一个死循环一直循环时，可以用上break来直接终止整个循环。
for (;;) {// 返回true表示用户点击确定，返回false表示用户选择取消let flag = confirm('你喜欢我吗?');// 如果用户点击确定,就终止这个死循环.if (flag) {alert('我也喜欢你');break;}}十一、循环处理DOM
1111122222
十二、循环添加事件
- 11111
- 22222
- 33333
- 44444
- 55555
- 66666
for循环表达方式
硬代码表达方式
aLi[0].onclick = function() {alert(aLi[0].innerText)}aLi[1].onclick = function() {alert(aLi[1].innerText)}aLi[2].onclick = function() {alert(aLi[2].innerText)}本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！