01-js基础概念

js基础知识

一、js概述

1.什么是js

JS:javascript，简称为JS。它是一门前端编程语言，js是前端开发工程师的核心，在其中占据很高的比例。

和html,css对比：
相同：html,css,js代码都可以在浏览器中运行， html，css，js它们的运行环境是浏览器
不同点：html，css不是编程语言，js是编程语言。  js的运行环境不只是浏览器，还可以在其它的环境中运行。



编程语言分类：
    前端语言：JS（浏览器上）...
    后端语言：Java C++ Python Go JS C# ...

只有合适的场景使用合适的语言。

2.js能做什么

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

二、js三种引用方式

js引用方式分为三种：内嵌式、外联式和行内式

1.内嵌式

把js写在html文件中，通常就写在script标签中

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

2.外联式

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

3.行内式

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

三、JS的基本语法

基本语法
1）JS是区分大小写 var a = 1; var A = 2;
2）忽略空白符（其中包括空格、换行、tab）
3）语句分号可加可不加
4）注释：单行注释 // 多行注释/* */ 注释是给程序员看的,注意注释的使用性以及正确性
5）标识符 和 关键字 var a = 110; var 关键字 a变量名标识符
6）…

四、JS中的变量

1.变量的分类

变量中的主要有两大分类：全局变量和局部变量

全局变量：“在函数外定义的变量”，即从定义变量的位置到本源文件结束都有效。

局部变量：“在函数内定义的变量”，即在一个函数内部定义的变量，bai只在du本函数范围内有效。

分界点：只要把变量写在函数里面就是局部变量，只要写在函数外面就是全局变量。

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

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

    if(true){
        var k = 123; // 全局变量 (因为没有在函数里面)
    }

    for(var i=0; i<10; i++){  // i全局变量 (因为没有在函数里面)
        var a = 666; // a是全局变量 (因为没有在函数里面)
    }
</script>

数据：一个软件打开后，界面上有很多的数据，也叫状态，这个状态可以保存在
两个地方，一个是内存，一个是硬盘
项目运行起来，只有把数据加载到内存中，才使用使用数据。

    内存中的数据，一断电，数据就没了，
    还有一个地方，也可以保存数据，是硬盘，硬盘上的数据断电是不会丢失的。
    内存空间地址：就是一块内存空间的地址，可以通过地址操作它对应空间中的数据，使用地址来操作非常不方便，指针。

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

2.变量的调用

全局变量可以在局部对象中被访问,但是局部对象不能在全局变量中被访问

<script>
    // 声明一个变量
    var a = 110;

    // 声明一个函数
    function f() {
        //在函数里面访问全局变量
        console.log(a); //110
        var b = 666;  // 局部变量

        console.log(b);   //666  函数内部是可以访问到局部变量
    }

    // 调用函数
    f();  // 一个函数没有调用相当于这个函数没有写

    // 在函数外面访问全局变量
    console.log(a);     //110
    console.log(b); //报错:b is not defined  函数外面是访问不了函数里面的变量
</script>

3.变量的声明

变量有单独声明,连续声明和不使用var声明

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

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

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

五、JS中的数据类型

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

1）基本数据的类型：基本数据类型存储在栈中
   number：数字， var a = 110; int a = 110;
   string：字符串 ，使用"",’'将字符串内容包裹起来。S中不分字符和字符串都叫字符串。
   boolean:布尔类型
   undefiend:没有值
   null 没有值
2）引用数据类型：引用数据类型存储在堆中
   object 对象
   array 数组
   function 函数 在JS中函数也是一种数据类型

1.JS中的number数据类型

1）number是一个数据类型，这个数据类型对应的值有无数个。
2）在JS中number数据类型是不分整数和小数 都是number
3）可以通过typeof查看一个变量值的数据类型,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)
    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.JS中的string数据类型

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

<script>
    var addrss = beijing; //报错 beijing is not defined， 因为没有加引号
    console.log(addrss);

    var a = "hello "abc"js"      //报错 Uncaught SyntaxError: Unexpected identifier 语法格式不对

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

</script>

3.JS中的boolean数据类型

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

<script>
    var b = true;
    console.log(b);
    console.log(typeof b);
</script

4.JS中的undefined数据类型

undefiend是一个数据类型，这种数据类型对应的值是undefiend。当一个变量没有赋值，它的值是undefiend，这个值的类型是undefiend。

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

六、JS中的数据类型转化

数据类型转化：
  隐式类型转化：静悄悄地，不知不觉地就进行了类型转化
  强制类型转化：写代码进行转化

前提：在JS中，运算符两侧需要保存数据类型一致，如果不一致，JS解释器会帮你把一个数据类型转成另一个数据类型。

<script>
    //隐式类型转化
    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))     //3
    console.log(parseFloat("3.14abc"))  //3.14
    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代码在执行时分两个阶段

JS代码在执行时分两个阶段：
1）预编译
2）代码执行

1.预编译

预编译： 提升（将需要提升的代码，放在代码段的最前面，首先执行）

一个script标签就是一个代码段。JS代码在执行时，是一个代码段一个代码段执行。

  1）把加var的变量进行提升，变量声明会提升，变量的赋值不会提升

定义 = 声明 + 赋值

例子：var a = 4;
定义：var a = 4;
声明：var a;
赋值： a = 4;

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

<script>
     console.log(a);  // undefined  变量提升了声明
     var a = 110;
     console.log(a); // 110    变量进行了赋值

    f();    //f... 因为函数整体进行了提升
    // 使用function声明了一个函数
    // 函数名是f  函数值是{}
    // 定义了一个函数f
    function f() {
        console.log("f...")
    }
</script>

小案例：

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

    console.log(i); // undefined 因为i是全局变量，预编译时，对i的声明进行了提升
    for (var i=0; i<3; i++){ }
    console.log(i);     // 3

    // var i=0; 全局变量
    for(var i=0; i<3; i++){
        console.log(i);    //0 1 2 
    }

    // ++在前和++在后，对于b的值来说，都是加1操作
    // 整体也有一个值 此时++在前和++在后就不一样
     var b = 0;
     var r1 = b++; // i++整体也有一个值
     var r2 = ++b;  // ++i整体也有一个值
     console.log(b); // 2 
     console.log(r1); //0  ++在后，整体的值是一个旧值  0
     console.log(r2); //2  ++在前，整体的值是一个新值
</script>-->

2.执行

代码的执行：
一行一行执行

八、初步了解执行上下文（ Execute Context）

1）执行上下文（ Execute Context）:EC

EC的作用：给代码提供数据

代码分两类：
1）全局代码：函数外面的代码叫全局代码
2）函数代码：一个函数就是一个局部代码

2）全局执行上下文:全局代码在执行时时，就会产生全局的EC。 EG(G)
3）局部执行上下文:函数代码在执行时，就会产生局部的EC。调用多少个函数就产生多少个EC。

EC栈：
    栈：杯子
    每产生一个EC就会放到杯子中，说白了，就是杯子中放鸡蛋。
    栈：先放进去的后出来

案例：

<script>
    window.alert("hello js")；

    var n = 100;
    console.log(n);
    // window是一个全局对象  只要是一个全局变量或全局函数都会挂载到window上
    console.log(window.n);

    m = 200;  // 全局变量
    console.log(m)
    console.log(x)
</script>

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

1）在全局代码中，加var会提升，没有var的不会提升
2）不管加没加var的全局变量，都会作为window的属性
3）没有加var的变量，只能作为全局变量，只要是全局变量，肯定是window的属性
4）加var的局部变量，不会作为window的属性

<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)   //1
    console.log(window.b)   //2

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

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

十、有关EC(G),VO,GO的例题

案例01

1.代码

<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中都没有*/

</script>

2.运行结果

3.原理

解析：函数编译时，var n;发生提升,然后n进行初始化，存储在EC(G)和GO里面，第一个输出结果为100。因为m没有使用var进行定义，所以，var只存在GO里面,第二个输入结果为200。x没有进行定义，直接输出x会发生报错，提示x is not defined（x没有定义）。最终输出结果为：100 200 x is not defined。

案例02

1.代码

<script>
    console.log(a,b); 
    if(true){
        // 看到var就提升
        var a = 1;
    }else{
        // 看到var就提升
        var b = 2;
    }
    console.log(a,b); 
</script>

2.运行结果

3.原理

解析：因为a，b都在函数外面，所以均为全局变量，代码进行编译时，将a和b的声明提升，不提升变量赋值，第一行输出结果为 undefined undefined。if条件为真值，所以将1赋值为a，不执行else里面的代码。最终执行结果为undefined undefined 1 undefined。

案例03

1.代码

<script>
var a = 1;
    var b = "hello";
    function f()
    {
        console.log("f...")
    }
    window.f();
    // 数组
    var arr = [1,2,3];
</script>

2.原理

解析：基本数据类型存储在栈中，函数引用类型存储在堆中。

案例04

1.代码

<script>
    function f(a) {
        // a是函数内部的局部变量
        console.log(a) // 111
    }
    f(111); // 函数调用的过程就是给形参赋值的过程
    console.log(a); // a is not defiend
</script>

2.运行结果

3.原理

解析：将实参赋值给形参，即将111传给a，输出a的数值111。因为a是局部变量，所以找不到a的值最终会报错。

十、了解函数

函数是任何编程语言都有概念。
在JS中定义函数有两种形式： 函数定义， 函数表达式。

函数定义 f叫函数名 ()是函数特有的标识 {} 叫函数体

函数调用:函数名+（参数），参数值可有可无。调用函数时，就会把函数体中的代码都执行了。

函数的返回值是返回到了函数调用处

给函数传递数据。形参就是函数内部的局部变量。函数调用的过程就是实参向形参赋值的过程。