WKY

JavaScript

 
  • Dec 03, 2025

本 JavaScript 笔记全程基于 ES6（ECMAScript 2015）标准编写，涵盖 let/const 变量声明、箭头函数、模块化、Promise、class 类等核心特性，所有示例与知识点均遵循 ES6 语法规范，贴合现代前端开发主流实践。

MDN官方文档：https://developer.mozilla.org/zh-CN/

使用方式：HTML页面中的任意位置加上标签即可。（加上type=”module”不会影响其他script标签）

  • 直接在标签内写JS代码。
  • 直接引入文件：。
  • 将所需的代码通过import关键字引入到当前作用域。

let与const：let用来定义变量；const用来定义常量

运算符与C++、Python、Java类似，不同点：**表示乘方，等于与不等于用===和!==（三个等号不仅判断值相等还判断类型相等）

函数

函数是用对象来实现的。函数也C++中的函数类似。

function add(a, b) {  // 如果未定义返回值，则返回undefined。
    return a + b;
}

let add = function (a, b) {
    return a + b;
}

let add = (a, b) => {
    return a + b;
}

类

与C++中的Class类似。但是不存在私有成员。this：指向类的实例。

class Point {
    constructor(x, y) {  // 构造函数
        this.x = x;  // 成员变量
        this.y = y;

        this.init();
    }

    init() {
        this.sum = this.x + this.y;  // 成员变量可以在任意的成员函数中定义
    }

    toString() {  // 成员函数
        return '(' + this.x + ', ' + this.y + ')';
    }
}

let p = new Point(3, 4);
console.log(p.toString());

class ColorPoint extends Point {  // 继承
    constructor(x, y, color) {
        super(x, y); // 这里的super表示父类的构造函数
        this.color = color;
    }

    toString() {
        return this.color + ' ' + super.toString(); // 调用父类的toString()
    }
}

注意：

  • super这个关键字，既可以当作函数使用，也可以当作对象使用。
    • 作为函数调用时，代表父类的构造函数，且只能用在子类的构造函数之中。
    • super作为对象时，指向父类的原型对象。
  • 在子类的构造函数中，只有调用super之后，才可以使用this关键字。
  • 成员重名时，子类的成员会覆盖父类的成员。类似于C++中的多态。

事件

JavaScript的代码一般通过事件触发。可以通过addEventListener函数为元素绑定事件的触发函数。

常见的触发函数有：

鼠标

  • click：鼠标左键点击
  • dblclick：鼠标左键双击
  • contextmenu：鼠标右键点击
  • mousedown：鼠标按下，包括左键、滚轮、右键
  • event.button：0表示左键，1表示中键，2表示右键
  • mouseup：鼠标弹起，包括左键、滚轮、右键
  • event.button：0表示左键，1表示中键，2表示右键

键盘

  • keydown：某个键是否被按住，事件会连续触发
  • event.code：返回按的是哪个键
  • event.altKey、event.ctrlKey、event.shiftKey分别表示是否同时按下了alt、ctrl、shift键。
  • keyup：某个按键是否被释放
  • event常用属性同上
  • keypress：紧跟在keydown事件后触发，只有按下字符键时触发。适用于判定用户输入的字符。
  • event常用属性同上
  • keydown、keyup、keypress的关系类似于鼠标的mousedown、mouseup、click

表单

  • focus：聚焦某个元素
  • blur：取消聚焦某个元素
  • change：某个元素的内容发生了改变

窗口（需要作用到window元素上）

  • resize：当窗口大小放生变化
  • scroll：滚动指定的元素
  • load：当元素被加载完成

JavaScript常用库

jQuery

使用方式

  • 在<head>元素中添加以下任意一种： 
    <script src="https://cdn.acwing.com/static/jquery/js/jquery-3.3.1.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  • 按jQuery官网提示下载：https://jquery.com/download/

选择器（类似于CSS选择器）

$('div');
$('#kof');  // id
$('.big-div');  // class
$('div > p');

事件

$('div').on('click', function (e) {  // $(selector).on(event, func)绑定事件
    console.log("click div");
});

$('div').on('click', function (e) {  // $(selector).off(event, func)删除事件
    console.log("click div");

    $('div').off('click');
});

$('div').on('click.first', function (e) {  // 当存在多个相同类型的事件触发函数时，可以通过click.name来区分
    console.log("click div");

    $('div').off('click.first');
});

元素的隐藏、展现、添加、删除

$A.hide();   // 隐藏，可以添加参数，表示消失时间
$A.show();  // 展现，可以添加参数，表示出现时间
$('<div class="mydiv"><span>Hello World</span></div>');  // 构造一个jQuery对象
$A.append($B);  // 将$B添加到$A的末尾
$A.remove();   // 删除元素$A

对类的操作

$A.addClass(class_name);  // 添加某个类
$A.removeClass(class_name);  // 删除某个类
$A.hasClass(class_name);  // 判断某个类是否存在

ajax

$.ajax({  // GET方法
    url: url,
    type: "GET",
    data: {  // 输入
    },
    dataType: "json",
    success: function (resp) {  // resp为后端返回的json字典

    },
});

requestAnimationFrame(func)

该函数会在下次浏览器刷新页面之前执行一次，通常会用递归写法使其每秒执行60次func函数。调用时会传入一个参数，表示函数执行的时间戳，单位为毫秒。

例如：

let step = (timestamp) => {  // 每帧将div的宽度增加1像素
    let div = document.querySelector('div');
    div.style.width = div.clientWidth + 1 + 'px';
    requestAnimationFrame(step);
};

requestAnimationFrame(step);

JSON

JSON对象用于序列化对象、数组、数值、字符串、布尔值和null。

常用API：

JSON.parse();  // 将字符串解析成对象
JSON.stringify();  // 将对象转化为字符串

canvas

<canvas>是一个可以使用脚本 (通常为JavaScript) 来绘制图形的 HTML 元素。为了在 Canvas 上绘制图形，我们使用一个 JavaScript 上下文对象，它能动态创建图像。例如：

this.$canvas = $('<canvas width="1280" height="700" tabindex=0></canvas>');
this.ctx = this.$canvas[0].getContext('2d');

websocket

与服务器建立全双工连接。常用API：

new WebSocket('ws://localhost:8080');：建立ws连接。
send()：向服务器端发送一个字符串。一般用JSON将传入的对象序列化为字符串。
onopen：类似于onclick，当连接建立时触发。
onmessage：当从服务器端接收到消息时触发。
close()：关闭连接。
onclose：当连接关闭后触发。

window

window.open("https://www.acwing.com")在新标签栏中打开页面。
location.reload()刷新页面。
location.href = "https://www.acwing.com"：在当前标签栏中打开页面。

localStorage

可以在用户的浏览器上存储键值对。常用API：

setItem(key, value)：插入
getItem(key)：查找
removeItem(key)：删除
clear()：清空

Map

Map 对象保存键值对。用for…of或者forEach可以按插入顺序遍历。键值可以为任意值，包括函数、对象或任意基本类型。常用API：

set(key, value)：插入键值对，如果key已存在，则会覆盖原有的value
get(key)：查找关键字，如果不存在，返回undefined
size：返回键值对数量
has(key)：返回是否包含关键字key
delete(key)：删除关键字key
clear()：删除所有元素

Set

Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。用for…of或者forEach可以按插入顺序遍历。常用API：

add()：添加元素
has()：返回是否包含某个元素
size：返回元素数量
delete()：删除某个元素
clear()：删除所有元素
Search