数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    1.分类
        基本(值)类型
            -String:任意字符串
            -Number:任意的数字
            -Boolean:true/false
            -Undefined:undefined
            -Null:null
        对象(引用)类型
            -Object:任意对象
            -Function:一种特别的对象(可以执行)
            -Array:一种特别的对象(数值下标,内部数据是有序的)
    2.判断
        typeof:
            可以判断:undefined/数值/字符串/布尔值/function
            不能判断:null与object object和array
        instanceof:
            判断对象的具体类型
        ===:
            可以判断:undefined/null

    -->
<script type="text/javascript">
    //1.基本
    // typeof返回数据类型的字符串表达
    var a
    console.log(a,typeof a,typeof a==='undefined',a===undefined)//undefined 'undefined' true true
    console.log(undefined==='undefined')
    a=4
    console.log(typeof a==='number')
    a='atguigu'
    console.log(typeof a==='string')
    a=true
    console.log(typeof a==='boolean')
    a=null
    console.log(typeof a)
    //2.对象
    var b1={
        b2:[1,'abc',console.log],
        b3:function (){
            console.log('b3')
        }
    }
    console.log(b1 instanceof Object,b1 instanceof Array)//true false
    console.log(b1.b2 instanceof Array,b1.b2 instanceof Object)//true true
    console.log(b1.b3 instanceof Function,b1,b3 instanceof Object)//true true
    console.log(typeof  b1.b2,'-------')//'object'
    console.log(typeof b1.b3==='function')//true
    console.log(typeof b1.b2[2]==='function')//true
    /*
    var obj={
        name:'Tom',
        age:12
    }
    function test(){
        var a = 3
    }
    var arr=[3,'abc']
    arr[1]

     */
</script>
</body>
</html>

相关问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    1.undefined和null的区别?
        -undefined代表定义未赋值
        -null定义并赋值,只是值为null

    2.什么时候给变量赋值为null?
        -初始赋值,表明将要赋值为对象
        -结束前,让对象称为垃圾对象(被垃圾回收器回收)

    3.严格区别变量类型与数据类型
        -数据的类型
            基本类型
            对象类型
        -变量的类型(变量内存值的类型)
            基本类型:保存就是基本类型数据
            引用类型:保存的是地址值
-->
<script type="text/javascript">

    //实例:实例对象
    //类型:类型对象
    function Person(name,age){//构造函数 类型
        this.name=name
        this.age=age
    }
    var p=new Person('tom',12)//根据类型创建的实例对象
   // Person('jack',12)

    //1.undefined和null的区别?
    var a
    console.log(a)//undefined
    a=null
    console.log(a)//null

    //2.什么时候给变量赋值为null?
    var b=null //初始赋值为null,表明将要赋值为对象
    //确定对象就赋值
    b=['atguigu',12]
    //最后
    b=null//让b指向的对象成为垃圾对象(被垃圾回收器回收)
    //b=2
    //3.严格区别变量类型与数据类型
    var c=function (){

    }
    console.log(typeof c)//'function'
</script>
</body>
</html>

数据 变量 内存

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    1.什么是数据?
        -存储在内存中代表特定信息的‘东东’,本质上是0101....
        -数据的特点:可传递,可运算
        -一切皆数据
        -内存中所有操作的目标:数据
            算术运算
            逻辑运算
            赋值运算
            运行函数
    2.什么是内存?
        -内存条通电以后产生的可存储数据的空间(临时的)
        -内存产生和死亡:内存条(电路板)==>通电==>产生内存空间==>存储数据==>处理数据==>断电==>内存空间和数据都消失
        -一块小内存的2个数据:
            内部存储的数据(一般数据/地址数据)
            内存地址值数据
        -分配内存:声明变量和函数或创建对象时,JS引擎会自动为此分配一定大小的内存来存放对应的数据
        -释放内存:清空内存中的数据,标识内存可以再分配使用(内存不释放就不能复用)
            -自动释放:栈空间的局部变量
            -垃圾回调器回调:堆空间的垃圾对象
        -内存分类:
            栈:全局变量/局部变量(空间较小)
            堆:对象(空间较大)
    3.什么是变量?
        -可变化的量,由变量名和变量值组成
        -每个变量都对应的一块小内存,变量名用来查找对应的内存,变量值就是内存中保存的数据
    4.内存,数据,变量三者之间的关系?
        -内存用来存储数据的空间
        -变量是内存的标识
-->
<script type="text/javascript">
   // 1.什么是数据?
   var age=18
   // 2.什么是内存?
   console.log(age)

   var obj={name:'Tom'}
   console.log(obj.name)

   function fn(){
       var obj={name:'Tom'}
   }

   var a=3
   var b=a+2

</script>
</body>
</html>

数据 变量 内存相关问题

相关问题(1)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    问题: var a=xxx,a内存中到底保存的是什么?
        -xxx是基本数据,保存的就是这个数据
        -xxx是对象,保存的就是对象的地址值
        -xxx是一个变量,保存的xxx的内存内容(可能是基本数据,也可能是地址值)
-->
<script type="text/javascript">
    var a=3
    a=function (){

    }
    var b='abc'
    a=b
    b={}
    a=b
</script>
</body>
</html>

相关问题(2)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    关于引用变量赋值问题
        -两个引用变量指向同一个对象,通过一个变量修改对象内部数据,另一个变量看到的是修改之后的数据
        -两个引用变量指向同一个对象,其中一个引用变量指向另一个对象,另一个引用变量依然指向前一个对象


-->
<script type="text/javascript">
   /*
    var obj1={name:'Tom'}
    var obj2=obj1
    obj1.name='Jack'
    console.log(obj2.name)//'Jack'
    */
   var obj1={name:'Tom'}
   var obj2=obj1
   obj2.age=12
   console.log(obj1.age)//12
   function fn(obj){
       obj.name='A'
   }
   fn(obj1)
   console.log(obj2.name)//A

   var a={age:12}
   var b=a
   a={name:'BOB',age:13}
   b.age=14
   console.log(b.age,a.name,a.age)//14 BOB 13

   function fn2(obj){
       obj={age:15}
   }
   fn2(a)
   console.log(a.age)

</script>
</body>
</html>

相关问题(3)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    问题:在js调用函数时传递变量参数时,是值传递还是引用传递
        -理解1:都是值(基本/地址值)传递
        -理解2:可能是值传递,也可能是引用传递(地址值)
-->
<script type="text/javascript">
    var a=3
    function fn(a){
       a=a+1
    }
    fn(a)
    console.log(a)

    function fn2(obj){
        console.log(obj.name)
    }
    var obj={name:'Tom'}
    fn2(obj)
</script>
</body>
</html>

相关问题(4)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    问题:JS引擎如何管理内存
        1.内存生命周期
            -分配小内存空间,得到它的使用权
            -存储数据,可以反复进行操作
            -释放当前的小内存空间
        2.释放内存
            -局部变量:函数执行完自动释放
            -对象:成为垃圾对象==>垃圾回收器回收
-->
<script type="text/javascript">
    var a=3
    var obj={}
    obj=undefined

    function fn(){
        var b={}
    }
    fn()//b是自动释放的,b所指向的对象是在后面的某个时刻由垃圾回收器回收
</script>
</body>
</html>

对象(1)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    1.什么是对象?
        -多个数据的封装体
        -用来保存多个数据的容器
        -一个对象代表显示中的一个事物
    2.为什么要用对象?
        -统一管理多个数据
    3.对象的组成
        -属性:属性名(字符串)和属性值(任意类型)组成
        -方法:一种特别的属性(属性值是函数)
    4.如何访问对象内部数据?
        -.属性名:编码简单,有时不能用
        -['属性名']:编码麻烦,通用
-->
<script type="text/javascript">
    var p={
        name:'Tom',
        age:12,
        setName:function (name){
            this.name=name
        },
        setAge:function (age){
            this.age=age
        }
    }
    p.setName('Bob')
    p['setAge'](23)
    console.log(p.name,p['age'])
</script>
</body>
</html>

对象(2)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    问题:什么时候必须用['属性名']的方式?
        -1.属性名包含特殊字符:- 空格
        -2.属性名不确定
-->
<script type="text/javascript">
    var p={}
    //1.给p对象添加一个属性:content-type:text/json
    //p.content-type='text/json'//不能用
    p['content-type']='text/json'
    console.log(p['content-type'])

    //2.属性名不确定
    var propName='myAge'
    var value=18
    //p.propName=value//不能用
    p[propName]=value
    console.log(p[propName])
</script>
</body>
</html>

函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    1.什么是函数?
        -实现特定功能的n条语句的封装体
        -只有函数是可以执行的,其他类型的数据不能执行
    2.为什么要用函数?
        -提高代码复用
        -便于阅读交流
    3.如何定义函数?
        -函数声明
        -表达式
    4.如何调用(执行)函数?
        -test():直接调用
        -obj.test():通过对象调用
        -new test():new调用
        -test.call/apply(obj):临时让test称为obj的方法进行调用
-->
<script type="text/javascript">
    /*
    编写程序实现以下功能需求
        1.根据年龄输出对应的信息
        2.如果小于18,输出:未成年,再等等!
        3.如果大于60,输出:算了吧!
        4.其他,输出:刚好!
     */
    function showInfo(age){
       if(age<18){
           console.log('未成年,再等等!')
       } else if(age>60){
           console.log('算了吧!')
       }else{
           console.log('刚好!')
       }
    }

    showInfo(17)
    showInfo(20)
    showInfo(65)

    function fn1(){//函数声明
        console.log('fn1')
    }
    var fn2=function (){//表达式
        console.log('fn2')
    }
    fn1()
    fn2()

    var obj={}
    function test2(){
        this.xxx='atguigu'
    }
    //obj.test2()//不能直接,根本就没有
    test2.call(obj)//obj.test2()//可以让一个函数成为指定任意对象的方法进行调用
    console.log(obj.xxx)
</script>
</body>
</html>

回调函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="btn">测试点击事件</button>
<!--
    1.什么函数才是回调函数?
        -你定义的
        -你没有调
        -但他最终执行了
    2.常见的回调函数有哪些?
        -dom回调函数
        -定时器回调函数
        -ajax请求回调函数
        -生命周期回调函数
-->
<script type="text/javascript">
    document.getElementById('btn').onclick=function (){//dom事件回调函数
        alert(this.innerHTML)
    }
    //定时器
    //延时定时器
    //循环定时器
    setTimeout(function (){//定时器回调函数
        alert('到点了')
    },2000)
</script>
</body>
</html>

IIFE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    1.理解
        -全称:Immediately-Invoked Function Expression
    2.作用
        -隐藏实现
        -不会污染外部(全局)命名空间
-->
<script type="text/javascript">
    (function (){//匿名函数自调用
        var a=3
        console.log(a+3)
    })()
    var a=4
   console.log(a);

    (function (){
        var a=1
        function test(){
            console.log(++a)
        }
        window.$=function (){//向外暴露一个全局函数
            return{
                test:test
            }
        }
    })()
    $().test()//1.$是一个函数2.$执行后返回的是一个对象
</script>
</body>
</html>

函数中的this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    1.this是什么
        -任何函数本质上都是通过某个对象来调用的,如果没有直接指定就是window
        -所有函数内部都有一个变量this,它的值时调用函数的当前对象
    2.如何确定this的值
        -test():window
        -p.test():p
        -new test():新创建的对象
        -p.call(obj):obj
-->
<script type="text/javascript">
    function Person(color){
        //console.log(this)
        this.color=color;
        this.getColor=function (){
            //console.log(this)
            return this.color;
        };
        this.setColor=function (color){
            //console.log(this)
            this.color= color;
        };
    }
    Person("red");//this是谁 :window

    var p=new Person("yellow");//this是谁:p

    p.getColor();//this是谁:p

    var obj={}
    p.setColor.call(obj,"black");//this是谁:obj

    var test=p.setColor;
    test();//this是谁:window

    function fun1(){
        function fn2(){
            console.log(this);
        }
        fun2();//this是谁:window
    }
    fun1();
</script>
</body>
</html>

分号问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    1.js一条语句的后面可以不加分号
    2.是否加分号是编码风格问题,,欸有应该不应该,只有自己喜欢不喜欢
    3.在下面两种情况下不加分号会有问题
        -小括号开头的前一条语句
        -中括号开头的前一条语句
    4.解决办法:在行首加分号
    5.强有力的例子:vue.js库
    6.知乎热议:https://www.zhihu.com/question/20298345
-->
<script type="text/javascript">
    var a=3
    console.log(a)
</script>
</body>
</html>

快捷

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    File==>setting
-->
<script type="text/javascript">
    console.log(3)
    var arr=[1,3]
    for(var i=0;i<arr.length;i++){
       var item=arr[i]

    }
</script>
</body>
</html>

Q.E.D.