JS简单所学

JS

JavaScript 是一种轻量级的编程语言。

与HTML，CSS相比

• 相同点：代码都可以在浏览器上运行、运行环境是浏览器
• 不同点：HTML，CSS不叫编程语言，JS是编程语言，其运行环境不只是浏览器，还可以在其他环境中运行

---

一、JS能做什么：

    1）开发网站
    2）开发app
    3）小程序
    4）游戏开发 小程序游戏  网页游戏
    5）写后端 node.js
    6）嵌入式  c
    7）区块链
    ....

---

二、JS的基本语法

	1）JS是区分大小写  var a = 1;  var A = 2;
    2）忽略空白符（空格  换行  tab）
    3）语句分号可加可不加
    4）注释   //单行注释     /*多行注释*/     注释是给我们程序猿看的  
    5）标识符 和 关键字  var a = 110;   var 关键字   a变量名标识符
    6）......

---

三、JS的三种写法

1）把js写在html文件中 学习时通常就写在script标签中(内部写法)

<script>
	var a = 110;
	console.log(a)
</script>

2）把JS写在JS文件中，然后在html文件中通过script标签引入 写项目时通常会把JS写在一个单独的文件中（外部写法）

<script src="./out.js"></script>-->

3）把JS代码写在开始标签中，当成开始标签的属性（行内写法）

 <button onclick="console.log(888)">点我</button>

---

四、JS中的变量

变量：变量就是内存中的一个空间。
变量名：内存空间的别名  对变量名 的操作就是对内存空间的操作
变量值：存储在内存空间中的状态（数据

在JS中，如何定义变量：
    var a = 110;  // 定义了一个变量  变量的名是a  变量的值是110;

变量的分类：

    1）全局变量   （只要写在函数外面就是全局变量）
    2）局部变量   （只要把变量写在函数里面就是局部变量）
    
    分界点是：函数

全局变量和局部变量有什么特点：

        1）全局变量可以在函数内部都能访问到
        2）局部变量只能在函数内部访问到

举一些例子来简单认识一下

<script>
    // 全局变量
    var address = "郑州";

    // 定义函数 函数必须通过函数进行声明
    function f() {
        // 函数内部的变量叫局部变量
        var m = 111; // 局部变量
    }

    if(true){
        var k = 123; // 全局变量
    }

    for(var i=0; i<10; i++){  // i全局变量
        var o = 666; // o是全局变量
    }
</script>

<script>
    // 声明一个变量
    var a = 110;
    // 声明一个函数
    function f() {
        //在函数里面访问全局变量
        console.log(a);
        var b = 666;  // 局部变量
        console.log(b);   // 函数内部是可以访问到局部变量
    }
    // 调用函数
    f()  // 一个函数没有调用相当于这个函数没有写
    // 在函数外面访问全局变量
    console.log(a);
    console.log(b); //  b is not defined  函数外面是访问不了函数里面的变量
</script>

<script>
    // 单独声明
    var name = "xiaoqiang";
    var age = 110;
    var address = "北京";

    // 连续声明
    var m = 1, n = 2;

    // 不使用var
    k = 123; // 如果没有加var 此时这个变量只能是全局变量 不管你是写在函数内还是写在函数外
</script>

---

五、JS中的数据类型

   为了更加合理使用内存空间，基本上所有的编程语言中都提出数据类型的概念，研究针对不同的数据，分配不同的空间。

基本数据的类型：（存储在栈中）

        number     数字  var a = 110;  int a = 110;
        string     字符串 ”“  ‘’  JS中不分字符和字符串 都叫字符串
        boolean    布尔类型 true false  (true与True不一样)
        undefiend  没有值
        null       没有值

引用数据类型： （存储在堆中）

        object   对象   var obj = {name:"wc",age:123}  conosle.log(obj.name)
            array    数组  var arr = ["a","b","c"]  console.log(arr[0])
            function 函数(在JS中函数也是一种数据类型)   var f = function (){ var i=0; var j=1;}

1.number数据类型

1）number是一个数据类型，这个数据类型对应的值有无数个
2）在JS中number数据类型是不分整数和小数 都是number
3）可以通过typeof查看一个变量值的数据类型
4）最大值 和 最小值
5）number可以通过不同进制显示    （10进制   2进制  16进制  8进制）
6）NaN   （Not a Number 不是一个数字）
7）JS中不要对小数运算  要运算先转成整数   

举例：

<script>
    var a = 110; // 110是一个数据  这个数据的类型是number
    var b = 3.14; // 3.14也一个number数据
    console.log(a);
    console.log(typeof a)  //输出a的数据类型  typeof是运算符 + - * / 都是运算符
    console.log(Number.MAX_VALUE)  //最大值
    console.log(Number.MIN_VALUE)  //最小值

    var c = 123; // 123是10进制
    var d = 0x123; // 16进制  0~f  以零x打头
    console.log(d);  // 291
    var e = 0123; // 8进制  以零打头
    console.log(e);  // 83

    console.log("abc"*100) // NaN

    // == 是运算符  判断两则的数是否相等  得到结果是true或false  1>2
    console.log((1-0.7) == 0.3)  // false
</script>

2.string数据类型

1）在JS中 使用'' ""把字符串包起来  不包 JS会给它当成变量
2）单引号不要嵌套单引号 双引号不要嵌套双引号  外单内双  外双内单
3）string数据类型对应的数据有无数个

举例：

<script>
    // var addrss = beijing; // beijing is not defined
    // console.log(addrss);
    // var a = "hello "abc"js"

    var a = "hello 'abc' js"
    console.log(a);

</script>

3.boolean数据类型

1）boolean数据类型对应的值就两个  true  false
2）true 和 True  不一样的  JS是区分大小写的	

4.undefined数据类型

1）undefiend是一个数据类型，这种数据类型对应的值是undefiend
2）什么时候会出现undeined?
    答：一个变量没有赋值  它的值是undefiend  这个值的类型是undefiend

举例：

<script>
    var a;
    console.log(a);  // undefined 值
    console.log(typeof a);  // undefined 是类型
</script>

---

五、JS中的数据类型转化

隐式类型转化：静悄悄地，不知不觉地就进行了类型转化

强制类型转化：写代码进行转化

举例：

<script>
    // 隐式类型转化
    // + 叫运算符  123操作数   "abc"也叫操作数
    // 一个运算符如果有两个操作数，这个运算符叫二元运算符，也叫二目运算符，还叫双目运算符
    // +  -  =
    // 如果一个运算符只有一个操作数，这个运算符叫一元，单目运算符
    // 有：typeof ++ &#45;&#45;

    // +是双元运算符   运算符你要保证两侧操作数的数据类型要一致
    var res = 123 + "abc";  // 123隐式转化成字符串
    console.log(res);  // 123abc
    console.log(typeof res);  // string

    var isMerry = true;
    if(isMerry){  // 语句
        // 如果if后面的（）里面是true 执行{}里面的代码
        console.log("结婚了....")
    }else{
        console.log("没有结婚....")
    }

    var isLove = "";
    // if后面的小（）里面要么放true 要么放false
    // if后面小（）里面放了一非布尔类型的值，也会进行隐式类型转化
    if(isLove){
        console.log("是真爱");
    }else{
        console.log("是骗子");
    }

    //1>2  没有发生类型转化  > 运算符  关系运算符 返回的就是布尔值
    if(1>2){}

    // 强制类型转化
    console.log(parseInt(3.14)); // 把小数转成整数
    console.log(parseInt("3.14abc")); // 尝试把小数或非数字转成整数
    console.log(parseFloat(3))
    console.log(parseFloat("3.14abc"))
    console.log(Number("abc123"))  // NaN
    console.log(Number("123abc"))  // NaN
    console.log(Number("123"))  // 123
    console.log(String(123456))  // 123456
</script>

注：

在JS中，下面的值转成false，其它值都转成true:
    0  -0
    ""
    undefiend
    null

---

六、JS代码在执行时分两个阶段

1）预编译
2）代码执行

定义变量和声明变量：
    定义变量：var a = 110;   定义 = 声明+赋值
    声明变量：var a = 110;  说的声明仅仅是说var a   后面是赋值

1.预编译 （提升）

1）把加var的变量进行提升  变量声明会提升  变量的赋值是不会提升提升到了代码段最前面

2）把使用function声明的函数进行提升  提升的是整个函数

提升：

全局代码中： 提升到代码段最前面
      加var的全局变量  仅仅提升是声明
      加functon的全局函数  提升的是定义   定义 = 声明+赋值
函数内部：
      加var的也会提升，提升到函数体的最前面

2.代码的执行

一行一行执行,代码执行才会产生EC

举例：

<script>
    console.log(a);  // undefined
    var a = 110;
    console.log(a); // 110
    
    f();
    // 使用function声明了一个函数  函数名是f  函数值是{}
    function f() {
        console.log("f...")
    }
</script>

<script>
    console.log(g); // undefined
    g(); // undefied()  g is not a function

    // 函数也是数据  数据类型是引用数据类型object
    // 把数据赋值给变量g
    var g = function () {  // 这里提升的是声明 g     = 赋值运算符  先看后面
        console.log("g...")
    }

    function f() {
    }
    f(); // 函数调用  函数名+（）
</script>

(++)注：

++在前和++在后，对于i的值来说，都是加1操作

整体也有一个值 此时++在前和++在后就不一样

<script>
	var i = 0;
    var r1 = i++; // i++整体也有一个值
    var r2 = ++i;  // ++i整体也有一个值
    console.log(i); // 2
    console.log(r1); // ++在后，整体的值是一个旧值  0
    console.log(r2); // ++在前，整体的值是一个新值  2
</script>

---

七、初步了解执行上下文

执行上下文（ Execute Context）

代码分两类：
    全局代码：函数外面的代码叫全局代码
    函数代码：一个函数就是一个局部代码
    
ECStack 执行上下文栈
EC(G) 全局执行上下文 存储全局的加var  加function的数据存储在VO中
         VO 变量对象   存储的全局的加var 或 加function
EC(f) 函数执行上下文 存储局部的加var 或 加funciton的局部数据
        AO 活动对象  存储局部的加var 或 加function的局部数据
GO 全局对象
      默认情况下，里面就存储了很多东西
         全局的数据，加Var的全局数据，加functon的全局数据，不加var的变量都会存储到GO中的

来看几个小题（掌握EC（G），VO，GO）

<script>
    /*var n = 100;
    console.log(n);  // 100
    console.log(window.n);  // 100
    m = 200;  // 只会放到GO中
    console.log(m);  // 从GO拿  写全 window.m  window省略了
    console.log(x);  // GO和VO中都没有*/
---------

    /*console.log(a);  // a is not defined
    function f() {
        console.log(a); // und
        // 只要加var  变量肯定会提升
        // 加var的局部变量只会提升到函数内部最前面的
        var a = 1;
        console.log(a); // 1
    }
    f();*/
    
----------
    /*console.log(a,b); // und und
    if(true){
        // 看到var就提升
        var a = 1;
    }else{
        // 看到var就提升
        var b = 2;
    }
    console.log(a,b); // 1 und */
----------

    /*// 对象  是集合 放一堆的数据  变量里放一个数据
    var obj = {
        name:"wangcai",
        age:100
    }
    // in
    console.log("name" in obj); // in是一个运算符 用来判断一个对象有没有一个属性*/
-----------

    /*var a;
    console.log(a);  // und
    if("a" in window){
        a = 110;
    }
    console.log(a); // 110 */
-----------

    /*console.log(a);  // und
    if("a" in window){
        // 此处的a是全局变量  加var了 放到VO中一份 还会放到GO中的一份
        var a = 110;
    }
    console.log(a); // 110  */
</script>

---

八、其他：

加var的变量和没有加var的变量的区别

举例来说明：

<script>
    // 1）在全局代码中，加var会提升，没有var的不会提升。
    console.log(a);
    a = 110;  // a is not defined

    // 2）不管加没加var的全局变量，都会作为window的属性
    var a = 1;
    b = 2;
    console.log(window.a)
    console.log(window.b)

    // 3）没有加var的变量，只能作为全局变量，只要是全局变量，肯定是window的属性
    function f() {
        a = 666;
    }
    f()
    console.log(window.a)

    // 4）加var的局部变量，不会作为window的属性
    function f() {
        var a = 666;
    }
    f()
    console.log(a)
    // 访问一个对象上不存在的属性，结果就是und
    console.log(window.a) // undefined
</script>

let和const声明变量

<script>
	// 用法：声明变量使用let  声明常量使用const
	
    // 1）let声明的变量没有提升(let声明的变量也提升，仅仅是没有初始化)
    console.log(a);
    let a = 110;  //  Cannot access 'a' before initialization

    // 2）let 配合 {} 也可以形成块级作用域
    if(true){
        var a = 110; // 全局变量
        // b只能在当前的{}中被访问到 出了块就访问不了
        let b = 666; // let + {} 形成块级作用域
    }
    console.log(b); // b is not defined

    // 3）使用let声明的变量不会挂载到GO上
    let a = 110;
    console.log(window.a); // undefined 访问一个对象上没有属性，得到的就是und

    // 4）使用let不能重复声明
    let a = 1;
    let a = 2;
    console.log(a); // Identifier 'a' has already been declared
    
    
    //前四点const与let相同
    // 5)const在声明常量时，必须赋值
    const a;
    a = 1;
    console.log(a)
</script>