JS基础学习------四

数组应用

根据数组元素生成手风琴

手风琴效果

首先是css样式

        .box{
            width: 1120px;
            height: 260px;
            margin: 50px auto;
            display: flex;
            overflow: hidden;
        }

        .box>div{
            width: 120px;
            border: 1px solid #fff;
            transition: all 0.5s;
        }

        .box>div:hover{
            width: 400px;
        }

思路---遍历arr数组，按要求生成页面结构，在循环体内生成div以及img，并将数组的数据设置给img的src属性。

模拟后台返回的数据

        let arr = [
            './images/1.jpg',
            './images/2.jpg',
            './images/3.jpg',
            './images/4.jpg',
            './images/5.jpg',
            './images/6.jpg',
            './images/7.jpg',
        ]

        let strHTML = '<div class="box">'
        for(let i=0; i< arr.length; i++){            
            strHTML += `<div><img src="${arr[i]}"></div>`
        }
        strHTML += '</div>';

        document.write(strHTML)

首先定义一个变量，将手风琴结构的整体box放入其中。 在通过for循环遍历整个arr数组，已达到读取图片路径的目的，代码如上。

根据数组元素生成柱状图

柱状图效果

首先是css样式：

      .box {
        width: 1000px;
        height: 400px;
        border-left: 1px solid #000;
        border-bottom: 1px solid #000;
        margin: 50px auto;
        /* 父元素伸缩盒子 */
        display: flex;
        /* 水平方向均匀分布 */
        justify-content: space-around;
        /* 垂直方向底部对齐 */
        align-items: flex-end;
      }
      .box > div {
        width: 50px;
        height: 100px;
        background-color: pink;
        text-align: center;
        font-size: 14px;
        /* 伸缩盒子 */
        display: flex;
        /* 修改伸缩盒子主轴为垂直方向 */
        flex-direction: column;
        /* 修改主轴方向两端对齐 */
        justify-content: space-between;
      }
      .box > div span {
        margin-top: -20px;
      }
      .box > div h3 {
        margin-bottom: -40px;
      }

然后定义一个数组模拟返回后台的数据

        let month = [100, 120, 230, 110, 300, 260, 130, 90, 300, 200, 150, 80];

        let strHTML = '<div class="box">'
        for(let i=0; i<month.length; i++){
          // month[i]
          strHTML += `<div style="height:${month[i]}px">
              <span>${month[i]}</span>
              <h3>${i+1}月</h3>
            </div>`;
        }
        strHTML += '</div>';

        document.write(strHTML)

定义一个变量 strHTML，将数组中的顺序i作为月数，利用css的层叠性将数据添加在css样式内的高度。

冒泡排序法

需求，将一个数组从小到大重新排序。 利用c=a a=b b=c的方法实现。

首先定义一个数组

let arr = [ 9, 5, 3, 8, 17, 6];

先实现大小对比后交换位置，再实现for循环单个一轮达成将最大的放到最后，最后实现整个数组重新排序（for外循环）

      // 外层循环控制找几次最大的
      for (let j = 1; j < arr.length; j++) {
        // 内层：最大的放在后面
        // i 与 i+1  相邻的两个数
        for (let i = 0; i < arr.length - j; i++) {
          // 如果前面的比后面的大，就交换位置
          if (arr[i] > arr[i + 1]) {
            let c = arr[i];
            arr[i] = arr[i + 1];
            arr[i + 1] = c;
          }
        }
      }
      console.log(arr);

求数组中的最大值

• 第一步，定义一个变量将数组的0号元素赋值给这个变量 let table = arr[0]
• 第二步，从1号下标开始遍历数组
• 第三步，如果遍历到元素比table里的值大，将替换掉table里的值

      let table = arr[0];
      for (let i = 1; i < arr.length; i++) {
        if (arr[i] > table) {
          table = arr[i];
        }
      }
      console.log(table);

函数

函数的定义与调用

首先，变量是用于存储数据的。 那么函数的作用类似，是用于存储代码的，可以实现一次定义多处调用。

函数的定义：

    function 函数名（）｛
        //函数体
    ｝

      function fn() {
        let str = '<table border="1" rules="all" width="700" height="500">';
        for (let row = 1; row < 10; row++) {
          str += "<tr>";
          for (let col = 1; col <= row; col++) {
            str += `<td>${col}*${row}=${col * row}</td>`;
          }
          str += "</tr>";
        }
        str += "</table>";
        document.write(str);
      }

上述代码定义了一个名为fn的函数。代码在函数内部的时候，默认并不会自动执行。诺要执行，需要调用，方法如下。

fn()

调用可以重复任意数量。

函数的调用案例

需求~封装一个函数，函数内部实现两个求和

        function fn(){
            let a = 10;
            let b = 20;
            let ret = a + b;
            console.log(ret);
        }
        fn();

函数的参数

形参与实参

定义：形参是在函数定义量的参数，下述代码中X,Y即为形参

       function fn(x, y){
            // console.log(x,y);
            let ret = x + y;
            console.log(ret)
        }

定义：函数调用时的参数是实参，实参可以变量，也可以是具体的值。

let n = 10;
fn(n,20); 
fn(100,200);

小结：函数的参数就是将函数外部数据传递到函数内部进行运算。

tips！

• 实参与形参之间是按顺序传递的
• 形参就是一个变量，只在函数内部访问
• 参数可以是任何类型

函数参数-案例

需求~封装一个函数，要求是可以对任何一个数组求最大值

      function getMax(arr) {
        let table = arr[0];
        for (let i = 1; i < arr.length; i++) {
          if (arr[i] > table) {
            table = arr[i];
          }
        }
        console.log(table);
      }

      getMax([4, 39, 10, 29]);
      getMax([100, 29, 387, 58]);

这样封装后，调用使用时，实参是任意一个数组都可以将其最大值求出。

函数的返回值

return作用就是将函数内部的数据返回到函数外部

      function fn() {
        // 使用a模拟函数内部定义的一个变量
        let a = 10;
        // 函数的内部的数据只能在函数内部访问
        return a;
      }
      let ret = fn();
      console.log(ret);

小结：return 将函数内部的数据返回到函数外部，外部想使用必须使用接收。

函数的返回值 tips！

• 函数内部只要遇到return就会中断函数的执行
• return后也可以不写数据，目的就是为了中断运行
• 函数内部想返回多个数据
• return返回的数据可以使任何类别。number、string、boolean、undefined、null、array...等等

      function fn() {
        console.log("hello");
        return [10, 20];
        console.log("world");
      }

      let ret = fn();
      console.log(ret);

函数的返回值 - 案例

封装一个函数：功能---在一个数组中查找是否有某个元素存在，如果存在则返回true

      function find(arr, target) {
        for (let i = 0; i < arr.length; i++) {
          if (arr[i] == target) {
            return true;
          }
        }
      }
      let stus = ["zhangsan", "lisi", "wangwu", "zhaoliu", "tianqi"];
      let na = "lisi";
      let ret = find(stus, na);
      console.log(ret);

作用域

作用域简介

• 在JS中，作用域可以分为三种。

• 全局：在函数之外就是全局

• 全局变量：在全局定义的变量就是全局变量

• 局部：在函数内部的就是局部

• 局部变量：在局部定义的变量就是局部变量

• 块级：只要语法中具有｛｝都是块级作用域

      // 全局变量
      let a = 10;
      function fn() {
        // 局部变量
        let b = 20;
      }

变量的访问范围

全局变量：访问不受限制 局部变量：局部变量只能在定义的函数内访问

      // 全局变量
      let a = 10;
      function fn() {
        // 局部变量
        let b = 20;
        // 尝试在局部访问全局变量a
        // console.log(a);
        // console.log(b);
      }
      fn();
      // 尝试在全局访问局部变量b
      console.log(b); // 报名无法访问
      // console.log(a);

块级作用域

• 只要语法中具有｛｝都会形成一个块级作用域
• 块级作用域只影响let声明的变量
• var 也是用于声明变量

        // let a = 10;
        // var b = [10,20];
        // console.log(a,b);

        // var与let的区别，主要体现在块级作用域上
        // {
        //     var y = 20;
        //     let x = 10;
        // }
        // console.log(y);     // 20
        // console.log(x);     // 报错

        // console.log(n);
        // var n = 20;

        // let m = 10;
        // console.log(m);

• let声明的变量必须先定义后使用
• 不推荐直接为变量赋值的方式定义变量，推荐使用let

        age = 20;
        console.log(age);

小结：let声明受块级作用域限制 var也是用于声明变量的，var声明的变量不受块级作用域的限制。

作用域链以及链式查找

• 作用域链：由嵌套的作用域形成的一个链条
• 链式查找：当在某个作用域内使用一个变量时，如果这个变量不存在，会进而向上一级作用域查找此变量。

      // let a = 10
      function fn() {
        // let a = 100
        function fn1() {
          // let a = 1000
          function fn2() {
            console.log(a);
          }
          fn2();
        }
        fn1();
      }
      fn();

案例分享

需求~查找数组中是否有某个元素存在，查找这个数组中是否有14这个数存在。如果有就输出 'yes';

      let arr1 = [1, 2, 3, 4, 56, 7, 8, 9, 10];
      function find1(arr, a) {
        for (let i = 0; i < arr.length; i++) {
          if (arr[i] == a) {
            return "yes";
          }
        }
      }
      let b = 10;
      let rect = find1(arr1, b);
      console.log(rect);

案例分享

需求~查找数组中某个元素不存在，校验 'txt'不在数组 ['jpg','jpeg','png','pjpeg'] 中，如果不存就输出no

      function find(arr, a) {
        let f = 0;
        for (let i = 0; i < arr.length; i++) {
          if (arr[i] != a) {
            f++;
          }
        }
        if (f == arr.length) {
          return "no";
        }
      }
      let a = ["jpg", "jpeg", "png", "pjpeg"];
      let b = [`txt`];
      let rect = find(a, b);
      console.log(rect);

over-------------------- 代码学习不易我们一起加油，共勉