JS基本语法（一）

深碍√TFBOYSˉ_ 2023-03-04 08:17 57阅读 0赞

### JavaScript基本语法 ###

*  JavaScript介绍
 *   *  JavaScript是什么
     *  JavaScript和HTML、CSS的区别
 *  JavaScript的组成
 *  计算机组成
 *   *  软件
     *  硬件
 *  变量
 *   *  使用变量
     *  变量在内存中的存储
     *  变量的命名规则和规范
 *  数据类型
 *   *  简单数据类型
     *   *  Number类型
         *  String类型
         *  Boolean类型
         *  Undefined和Null
     *  复杂数据类型
     *  获取变量的类型
     *  注释
     *   *  单行注释
         *  多行注释
     *  数据类型转化
     *   *  转换成字符串类型
         *  转换成数值类型
         *  转换成布尔类型
     *  操作符
     *   *  算术运算符
         *  一元运算符
         *  逻辑运算符(布尔运算符)
         *  关系运算符(比较运算符)
         *  赋值运算符
         *  运算符的优先级
 *  表达式和语句
 *   *  分支结构
     *   *  if语句
         *  三元运算符
         *  switch语句
         *  布尔类型的隐式转换
     *  循环结构
     *   *  while语句
         *  do...while语句
         *  for语句
         *  continue和break
 *  数组
 *   *  数组的定义
     *  获取数组
     *  遍历数组
     *  数组中新增元素
     *  案例
 *  函数
 *   *  函数的定义
     *  函数的调用
     *  函数的参数
     *  函数的返回值
     *  arguments的使用
 *  函数其他
 *   *  匿名函数
     *  自调函数
     *  函数是一种数据类型
 *  作用域
 *   *  全局变量和局部变量
     *  块级作用域
     *  作用域链
 *  预解析
 *   *  变量提升
     *   *  案例

# JavaScript介绍 #

## JavaScript是什么 ##

*  JavaScript 运行在客户端(浏览器)的编程语言,一种运行在**客户端** 的**脚本语言**
 *  JavaScript的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用 于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

## JavaScript和HTML、CSS的区别 ##

1.  HTML：提供网页的结构，提供网页中的内容
2.  CSS: 用来美化网页
3.  JavaScript: 可以用来控制网页内容，给网页增加动态的效果

# JavaScript的组成 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70]

*  ECMAScript - JavaScript的核心
 *  BOM - 浏览器对象模型
 *  DOM - 文档对象模型

# 计算机组成 #

## 软件 ##

*  应用软件：浏览器(Chrome/IE/Firefox)、QQ、Sublime、Word
 *  系统软件：Windows、Linux、mac OSX

## 硬件 ##

*  三大件：CPU、内存、硬盘 – 主板
 *  输入设备：鼠标、键盘、手写板、摄像头等
 *  输出设备：显示器、打印机、投影仪等

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 1]

# 变量 #

## 使用变量 ##

*  var声明变量

var name;

*  变量的赋值

var name='dfjs';

*  同时声明多个变量

var name,age;

*  同时声明多个变量并赋值

var name='ndnsj',age=12;

## 变量在内存中的存储 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 2]

## 变量的命名规则和规范 ##

1.  规则 - 必须遵守的，不遵守会报错

*  由字母、数字、下划线、$符号组成，不能以数字开头
 *  不能是关键字和保留字，例如：for、while。
 *  区分大小写

1.  规范 - 建议遵守的，不遵守不会报错

*  变量名必须有意义
 *  遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。例如：userName、userPassword

# 数据类型 #

## 简单数据类型 ##

### Number类型 ###

*  进制

十进制
    	var num = 9;
    	进行算数计算时，八进制和十六进制表示的数值最终都将被转换成十进制数值。
    十六进制
    	var num = 0xA;
    	数字序列范围：0~9以及A~F
    八进制
        var num1 = 07;   // 对应十进制的7
        var num2 = 019;  // 对应十进制的19
        var num3 = 08;   // 对应十进制的8
        数字序列范围：0~7
        如果字面值中的数值超出了范围，那么前导零将被忽略，后面的数值将被当作十进制数值解析

*  浮点数

var n = 5e-324;   // 科学计数法  5乘以10的-324次方  
    浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数
       var result = 0.1 + 0.2;    // 结果不是 0.3，而是：0.30000000000000004
       console.log(0.07 * 100);
       不要判断两个浮点数是否相等

*  数值范围

最小值：Number.MIN_VALUE，这个值为： 5e-324
    最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
    无穷大：Infinity
    无穷小：-Infinity

*  数值判断

1.  类型——NaN：not a number  
    **NaN 与任何值都不相等，包括他本身**
2.  方法——isNaN: is not a number

### String类型 ###

*  转义符

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pVdD1XWy-1596360058878)(media/1498289626813.png)\]

*  字符串长度
    
    length属性用来获取字符串的长度
    
        var str = '黑马程序猿 Hello World';
        console.log(str.length);
 *  字符串拼接
    
    字符串拼接使用 + 连接
    
        console.log(11 + 11);//22
        console.log('hello' + ' world');//helloword
        console.log('100' + '100');//100100
        console.log('11' + 11);//1111
        console.log('male:' + true);//male:true

1.  两边只要有一个是字符串，那么+就是字符串拼接功能
2.  两边如果都是数字，那么就是算术功能。

### Boolean类型 ###

*  Boolean字面量： true和false，区分大小写
 *  计算机内部存储：true为1，false为0

### Undefined和Null ###

1.  undefined表示一个声明了没有赋值的变量，变量只声明的时候值默认是undefined
2.  null表示一个空，变量的值如果想为null，必须手动设置

## 复杂数据类型 ##

Object

## 获取变量的类型 ##

typeof  
**返回值是String类型**

## 注释 ##

### 单行注释 ###

//单行

### 多行注释 ###

/*duoha fdsjd */

## 数据类型转化 ##

### 转换成字符串类型 ###

*  toString()
 *  String()  
    undefined和null要用这种方法进行转化
 *  拼接  
    num + “”，当 + 两边一个操作符是字符串类型，一个操作符是其它类型的时候，会先把其它类型转换成字符串再进行字符串拼接，返回字符串

### 转换成数值类型 ###

*  Number()  
    Number()可以把任意值转换成数值，如果要转换的字符串中有一个不是数值的字符，返回NaN，**注意布尔值会返回数值（true——1，false——0）**
 *  parseInt()

1.  如果第一个字符是数字会解析知道遇到非数字结束
2.  如果第一个字符不是数字或者符号就返回NaN
3.  无法把布尔类型转换成数值类型 返回的结果是NaN

*  parseFloat()

1.  无法把布尔类型转换成数值类型 返回的结果是NaN
2.  会解析第一个.
3.  遇到第二个.或者非数字结束
4.  如果解析的内容里只有整数，解析成整数

*  \+，-0等运算

var num = -5;
          console.log(num);//-5
         // 
          var str = '123';
         console.log(-str);//-123
         // 
          var str = '123abc';
          console.log(+str);//NAN
         // 
          var isOK = true;
          console.log(+isOK);//1
         
         var str = '123abc';
         // - 如果一边是数值类型 一边是字符串，会先把字符串转换成数值类型再进行数值的减法运算
         // 如果字符串转换成数值类型失败 此时返回NaN
          console.log(str - 0);//NAN
         // + 如果有一边是数值类型 一边是字符串，会先把数值类型转换成字符串 再进行字符串的拼接
         console.log(str + 0);//123abc0

### 转换成布尔类型 ###

**转换成false的情况：null undefined ''空字符串 0 NaN**

## 操作符 ##

### 算术运算符 ###

+ - * / %

### 一元运算符 ###

*  前置++
 *  后置++

### 逻辑运算符(布尔运算符) ###

&& 与 两个操作数同时为true，结果为true，否则都是false
    || 或 两个操作数有一个为true，结果为true，否则为false
    !  非  取反

### 关系运算符(比较运算符) ###

<  >  >=  <=  == != === !==
    ==与===的区别：==只进行值得比较，===类型和值同时相等，则相等

### 赋值运算符 ###

=   +=   -=   *=   /=   %=

### 运算符的优先级 ###

优先级从高到底
    	1. ()  优先级最高
    	2. 一元运算符  ++   --   !
    	3. 算数运算符  先*  /  %   后 +   -
    	4. 关系运算符  >   >=   <   <=
    	5. 相等运算符   ==   !=    ===    !==
    	6. 逻辑运算符 先&&   后||
    	7. 赋值运算符

# 表达式和语句 #

## 分支结构 ##

### if语句 ###

### 三元运算符 ###

表达式1 ? 表达式2 : 表达式3

### switch语句 ###

break可以省略，如果省略，代码会继续执行下一个case
    switch 语句在比较值时使用的是全等操作符, 因此不会发生类型转换
    （例如，字符串'10' 不等于数值 10）

### 布尔类型的隐式转换 ###

转换为true   非空字符串  非0数字  true 任何对象
    转换成false  空字符串  0  false  null  undefined

## 循环结构 ##

### while语句 ###

// 当循环条件为true时，执行循环体，
    // 当循环条件为false时，结束循环。
    while (循环条件) { 
      //循环体
    }

### do…while语句 ###

do…while循环和while循环非常像，二者经常可以相互替代，但是do…while的特点是不管条件成不成立，都会执行一次。

do { 
      // 循环体;
    } while (循环条件);

### for语句 ###

// for循环的表达式之间用的是;号分隔的，千万不要写成,
    for (初始化表达式1; 判断表达式2; 自增表达式3) {
      // 循环体4
    }

### continue和break ###

*  break:立即跳出整个循环，即循环结束，开始执行循环后面的内容（直接跳到大括号）
 *  continue:立即跳出当前循环，继续下一次循环（跳到i++的地方）

# 数组 #

## 数组的定义 ##

// 创建一个空数组
    var arr1 = []; 
    // 创建一个包含3个数值的数组，多个数组项以逗号隔开
    var arr2 = [1, 3, 4]; 
    // 创建一个包含2个字符串的数组
    var arr3 = ['a', 'c']; 
    
    // 可以通过数组的length属性获取数组的长度
    console.log(arr3.length);
    // 可以设置length属性改变数组中元素的个数
    arr3.length = 0;

## 获取数组 ##

*  格式：数组名\[下标\] 下标又称索引
 *  功能：获取数组对应下标的那个值，如果下标不存在，则返回undefined。

## 遍历数组 ##

for(var i = 0; i < arr.length; i++) { 
    	// 数组遍历的固定结构
    }

## 数组中新增元素 ##

*  格式：数组名\[下标/索引\] = 值;
 *  如果下标有对应的值，会把原来的值覆盖，如果下标不存在，会给数组新增一个元素。

## 案例 ##

**将字符串数组用|或其他符号分割**  
方法：往第二个元素之前加分隔符

var names = ['郭德纲', '郭麒麟', '于谦', '岳云鹏', '烧饼'];
        // 让我们把数组中的每一项 用|或其他符号分割
        //形成一个字符串 '郭德纲|郭麒麟|于谦|岳云鹏|烧饼'
        	var seperator = '|';
         	var str = names[0];
        	for (var i = 1; i < names.length; i++) { 
            str += seperator + names[i];
       }
         console.log(str);

**要求将数组中的0项去掉，将不为0的值存入一个新的数组，生成新的数组**  
方法：把找到的非0元素存储到一个新的数组中，索引是数组的长度

var numbers = [5, 6, 89, 0, 11, 0, 12, 3, 0];
    	 	var newArray = []; // 空数组
      		for (var i = 0; i < numbers.length; i++) { 
        	  if (numbers[i] !== 0) { 
       				numbers[i];
        		//找到的非0元素，存储到新的数组中
           		 newArray[newArray.length] = numbers[i];
           }
         }
         console.log(newArray);

**翻转数组**  
方法：将旧数组从length-1开始放入新数组中，并以数组的长度作为索引

var numbers = [4, 5, 7, 9];   // 生成一个新的数组 数组中存储 9 7 5 4
        var newArray = [];
        for (var i = numbers.length - 1; i >= 0; i--) { 
          newArray[newArray.length] = numbers[i];
        }
        console.log(newArray);

**冒泡排序，从小到大**  
方法：优化根据判断最后一次数据是否发生变化判断是否需要再次排序

# 函数 #

## 函数的定义 ##

*  函数声明

function 函数名() { 
      // 函数体
    }

*  函数表达式

var fn = function () { 
      // 函数体
    }

## 函数的调用 ##

函数名();

## 函数的参数 ##

1.  形式参数：在声明一个函数的时候，为了函数的功能更加灵活，有些值是固定不了的，对于这些固定不了的值。我们可以给函数设置参数。这个参数没有具体的值，仅仅起到一个占位置的作用，我们通常称之为形式参数，也叫形参。
2.  实际参数：如果函数在声明时，设置了形参，那么在函数调用的时候就需要传入对应的参数，我们把传入的参数叫做实际参数，也叫实参。

## 函数的返回值 ##

//声明一个带返回值的函数
    function 函数名(形参1, 形参2, 形参3...) { 
      //函数体
      return 返回值;
    }
    
    //可以通过变量来接收这个返回值
    var 变量 = 函数名(实参1, 实参2, 实参3...);

## arguments的使用 ##

JavaScript中，arguments对象是比较特别的一个对象，实际上是当前函数的一个内置属性。也就是说所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有的实参。arguments是一个伪数组，因此及可以进行遍历

*  求任意个数的最大值

function test(a, b, c) { 
            //我们可以通过arguments 获取函数调用的时候的实参
            //arguments非常想数组，但不是数组
            console.log(arguments);
            console.log(1);
        }
    
         test(4, 5, 6);

*  求任意个数的和

# 函数其他 #

## 匿名函数 ##

var fn = function () { 
        			 }

## 自调函数 ##

(function () { 
           console.log('我是自调用函数');
        		 })()

## 函数是一种数据类型 ##

(function () { 
     				 alert(123);
    			})();

# 作用域 #

## 全局变量和局部变量 ##

**不使用var声明的变量是全局变量，不推荐使用。  
变量退出作用域之后会销毁，全局变量关闭网页或浏览器才会销毁**

*  全局变量  
    在任何地方都可以访问到的变量就是全局变量，对应全局作用域
 *  局部变量  
    只在固定的代码片段内可访问到的变量，最常见的例如函数内部。对应局部作用域(函数作用域)

## 块级作用域 ##

## 作用域链 ##

*  任何一对花括号（｛和｝）中的语句集都属于一个块，在这之中定义的所有变量在代 码块外都是不可见的，我们称之为块级作用域。
 *  **在es5之前没有块级作用域的的概念,只有函数作用域**，现阶段可以认为 JavaScript没有块级作用域
 *  只有函数可以制造作用域结构， 那么只要是代码，就至少有一个作用域, 即全局作用域。凡是代码中有函数，那么这个函数就构成另一个作用域。如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域。

将这样的所有的作用域列出来，可以有一个结构: 函数内指向函数外的链式结构。就称作作用域链。

function f1() { 
    			    var num = 123;
    			    function f2() { 
    			        console.log(num); 
    			    }
        			f2();
    		}
    			var num = 456;
    			f1();

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 3]

# 预解析 #

JavaScript代码的执行是由浏览器中的JavaScript解析器来执行的。
       JavaScript解析器执行JavaScript代码的时候，
       分为两个过程：预解析过程和代码执行过程

**预解析过程：**

1.  把变量的声明提升到当前作用域的最前面，\*\*只会提升声明，\*\*不会提升赋值。
2.  把函数的声明提升到当前作用域的最前面，**只会提升声明**，不会提升调用。
3.  **先提升var，在提升function。**

## 变量提升 ##

*  变量提升
    
    定义变量的时候，变量的声明会被提升到作用域的最上面，变量的赋值不会提升。
 *  函数提升
    
    JavaScript解析器首先会把当前作用域的函数声明提前到整个作用域的最前面

### 案例 ###

f1();
    console.log(c);
    console.log(b);
    console.log(a);
    function f1() { 
      var a = b = c = 9;
      console.log(a);
      console.log(b);
      console.log(c);
    }

注意a前面有var声明所以是布局变量，bc是全局变量

//预解析
     function f1() {
          var a;
          a = b = c = 9;
          console.log(a);
          console.log(b);
          console.log(c);
        }
        f1();
        console.log(c);
        console.log(b);
        console.log(a);
        
    
         var a = b = c = 9;
         var a = 9;
        //全局变量
         b = 9
         c = 9;

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70]: /images/20230208/ca54897f3b524931ac77d2c7749d5cd1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 1]: /images/20230208/a4d43678bf294461b228a06e5df7343b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 2]: /images/20230208/fc763c1fcf1b431fb60f8f9e5487208a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 3]: /images/20230208/60d1f64a16564ddab57868eb7a9c7db6.png