数组、for循环(基础)-Toy模板网

这篇具有很好参考价值的文章主要介绍了数组、for循环(基础)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、数组


    //数组是一种有序的数据格式.(纯对象是无序的)
    用arr存储了3个数据,1,2,3
    const 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] = '小张';

二、获取元素

<body>
  
  <div>111</div>
  <div>222</div>
  <div>333</div>
  <div>444</div>
  <div>555</div>
</body>

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] = '<div>666</div>';

三、其他获取元素方法

<body>
  
  <div>111</div>
  <div>222</div>
  <div class='active'>333</div>
  <div class='active'>444</div>
  <div>555</div>
</body>

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);

四、获取元素

<body>
  
  <div>
    <input class='active' type="text" />
    <input class='active' type="text" />
    <input class='active' type="text" />
    <input class='active' type="text" />
    <input class='active' type="text" />
    <p class='active'>pppp</p>
  </div>
  <div>
    <input class='active' type="text" />
    <input class='active' type="text" />
  </div>
</body>

如果想要获取第一个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个

五、单个元素的数组

<body>
  
  <div>11111</div>
</body>

     // 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,5
      console.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

<style>
        div{
            width: 200px;
            height: 200px;
            border:1px solid #000;
        }
    </style>
</head>
<body>
    
    <button id='btn1'>隐藏div</button>
    <button id='btn2'>改变颜色</button>
    <div id='div1' style="display:none">11111</div>
    <div id='div2' style="display:block">22222</div>
</body>

<script>

        // 点击 第一个按钮,隐藏显示的div.显示被隐藏的div.(谁显示隐藏谁,谁隐藏显示谁)
        // 点击 第二个按钮,把显示的div的背景改成红色.隐藏的div的背景色清空.(白色)

        const aBtn = document.querySelectorAll('button');
        const aDiv = document.querySelectorAll('div');

        aBtn[0].onclick = function() {
          // 循环两个div设置隐藏或显示
          for (let i = 0; i < aDiv.length; i++) {
            if (aDiv[i].style.display === 'none') {
              aDiv[i].style.display = 'block';
            } else if (aDiv[i].style.display === 'block'){
              aDiv[i].style.display = 'none';
            }
          }
        }

        aBtn[1].onclick = function() {
          // 循环两个div设置背景色
          for (let i = 0; i < aDiv.length; i++) {
            if (aDiv[i].style.display === 'block') {
              aDiv[i].style.backgroundColor = 'red'
            } else if (aDiv[i].style.display === 'none') {
              aDiv[i].style.backgroundColor = ''
            }
          }
        }

    </script>

十二、循环添加事件

<body>
  
  <ul>
    <li>11111</li>
    <li>22222</li>
    <li>33333</li>
    <li>44444</li>
    <li>55555</li>
    <li>66666</li>
  </ul>
</body>

for循环表达方式

<script>

    // 点击每个li,都弹他自己的内容.
    
    const aLi = document.querySelectorAll('li');

    for (let i = 0; i < aLi.length; i++) {
      aLi[i].onclick = function() {
        alert(aLi[i].innerText)
      }
    }

    
  </script>

硬代码表达方式文章来源地址https://www.toymoban.com/news/detail-449549.html

    aLi[0].onclick = function() {
      alert(aLi[0].innerText)
    }

    aLi[1].onclick = function() {
      alert(aLi[1].innerText)
    }

    aLi[2].onclick = function() {
      alert(aLi[2].innerText)
    }

到了这里，关于数组、for循环(基础)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！