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

基本语法

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.原始数据类型

类型说明boolean布尔类型，true或falseundefined未定义，即定义变量时没有赋值null声明null为变量值number整数或浮点数string字符串bigint大整数，例如bigint num = 10n;需要在数字后加上n
判断原始数据类型的方法：

使用

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比较返回true2. === 号比较类型和值，则字符串的"10"跟数字的10比较返回false3. 字符串类型的数字计算时会发生类型转换

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文档对象来获取元素对象方法说明getElementById(id属性值)根据id属性获取元素对象getElementsByTagName(标签名)根据标签名获取元素对象getElementsByName(name属性值)根据name属性获取元素对象getElementsByClassName(class属性值)根据class属性获取元素对象
• 根据当前元素对象获取父元素对象子元素对象.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="文本内容";注意：这里的文本内容会被解析标签

事件

• 事件是某些组件完成某些操作时会触发的代码
• 常用事件事件说明onload某个页面或图像被加载完成onsubmit表单提交时onclick鼠标点击事件ondblclick鼠标双击onblur元素失去焦点onfocus元素获得焦点onchange用于改变域的内容
• 绑定事件的方式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对象

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

4.String对象

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

5.RegExp对象

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

6.Array对象

• 常用方法方法说明push(元素)添加元素到数组末尾pop()删除数组末尾元素shift()删除数组最前面元素includes(元素)判断数组是否包含指定的元素reverse()反转数组中的元素sort()对数组元素排序

7.Set对象

• 元素唯一，存取顺序一致
• 构造方法：Set()
• 常用方法方法说明add(元素)添加元素size属性获取集合长度keys()获取迭代器对象delete(元素)删除指定元素
• 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()
• 常用方法方法说明set(key,value)向集合添加元素size属性获取集合长度get(key)根据key获取valueentries()获取迭代器对象delete(key)根据key删除键值对
• 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成为理想的数据交换语言，易于人阅读和编写，同时也易于计算机解析和生成，并有效提升网络传输效率
• 常用方法方法说明stringfy(对象)将指定对象转换为json格式字符串parse(字符串)将指定json格式字符串解析成对象
• 范例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的内容