JavaScript——对象、数组、函数、类、事件

文章目录

序言

『不是为了战斗而活着,而是为了活着而战斗。』------ 「《DARLING in the FRANXX》」

对象

数组,函数,类,都算是对象

js 复制代码
let person = {
    name: "tzs",
    age: 18,
    money: 0,
    friends: ["alice", "bob", "lucy"],
    clothes: {
        color: "red",
        price: 20,
    },
    add_money: function (x) {
        this.money += x;
    },
};

数组

js 复制代码
let a = [1, 2, 1.2, "tzs", [3, 4, 5]];

应用程序编程接口(API) 是一套规则,它让一个软件程序能够向另一个软件程序传输数据。 API 让开发人员能够避免重复工作,根据API 的要求设置请求格式来将现有功能纳入新的应用程序,而不是构建和重建现有应用程序功能。 API 是一个"接口",意味着一个事物与另一个事物交互的一种方式。

js 复制代码
console.log(a.length);//查询数组长度
a.push("www");//添加一个元素
a.pop();//删除数组最后一个元素
a.splice(1, 2)//删除从下标为 1 开始的 2 个元素
a.sort();//把数组里面的元素按照从小到大的顺序进行排列

a.sort(function (a, b) {
    return b - a;
});//可以实现按照从大到小进行排序

函数

js 复制代码
function add(a, b) {
    return a + b;
}

let main = function () {
    console.log(add(3, 4));
};
js 复制代码
let add = function (a, b) {
    return a + b;//另外一种定义函数的方式
}

let main = function () {
    console.log(add(3, 4));
};
js 复制代码
let add = (a, b) => {
    return a + b;//简写
}

js 复制代码
class Point {//定义类的时候首字母大写 
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }

    init() {
        this.sum = this.x + this.y;
    }

    toString() {
        return `(${this.x},${this.y})`;
    }
}
js 复制代码
let p = new Point(3, 4);//类的实例

在静态函数之前加上 static 关键字,通过类来调用

js 复制代码
Point.print_class_name();

事件

鼠标点击

js 复制代码
let div = document.querySelector('div');

let main = function () {
    div.addEventListener('click', function (event) {

    });
}

export {
    main
}

鼠标双击

js 复制代码
let div = document.querySelector('div');

let main = function () {
    div.addEventListener('dblclick', function (event) {

    });
}

菜单

js 复制代码
contextmenu

鼠标按下

js 复制代码
let div = document.querySelector('div');

let main = function () {
    div.addEventListener('mousedown', function (event) {
        console.log("mousedown");
    });
}

export {
    main
}

键盘

js 复制代码
let input = document.querySelector('input');

let main = function () {
    input.addEventListener('keydown', function (event) {
        console.log(event.type, event.code);
    });
}

export {
    main
}

表单

js 复制代码
let div = document.querySelector('div');
let input = document.querySelector('input');

let main = function () {
    input.addEventListener('focus', function (event) {
        console.log(event.type, event.code);
    });
}

export {
    main
}

表示聚焦

窗口

js 复制代码
let main = function () {
    window.addEventListener('resize', function (e) {
        console.log(e.type);
    });
}

结语

『刀剑无眼,匠人有情。人情二字。不就是人类最引以为傲的事物吗?』------ 钟离「原神」

相关推荐
再见晴天*_*2 小时前
SpringBoot 中单独一个类中运行main方法报错:找不到或无法加载主类
java·开发语言·intellij idea
lqjun08273 小时前
Qt程序单独运行报错问题
开发语言·qt
hdsoft_huge5 小时前
Java & Spring Boot常见异常全解析:原因、危害、处理与防范
java·开发语言·spring boot
风中的微尘5 小时前
39.网络流入门
开发语言·网络·c++·算法
前端君5 小时前
实现最大异步并发执行队列
javascript
未来之窗软件服务6 小时前
幽冥大陆(二)RDIFSDK 接口文档:布草洗涤厂高效运营的技术桥梁C#—东方仙盟
开发语言·c#·rdif·仙盟创梦ide·东方仙盟
小冯记录编程6 小时前
C++指针陷阱:高效背后的致命危险
开发语言·c++·visual studio
1uther7 小时前
Unity核心概念⑨:Screen
开发语言·游戏·unity·c#·游戏引擎
知识分享小能手7 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
C_Liu_7 小时前
C++:类和对象(下)
开发语言·c++