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

发布时间：2023-04-27 文章分类：WEB开发, 电脑百科投稿人：王小丽字号：默认 | 大 | 超大打印

基本语法

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

类型	说明
boolean	布尔类型，true或false
undefined	未定义，即定义变量时没有赋值
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比较返回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文档对象来获取元素对象

方法	说明
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	用于改变域的内容

绑定事件的方式

通过标签中事件属性进行绑定

范例：
```
<button οnclick="触发的操作"></button>
```

通过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

方法	说明
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 = "字符串" 直接赋值

方法	说明
String(value)	根据指定字符串创建对象
let s = "字符串"	直接赋值

常用方法

方法	说明
length属性	获取字符串长度
charAt(index)	获取指定索引处字符
indexOf(value)	获取指定字符串出现的索引位置，不存在返回-1
substring(start,end)	根据给出范围截取字符串，含头不含尾
split(value)	根据指定规则切割字符串，返回数组
replace(old,new)	使用新字符替换旧字符

5.RegExp对象

构造方法

方法说明

RegExp(规则) 根据制定规则创建对象

let reg = /^规则$/ 直接赋值
匹配方法：test(字符串)方法，用于查看字符串是否符合匹配规则

方法	说明
RegExp(规则)	根据制定规则创建对象
let reg = /^规则$/	直接赋值

6.Array对象

常用方法

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

7.Set对象

元素唯一，存取顺序一致
构造方法：Set()
常用方法

方法说明

add(元素) 添加元素

size属性获取集合长度

keys() 获取迭代器对象

delete(元素) 删除指定元素

方法	说明
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获取value

entries() 获取迭代器对象

delete(key) 根据key删除键值对

方法	说明
set(key,value)	向集合添加元素
size属性	获取集合长度
get(key)	根据key获取value
entries()	获取迭代器对象
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格式字符串解析成对象

方法	说明
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的内容

标签 js, 匿名函数, 语法