JS学习总结-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_50448879/article/details/136699441

本文介绍了JavaScript模块化编程中的关键概念，包括变量声明、运算符使用、C++风格的判断和循环，以及对象、数组、函数、类、继承、静态方法和事件处理机制，涵盖了鼠标、键盘、表单和窗口事件的响应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用方式

HTML页面中的任意位置加上<script type="module"></script>标签即可。

常见使用方式有以下几种：

直接在<script type="module"></script>标签内写JS代码。
直接引入文件：<script type="module" src="/static/js/index.js"></script>。
将所需的代码通过import关键字引入到当前作用域。

变量

用来声明变量，作用范围为当前作用域。

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

运算符

与C++、Python、Java类似，不同点：

**表示乘方
等于与不等于用===和!==

判断语句与循环语句和c语言一致

对象

类似于C++中的map，由key:value对构成。

value可以是变量、数组、对象、函数等。
函数定义中的this用来引用该函数的“拥有者”。

例如：

let person = {
    name: "yxc",
    age: 18,
    money: 0,
    add_money: function (x) {
        this.money += x;
    }
}

对象属性与函数的调用方式：

person.name、person.add_money()
person["name"]、person["add_money"]()

数组

数组是一种特殊的对象。

类似于C++中的数组，但是数组中的元素类型可以不同。

数组中的元素可以是变量、数组、对象、函数。

例如：

let a = [1, 2, "a", "yxc"];
let b = [
    1,  // 变量
    "yxc",  // 变量
    ['a', 'b', 3],  // 数组
    function () {  // 函数
        console.log("Hello World");
    },
    { name: "yxc", age: 18 }  // 对象
];

数组的常用属性和函数

属性length：返回数组长度。注意length是属性，不是函数，因此调用的时候不要加()
函数push()：向数组末尾添加元素
函数pop()：删除数组末尾的元素
函数splice(a, b)：删除从a开始的b个元素
函数sort()：将整个数组从小到大排序
- 自定义比较函数：array.sort(cmp)，函数cmp输入两个需要比较的元素，返回一个实数，负数表示第一个参数小于第二个参数，0表示相等，正数表示大于。

函数

函数是用对象来实现的。

函数也C++中的函数类似。

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

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

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

返回值:如果未定义返回值，则返回undefined。

类

与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());

继承

1class 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++中的多态。

静态方法

在成员函数前添加static关键字即可。静态方法不会被类的实例继承，只能通过类来调用。例如：

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    
    toString() {
    	return '(' + this.x + ', ' + this.y + ')';
	}

	static print_class_name() {
    	console.log("Point");
	}
}

let p = new Point(1, 2);
Point.print_class_name();
p.print_class_name();  // 会报错

事件

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常用属性同上