一文带你走进JS语法（最全笔记）

╰半橙微兮° 2024-03-31 15:29 17阅读 0赞

![738488b6ed944d7583d1ad69b9f005f2.jpeg][]

**目录**

基本语法

1.引入方式

2.注释

3.输入输出语句

4.变量和常量

5.原始数据类型

6.运算符

7.流程控制语句

8.数组

9.函数

DOM

1.概述

2.元素对象的操作

3.元素内属性操作

4.元素内文本操作

事件

面向对象

1.定义类的方式

2.继承

内置对象

1.Number对象

2.Math对象

3.Data对象

4.String对象

5.RegExp对象

6.Array对象

7.Set对象

8.Map对象

9.JSON对象

BOM

### 基本语法 ###

#### 1.引入方式 ####

*  第一种
    
        <script>
            js代码
        </script>
 *  第二种
    
        <script src="js文件"></script>

#### 2.注释 ####

*  单行注释
    
        <script>
            //这是单行注释
        </script>
 *  多行注释
    
        <script>
            /*
                这是多行注释
            */
        </script>

#### 3.输入输出语句 ####

*  prompt()，范例
    
        prompt("请输入:");
        //该语句在页面弹出一个输入框，并且带有提示
 *  alert()，范例
    
        alert("提示");
 *  console.log()，范例
    
        console.log("控制台输出的内容");
 *  document.write()，范例
    
        document.write("向页面输出内容");

#### 4.变量和常量 ####

*  JavaScript是弱类型语言，**定义变量时**不用区分具体数据类型
 *  定义局部变量
    
    语法：`let 变量名 = 值;`
    
    范例：
    
        let name = "张三";
        let age = 23;
 *  定义全局变量
    
    语法：`变量名 = 值;`
    
    范例：
    
        school = "清华大学";
 *  定义常量
    
    语法：`const 常量名 = 值;`
    
    范例：
    
        const PI = 3.1415926;

#### 5.原始数据类型 ####

<table> 
 <thead> 
  <tr> 
   <th>类型</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>boolean</td> 
   <td>布尔类型，true或false</td> 
  </tr> 
  <tr> 
   <td>undefined</td> 
   <td>未定义，即定义变量时没有赋值</td> 
  </tr> 
  <tr> 
   <td>null</td> 
   <td>声明null为变量值</td> 
  </tr> 
  <tr> 
   <td>number</td> 
   <td>整数或浮点数</td> 
  </tr> 
  <tr> 
   <td>string</td> 
   <td>字符串</td> 
  </tr> 
  <tr> 
   <td>bigint</td> 
   <td>大整数，例如bigint num = 10n;需要在数字后加上n</td> 
  </tr> 
 </tbody> 
</table>

判断原始数据类型的方法：

使用`typeof()`函数

范例：

let l1 = true;
    document.write(typeof(l1)+"<br/>"); //输出boolean
    
    let l2;
    document.write(typeof(l2)+"<br/>"); //输出undefined
    
    let l3 = null;
    document.write(typeof(l3)+"<br/>"); //输出Object，null被认为是对象占位符
    
    let l4 = 123;
    document.write(typeof(l4)+"<br/>"); //输出number
    
    let l5 = "abc";
    document.write(typeof(l5)+"<br/>"); //输出string
    
    let l6 = 10n;
    document.write(typeof(l6)+"<br/>"); //输出bigint

#### 6.运算符 ####

*  JavaScript中运算符和Java的大致相同
 *  不同点：
    
    1.  `==`号比较的是变量的值是否相同，如字符串的"10"跟数字的10比较返回true
    2.  `===` 号比较类型和值，则字符串的"10"跟数字的10比较返回false
    3.  字符串类型的数字计算时会发生类型转换

#### 7.流程控制语句 ####

*  与Java的相同，但是注意在流程控制语句中的变量定义语法不同

#### 8.数组 ####

*  JavaScript数组长度和类型没有限制
    
    定义一个数组的语法是：`let 数组名 = [元素];`
    
    范例：
    
        let arr = [1,2,3];
 *  获取数组长度
    
    使用函数：`数组名.length`
    
    范例：
    
        arr.length;
 *  数组复制
    
    语法：`数组1 = [...数组2];`
    
    范例：
    
        let a = [1,2,3];
        let b = [...a];//数组b内容也是1,2,3
 *  数组合并
    
    语法：`数组1 = [...数组2,数组3];`将数组2和3合并到1
    
    范例：
    
        let a = [1,2,3];
        let b = [4,5,6];
        let c = [...a,...b];//数组c内容是1,2,3,4,5,6
 *  字符串转数组
    
    语法：`数组 = [...字符串];`
    
    范例：
    
        let s = "lxq";
        let a = [...s];a数组内容是l,x,q

#### 9.函数 ####

*  JavaScript中的函数类似于Java中的方法
 *  普通函数
    
    语法：
    
        function 方法名(参数){
            方法体;
            return 返回值;
        }
    
    注意：如果不需要返回值则不用写return语句，参数不用写类型
 *  可变参数
    
    语法：
    
        function 方法名(...参数){
            方法体;
            return 返回值;
        }
 *  匿名函数
    
    语法：
    
        function(参数){
            方法体;
            return 返回值;
        }

### DOM ###

#### 1.概述 ####

*  DOM指document object model，即文档对象模型
 *  将HTML文档各个组成部分封装为对象，借助这些对象可以对HTML文档进行增删改查的动态操作
 *  相关对象：
    
    1.  Document，表示文档对象
    2.  Element，元素对象
    3.  Attribute，属性对象
    4.  Text，文本对象

#### 2.元素对象的操作 ####

*  根据document文档对象来获取元素对象
    
    <table> 
     <thead> 
      <tr> 
       <th>方法</th> 
       <th>说明</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>getElementById(id属性值)</td> 
       <td>根据id属性获取元素对象</td> 
      </tr> 
      <tr> 
       <td>getElementsByTagName(标签名)</td> 
       <td>根据标签名获取元素对象</td> 
      </tr> 
      <tr> 
       <td>getElementsByName(name属性值)</td> 
       <td>根据name属性获取元素对象</td> 
      </tr> 
      <tr> 
       <td>getElementsByClassName(class属性值)</td> 
       <td>根据class属性获取元素对象</td> 
      </tr> 
     </tbody> 
    </table>
 *  根据当前元素对象获取父元素对象
    
    `子元素对象.parentElement`
 *  通过文档对象创建新元素对象
    
    `document.createElement(标签名);`
 *  将指定子元素对象添加到父元素中
    
    `父元素对象.appendChild(子元素对象);`
 *  父元素删除指定的子元素
    
    `父元素对象.removeChild(子元素对象);`
 *  父元素用新子元素替换旧子元素
    
    `父元素对象.replace(新元素,旧元素);`

#### 3.元素内属性操作 ####

*  给元素设置属性
    
    `setAttribute(属性名,属性值);`
 *  根据属性名获取属性值
    
    `getAttribute(属性名);`
 *  根据属性名移除属性
    
    `removeAttribute(属性名);`
 *  为元素添加样式
    
    方式一：
    
    `元素对象.style.样式=值;`
    
    如：
    
        let ele = document.getElementById("a");
        ele.style.color = "red";
    
    方式二：
    
    `元素对象.className = "类选择器名";`

#### 4.元素内文本操作 ####

*  设置文本内容，不解析标签
    
    `元素对象.innerText="文本内容";`
    
    注意：不解析标签是指文本内容如果有HTML标签也不会解析，只会当成文本
 *  设置文本内容，解析标签
    
    `元素对象.innerHTML="文本内容";`
    
    注意：这里的文本内容会被解析标签

### 事件 ###

*  事件是某些组件完成某些操作时会触发的代码
 *  常用事件
    
    <table> 
     <thead> 
      <tr> 
       <th>事件</th> 
       <th>说明</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>onload</td> 
       <td>某个页面或图像被加载完成</td> 
      </tr> 
      <tr> 
       <td>onsubmit</td> 
       <td>表单提交时</td> 
      </tr> 
      <tr> 
       <td>onclick</td> 
       <td>鼠标点击事件</td> 
      </tr> 
      <tr> 
       <td>ondblclick</td> 
       <td>鼠标双击</td> 
      </tr> 
      <tr> 
       <td>onblur</td> 
       <td>元素失去焦点</td> 
      </tr> 
      <tr> 
       <td>onfocus</td> 
       <td>元素获得焦点</td> 
      </tr> 
      <tr> 
       <td>onchange</td> 
       <td>用于改变域的内容</td> 
      </tr> 
     </tbody> 
    </table>
 *  绑定事件的方式
    
    1.  通过标签中事件属性进行绑定
        
        范例：
        
            <button οnclick="触发的操作"></button>
    2.  通过DOM元素进行绑定
        
            let b = document.getElementById("btn");
            b.οnclick=function(){//使用匿名方法
                触发的操作;
            }

### 面向对象 ###

#### 1.定义类的方式 ####

*  方式1
    
    语法：
    
        class 类名{
            //构造方法
            constructor(变量列表){
                变量赋值;
            }
            //普通方法
            方法名(参数列表){
                方法体;
                return 返回值;
            }
        }
    
    用法：
    
        let 对象名 = new 类名(实际变量值);
        对象名.变量名;
        对象名.方法名();
 *  方式2
    
    语法：
    
        //在定义类的时候已经创建了对象
        let 对象名 = {
            变量名 : 变量值,
            变量名 : 变量值,
            
            方法名 : function(参数列表){
                方法体;
                return 返回值;
            },
            方法名 : function(参数列表){
                方法体;
                return 返回值;
            }
        };
    
    用法：
    
        对象名.变量名;
        对象名.方法名();

#### 2.继承 ####

*  JS中顶级父类是Object
 *  继承需要使用extends关键字
    
    语法：
    
        class 子类 extend 父类{}
 *  继承范例
    
        class Person{
            constructor(name,age){
                this.name = name;
                this.age = age;
            }
        
            show(){
                document.write(this.name+","+this.age+"<br/>");
            }
        }
        
        class Worker extends Person{
           constructor(name,age,salary){
               //使用super()调用父类构造方法
                super(name,age);
                this.salary = salary;
           }
        
           show(){
                document.write(this.name+","+this.age+","+this.salary);
           }
        }
        
        let worker = new Worker("张三",23,15000);
        worker.show();

### 内置对象 ###

#### 1.Number对象 ####

*  `parseFloat(s)`方法，将字符串浮点数转为浮点数
 *  `parseInt(s)`方法，将字符串整数转为整数

#### 2.Math对象 ####

*  `ceil(x)`方法，向上取整
 *  `floor(x)`方法，向下取整
 *  `round(x)`方法，四舍五入
 *  `random()`方法，返回0到1之间的随机数，不含1
 *  `pow(x,y)`方法，x的y次方

#### 3.Data对象 ####

*  构造方法
    
    <table> 
     <thead> 
      <tr> 
       <th>方法</th> 
       <th>说明</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>Date()</td> 
       <td>根据当前事件创建对象</td> 
      </tr> 
      <tr> 
       <td>Date(value)</td> 
       <td>指定毫秒值创建对象</td> 
      </tr> 
      <tr> 
       <td>Date(year,month[,day,hour,min,sec,mill])</td> 
       <td>指定字段创建对象，月份是0到11</td> 
      </tr> 
     </tbody> 
    </table>
 *  常用方法
    
    <table> 
     <thead> 
      <tr> 
       <th>方法</th> 
       <th>说明</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>getFullYear()</td> 
       <td>获取年份</td> 
      </tr> 
      <tr> 
       <td>getMonth()</td> 
       <td>获取月份</td> 
      </tr> 
      <tr> 
       <td>getDate()</td> 
       <td>获取天数</td> 
      </tr> 
      <tr> 
       <td>getHours()</td> 
       <td>获取小时</td> 
      </tr> 
      <tr> 
       <td>getMinutes()</td> 
       <td>获取分钟</td> 
      </tr> 
      <tr> 
       <td>getSeconds()</td> 
       <td>获取秒</td> 
      </tr> 
      <tr> 
       <td>getTime()</td> 
       <td>返回时间原点至今毫秒数</td> 
      </tr> 
      <tr> 
       <td>toLocalString()</td> 
       <td>返回本地日期格式的字符串</td> 
      </tr> 
     </tbody> 
    </table>

#### 4.String对象 ####

*  构造方法
    
    <table> 
     <thead> 
      <tr> 
       <th>方法</th> 
       <th>说明</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>String(value)</td> 
       <td>根据指定字符串创建对象</td> 
      </tr> 
      <tr> 
       <td>let s = "字符串"</td> 
       <td>直接赋值</td> 
      </tr> 
     </tbody> 
    </table>
 *  常用方法
    
    <table> 
     <thead> 
      <tr> 
       <th>方法</th> 
       <th>说明</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>length属性</td> 
       <td>获取字符串长度</td> 
      </tr> 
      <tr> 
       <td>charAt(index)</td> 
       <td>获取指定索引处字符</td> 
      </tr> 
      <tr> 
       <td>indexOf(value)</td> 
       <td>获取指定字符串出现的索引位置，不存在返回-1</td> 
      </tr> 
      <tr> 
       <td>substring(start,end)</td> 
       <td>根据给出范围截取字符串，含头不含尾</td> 
      </tr> 
      <tr> 
       <td>split(value)</td> 
       <td>根据指定规则切割字符串，返回数组</td> 
      </tr> 
      <tr> 
       <td>replace(old,new)</td> 
       <td>使用新字符替换旧字符</td> 
      </tr> 
     </tbody> 
    </table>

#### 5.RegExp对象 ####

*  构造方法
    
    <table> 
     <thead> 
      <tr> 
       <th>方法</th> 
       <th>说明</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>RegExp(规则)</td> 
       <td>根据制定规则创建对象</td> 
      </tr> 
      <tr> 
       <td>let reg = /^规则$/</td> 
       <td>直接赋值</td> 
      </tr> 
     </tbody> 
    </table>
 *  匹配方法：`test(字符串)`方法，用于查看字符串是否符合匹配规则

#### 6.Array对象 ####

*  常用方法
    
    <table> 
     <thead> 
      <tr> 
       <th>方法</th> 
       <th>说明</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>push(元素)</td> 
       <td>添加元素到数组末尾</td> 
      </tr> 
      <tr> 
       <td>pop()</td> 
       <td>删除数组末尾元素</td> 
      </tr> 
      <tr> 
       <td>shift()</td> 
       <td>删除数组最前面元素</td> 
      </tr> 
      <tr> 
       <td>includes(元素)</td> 
       <td>判断数组是否包含指定的元素</td> 
      </tr> 
      <tr> 
       <td>reverse()</td> 
       <td>反转数组中的元素</td> 
      </tr> 
      <tr> 
       <td>sort()</td> 
       <td>对数组元素排序</td> 
      </tr> 
     </tbody> 
    </table>

#### 7.Set对象 ####

*  元素唯一，存取顺序一致
 *  构造方法：`Set()`
 *  常用方法
    
    <table> 
     <thead> 
      <tr> 
       <th>方法</th> 
       <th>说明</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>add(元素)</td> 
       <td>添加元素</td> 
      </tr> 
      <tr> 
       <td>size属性</td> 
       <td>获取集合长度</td> 
      </tr> 
      <tr> 
       <td>keys()</td> 
       <td>获取迭代器对象</td> 
      </tr> 
      <tr> 
       <td>delete(元素)</td> 
       <td>删除指定元素</td> 
      </tr> 
     </tbody> 
    </table>
 *  Set集合遍历范例
    
        let set = new Set();
        set.add("a");
        set.add("b");
        let st = set.keys();
        for(let i = 0;i < set.size;i++){
            document.write(st.next().value);
        }

#### 8.Map对象 ####

*  key唯一，存取顺序一致
 *  构造方法：`Map()`
 *  常用方法
    
    <table> 
     <thead> 
      <tr> 
       <th>方法</th> 
       <th>说明</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>set(key,value)</td> 
       <td>向集合添加元素</td> 
      </tr> 
      <tr> 
       <td>size属性</td> 
       <td>获取集合长度</td> 
      </tr> 
      <tr> 
       <td>get(key)</td> 
       <td>根据key获取value</td> 
      </tr> 
      <tr> 
       <td>entries()</td> 
       <td>获取迭代器对象</td> 
      </tr> 
      <tr> 
       <td>delete(key)</td> 
       <td>根据key删除键值对</td> 
      </tr> 
     </tbody> 
    </table>
 *  Map集合遍历范例
    
        let map = new Map();
        map.set(1,"a");
        map.set(2,"b");
        let et = map.entries();
        for(let i = 0;i < map.size;i++){
            document.write(et.next().value);
        }

#### 9.JSON对象 ####

*  JSON(JavaScript Object Notation)是一种轻量级的数据交换格式
 *  它是基于ECMAScript规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据
 *  简洁和清晰的层次结构使得JSON成为理想的数据交换语言，易于人阅读和编写，同时也易于计算机解析和生成，并有效提升网络传输效率
 *  常用方法
    
    <table> 
     <thead> 
      <tr> 
       <th>方法</th> 
       <th>说明</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>stringfy(对象)</td> 
       <td>将指定对象转换为json格式字符串</td> 
      </tr> 
      <tr> 
       <td>parse(字符串)</td> 
       <td>将指定json格式字符串解析成对象</td> 
      </tr> 
     </tbody> 
    </table>
 *  范例
    
        let weather = {
            city : "北京";
            date : "2022-08-08";
            temperature : "10~20";
        };
        let str = JSON.stringfy(weather);
        let weather2 = JSON.parse(str);

### BOM ###

*  BOM(Browser Object Model)，是指浏览器对象模型
 *  将浏览器各个组成部分封装成不同的对象，方便进行操作
 *  具体有如下的对象
    
    1.  Navigator，表示浏览器对象
    2.  Window，窗口对象
    3.  Location，地址栏对象
    4.  History，窗口历史对象
    5.  Screen，显示屏幕对象
 *  Window窗口对象常用功能
    
     *  定时器
        
        1.  `唯一标识 setTimeout(功能,毫秒值);`方法，用于设置一次性定时器，返回一个唯一标识
        2.  `clearTimeout(标识);`方法，根据标识取消一次性定时器
        3.  `唯一标识 setInterval(功能,毫秒值);`方法，设置循环定时器，返回一个唯一标识
        4.  `clearInterval(标识);`方法，根据标识取消循环定时器
     *  加载事件：`window.onload=触发的事件`，用于页面加载完毕时触发的事件
 *  Location地址栏对象常用功能
    
     *  设置href属性，通过设置这个属性实现浏览器读取并显示新的URL的内容

[738488b6ed944d7583d1ad69b9f005f2.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/a2de34c2f8a84237befa5d5e84cbaa02.jpeg