JavaScript/JS 基础知识点

「爱情、让人受尽委屈。」 2023-01-09 14:17 148阅读 0赞

### 目录 ###

*   *   *  JavaScript基础语法
         *  初识使用JavaScript
         *  其他使用JavaScript的方法
 *  变量
 *   *   *  什么是变量
         *  变量的作用（为啥要有变量？）
         *  变量的定义
         *  变量定义规则
         *  变量的类型（容器中的内容）

### JavaScript基础语法 ###

### 初识使用JavaScript ###

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8" />
            <script src=""></script>
        </head>
        <body>
            <script>
                // 这里是输出
                alert('我叫闫海静!');
                console.log('大家都这样说！!');
                document.write('我比李赔钱要好看');
            </script>
        </body>
    </html>

*  `<script>`里面放置的是JavaScript的代码。
 *  注释符
    
        // 单行注释符 ctrl + /
        /* 块状注释符，多行注释符 */ alt + shift + a
    
    作用：
    
    1.  写程序说明。
    2.  有些代码暂时不用，先注释起来。
    3.  调试代码。
 *  输出内容的小工具：
    
     *  `alert()`，以弹出框的形式输出内容。
     *  `console.log()`，以控制台日志形式打印内容。
        
        我们在后面的学习过程中经常要看控制台。
     *  `document.write()`，将内容显示在页面上。
 *  ES中每一条语句都以分号结尾。分号可以省略，如果省略则由解析器确定语句的结尾。
    
    但是建议一直加上。
 *  关于程序中的空白（空格、换行、空行）
    
    这些空白都会忽略。有空白就是为了增加程序的可读性的。

\_\_注意：\_\_JavaScript中的一切都区分大小写（变量、函数）。

VS-CODE 关闭提示：

// //关闭自动提示
    // "editor.quickSuggestions": false,
    // "editor.suggestOnTriggerCharacters": false,
    // "editor.parameterHints": false,
    // "editor.wordBasedSuggestions": false,
    // "editor.snippetSuggestions": "none",
    // "files.autoSave": "off",
    // "editor.autoClosingBrackets": "never",
    // "editor.autoClosingOvertype": "never",
    // "editor.autoClosingQuotes": "never",
    // "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
    // "html.autoClosingTags": false,
    // "liveServer.settings.donotShowInfoMsg": true,

### 其他使用JavaScript的方法 ###

*  行内写法
    
     *  局限性很大，只能针对事件进行添加，用的少。
     *  代码分离性最差，可读性不强。
 *  页面嵌入JavaScript代码
    
     *  在body的结束标签处写上script标签然后写js代码。
     *  在教学和实际项目中用的最多。
    
    > 内嵌式：
    > 
    > 如果把script代码放head里面，那么浏览器会先执行JavaScript代码再执行body里面的代码。
    > 
    > 如果把script代码放body的底部，那么浏览器会先执行body上面的内容，然后再执行JavaScript的内容。
 *  包含外部的javascript代码
    
    通过`<script>`标签来包含外部的javascript文件。
    
    src属性是必须的，它的值指向的是js文件所在的位置。
    
    只要引入的是输出javascript代码的文件就没有问题。

# 变量 #

### 什么是变量 ###

可以变的量叫变量。什么叫量用来存储数据的容器。

变量好比杯子（容器），水好比我们的数据，拿到了杯子就拿到了里面的水。

### 变量的作用（为啥要有变量？） ###

进行运算。

*  1Byte(字节，最小的存储单位) = 8bit（8个0或1）
 *  1KB = 1024Byte
 *  1MB = 1024KB
 *  1GB = 1024MB
 *  1TB = 1024GB
 *  1PB = 1024TB
 *  1EB = 1024PB

> Byte 和 bit 要注意区分大小写。

### 变量的定义 ###

1.  定义变量再赋值。

var a;
    a = 10;
    a = 20;
    console.log(a);

1. 先在内存中定义一个容器（a）
    2. 将10放进了这个容器中。
    3. 将10从这个容器中删除，然后将20放入到这个容器中。
    4. 拿到a这个容器就相当于拿到了里面的值（20），拿到之后打印出来。

1.  定义变量时直接赋值。

var b = 10;
    b = 20;
    console.log(b); // 返回： 20

上面两种方式是等价的。

1.  特殊情况

c = 200;
    console.log(c);

这种方式没人用。你现在可以暂时的认为这是定义变量，但是严格上来说其实不是。

1.  一次定义多个

*  第一种情况

var d= 1 , e = 2;
    console.log(d);
    console.log(e);

*  第二种情况

var d = e = 30;
    console.log(e);
    console.log(d);

1.  先声明了一个e（不带var的变量）容器，将30放入到这个容器中。
2.  声明一个变量d（带var的），然后等于e；相当于var d = e;
3.  拿到e中的值30，将这个值放入到d中。

> 定义多个变量，第一种情况才是常用的。

### 变量定义规则 ###

给变量起名是有一些规则的。

变量名定义：

*  数字、字母、下划线和$符组成。
 *  不能以数字开头。
 *  不能和关键字、保留字同名。
    
    关键字：是语言已经使用的。
    
    保留字：是以后语言有可能使用的。
 *  关键字和保留字

关键字
    break do instanceof typeof
    case else new var
    catch finally return void
    continue for switch while
    debugger* function this with
    default if throw
    delete in try
    
    保留字
    abstract enum int short
    boolean export interface static
    byte extends long super
    char final native synchronized
    class float package throws
    const goto private transient
    debugger implements protected volatile
    double import public

关键字、保留字不用记写多了自然而然就避开了。而且关键字、保留字是随着规范的变化而变化的。

惯例是约定俗成的东西。

起名字的时候要见名思议，有意义。不要随便的使用拼音、中文。

一般我们使用var a; var b这种的时候就是这个变量没有什么语义的时候。如果我们写大段代码那里面的变量有一定的语义，我们就需要将变量名定义为有语义的。

约定俗成的起名方式（建议使用）：

*  大驼峰命名法：`var BackgroundColor`，每个单词首字母大写。（用得不多）
 *  小驼峰命名法：`var backgroundColor`，第一个单词的首字母小写，剩下的每个单词的首字母都大写。
 *  下划线：`var background_color`，每个单词之间使用`_`来分隔。

**案例：** 有两个变量一个中存储的是100一个中存储的是200，交换其中的值（请用两种方法）。

*  方法一：声明一个第三方变量。

var a = 100;
    var b = 200;
    var c;
    
    c = a;
    a = b;
    b = c;
    console.log(a);
    console.log(b);

*  方法二：使用加减法

var a = 100;
    var b = 200;
    
    a = a + b;//300
    b = a - b;//100
    a = a - b;//200
    
    console.log(a);
    console.log(b);

>  *  如果运行时console里报红，表示程序中断，下面代码不再执行。
>  *  用关键字作为变量名，console会报错。

### 变量的类型（容器中的内容） ###

变量是杯子，杯子里面可以放很多种东西。 水、饮料、酱油

*  数据类型
    
    基本数据类型、对象（复杂、引用）类型。
 *  基本数据类
    
    数字 Number
    
    字符串 String
    
    布尔值 Boolean
    
    undefined
    
    null
 *  对象类型（后面说）
 *  Number类型
    
     *  整数

var int = 10;
    console.log(Number.MIN_VALUE);//最小值 5e-324
    console.log(Number.MAX_VALUE);//最大值 1.7976931348623157e+308
    console.log(int);

如果超过了最大值和最小值，将会自动转换为`Infinity`、`-Infinity`。

> 数值里面有`e`的话，代表是科学计数法。

*  小数
    
     *  浮点数必须包含一个小数点，小数点后面必须有一位数字，前面可以没有。  
        `var flo = .23`相当于`var flo = 0.23`。
    
     *  浮点数在运算的时候是不准确的。所有计算机语言都这样。

ar flo1 = 0.1;
    var flo2 = 0.2;
    console.log(flo1 + flo2); //返回：0.30000000000000004

解决思路：把小数放大为整数（乘），进行算数运算，再缩小为小数（除）。

或者以后的时候直接用指定的数学库来运算。

var flo1 = 0.1;
    var flo2 = 0.2;
    console.log((flo1*10 + flo2*10)/10); // 0.3

*  浮点数存储比整数存储占用的内存大，所以引擎会在特定的时候将浮点值转换为整数。

var flo = 10.0;
    console.log(flo)// 返回：10
    //这里的flo输出时，不要加引号，不然会当做字符串处理。

*  不常用的其他的值
    
     *  二进制，以0b开头。0、1
     *  八进制，以0o开头。0~7
     *  十六进制，0x开头0-9a-f

现在有一个数是十进制的10我要转换为二进制。