[JavaScript知识库] JavaScript的第5天

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> JavaScript的第5天 -> 正文阅读

[JavaScript知识库]JavaScript的第5天

属性名和属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var obj=new Object();

        /*
            向对象中添加属性
            属性名:
                --对象的属性名不强制要求遵守标识符的规范
                    什么乱七八糟的名字都可以使用
                --但是我们还是尽量按照标识符的规范去做
        */
        obj.name="孙悟空";
        obj.var='hello';
        console.log(obj.var);   //hello

        /*
            如果要使用特殊的属性名，不能采用.的方式来操作
                需要使用另一种方式:
                    语法:对象["属性名"]=属性值

            使用[]这种形式去操作属性，更加的灵活。
                在[]中可以直接传递一个变量，这样变量值是多少，那个属性就是多少
        */
        var n="123";
        obj["123"]=789;
        console.log(obj["123"]);  //789
        console.log(obj[n]);      //789

        /*
            属性值
                js对象的属性值，可以是任意的数据类型
        */
        obj.tset=true;
        obj.tset=undefined;
        obj.tset=null;
        console.log(obj.tset);  //true undefined null
        //创建一个对象
        var obj2=new Object();
        obj2.name="盒子";

        // 将obj2设置为obj的属性
        obj.test=obj2;
        console.log(obj.test);  //object name="盒子";
        // 取obj2中的name属性
        console.log(obj.test.name);   //"盒子"

        /*
            in  运算符
               ---通过该运算符可以检查一个对象中是否含有指定的属性
                    如果有则返回true，没有则返回false
               ---语法
                    "属性名" in 对象
        */
       console.log("tset" in obj);   //true
       console.log("a" in obj);      //false
       
    </script>
</head>
<body>
    
</body>
</html>

基本和引用数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
            基本数据类型
                String Number Boolean Null Undefined

            引用数据类型
                Object

            js中的变量都是保存到栈内存中的，

                基本数据类型的值直接在栈内存中存储
                值与值之间时独立存在的，修改一个变量不会影响其他的变量
            
                引用数据类型(对象)是保存到堆内存中的，每创建一个新的对象，
                就会在堆内存中开辟出一个新的空间
                而变量保存的是对象的内存地址(对象的引用)，如果两个变量保存的是同一个对象引用，
                当通过一个变量修改属性时，另一个也会受到影响
            
        */

        // 基本数据类型的一个值的变化不影响其他值
       var a=19;
       var b=a;
       a=10;
       console.log(a); //10
       console.log(b); //19

        //    引用数据类型(对象)的一个值的变化影响，同一个指向这个地址的其他值，的变化
        var obj=new Object();
        obj.name="孙悟空";
        var obj2=obj;
        obj.name="猴子";
        console.log(obj.name); //"猴子"
        console.log(obj2.name); //"猴子"
        
        /*
            ==
            对于基本数据类型
            判断的是双等号两边的变量值是否相等

            对于引用数据类型
            判断的是左右两边变量的内存地址是否相等
        */
       //基本数据类型
        var c=10;
        var d=10;
        console.log(c==d);  //true
        //引用数据类型
        var e=new Object();
        var f=new Object();
        console.log(e==f);  //false
    </script>
</head>
<body>
    
</body>
</html>

对象字面量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //使用前面的方式创建对象
        // var obj=new Object();

        /*
            使用字面量{}   来创建一个对象
        */
       var obj2={};
       console.log(typeof obj2);  //object 
       obj2.name="顺子";
       console.log(obj2.name);

        /*
            使用对象字面量，可以在创建对象时，直接指定对象中的属性
            语法:{属性名:属性值，属性名:属性值...}
                对象字面量的属性名可以加引号也可以不加，建议不加，
                如果要使用一些特殊的名字，则必须加引号

            属性名和属性值是一组一组的名值对结构，
                名和值之间使用:连接，多个名值对之间使用,隔开
                如果一个属性之后没有其他的属性了，就不要写,
            
            
        */
       var obj3={
           name:"八戒",
           age:20,
           "1234":20,
           test:{name:"沙和尚"}           
        };
       console.log(obj3.name);  //八戒
       console.log(obj3.test);   //object-->name=沙和尚
    </script>
</head>
<body>
    
</body>
</html>

函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
            函数:function
                --函数也是一个对象
                --函数中可以封装一些功能，在需要时可以执行这些功能(代码)
                --函数中可以保存一些代码在需要的时候调用
                --使用typeof检查一个函数对象时，会返回funtion
        */
// 1
        //使用构造函数创建一个函数对象
        //---- 我们在实际开发中很少使用构造函数来创建一个函数对象
        var fun=new Function();
        console.log(fun);           //打印出函数的结构
        console.log(typeof fun);  //function

        //可以将要封装的代码以字符串的形式传递给构造函数
        var fun1=new Function("console.log('Hello 这是我的第一个函数');");
        console.log(fun1);   //打印出函数的结构里包含有js输出的语句

        //封装到函数中的代码不会立即执行
        //函数中的代码会在函数调用的时候执行
        //调用函数 语法:函数对象()
        //当调用函数时，函数中封装的代码会按照顺序执行
        fun1();
    
// 2
        /*
            使用函数声明 来创建一个对象(被[]包裹的数据为可写可不写选项)
                语法:
                    function 函数名([形参1，形参2...形参N]){
                        语句...
                    }
        */
       function fun2(){
           console.log("这是我的第二个函数~~~")
       };
       console.log(fun2);  //函数结构
       fun2();//这是我的第二个函数~~~

       /*
            使用 函数表达式 来创建一个函数
            var 函数名 = function([形参1，形参2...形参N]){
                语句...
            }
       */

       //匿名函数
    //    function(){
    //        console.log("这是函数中的代码");
    //    }

        var a=function(){
            console.log("这是函数中的代码");
        };
        console.log(a);  //函数结构
        a();  //"这是函数中的代码"
    </script>
</head>
<body>
    
</body>
</html>

JavaScript知识库最新文章

ES6的相关知识点

react 函数式组件 & react其他一些总结

Vue基础超详细

前端JS也可以连点成线（Vue中运用 AntVG6）

Vue事件处理的基本使用

Vue后台项目的记录（一）

前后端分离vue跨域，devServer配置proxy代理

TypeScript

初识vuex

vue项目安装包指令收集

加:2021-12-23 15:40:27 更:2021-12-23 15:43:09

360图书馆购物三丰科技阅读网日历万年历 2024年11日历

-2024/11/24 10:58:49-

图片自动播放器
↓图片自动播放器↓

TxT小说阅读器
↓语音阅读,小说下载,古典文学↓

一键清除垃圾
↓轻轻一点,清除系统垃圾↓

图片批量下载器
↓批量下载图片,美女图库↓

网站联系: qq:121756557 email:121756557@qq.com IT数码