标签：11 arr console 元素 JS4 循环 let 数组 自学
目录数组和循环
数组入门和循环
一 数组入门
数组用于存储一组相关数据。作用和对象类似。
数组是有序的数据结构。
对象是无序的数据结构。
1.1：数组的相关概念
数组的创建，分两种方式：
1：直接量
2：构造函数
// 直接量
let arr = [1,2,3];
// 构造函数
let arr = new Array(1,2,3);
数组内的每个数据叫做数组的元素。或者叫做数组的数据项,每一项。(和html的元素不是一个意思)
可以通过元素的下标访问数组元素。（下标相当于门牌号）（对象通过属性名访问属性值）
数组的元素下标默认从0开始。
数组的长度（元素个数）可以通过length获取。
如果访问一个不存在的元素，得到undefined。（访问不存在的对象属性也是undefined）
// '班长','学委','体委'是数组的元素，对应的下标是0，1，2
let arr = ['班长','学委','体委'];
// 访问第一个元素
console.log(arr[0]);
// 访问第二个元素
console.log(arr[1]);
// 访问最后一个元素
console.log(arr[arr.length-1])
// 访问第101个元素，不存在，得到undefined
console.log(arr[100])
// 访问数组的长度。
console.log(arr.length)
1.2：数组的增删改查
1.2.1: 增加元素
可以通过没被占用的下标添加新元素
let arr=[1,2,3];
// 下标3没被占用，为数组添加了第四个元素4
arr[3] = 4;
// 如果添加第6个元素，则第5个元素是空的。
arr[5] = 6;
console.log(arr[4]);//undefined
1.2.2：删除元素
可以通过length=0来删除所有元素。删除指定元素后期学。
// 删除所有元素
let arr=[1,2,3];
arr.length = 0;
1.2.3：修改元素
通过已经被占用的下标修改元素
// 把第一个元素从1修改为100
let arr=[1,2,3];
arr[0] = 100;
1.2.4：查找元素
通过下标查找元素，如果元素不存在，得到undefined
下标从0开始，依次增加1.
let arr=[1,2,3];
console.log(arr[0]);//1
console.log(arr[10]);//undefined
1.3：数组常见格式
数组内元素的数据类型一般是，number，string，array和object
// 很简单的数组，元素类型分别是number和string
let arr = [1,2,3];
let arr = ['你','我','它'];
// 元素数据类型不一致也可以
let arr = [1,'你'，true]
1.3.1：多维数组
数组的元素又是数组，称之为多维数组，常见二维数组，三维数组。
// 二维数组,arr的元素都是数组，分别是[1,2]和[2,4];
let arr = [[1,2],[3,4]];
// 打印arr的第一个元素.
console.log(arr[0]);//[1,2]
// 打印arr的第一个元素的第一个元素.
console.log(arr[0][0]);//1
1.3.2：对象数组
数组的元素是对象，称为对象数组。
// 数组的元素是对象，分别是{name:'幂幂'}和{name:'超越'}
let arr = [{name:'幂幂'},{name:'超越'}];
// 访问数组第一个元素.
console.log(arr[0]);//{name:'幂幂'}
// 访问数组第一个元素的name属性.
console.log(arr[0].name);//幂幂
二 获取元素进阶
获取元素可以通过id获取到一个元素，如果有10个元素，获取10次肯定是很麻烦的。
可以通过以下方法一次性获取多个元素，这时获取到的不是html标签，而是装着html标签的数组！
2.1：在页面中查找所有符合条件的标签
以下方法在document内查找所有符合条件的标签。
// 获取页面中所有的div元素， aDiv是数组！
let aDiv = document.getElementsByTagName('div');
// 获取页面中所有类名为active的元素，aDiv是数组！
let aDiv = document.getElementsByClassName('active');
// 获取页面中选择器为div.active的所有元素，aDiv是数组！
let aDiv = document.querySelectorAll('div.active');
通过以上方法获取到的是数组，可以通过数组下标来操作html标签：
// 通过标签名获取元素， aDiv是数组！
let aDiv = document.getElementsByTagName(元素标签名);
// 通过数组下标来设置第一个div的背景色
aDiv[0].style.background = 'red'
不管元素有多少个，通过以上方法获取的永远是一个数组，不是html标签！
通过以上方法获取元素，一定记得加下标！
// 通过标签名获取body。
let aBody = document.getElementsByTagName('body');
// 错，aBody是数组，不是标签
aBody.style.background = 'red';
// 正确，只能通过数组aBody的下标来获取body标签。
aBody[0].style.background = 'red';
2.2：在指定元素内查找所有符合条件的标签。
以下方法在指定的#wrap内获取符合条件的所有标签。
let oWrap = document.getElementById('wrap');
// 获取oWrap中所有的div子孙元素
let aDiv = oWrap.getElementsByTagName('div');
// 获取oWrap中所有类名为active的子孙元素
let aDiv = oWrap.getElementsByClassName('active');
// 获取oWrap中所有选择器为div.active的子孙元素
let aDiv = oWrap.querySelectorAll('div.active');
// 获取oWrap的所有子元素。(不获取孙子元素，不区分标签)
let aDiv = oWrap.children
难点：
querySelectorAll和getElementsByTagName以及getElementsByClassName的区别：
querySelectorAll是静态获取元素，一旦获取，length不会随着标签的增删而发生变化。
getElementsByTagName以及getElementsByClassName是动态获取，length会随着元素增删而变化。
PS：利用JS数组获取页面元素，只是一种映射，无法通过删除JS数组中的元素来实现在页面上删除标签
三 控制结构--循环
js 有两种控制结构，循环和判断。
循环用于处理逻辑相同的 js 操作。便于书写和批量处理。
// 相同的操作，如果需要执行多次，只能书写多次，这样很麻烦,维护也麻烦
console.log(100);
console.log(100);
console.log(100);
console.log(100);
console.log(100);
// 书写一个执行5次的循环，执行相同的操作。这样更简单
for(let i=0;i<5;i++){
console.log(100);
}
语法：
// 当表达式2返回值为false，则循环终止
for(表达式1;表达式2;表达式3){
循环体代码
}
表达式2永远不为false，则循环永远无法停止，这种循环称之为死循环。
难点：
1：怎么写。
写循环，其实就是在教浏览器数数。i 就是计数变量。至于从几开始数，怎么数，数到几，都可以设置。
let i = 0；表示从0开始数，i<5表示数到5就停，i++，表示每次数数加1。
自然可以从任何数开始数，数到任何数就停，每次数数可以加任何数减任何数。
// 从-1开始数，数数不超过4，每次数数+2
for(let i=-1;i<=4;i+=2){
循环体代码
}
2：循环执行顺序
循环执行顺序：
表达式1>表达式2判断>循环体代码>表达式3>表达式2判断.......直到表达式2返回false,则终止循环.
//顺序：
//1:let i = 0;
//2:i<5,判断i<5的返回值是否为true,如果是,执行第3步,否则终止循环
//3:console.log(100);执行循环代码体;
//4:i++,i的值+1
//5:i<5,判断i<5的返回值是否为true,如果是,执行第6步,否则终止循环
//..............直到i<5返回false.
for(let i=0;i<5;i++){
console.log(100);
}
知道了顺序,就可以看懂任何循环代码.
3：如何看懂循环在做什么
看懂代码,需要注意两件事情:
1：循环多少次。
2：循环体代码是什么。
// 1:这个循环循环3次
// 2:循环体代码是判断
// if(true){
// console.log(1000)
// }
for(let i=0;i<3;i++){
if(true){
console.log(1000)
}
}
// 因此以上循环代码的意思是：
// 执行3次判断
// if(true){
// console.log(1000)
// }
// -------------------------------------------------------------------------
// 1: 这个循环循环5次
// 2：循环体代码是添加事件oBtn.onclick = function(){console.log(10000)}
for(let i=0;i<=4;i++){
oBtn.onclick = function(){console.log(10000)}
}
// 因此以上循环代码的意思是：
// 执行5次添加事件。即执行三次oBtn.onclick = function(){console.log(10000)}
// --------------------------------------------------------------------------
// 1:这个循环循环5次
// 2:循环代码体又是一个循环
// for(let j=0;j<5;j++){
// console.log(100);
// }
for(let i=0;i<=4;i++){
for(let j=0;j<5;j++){
console.log(100);
}
}
// 因此以上循环代码的意思是:
// 执行5次内部循环
// for(let j=0;j<5;j++){
// console.log(100);
// }
// 内部循环的意思的分析方法同上.
4：循环中循环计数 i 的值
循环的过程中 i 的值一直在变。
// 以下循环除了执行了5次console.log(100)之外，还执行了5次 i++，意即i = i+1
for(let i=0;i<5;i++){
console.log(100);
}
// 以上循环可以改写成
for(let i=0;i<5;){
console.log(100);
i = i + 1;
}
// 这样写，i = i+1就成了循环体的一部分。意即i的值每次循环都会改变。
// 这个循环执行了5次，每次循环对应 i 的值，依次为0，1，2，3，4
利用每次 i 的值，可以实现批量处理数据。
// 利用每次循环中i的值作为数组的下标，遍历数组中的每一个元素。
let arr = [1,2,3,4,5];
for(let i=0;i<arr.length;i++){
console.log(arr[i])
}
// 利用每次循环中i的值作为数组的下标，遍历aDiv中的每一个html标签。
// 以下例子是给aDiv内的每一个div都添加一个事件
let aDiv = document.getElementsByTagName('div');
for(let i=0;i<arr.length;i++){
console.log(aDiv[i]);
aDiv[i].onclick = function(){console.log(10000)}
}
注意：
js 代码是在html的解析阶段执行的，循环也是在html的解析阶段执行完成的。
因此，页面渲染结束，循环一定执行完毕了，循环执行完毕后，循环中 i 的值肯定是最后一次变化的值。
我们又知道，事件函数内的代码是在hmtl渲染结束之后执行的，因此事件函数内只能获取 i 的最后一次变化的值。
// 以下循环代码，循环内添加事件，事件内打印i的值
// 因为是在事件函数内打印i的值，此时循环必定已经结束，打印的 i 值一定是5.
for(var i=0;i<5;i++){
aBtn.onclick = function(){console.log(i)}
}
// 以下循环给多个div添加事件，原意是点击div让对应的div背景变红色。
// 但是因为事件函数触发时，i 的值统一是最大的那个值，因此导致错误的设置了不存在的div，导致报错。
// 解决办法是把var i=0 改成 let i = 0;至于为什么let没错，需要学到作用域才懂。
let aDiv = document.getElementsByTagName('div');
for(var i=0;i<arr.length;i++){
aDiv[i].onclick = function(){
aDiv[i].style.background = 'red'
}
}
5：嵌套循环
嵌套循环意即循环里面又有循环。嵌套循环由内循环和外循环组成。
内部循环的循环计数 j 不能和外部循环的循环计数 i 名字一致。
// 以下嵌套循环的意思是：
// 执行5次内部循环
// for(let j=0;j<5;j++){
// console.log(100);
// }
// 内部循环循环5次，内部循环代码体是console.log(100);
// 因此内部循环的意思是：
// 执行5次console.log(100);
for(let i=0;i<=4;i++){
for(let j=0;j<5;j++){
console.log(100);
}
}
// 分析得出，外部循环循环1次，内部循环循环5次。外部循环循环结束时，内部循环循环了25次。
// 或者理解为，内部循环总共循环25次，分5次执行。
何时用嵌套循环
// 例如遍历二维数组的所有元素
let arr = [[1,2,3],[4,5,6],[7,8,9]];
// 不用循环----------------------------------------------------------------
console.log(arr[0][0]);
console.log(arr[0][1]);
console.log(arr[0][2]);
console.log(arr[1][0]);
console.log(arr[1][1]);
console.log(arr[1][2]);
console.log(arr[2][0]);
console.log(arr[2][1]);
console.log(arr[2][2]);
// 不用嵌套循环---------------------------------------------------------------
for(let i=0;i<arr[0].length;i++){
console.log(arr[0][i]);
}
for(let i=0;i<arr[1].length;i++){
console.log(arr[1][i]);
}
for(let i=0;i<arr[2].length;i++){
console.log(arr[2][i]);
}
// 用嵌套循环-------------------------------------------------------------------
for(let j=0;j<arr.length;j++){
for(let i=0;i<arr[j].length;i++){
console.log(arr[j][i]);
}
}
6.
break => 终止整个循环。
continue => 跳过当前循环，继续后面的循环。
四 循环进阶
1.标志位
标志位 => 自定义的变量,用来做判断。初始值一般是布尔值。
// 写程序判断这个数组里面的元素是不是全都能整除3.能就弹出能,不能就弹不能.(弹一次);
const arr = [123,12,333,72];
let flag = true;
// 循环检测,如果有任意一个元素不能整除3,标准位变成false.
for (let i = 0; i < arr.length; i++) {
if (arr[i] % 3 !== 0) {
flag = false;
// 但凡有一个不能整除3,则后续所有的循环判断都没必要做了.
break;
}
}
if (flag) {
alert('能');
} else {
alert('不能');
}
标签：11,arr,console,元素,JS4,循环,let,数组,自学 来源： https://www.cnblogs.com/DarkCrow/p/15054752.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。