JS的初步了解学习笔记

js学习笔记

一、初识js

1. 什么是js?

JavaScript是目前web开发中不可缺少的脚本语言，简称js。js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。

• 问：Js属于编程语言吗？
• 编程语言分类：前端语言：JS（浏览器上）…
  后端语言：Java C++ Python Go JS C# …

2. js与html和css有什么区别

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

3. js有什么作用

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

4. 作为一个前端开发工程师

明确：作为一个前端开发工程师 JS是核心 若总共占100分，那么js就站80分。

---

二、了解js

1.js的三种写法

1）行内写法

• 写在开始的标签中，当成开始标签的属性

<button onclick="console.log(888)">点我</button>     //nclick单击事件

2）内部写法

• js写在html文件中 学习时通常就写在script标签中，理论上js可以书写在页面的任意位置。

<script>

   alert("内嵌式")

</script>

3）内部写法

• 首先新建一个文件类型为.js的文件，然后在该文件中写js语句，通过script标签对引入到html页面中。

<script src="js文件路径地址"></script>

2.js的基本语法

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

3.js的注释方法

注释方法：
单行注释： //注释语句 快捷键ctrl+/
多行注释： /* 注释语句 */ 快捷键ctrl+shift+/
注意：多行注释相互不能嵌套使用，只能在多行注释里面使用单行注释！

4.js的变量

定义：就是存放数据的、内存可以存储任意数据
   变量名：内存空间的别名 对变量名的操作就是对内存空间的操作
   变量值：存储在内存空间中的状态（数据）

var a = 1;   // var 变量名称 = 存储的数据

• 变量命名规范:
     1)只能由字母、数字、_（下划线）、$（美元符号）组成。
     2)不能以数字开头。
     3)命名中不能出现-（js会理解成减号进行减法的操作），不能和关键字冲突。

什么是数据：
一个软件打开后，界面上有很多的数据，也叫状态，这个状态可以保存在
两个地方，一个是内存，一个是硬盘
项目运行起来，只有把数据加载到内存中，才使用使用数据。
内存中的数据，一断电，数据就没了，
还有一个地方，也可以保存数据，是硬盘，硬盘上的数据断电是不会丢失的。
内存空间地址：就是一块内存空间的地址，可以通过地址操作它对应空间中的数据，使用地址来操作非常不方便。

变量的分类

1.全局变量
2. 局部变量

全局变量和局部变量有什么特点：
1）全局变量可以在函数内部都能访问到
2）局部变量只能在函数内部访问到

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

4.js的数据类型

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

基本数据类型

包括： number string boolean undefiend null

a. number
数字, Number叫类，也叫构造器，也叫函数

var a = 110; 
var b = 3.14
console.log(typeof a)

注意点：
1）number是一个数据类型，这个数据类型对应的值有无数个。
2）在JS中number数据类型是不分整数和小数 都是number

• number类型包含整数和浮点数（浮点数数值必须包含一个小数点，且小数点后至少有一位数字）,浮点数会自动转换为整数，

let num = 1.00
console.log(num) // 输出：1，自动转换为了整数

• number类型包含整数和浮点数（浮点数数值必须包含一个小数点，且小数点后至少有一位数字）,浮点数会自动转换为整数，

let a = 0.1
let b = 0.2
console.log(a + b) // 输出：0.30000000000000004

3）可以通过typeof查看一个变量值的数据类型；(typeof是运算符 + - * / 都是运算符)

var b = 1;
console.log(typeof a);

4）最大值 和 最小值

console.log(Number.MAX_VALUE)
console.log(Number.MIN_VALU

5）number可以通过不同进制显示 进制 10进制 2进制 16进制 8进制

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

6）NaN Not a Number 不是一个数字 特点：涉及到任何关于NaN的操作，都会返回NaN，而且NaN不等于自身。
7）JS中不要对小数运算 要运算先转成整数 (得到的结果往往不对)

b. string
字符串 ‘’ “” ；JS中不分字符和字符串 都叫字符串

<script>
    var b="hello";
    let name = 'zhangsan';
    console.log(typeof b);
</script>

注意点：
1）在JS中 使用‘’ “”把字符串包起来 不包 JS会给它当成变量
2）string数据类型对应的数据有无数个
3）字符串有length属性，可以取得字符串的长度

let str = 'Hello world'
console.log(str.length)   // 输出：11

4）单引号不要嵌套单引号 双引号不要嵌套双引号  外单内双  外双内单

<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>

c. boolean
1）布尔类型只有两个值: true false
2）true 和 True 不一样的 JS是区分大小写的

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

c. undefined
只有一个值，即undefined，如果声明了一个变量，但是未给变量初始化值，那么这个变量的值就是undefined：

var name = 'zhangsan'
var age
  console.log(name) // 输出：zhangsan
  console.log(age) // undefined，因为声明了age，但是没有给初始化值

注意点：
什么时候会出现undeined?
答：1）一个变量没有赋值 它的值是undefiend 这个值的类型是undefiend；
  2）一个函数没有返回值，默认为undefiend。

引用数据类型

Object 对象
Array 数组
Function 函数

5.js的运算符

+叫运算符 123操作数 "abc"也叫操作数
一个运算符如果有两个操作数，这个运算符叫二元运算符，也叫二目运算符，还叫双目运算符: + - =
+是双元运算符 运算符你要保证两侧操作数的数据类型要一致
如果一个运算符只有一个操作数，这个运算符叫一元，单目运算符有：typeof ++

6.js的数据类型

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

a.字符串转化

var res = 123 + "abc";   // 123隐式转化成字符串
console.log(res);        // 123abc
console.log(typeof res); // string   (typeof可以查看数据类型)

b.布尔值转化

• 在JS中，下面的值转成false，其它值都转成true:
  0 -0 “” undefiend null
• string中，除了空串都是true

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

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

<script>
    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>

7.js的代码段

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

<!--<script>
    var a = 1;
    console.log(a);
</script>cs

8.js的执行

JS代码在执行时分两个阶段：
  1）预编译
  2）代码执行
每一个阶段做的事情是不一样的。

1）预编译： 目的是提升

• a. 把加var的变量进行提升, 变量声明会提升, 变量的赋值是不会提升
  提升到了代码段最前面
  b. 把使用function声明的函数进行提升 提升的是整个函数声明

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

    f();        使用function声明了一个函数,函数名是f,数值是{} 
    function f() {    //定义了一个函数f
        console.log("f...")
    }
</script>

2）代码的执行： 一行一行执行

9.js中的++在前和在后的区别

++在前和++在后，对于i的值来说，都是加1操作
1）++在前： ++在前，整体的值是一个新值
2）++在前： ++在后，整体的值是一个旧值

    var i = 0;
    var r1 = i++;    // i本身是个值，加1；i++整体也有一个值
    var r2 = ++i;    // i本身是个值，加1；++i整体也有一个值
    console.log(i);  // 2
    console.log(r1); // ++在后，整体的值是一个旧值  0
    console.log(r2); // ++在前，整体的值是一个新值  2

例子：

<!--<script>
    console.log(a);          // und
    console.log(b);          // und
    for (var a=1; a<2; a++){
        for(var b=1; b<2; b++){

        }
    }
    console.log(a);          // 2
    console.log(b);          // 2
</script>-->

---

三、初始执行上下文

为了表示不同的运行环境，有个执行上下文，Execution Context，下面简称EC

可以把EC栈比作杯子每产生一个EC就会放到杯子中，然后在杯子中放鸡蛋，先放进去的后出来。

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

1）全局执行上下文：

全局代码在执行时时，就会产生全局变量，这全局的数据会存储到一个VO的区域，VO为与EC(G)中；VO用于存储全局中加var的变量和加function的

a. 在执行全局代码前将window确定为全局执行上下文
b.对全局数据进行预处理

• var定义的全局变量==>undefined,添加为window的属性
• function声明的全局函数==>赋值，
• this===>赋值(window)
  c.开始执行全局代码

2）局部执行上下文：函数代码在执行时，就会产生局部的EC。调用一个函数就产生一个EC，调用100个函数，就产生100个EC。

EC（f）函数执行上下文：EC（f）中有个存储数据的活动对象AO，存储局部加var的或者加function的局部数据。当函数执行完毕，如果没有形成闭包，则就出栈销毁。

---

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

a）在全局代码中，加var会提升，没有var的不会提升。

console.log(a);
a = 110;       // a is not defined

b）不管加没加var的全局变量，都会作为window的属性

var a = 1;
b = 2;
console.log(window.a)
console.log(window.b)

c）没有加var的变量，只能作为全局变量，只要是全局变量，肯定是window的属性

function f() {
    a = 666;
}
f()
console.log(window.a)

d）加var的局部变量，不会作为window的属性

function f() {
    var a = 666;
}
f()
console.log(a)
console.log(window.a) // undefined（访问一个对象上不存在的属性，结果就是und)

例子：

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

解释图：

---

三、了解函数

函数定义: f叫函数名 , ()是函数特有的标识 , {} 叫函数体
定义 = 声明 + 赋值

**函数调用：**用函数时，就会把函数体中的代码都执行了

function f() {
    console.log("hello")
    console.log("js")
    console.log("vue")
}
f();    //调

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

function f() {
    return 666;
}
var a = f();      // 函数调用
console.log(a);
console.log(f()); // f()得到的就是函数的返回值

一个函数如果没有返回值，默认返回undefiend

function f(){
}
console.log(f());     // undefined

形参就是函数内部的局部变量,函数调用的过程就是实参向形参赋值的过程

function f(a,b) {       // a b叫形式参数  形参
        return a+b;
    }
var r = f(1,2);         // 1 2叫实际参数(实参), 函数调用的过程就是实参向形参赋值的过程
console.log(r);

数据的存储：内存分堆内存和栈内存
在JS中，基本数据类型存储在栈中,栈中存储数据，执行代码。
引用数据类型存储在堆中，堆只存储数据。

例子1：

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

解释图：

例子2：

<script>
    function f(a) {
        console.log(a)     // 111
    }
    f(111);
    console.log(a);        // a is not defiend
</script>

解释图：
例子3：

<script>
    var a = 1;
    var obj = { name: "wangcai" };
    function f() {
        var a2 = a;
        obj2 = obj;
        a2 = a;
        obj.name = "xiaoqiang"
    }
    f();
    console.log(a);
    console.log(obj);
</script>

结果展示：

解释图：

赋值：都是把栈空间的数据拿来赋值给别人，一定是栈空间的数据，不是堆空间的数据

赋值运算符：整体会是个值，是右值
a=b=c=1;考虑是可以从后向前考虑，c=1,“c=1”整体也是个值，为1；然后又把“c=1”整体的值1赋值给了b,以此类推。但是在计算机中是同时进行的。

例子：

<script>
    var a = { n: 110 };
    var b = a;
    b.m = b = { n: 330 };   
    console.log(a);
    console.log(b);
<script>

结果展示：

解释图：
b.m = b = { n: 330 }; 此时b={n:330},但是b={n:330}整体又是个值是{n:330}，赋值给了b.m，则b.m={n;330},在计算机中这些都是同步进行

四、let变量和const变量

let变量:
1）let声明的变量没有提升
2）let配合{}可以形成块级作用域，let+{}形成的块级作用域，只能在{}中被访问到，出了块就不可以了

<script>
        if (true) {
            var a = 110;
            let b = 666;
        }
        console.log(a);
        console.log(b);
    </script>

结果展示：只能显示a,因为b在{}外，无法访问到，b则报错

<script>
        if (true) {
            var a = 110;
            let b = 666;
            console.log(b);
        }
        console.log(a);
    </script>

结果展示：b在{}块内，因此可以访问达到

3）使用let声明的变量不会挂载到GO上

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

结果展示：undefined

4）let不能重复声明

<script>
    let a=1;
    let a=2;
    console.log(a);
</script>

结果展示：报错

const变量:
1）声明的变量没有提升
2）配合{}可以形成块级作用域
3）使用let声明的变量不会挂载到GO上
4）不能重复声明
5）在声明常量时必须赋值

---

练习题
例1：

• !是取反操作，!false意思就是对的，
  !123,!“hello” 隐形类型转化

<script>
        var a = 1;
        function b() {
            if (!a) {
                var a = 2;
            }
            console.log(a)
        }
        b();       
</script> 

结果展示：

例2:

• 在js中，变量名只要提升过一次后，就不再啊提升第二次。

<script>
    fn();
    function fn() { console.log(1); }
    fn();
    function fn() { console.log(2); }
    fn();
    var fn = function () { console.log(3); }
    fn();
    function fn() { console.log(4); }
    fn();
    function fn() { console.log(5); }
    fn();
</script>

结果展示:

例3:

<script>
    var i = 5;
    function fn(i) {
        return function (n) {
            console.log(n+(++i));   
        }
    }
    var f=fn(1); 
    f(2);     //n=2,i=1,++i为一个整体，是新值为2，此时EC(fn)中i=2;
    fn(3)(4);   //开辟新的EC（fn(3)),i=3，然后赋值n=4,++i为新值前面的i从3变为4；执行完出栈销毁
    fn(5)(6);
    f(7);      
    //n=7,找i,,自己没有，去前面的EC找，i=2,++i为一体，是新值为3，此时EC(fn)中i由2变为3;
    console.log(i);   //前面执行完出栈，直接到EC(G)中找，i=5
</script>

结果展示：

例4:

• 闭包:因为还被调用,就形成了一个不会释放的空间,称为闭包。
  好处是延长了一个局部变量的生命周期
  缺点会造成内存的泄露

<script>
    var i = 0;
    function A() {
        var i = 10;
        function x() {
            console.log(i);
        }
        return x;       //返回了函数x
    }
    var y = A();        //因此此时y的地址为。".log(i)"  此时形成了闭包。
    y();                 
    function B() {
        var i = 20;
        y();
    }
    B(); 
</script> 

结果展示：