JavaScript课程——Day04（循环、函数声明及调用、函数的参数、作用域及域解析、函数返回值、代码复用）

时间:2021-04-22
本文章向大家介绍JavaScript课程——Day04（循环、函数声明及调用、函数的参数、作用域及域解析、函数返回值、代码复用） ，主要包括JavaScript课程——Day04（循环、函数声明及调用、函数的参数、作用域及域解析、函数返回值、代码复用） 使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

1、循环

　　1.1、json对象

var 变量名 = {
    key1: value1,
    key2: value2,
    ...
}
var obj = {
    'name': 'zs',
    'age': 3,
    'job': '前端开发'
}
// console.log(obj);

　　读取和修改

// 读取（点的方式）: 对象.属性
console.log(obj.name);
console.log(obj.age);

// 读取（中括号的方式）：对象['属性']
console.log(obj['job']);

// 中括号优势，可以读取属性是变量的
var a = 'name';
console.log(obj[a]);


// ------------------------------

// 修改: 对象.属性 = 值; 
obj.name = '张新昊';
obj.sex = '女';
obj['sex'] = '不明';
console.log(obj);

　　1.2、for-in

　　for-in：循环对象，因为对象没有length属性，所以不能用for循环，只能用for-in

for (var 属性 in 对象) {
    console.log(属性  即key值);
    console.log(对象[属性]  即value值);
}
var obj = {
    'name': 'zs',
    'age': 3,
    'job': '前端开发'
}

for (var attr in obj) {
    console.log(attr, '------', obj[attr]);
}

2、函数声明及调用

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块

语法：

// 1、函数声明
function 函数名(形参1, 形参2, ...) {
    代码块
}

// 2、函数表达式
var 函数名 = function (形参1, 形参2, ...) {
    代码块
}

// 函数调用：函数名(实参1, 实参2, ...);
// x y为形参（形式上的参数）
function add(x, y) {
      console.log(x + y);
}
// 10，20为实参（实际的参数）
add(10, 20);
add(50, 100);

// ---------------------------------------
function fn(a) {
      var num = 0;
      for (var i = 1; i <= a; i++) {
           num += i;
      }
      console.log(num);
}
fn(100);
fn(50);

3、函数的参数

形参：在声明函数时，函数中一些不确定的值，我们可以先定义一个变量表示，这个变量我们就称之为形参。每一个形参都是一个变量声明，只不过省略了var，但是这个时候的形参并没有值。

实参：在调用参数时，如果函数声明时有参数，就可以在括号中传入具体的值，这个叫做实参。

　　3.1、实参和形参个数不等

  • 如果实参比形参少，则没有匹配上的形参值为undefined
  • 如果实参比形参多，则多的实参也白多

　　例：

function fn(a, b) {
    console.log(a, b);
}

fn(3, 5);
fn(7); // a的值为7，b为undefined
fn(10, 20, 30); // a的值为10，b的值为20，实参30将丢失

　　3.2、arguments

　　arguments是实参的集合，是一个对象，一个类数组、伪数组，有长度，可以用过下标获取到某一个参数

// 需求：写一个函数，用于计算不定参数的和
function fn() {
    // console.log(typeof arguments); // object
    // console.log(arguments);
    // console.log(arguments[0], arguments[1]);

    var num = 0;
    for (var i = 0; i < arguments.length; i++) {
        // console.log(arguments[i]);
        num += arguments[i]
    }
    console.log(num);
}
fn(3, 5);
fn(4, 5, 6);

　　3.3、arguments和形参的关系

　　形参和arguments是一一对应的，是一个值的两个名

function fn(x, y) {
      arguments[0] = 10;
      console.log(x); // 10
      console.log(arguments[0]); // 10
}

fn(3, 5);

　　3.4、函数参数的类型

　　函数的参数可以是任何类型数据，包括函数

function fn(a) {
    console.log(a);
    console.log(typeof a);
    console.log('------------------------');
}

fn(5); //数字 numeber
fn('5'); //字符串 string
fn(true); //布尔 boolean
fn(null); //null object
fn(); //undefined undefined
fn([]); // object
fn({}); //对象 object
fn(function () { }); //函数 function () { }
function ab(f) {
      f()
}
function add() {
      console.log(10 + 20);
}
ab(add)

4、作用域及域解析

作用域：变量或函数的有效使用范围，有全局作用域和函数作用域（局部作用域）两种

全局作用域：<script>标签下

局部作用域：函数域下

　　4.1、全局变量和局部变量

　　全局变量：声明在script标签下的标量或函数，全局变量或函数在任何地方都可以访问，任何地方都可以修改

var a = 10;
function fun1() {
    a++;
    console.log(a); // 11
}
function fun2() {
    a++; // 12
    a--; // 11
    console.log(a); // 11
}
fun1();
fun2();
console.log(a); // 11

　　局部变量：在函数内部声明的变量或函数，就是局部变量。局部变量或函数只能在函数内部访问

function sum() {
    var a = 10;
    console.log(a); // 10
    function s() {
        console.log(a); // 10
    }
    s();
}
sum();
console.log(a); 
s();

　　4.2、作用域链

JavaScript中的一种值的查找即机制，当需要使用到一个变量或函数，先查找自身作用域，自身作用域没有，再从父级作用域中找，依次查找，一直到全局，全局还是没有，显示is not defined

　　4.3、预解析

浏览器是个多功能的集合体，它可以运行js、css、html、图片、音视频，浏览器有一块专门用于解析js，我们称为解析器

解析器工作的原理：至少会经历两步

　　　　①、预解析

　　　　找东西，找var、函数、参数，找到之后，var附一个值为undefined提到当前域的最上面，函数整体提到当前域的最上面，参数同var

　　　　如果函数同var同名，函数权重高于var，函数抹掉var；如果var与var同名，则后面的覆盖前面的；如果函数同名，则后面的覆盖前面的

　　　　②、逐行解读

　　　　从上到下，一行一行的执行，见到+ - * / % ++ -- =等操作，就跑到前面修改变量，遇到读取，就跑到最前面读取这个变量

        // console.log(a);
        // var a = 10;
        // console.log(a);

        // 变形
        // var a = 10;
        // console.log(a); // undefined
        // a = 10;
        // console.log(a); // 10

        // --------------分隔------------------
        // console.log(fun1);
        // function fun1() {
        //     console.log('fun1'); // 我是一个注释
        // }
        // console.log(fun1);

        // 变形
        // function fun1() {
        //     console.log('fun1'); // 我是一个注释
        // }
        // console.log(fun1);
        // console.log(fun1);

        // ----------------分隔----------------
        // var a = 1;
        // function fn1() {
        //     alert(a);
        //     var a = 2;
        // }
        // fn1();
        // alert(a);

        // 变形
        // var a = 1;
        // function fn1() {
        //     var a = 2;

        //     alert(a); // undefined
        //     a = 2; // 
        // }
        // a = 1;
        // fn1();
        // alert(a); // 1

        // ---------------分隔-----------------
        // var a = 1;
        // function fn1() {
        //     alert(a);
        //     a = 2;
        // }
        // fn1();
        // alert(a);

        // 变形
        // var a = 2;
        // function fn1() {
        //     alert(a); // 1
        //     a = 2;
        // }
        // a = 1;
        // fn1();
        // alert(a); // 2

        // --------------分隔--------------
        // var a = 1;
        // function fn1(a) {
        //     alert(a);
        //     a = 2;
        // }
        // fn1();
        // alert(a);

        // 变形
        // var a = 1;
        // function fn1(a) {
        //     var a = 2;
        //     alert(a); // undefined
        //     a = 2;
        // }
        // a = 1;
        // fn1();
        // alert(a); // 1

        // -------------分隔------------------
        // var a = 1;
        // function fn1(a) {
        //     alert(a);
        //     a = 2;
        // }
        // fn1(a);
        // alert(a);

        // 变形
        // var a = 1;
        // function fn1(a) {
        //     var a = 2;
        //     alert(a); // 1
        //     a = 2;
        // }
        // a = 1;
        // fn1(a);
        // alert(a); // 1

        // ------------分隔----------------
        // var a = 10;
        // function fun2() {
        //     console.log(a); // undefined
        //     var a = 20;
        //     console.log(a); // 20
        // }
        // fun2();
        // console.log(a); // 10

        // ------------分隔---------------
        // alert(a);
        // var a = 1;
        // alert(a);
        // function a() { alert(2); }
        // alert(a);
        // var a = 3;
        // alert(a);
        // function a() { alert(4); }
        // alert(a);
        // alert(typeof a)
        // a();

        // 变形
        // a = 3;
        // alert(a); // function a() { alert(4); }
        // a = 1;
        // alert(a); // 1
        // alert(a); // 1
        // a = 3;
        // alert(a); // 3
        // alert(a); // 3
        // alert(typeof a) // number
        // a(); // 报错

        // ----------------分隔-----------------
        // function fn(a) {
        //     console.log(a); // function a() { }
        //     var a = 2;
        //     function a() { }
        //     console.log(a) // 2
        // }
        // fn(1);

        // -------------分隔---------------
        // var a = 2;
        // function test() {
        //     var a = 3;
        //     var b = 4;
        //     c = 5; // 没有var，声明的是一个全局变量
        //     alert(a); // 3
        // }

        // test();
        // alert(c); // 5
        // alert(b); // 报错

5、函数返回值

　　return特点：

　　1、函数通过关键字return返回函数中的内容

　　2、return一次只能返回一个值（如果要返回多个值，可以返回 [ ] 或者 { } ）

　　3、函数中只要遇到return，函数就会结束

　　4、函数没有返回值，默认结果为undefined

// 封装函数：工具
// 封装一个函数，求1--n之间所有数的和

function fn(n) {
    var num = 0;
    for (var i = 1; i <= n; i++) {
        num += i;
    }
    // console.log(num);
    return num; // return后面的值，就是函数调用的结果
}

var v = fn(100);
console.log(v); // 5050
console.log(fn(50)); // 1275

// num是一个局部变量，我们在外面找不到。（我就需要在外面得到这个值，怎么办）
// console.log(num);

6、代码复用

　　1、html结构尽量标准一样

　　2、先实现一个，但是里面的标签必须通过父元素获取

　　3、封装成函数，将父元素作为函数参数

　　4、调用

购物车案例：

<h1>函数封装复用</h1>
    <ul>
        <li>
            <button>-</button>
            <span>0</span>
            <button>+</button>
            单价：<b>12.5</b>元
            小计：<em>0</em>元
        </li>
        <li>
            <button>-</button>
            <span>0</span>
            <button>+</button>
            单价：<b>9.8</b>元
            小计：<em>0</em>元
        </li>
        <li>
            <button>-</button>
            <span>0</span>
            <button>+</button>
            单价：<b>2.7</b>元
            小计：<em>0</em>元
        </li>
        <li>
            <button>-</button>
            <span>0</span>
            <button>+</button>
            单价：<b>178</b>元
            小计：<em>0</em>元
        </li>
        <li>
            <button>-</button>
            <span>0</span>
            <button>+</button>
            单价：<b>17.8</b>元
            小计：<em>0</em>元
        </li>
    </ul>

    <script>
        // 获取元素
        var li = document.getElementsByTagName('li'); // 获取所有的li
        // fn(li[0]);
        // fn(li[1]);
        // fn(li[2]);

        for (var i = 0; i < li.length; i++) {
            fn(li[i]);
        }

        function fn(ele) {
            var btn = ele.getElementsByTagName('button'); // 加减按钮
            var span = ele.getElementsByTagName('span')[0]; // 件数盒子
            var b = ele.getElementsByTagName('b')[0]; // 单价盒子
            var em = ele.getElementsByTagName('em')[0]; // 小计盒子
            var count = span.innerText - 0; // 件数
            var money = b.innerText * 1; // 单价

            // 减
            btn[0].onclick = function () {
                count--;
                if (count <= 0) {
                    count = 0;
                }
                span.innerText = count;
                em.innerText = (count * money).toFixed(2);
            }

            // 加
            btn[1].onclick = function () {
                count++;
                span.innerText = count;
                em.innerText = (count * money).toFixed(2);
            }
        }
    </script>

原文地址：https://www.cnblogs.com/miaochaofan/p/14691413.html

随机文章
Javascript知识点必读
最近更新