前端三剑客-----＞JavaScript（基础语法）

╰+哭是因爲堅強的太久メ 2023-10-01 12:41 13阅读 0赞

**目录**

一，JavaScript基础概念

1.JavaScript是什么

2.JavaScript作用

3.JavaScript的应用场景

4.JavaScript运行过程

5.JavaScript 的组成

二，JavaScript的基础语法

1.JavaScript的书写形式

1）行内式

2）内嵌式

3）外部式

4）注释

2.输入输出

1）输入（prompt）

2）输出（alert）

3）输出（console.log）

4）补充解释

三，语法概览

1.变量的使用

1）基本用法

2）理解动态类型数组

2.基本数据类型

1）js中内置的几种类型

2）number数字类型

3）string字符串类型

4）Boolean布尔类型

5）undefined未定义数据类型

6）null空值类型

3.运算符

四，条件语句

1.if语句

1）基本语法

2）三目运算符

3）Switch

2.循环语句

1）while循环

2）for循环

3）continue

4）break

五，数组

1.创建数组

2.获取数组元素

3.新增数组元素

1）通过修改length新增

2）通过下标新增

3）使用push进行追加元素

4.删除数组元素

六，函数

1.语法格式

2.关于参数个数

3.函数表达式

4.作用域

var和let的区别

5.作用域链

七，对象

1.创建对象

1）使用字面量创建对象【常用】

2）使用new Object创建对象

3）使用构造函数创建对象

4）调用对象属性和方法

--------------------

## 一，JavaScript基础概念 ##

### 1.JavaScript是什么 ###

*  **JavaScript (简称 JS)**
 *  **是世界上最流行的编程语言之一**
 *  **是一个脚本语言, 通过解释器运行**
 *  **主要在客户端(浏览器)上运行, 现在也可以基于 node.js 在服务器端运行**

### 2.JavaScript作用 ###

**用于web（基于http，https协议）的网页用户交互的动作**

### 3.JavaScript的应用场景 ###

*  **网页开发(更复杂的特效和用户交互)**
 *  **网页游戏开发**
 *  **服务器开发(node.js)**
 *  **桌面程序开发(Electron, VSCode 就是这么来的)**
 *  **手机 app 开发**

### 4.JavaScript运行过程 ###

1.  编写的代码是保存在文件中的, 也就是存储在硬盘(外存上).
2.  双击 .html 文件浏览器(应用程序)就会读取文件, 把文件内容加载到内存中(数据流向: 硬盘 => 内存)
3.  浏览器会解析用户编写的代码, 把代码翻译成二进制的, 能让计算机识别的指令(解释器的工作)
4.  得到的二进制指令会被 CPU 加载并执行(数据流向: 内存 => CPU)

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAb2hhbmHvvIE_size_20_color_FFFFFF_t_70_g_se_x_16][] ![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAb2hhbmHvvIE_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

**浏览器分成渲染引擎 + JS 引擎**

*  渲染引擎: 解析 html + CSS, 俗称 "内核"
 *  JS 引擎: 也就是 JS 解释器. 典型的就是 Chrome 中内置的 V8
 *  JS 引擎逐行读取 JS 代码内容, 然后解析成二进制指令, 再执行

### 5.JavaScript 的组成 ###

1.  **ECMAScript(简称 ES): JavaScript 语法（es规定了js的语法，es有很多版本）**
2.  **DOM: 页面文档对象模型, 对页面中的元素进行操作（用户交互，动态的操作页面元素）**
3.  **BOM: 浏览器对象模型, 对浏览器窗口进行操作（对浏览器的页面进行操作，如刷新前进）**

## 二，JavaScript的基础语法 ##

### 1.JavaScript的书写形式 ###

#### 1）行内式 ####

#### 2）内嵌式 ####

#### 3）外部式 ####

#### 4）注释 ####

**注释的写法和Java一模一样（注释不能嵌套）**

### 2.输入输出 ###

#### 1）输入（prompt） ####

// 弹出一个输入框
    prompt("请输入您的姓名:");

#### 2）输出（alert） ####

// 弹出一个输出框
    alert("hello");

#### 3）输出（console.log） ####

// 向控制台输出日志
    console.log("这是一条日志");

#### 4）补充解释 ####

**重要概念:**

*  console 是一个 js 中的 "对象"
 *  . 表示取对象中的某个属性或者方法. 可以直观理解成 "的"
 *  console.log 就可以理解成: 使用 "控制台" 对象 "的" log 方法（有点类似于Java中的println）

<input type="button" value="prompt" onclick="prompt('请输入你的姓名：')"><br>
        
        <input type="button" value="alert" onclick="alert('你的姓名：')"><br>
        
        <input type="button" value="alert" onclick="console.log('wjxbb&ttl')"><br>

## 三，语法概览 ##

### 1.变量的使用 ###

#### 1）基本用法 ####

**创建变量：**

var = 'zhangsan';
    var = 20;

*  var 是 JS 中的关键字, 表示这是一个变量.
 *  = 在 JS 中表示 "赋值", 相当于把数据放到内存的盒子中. = 两侧建议有一个空格
 *  每个语句最后带有一个 ; 结尾. JS 中可以省略 ; 但是建议还是加上.
 *  注意, 此处的 ; 为英文分号. JS 中所有的标点都是英文标点.
 *  初始化的值如果是字符串, 那么就要使用单引号或者双引号引起来
 *  初始化的值如果是数字, 那么直接赋值即可

**使用变量：**

console.log(age); // 读取变量内容
    age = 30;

**代码示例：**

#### 2）理解动态类型数组 ####

**JS 的变量类型是程序运行过程中才确定的(运行到 = 语句才会确定类型)**

var a = 10; // 数字
    var b = "hehe"; // 字符串

**随着程序运行, 变量的类型可能会发生改变**

var a = 10; // 数字
    a = "hehe"; // 字符串

**这一点和Java，c等静态类型语言差异较大**

### 2.基本数据类型 ###

#### 1）js中内置的几种类型 ####

*  number: 数字. 不区分整数和小数
 *  boolean: true 真, false 假
 *  string: 字符串类型
 *  undefined: 只有唯一的值 undefined. 表示未定义的值
 *  null: 只有唯一的值 null. 表示空值

#### 2）number数字类型 ####

**基本语法：**

var a = 07; // 八进制整数, 以 0 开头
    var b = 0xa; // 十六进制整数, 以 0x 开头
    var c = 0b10; // 二进制整数, 以 0b 开头

**特殊的数字值 ：**

*  Infinity: 无穷大, 大于任何数字. 表示数字已经超过了 JS 能表示的范围.
 *  \-Infinity: 负无穷大, 小于任何数字. 表示数字已经超过了 JS 能表示的范围.
 *  NaN: 表示当前的结果不是一个数字

var max = Number.MAX_VALUE;
    // 得到 Infinity
    console.log(max * 2);
    // 得到 -Infinity
    console.log(-max * 2);
    // 得到 NaN
    console.log('hehe' - 10);

**注意：**

**在得到NaN时，不能使用+号连接（因为使用+表示字符串拼接会得到hehe10）**

#### 3）string字符串类型 ####

**基本语法：**字符串字面值需要使用引号引起来, 单引号双引号均可

var a = "haha";
    var b = 'hehe';
    var c = hehe; // 运行出错

**包含引号时的写法：**

var msg = "My name is "zhangsan""; // 出错
    var msg = "My name is \"zhangsan\""; // 正确, 使用转义字符. \" 来表示字符串内部的引
    号.
    var msg = "My name is 'zhangsan'"; // 正确, 搭配使用单双引号
    var msg = 'My name is "zhangsan"'; // 正确, 搭配使用单双引号

有些字符不方便直接输入, 于是要通过一些特殊方式来表示.
    \n
    \\
    \'
    \"
    \t

**求长度：和Java中一样使用.length**

**字符串拼接：和Java一样使用+拼接（这里可以拼接数值和字符串）**

#### 4）Boolean布尔类型 ####

**表示真和假，参与运算时，true被当成1，false被当成0**

#### 5）undefined未定义数据类型 ####

如果一个变量没有被初始化过, 结果就是 undefined, 是 undefined 类型

var a;
    console.log(a)

undefined 和字符串进行相加, 结果进行字符串拼接

console.log(a + "10"); // undefined10

undefined 和数字进行相加, 结果为 NaN

console.log(a + 10); //NaN

#### 6）null空值类型 ####

**null 表示当前的变量是一个 "空值"**

var b = null;
    console.log(b + 10); // 10
    console.log(b + "10"); // null10

**注意:**

*  null 和 undefined 都表示取值非法的情况, 但是侧重点不同.
 *  null 表示当前的值为空. (相当于有一个空的盒子)
 *  undefined 表示当前的变量未定义. (相当于连盒子都没有)

### 3.运算符 ###

一切运算和Java中一样，不做描述

## 四，条件语句 ##

### 1.if语句 ###

#### 1）基本语法 ####

// 形式1
    if (条件) {
    语句
    }
    // 形式2
    if (条件) {
    语句1
    } else {
    语句2
    }
    // 形式3
    if (条件1) {
    语句1
    } else if (条件2) {
    语句2
    } else if .... {
    语句...
    } else {
    语句N
    }

**示例：**

#### 2）三目运算符 ####

var n = 10;
    var s = (n > 0) ? "yes" : "no" ;
    console.log(s);

#### 3）Switch ####

switch (表达式) {
    case 值1:
    语句1;
    break;
    case 值2:
    语句2:
    break;
    default:
    语句N;
    }

### 2.循环语句 ###

#### 1）while循环 ####

while (条件) {
    循环体;
    }

**执行过程:**

*  先执行条件语句
 *  条件为 true, 执行循环体代码.
 *  条件为 false, 直接结束循环

#### 2）for循环 ####

for (表达式1; 表达式2; 表达式3) {
    循环体
    }

*  表达式1: 用于初始化循环变量.
 *  表达式2: 循环条件
 *  表达式3: 更新循环变量

**执行过程:**

*  先执行表达式1, 初始化循环变量
 *  再执行表达式2, 判定循环条件
 *  如果条件为 false, 结束循环
 *  如果条件为 true, 则执行循环体代码.
 *  执行表达式3 更新循环变量

**示例：**

#### 3）continue ####

**结束这次循环**

#### 4）break ####

**结束整个循环**

## 五，数组 ##

### 1.创建数组 ###

**使用 new 关键字创建**

// Array 的 A 要大写
    var arr = new Array();

**使用字面量方式创建 \[常用\]**

var arr = [];
    var arr2 = [1, 2, 'haha', false]; // 数组中保存的内容称为 "元素"

### 2.获取数组元素 ###

var arr = ['小猪佩奇', '小猪乔治', '小羊苏西'];
    console.log(arr);
    console.log(arr[0]);
    console.log(arr[1]);
    console.log(arr[2]);
    arr[2] = '小猫凯迪';
    console.log(arr);

**注意:**

*  **如果下标超出范围读取元素, 则结果为 undefined**
 *  **不要给数组名直接赋值, 此时数组中的所有元素都没了.**
 *  **相当于本来 arr 是一个数组, 重新赋值后变成字符串了**

### 3.新增数组元素 ###

#### 1）通过修改length新增 ####

**相当于在末尾新增元素. 新增的元素默认值为 undefined**

var arr = [9, 5, 2, 7];
    arr.length = 6;
    console.log(arr);
    console.log(arr[4], arr[5]);

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAb2hhbmHvvIE_size_17_color_FFFFFF_t_70_g_se_x_16][]

#### 2）通过下标新增 ####

*  **如果下标超出范围赋值元素, 则会给指定位置插入新元素**
 *  **此时这个数组的 \[0\] 和 \[1\] 都是 undefined**

var arr = [];
    arr[2] = 10;
    console.log(arr)

#### 3）使用push进行追加元素 ####

**给定一个数组, 把数组中的奇数放到一个 newArr 中**

var arr = [9, 5, 2, 7, 3, 6, 8];
    var newArr = [];
    for (var i = 0; i < arr.length; i++) {
    if (arr[i] % 2 != 0) {
    newArr.push(arr[i]);
    }
    }
    console.log(newArr);

### 4.删除数组元素 ###

**使用 splice 方法删除元素**

var arr = [9, 5, 2, 7];
    // 第一个参数表示从下表为 2 的位置开始删除. 第二个参数表示要删除的元素个数是 1 个
    arr.splice(2, 1);
    console.log(arr);
    // 结果
    [9, 5, 7]

## 六，函数 ##

### 1.语法格式 ###

// 创建函数/函数声明/函数定义
    function 函数名(形参列表) {
    函数体
    return 返回值;
    }
    // 函数调用
    函数名(实参列表) // 不考虑返回值
    返回值 = 函数名(实参列表) // 考虑返回值

函数定义并不会执行函数体内容, 必须要调用才会执行. 调用几次就会执行几次

function hello() {
    console.log("hello");
    }
    // 如果不调用函数, 则没有执行打印语句
    hello();

*  调用函数的时候进入函数内部执行, 函数结束时回到调用位置继续执行. 可以借助调试器来观察.
 *  函数的定义和调用的先后顺序没有要求. (这一点和变量不同, 变量必须先定义再使用)

// 调用函数
    hello();
    // 定义函数
    function hello() {
    console.log("hello");
    }

### 2.关于参数个数 ###

**实参和形参之间的个数可以不匹配. 但是实际开发一般要求形参和实参个数要匹配**

1) 如果实参个数比形参个数多, 则多出的参数不参与函数运算

sum(10, 20, 30); // 30

2) 如果实参个数比形参个数少, 则此时多出来的形参值为 undefined

sum(10); // NaN, 相当于 num2 为 undefined.

### 3.函数表达式 ###

function() {
    var sum = 0;
    for (var i = 0; i < arguments.length; i++) {
    sum += arguments[i];
    }
    return sum;
    }
    console.log(add(10, 20)); // 30
    console.log(add(1, 2, 3, 4)); // 10

### 4.作用域 ###

某个标识符名字在代码中的有效范围，在 ES6 标准之前, 作用域主要分成两个

*  全局作用域: 在整个 script 标签中, 或者单独的 js 文件中生效.
 *  局部作用域/函数作用域: 在函数内部生效
 *  创建变量时如果不写 var, 则得到一个全局变量
 *  如果变量名相同，在使用时，优先使用函数内部的同名变量的值

#### var和let的区别 ####

*  在函数内定义var和let，外部不可见
 *  在循环，条件控制语句中，var外部可见
 *  在循环，条件控制语句中，let外部不可见
 *  let作用域只在本花括号内

### 5.作用域链 ###

**背景:**

*  函数可以定义在函数内部
 *  内层函数可以访问外层函数的局部变量.
 *  内部函数可以访问外部函数的变量. 采取的是链式查找的方式. 从内到外依次进行查找.

## 七，对象 ##

### 1.创建对象 ###

#### 1）使用字面量创建对象【常用】 ####

**使用 \{ \} 创建对象**

*  属性和方法使用键值对的形式来组织.
 *  键值对之间使用 , 分割. 最后一个属性后面的 , 可有可无
 *  键和值之间使用 : 分割.
 *  方法的值是一个匿名函数

**基本语法：**

#### 2）使用new Object创建对象 ####

#### 3）使用构造函数创建对象 ####

#### 4）调用对象属性和方法 ####

// 1.使用.的方式来获取属性，即“的”
        console.log(stu1.name);
        // 2.使用[字符串]
        console.log(stu1["name"]);
        // 3.修改属性，使用“=”
        stu1.name = "王五";
        console.log(stu1.name);

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAb2hhbmHvvIE_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/c59e3b66814141b197260c5f4c5cc94e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAb2hhbmHvvIE=,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAb2hhbmHvvIE_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/5c6f5c90a3d54e3682773b8038c1e1e6.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAb2hhbmHvvIE=,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAb2hhbmHvvIE_size_17_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/5082b24e0e374f9ebbe150a05d3f9898.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAb2hhbmHvvIE=,size_17,color_FFFFFF,t_70,g_se,x_16