zoukankan      html  css  js  c++  java
  • ES02 变量、数组、对象、方法

    1 变量

      1.1 变量的声明

        利用var关键字来声明变量,例如:

        var a = 100;
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>JavaScriptTest</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    
    <!-- <script src="/js/jquery.js"></script> -->
    <script src="http://cdn.static.runoob.com/libs/jquery/2.0.0/jquery.min.js"></script>
    <script>
        var a = 100;
        function test01() {
            alert("变量a的值为:" + a);
        }
    </script>
        
    </head>
    <body>
        <p id="testP">Hello Boy</p>
        
        <button id="test" onClick="test01()">测试按钮</button><br />
    
        <script>
        
        </script>
    
        
    </body>
    </html>
    View Code

      1.2 变量的作用域

        1.2.1 局部作用域

          在函数中声明的作用域叫做局部作用域

        1.2.2 全局作用域

          在函数之外声明的作用与叫做全局作用域

        1.2.3 区别

          局部作用域中可以获取全局变量,但是局部变量只能在局部作用域中使用,即:局部变量只能在声明它的方法中使用

          

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>JavaScriptTest</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    
    <!-- <script src="/js/jquery.js"></script> -->
    <script src="http://cdn.static.runoob.com/libs/jquery/2.0.0/jquery.min.js"></script>
    <script>
        var a = "全局变量a";
        function test01() {
            var b = "局部变量b";
            alert("test01方法 -> " + a);
            alert("test01方法 -> " + b);
        }
        function test02() {
            alert("test02方法 -> " + a);
            alert("test02方法 -> " + b);
        }
    </script>
        
    </head>
    <body>
        <p id="testP">Hello Boy</p>
        
        <button id="test01" onClick="test01()">测试按钮01</button><br />
        <button id="test02" onClick="test02()">测试按钮02</button>
    
        <script>
        
        </script>
    
        
    </body>
    </html>
    View Code

          坑01:在局部作用域中如果使用的变量未i进行声明操作就会到全局中去寻找对应的全局变量,如果没找到就会创建一个全局变量

          

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>JavaScriptTest</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    
    <!-- <script src="/js/jquery.js"></script> -->
    <script src="http://cdn.static.runoob.com/libs/jquery/2.0.0/jquery.min.js"></script>
    <script>
        var a = "全局变量a";
        function test01() {
            b = "Hello Boy"
            alert("test01方法 -> " + a);
            alert("test01方法 -> " + b);
        }
        function test02() {
            alert("test02方法 -> " + a);
            alert("test02方法 -> " + b);
        }
    </script>
        
    </head>
    <body>
        <p id="testP">Hello Boy</p>
        
        <button id="test01" onClick="test01()">测试按钮01</button><br />
        <button id="test02" onClick="test02()">测试按钮02</button>
    
        <script>
        
        </script>
    
        
    </body>
    </html>
    View Code

    2 数组

      2.1 数组的声明

        2.1.1 利用 Array 对象进行声明

    var list01 = new Array();

        2.1.2 利用 [ ] 进行声明

    var list01 = [];

      2.2 数组的赋值

        数组名[数组元素索引]

    list01[0] = "warrior";
    list01[4] = "fury";

        坑01:中间为进行初始化的数组元素自动赋值为 undefined

      2.3 数组的声明和赋值

        2.3.1 利用 Array 对象实现

    var list01 = new Array("warrior", "fury", "重庆火锅");

        2.3.2 利用 [ ] 实现

    var list01 = ["warrior", "fury", "重庆火锅", "小面"];
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>JavaScriptTest</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    
    <!-- <script src="/js/jquery.js"></script> -->
    <script src="http://cdn.static.runoob.com/libs/jquery/2.0.0/jquery.min.js"></script>
    <script>
        var list01 = ["warrior", "fury", "重庆火锅", "小面"];
        function test01() {
            for (var i = list01.length - 1; i >= 0; i--) {
                console.log(list01[i]);
            }
        }
        function test02() {
            
        }
    </script>
        
    </head>
    <body>
        <p id="testP">Hello Boy</p>
        
        <button id="test01" onClick="test01()">测试按钮01</button><br />
        <button id="test02" onClick="test02()">测试按钮02</button>
    
        <script>
        
        </script>
    
        
    </body>
    </html>
    View Code

    3 对象

      3.1 对象的声明

        3.1.1 利用 Object 

    var obj = new Object()

        3.1.2 利用 { } 

    var obj = {};

      3.2 对象的赋值

        obj.name = "warrior";
        obj.address = "重庆市";

      3.3 对象的声明和赋值

        3.3.1 利用Object

        var obj = new Object({
            name: "warrior",
            address: "重庆",
            age: 123
        });

        3.3.2 利用 { } 

        var obj = {
            name: "warrior",
            address: "重庆"
        };

    4 方法

        function onCompute() {
            alert("hello boy");
            var a = document.getElementById("a");
            var b = document.getElementById("b");
            document.getElementById("result").value = Number(a.value) + Number(b.value);
        }
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>JavaScriptTest</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    
    <!-- <script src="/js/jquery.js"></script> -->
    <script src="http://cdn.static.runoob.com/libs/jquery/2.0.0/jquery.min.js"></script>
    <script>
        
        function onCompute() {
            alert("hello boy");
            var a = document.getElementById("a");
            var b = document.getElementById("b");
            document.getElementById("result").value = Number(a.value) + Number(b.value);
        }
    
    
        function test01() {
        }
        function test02() {
            
        }
    </script>
        
    </head>
    <body>
        <input type="number" id="a" placeholder="加数01" />
        &nbsp;
        <span> + </span>
        &nbsp;
        <input type="number" id="b" placeholder="加数02" />
        &nbsp;
        <span> = </span>
        &nbsp;
        <input type="number" id="result" placeholder="结果" />
        &nbsp;
        <button id="compute" onclick="onCompute()">计算</button>
        <hr />
        
        <button id="test01" onClick="test01()">测试按钮01</button><br />
        <button id="test02" onClick="test02()">测试按钮02</button>
    
        <script>
        
        </script>
    
        
    </body>
    </html>
    View Code

      4.1 有参方法

        坑01:由于JavaScript是动态类型语言,所以在定义方法时的形参不用指定类型,用合法的变量名指明就行啦

        function test01(a, b) {
            alert(a);
            alert(b);
        }

      4.2 带返回值的方法

        function test02(a, b) {
            alert(test03(a, b));
        }
        function test03(a, b) {
            return a + b;
        }
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>JavaScriptTest</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    
    <!-- <script src="/js/jquery.js"></script> -->
    <script src="http://cdn.static.runoob.com/libs/jquery/2.0.0/jquery.min.js"></script>
    <script>
        
        function onCompute() {
            alert("hello boy");
            var a = document.getElementById("a");
            var b = document.getElementById("b");
            document.getElementById("result").value = Number(a.value) + Number(b.value);
        }
    
    
        function test01(a, b) {
            alert(a);
            alert(b);
        }
        function test02(a, b) {
            alert(test03(a, b));
        }
        function test03(a, b) {
            return a + b;
        }
    </script>
        
    </head>
    <body>
        <input type="number" id="a" placeholder="加数01" />
        &nbsp;
        <span> + </span>
        &nbsp;
        <input type="number" id="b" placeholder="加数02" />
        &nbsp;
        <span> = </span>
        &nbsp;
        <input type="number" id="result" placeholder="结果" />
        &nbsp;
        <button id="compute" onclick="onCompute()">计算</button>
        <hr />
        
        <button id="test01" onClick="test01('warrior', '重庆')">测试按钮01</button><br />
        <button id="test02" onClick="test02(1, 2)">测试按钮02</button>
    
        <script>
        
        </script>
    
        
    </body>
    </html>
    View Code

       4.3 实例效果

        

  • 相关阅读:
    Leetcode 16.25 LRU缓存 哈希表与双向链表的组合
    Leetcode437 路径总和 III 双递归与前缀和
    leetcode 0404 二叉树检查平衡性 DFS
    Leetcode 1219 黄金矿工 暴力回溯
    Leetcode1218 最长定差子序列 哈希表优化DP
    Leetcode 91 解码方法
    Leetcode 129 求根到叶子节点数字之和 DFS优化
    Leetcode 125 验证回文串 双指针
    Docker安装Mysql记录
    vmware虚拟机---Liunx配置静态IP
  • 原文地址:https://www.cnblogs.com/NeverCtrl-C/p/8641391.html
Copyright © 2011-2022 走看看