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);
    });
}

结语

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

相关推荐
GHZero22 分钟前
Java 之解读String源码(九)
java·开发语言
Swift社区26 分钟前
Lombok 不生效 —— 从排查到可运行 Demo(含实战解析)
java·开发语言·安全
南清的coding日记28 分钟前
Java 程序员的 Vue 指南 - Vue 万字速览(01)
java·开发语言·前端·javascript·vue.js·css3·html5
@大迁世界42 分钟前
我用 Rust 重写了一个 Java 微服务,然后丢了工作
java·开发语言·后端·微服务·rust
yoyoma1 小时前
object 、 map 、weakmap区别
前端·javascript
himobrinehacken1 小时前
c语言宏注意事项
c语言·开发语言
shyshi1 小时前
vercel 部署 node 服务和解决 vercel 不可访问的问题
前端·javascript
.生产的驴1 小时前
React 模块化Axios封装请求 统一响应格式 请求统一处理
前端·javascript·react.js·前端框架·json·ecmascript·html5
雾岛听风来1 小时前
Android开发中常用高效数据结构
前端·javascript·后端
自在极意功。1 小时前
Java static关键字深度解析
java·开发语言·面向对象·static