JavaScript知识点总结

置顶袅沫

已于 2024-03-04 13:52:11 修改

阅读量1k

点赞数 32

文章标签： javascript 开发语言 ecmascript

于 2024-02-27 21:55:45 首次发布

本文链接：https://blog.csdn.net/qq_58341172/article/details/136246953

版权

一、JavaScript简介

1. 什么是JavaScript

JavaScript简称为JS，由网景公司开发的客户端脚本语言，不需要编译，可以直接运行

Web前端三层：

结构层 HTML 定义页面的结构
样式层 CSS 定义页面的样式
行为层 JavaScript 用来实现交互，提升用户体验

2. JavaScript作用

在客户端动态的操作页面
在客户端做数据的校验
在客户端发送异步请求

二、引用方式

1. 内联方式

在页面中使用script标签，在script标签的标签体中编写js代码

script标签可以放在页面的任意位置，一般放在head中

    <!-- 1.内联方式 -->
    <script>
        alert('111')
    </script>

2. 行内方式

在普通标签中编写js代码，一般需要结合事件属性，如onclick、onmouseover等

    <!-- 2.行内方式 -->
    <button onclick="alert('222')">点击事件</button>

3. 外部方式

使用单独的.js文件定义，然后在页面中使用script标签引入外部脚本文件

    <!-- 3.外部方式，引用单独的js文件 -->
    <Script src="js/hello.js"></Script>

注：如果某个script标签用于引入外部js文件，则该script标签的标签体中不能再写js代码

三、基本用法

1. 变量

js是一门弱类型的语言，声明变量时使用var关键字，不需要指定变量的类型

语法：var 变量名=变量值;

在ECMAScript 6规范中新增let关键字，也用于声明变量

使用let声明的变量支持块级作用域，而使用var声明的变量不支持块级作用域

注：在IDEA中配置ES版本 Settings——>Languages & FrameWorks——>JavaScript——>JavaScript Language version

 <script>
        var name;
        name = 'tom';

        var age = 20;
        var a=6,b=9;

        let sex = 'male';

        // alert(name);
        // alert(sex);

        //区别
        {
            var x = 6; //全局变量
            let y = 7; //支持块级作用域
        }
            alert(x);
            alert(y);
    </script>

2. 输入和输出

输出：

alert() 弹出警告框
console.log() 输出到浏览器的控制台
document.write() 输出到页面

输入：

prompt() 弹出输入框，获取用户输入的数据

使用typeof 变量判断变量的类型

使用Number(变量)将字符串转换为数值

    <script>
        /**
         * 输出
         */
        //  alert('aaa');
        //  console.log('bbb');
        //  document.write('ccc');

        /**
         * 输入
         */ 
        // var name = prompt('请输入姓名:');
        // console.log(name);
        var age = prompt('请输入年龄：');
        console.log(age + 1);
        console.log(typeof age); //使用typeof查看变量的类型
        console.log(typeof Number(age));
        console.log(Number(age) + 1);
    </script>

3. 转义符

常用转义符：

\n 换行
\t 缩进
\"双引号
\'单引号

4. 注释

单行注释：//

多行注释：/* */

5. 编码规范

代码区分大小写

合理的代码缩进

每条语句结束时可以加分号，也可以不加

四、核心语法

1. 数据类型

基础数据类型：

string 字符串
number 数值（NaN表示非数字Not a Number，其自身是number类型，表示数值的不正常状态）
boolean 布尔
null 空类型
undefinded 未定义类型

数据类型转换：

转换为number

使用Number()、parseInt()、parseFloat()
转换为string

拼接空字符串
转换为boolean

使用Boolean()

注：0、空字符串、null、undefinded、NaN会被转换成false，其他值都会被转换为true

    <script>
        /**
         * 常用数据类型
         */ 
        var name = 'Tom';
        var address = "南京"
        var age = 20
        var height = 190.3
        var flag = true
        var hobby = null
        var sex

        console.log(typeof name);
        console.log(typeof age);
        console.log(name - 5);
        console.log(typeof flag);
        console.log(typeof hobby);
        console.log(typeof sex);

        console.log('----------');

        //转化为number
        var a = '25'
        var b = '12.6'
        console.log(Number(a));
        console.log(typeof Number(a));
        console.log(parseInt(a),typeof parseInt(a));
        console.log(parseFloat(b),typeof parseFloat(b));

        //转化为string
        var x = 8;
        x = x + '';
        console.log(typeof x);

        console.log('----------');

        //转化为boolean
        console.log(Boolean(0));
        console.log(Boolean(NaN));
        console.log(Boolean(''));
        console.log(Boolean(undefined));
        console.log(Boolean(null));
        console.log(Boolean(-9));

        if(5){
            console.log('hello');
        }
    </script>

2. 运算符

算术运算符：+、-、*、/、%、**、++、--

比较运算符：<、>、>=、<=、==、===、!=

赋值运算符：=、+=、-=、*=、/=、%=

逻辑运算符：&&、||、!

条件运算符：条件?表达式1:表达式2

3. 选择结构

if…else、switch

4. 循环结构

while、do…while、for、for…in、for...of

break、continue

5. 数组

5.1 定义方式

语法：

var arr = new Array();
var arr = new Array(值1,值2...);
var arr = [值1,值2...];

注意：

数组长度会自动扩展
数组中元素的默认值为undefined
使用length属性来获取数组的长度
5.2 常用方法

方法	描述
sort()	排序，默认按字符编码的顺序排列，非string类型会自动转换为string，可自定义比较规则
reverse()	反转，将数组元素倒序排列
push()	添加新的元素
join(separator)	将数组中元素使用指定的分隔符连接成字符串，默认通过逗号进行连接
indexOf()	返回指定元素在数组中首次出现的位置
slice(begin,end)	截取数组中索引从begin到end的元素，左闭右开，如果省略第二个参数，则表示截取到末尾
toString()	将数组转换为字符串

var arr1 = [
            [1,2,3],
            [11,22,33],
            [11,33,44]
        ]
        console.log(arr1);

        for (let i = 0; i < arr1.length; i++) {
               console.log(arr1[i]);
        }

6.1 回调函数

不立即执行的函数调用，满足一定条件时才会执行或者由别的代码调用执行，称为回调函数 callback

调用时只写函数名，没有小括号()和参数

应用：

作为事件绑定的函数
作为另一个函数的参数

        // function f1(){
        //     console.log(111);
        // }

        // f1();

        // window.onclick = f1 //此时f1是一个回调函数(先写好函数，等回头再调用)

        window.onclick = function (){ //匿名函数、回调函数
            console.log(222); 
        }

6.2 箭头函数

 /**
         * 定义函数的另一种方式
         */
        var a = 'hello';
        console.log(a); 

        //定义函数的另一种方式
        // var b = function(){
        //     console.log(111);
        // }

        b();
        // console.log(b);

        //相当于此代码
        function b(){
            console.log(222);
        }

        /**
         * 箭头函数，语法：参数 => 表达式
         */
        
        //  示例1：只有一个函数
        // var f1 = function(x){
        //     return x**2;
        // }

        var f1 = x => x**2;
            console.log(f1(2));

        //示例2：有多个参数时，必须加小括号
        // var f2 = function(x,y){
        //     return x + y;
        // }

        var f2 = (x,y) => x+y
        console.log(f2(2,4,8));

        //示例3：没有参数时，必须加小括号
        // var f3 = function(){
        //     return 8;
        // }
        var f3 = () => 8
        console.log(f3());

        //示例4：函数体有多行代码
        // var f4 = function(x,y){
        //     var sum = x+y;
        //     return sum;
        // }
        var f4 = (x,y) =>{
            var sum = x + y;
            return sum;
        }
        console.log(f4(14,2));

        /**
         * 案例
         */
        var arr = [12,4,15,24,8,41] 
        //定义一个排序规则的函数
        var f5 = function(a,b){
            // return a-b;
            return b-a;
        }
        arr.sort(f5);
        console.log(arr);

        arr.sort((x,y) => x-y);
        console.log(arr);

五、复合类型

1. String

1.2 常用方法

方法	描述
charAt()	返回在指定索引位置的字符，也可使用`[索引]`的方式
indexOf()	返回某个指定的字符串值在字符串中首次出现的位置
lastIndexOf()	返回某个指定的字符串值在字符串中最后出现的位置
toLowerCase()	把字符串转化为小写
toUpperCase()	把字符串转化为大写
substring()	提取字符串中两个指定的索引号之间的字符
replace()	将指定的字符串替换为指定的新的字符串
split()	把字符串分割为字符串数组
trim()	去除前后两端的空格

2.2 常用方法

方法名	说明
getFullYear()	以四位数字返回年份
getMonth()	返回月份(0~11)，0表示1月
getDate()	返回一个月中的某一天(1~31)
getHours()	返回小时 (0 ~ 23)
getMinutes()	返回分钟 (0 ~ 59)
getSeconds()	返回秒数 (0 ~ 59)
getMilliseconds()	返回毫秒(0 ~ 999)
getDay()	返回一周中的某一天(0~6)，0表示周日
getTime()	返回从1970-1-1 0:0:0至今的毫秒数

setXxx方法与getXxx方法类似，用于设置对应的值

六、DOM操作

1. DOM简介

Document Object Model 文档对象模型

浏览器加载HTML文档时，会将HTML文档解析为一个树形结构，称为DOM树

HTML文档和DOM树是一一对应的关系
当DOM树被改变时，与之对应的HTML文档也会随之改变
当需要对HTML中的内容进行动态改变时，可以使用DOM来进行操作
DOM提供了一组用来操作HTML文档的API，即提供一套属性、方法和事件
树上的每一个节点都是一个DOM对象，树的顶层为document对象，表示整个文档

2. 查询操作

即获取DOM对象

方法或属性	含义
document.getElementById("id值")	根据id属性来查询节点，返回匹配的第一个节点
document.getElementsByName("name属性值")	根据name属性来查询，返回所有匹配的节点集合
document.getElementsByTagName("标签名")	根据标签名来查询，返回所有匹配的节点集合
document.querySelector("选择器")	根据css选择器来查询，返回匹配的第一个节点
document.querySelectorAll("选择器")	根据css选择器来查询，返回所有匹配的节点集合
parentNode属性	查询当前节点的父节点
previousElementSibling属性	查询当前节点的上一个元素节点
nextElementSibling属性	查询当前节点的下一个元素节点
firstElementChild属性	查询当前节点的第一个元素子节点
lastElementChild属性	查询当前节点的最后一个元素子节点

3. 访问操作

3.1 访问属性

即获取/设置DOM对象的属性

DOM对象的属性和HTML标签的属性几乎是一样的，一般情况下DOM对象都会存在一个与对应HTML标签同名的属性

用法：DOM对象.属性

3.2 访问内容

即获取/设置标签中的内容

两种方式：

使用innerHTML

用法：DOM对象.innerHTML 将内容解析为HTML
使用innerText

用法： DOM对象.innerText 将内容作为纯文本

4. 添加操作

方法	含义
document.createElement("标签名")	创建一个元素节点，即标签
document.createTextNode("文本内容")	创建一个文本节点，即标签中的文本内容
node.appendChild(newNode)	将一个新的节点newNode添加到指定的节点node中子节点的末尾
node.insertBefore(newNode,refNode)	将一个新的节点newNode插入到node节点的子节点refNode之前
node.replaceChild(newNode,refNode)	用一个新的节点newNode替换原有的node节点中的子节点refNode

5. 删除操作

方法	含义
node.remove()	删除当前节点

6. 事件操作

6.1 事件冒泡

概念：当一个HTML元素产生事件时，该事件会从当前元素(事件源)开始，往上冒泡直到页面的根元素，所有经过的节点都会收到该事件并执行

特点：先触发子级元素的事件，再触发父级元素的事件

阻止事件冒泡：event.stopPropagation()

6.2 事件默认行为

概念：当一个事件发生时浏览器自己会默认做的事情，如：点击链接时默认会跳转，右键点击时默认会弹出菜单

阻止事件的默认行为：event.preventDefault()

Ajax简介

1. 传统Web与Ajax的差异

	传统Web	AJAX
发送请求方式	使用表单或超链接，发送同步请求	使用XMLHttpRequest对象，发送异步请求
服务器响应内容	完整的页面	只响应需要的数据
客户端处理方式	需等待服务器响应完成并重新加载页面后用户才能进行操作	可以动态更新页面内容，用户无需等待请求的响应

同步请求和异常请求：

同步请求：在服务端响应之前浏览器处于阻塞状态，等待服务端响应，此时不能进行交互操作
异步请求：在服务端响应之前浏览器可以执行其他操作，无需等待服务器响应

XMLHttpRequest对象

1. 常用属性

readyState：

表示XMLHttpRequest对象的状态，取值：

状态码	含义
0	XMLHttpRequest对象已经创建，还没有完成初始化
1	XMLHttpRequest对象开始发送请求
2	XMLHttpRequest对象发送请求完成
3	XMLHttpRequest对象开始读取响应，还没有结束
4	XMLHttpRequest对象读取响应结束，可以对响应结果进行处理

status：

请求相应介绍-HTTP响应格式：
HTTP 状态码分类
HTTP 状态码由三个十进制数字组成，第一个十进制数字定义了状态码的类型。响应分为五类：信息响应(100–199)，成功响应(200–299)，重定向(300–399)，客户端错误(400–499)和服务器错误 (500–599)：

1XX	响应中-临时状态码，表示请求已经接收，告诉客户端应该继续请求或者如果它已经完成则忽略它
2XX	成功-表示请求已经被成功接受，处理已完成
3XX	重定向-重定向到其他地方；让客户端再发起一次请求以完成整个处理
4XX	客户端错误--处理发生错误，责任在客户端，如：客户端的请求一个不存在的资源，客户端未被授权，禁止访问等
5XX	服务器端错误--处理发生错误，责任在服务端，如：服务端抛出异常，路由出错，HTTP版本不支持等

responseText：

获取响应的文本内容

2. 常用方法

open(method,url,async)：

用来建立与服务器的连接，参数：

参数含义
method 请求方式，取值：get（默认）、post
url 请求地址
async 是否异步，取值：true（默认）、false

参数	含义
method	请求方式，取值：get（默认）、post
url	请求地址
async	是否异步，取值：true（默认）、false

send()：

用来发送请求

3. 常用事件

onreadystatechange：

指定回调函数，当readyState状态改变时触发
只有当readyState是4，并且status是200的时候，才能处理服务器响应的数据

三、响应Ajax请求

1. 返回普通字符串

PrintWriter out = response.getWriter();
out.print("");
out.close();

2. 返回JSON

Fastjson是阿里巴巴的开源JSON解析库，可以将Java对象转换为JSON字符串，也可以将JSON字符串转换为Java对象

常用方法：

String toJSONString(Object object)
T parseObject(String text, Class<T> clazz)

注：可以使用@JSONField(format = "yyyy-MM-dd HH:mm:ss")，用在Date属性上，自动格式化日期

3. 自定义响应对象

ResponseResult / AjaxResult

public class ResponseResult {
    //响应状态码
    private int status;
    //响应消息
    private String message;
    //返回数据
    private Object data;
		...
}

四、jQuery实现Ajax

语法：$.ajax(settings)

settings是一个以{key:value}组成的Ajax请求设置，常用选项：

选项	含义
type	请求方式，取值：get（默认）、post
url	请求地址
data	请求参数，即发送给服务器的数据
dataType	响应的数据类型，取值：text（默认）、json、jsonp等
success	请求成功后执行的回调函数
error	请求失败时执行的回调函数