JS的高级用法

关于JS高级用法

在学习JavaScript的过程中,我们必须了解一些基础知识,如变量、函数、类、循环等。这些基础知识是我们使用JavaScript的基础。但是,在日常的业务开发中,我们需要一些更高级的技巧来更好地解决问题。

通过阅读本文,你将了解到JS的高级知识点以及实际应用技巧,如高级数据结构和算法、函数式编程、异步编程和面向对象编程。我们会利用代码实例来让大家更好地理解这些知识点。同时,我们也会提供一些实战案例的示范和使用技巧,让你更好地将这些技术应用到实际业务中。

高级数据结构和算法

Map和Set数据结构

在JavaScript中,Map数据结构通常用于存储键值对,它可以使用任意类型作为键和值。Set数据结构用于存储唯一值的集合。

// 创建Map对象
const map = new Map();// 设置键值对
map.set('name', 'Tom');
map.set('age', 20);// 获取键值对
console.log(map.get('name')); // 'Tom'
console.log(map.get('age')); // 20// 创建Set对象
const set = new Set();// 添加元素
set.add(10);
set.add(20);
set.add(30);// 删除元素
set.delete(20);// 判断元素是否存在
console.log(set.has(10)); // true
console.log(set.has(20)); // false

堆、栈和队列

堆和栈是常用的内存分配方式。栈是一种后进先出的数据结构,堆是一种动态分配的内存结构。队列是一种先进先出的数据结构,它通常用于缓存和并发编程中。

// 使用数组模拟堆
const arr = [1, 2, 3, 4];
arr.push(5); // 入堆
console.log(arr.pop()); // 出堆// 使用数组模拟栈
const stack = [1, 2, 3, 4];
stack.push(5); // 入栈
console.log(stack.pop()); // 出栈// 使用数组模拟队列
const queue = [1, 2, 3, 4];
queue.push(5); // 入队
console.log(queue.shift()); // 出队

深度优先搜索和广度优先搜索

深度优先搜索(DFS)和广度优先搜索(BFS)是常用的遍历算法。DFS通常用于解决深度问题,BFS适用于宽度问题。

// 深度优先遍历
function dfs(node) {if (node == null) return;console.log(node.value);dfs(node.left);dfs(node.right);
}// 广度优先遍历
function bfs(node) {const queue = [node];while (queue.length) {const curr = queue.shift();console.log(curr.value);if (curr.left) queue.push(curr.left);if (curr.right) queue.push(curr.right);}
}

常用算法

常用的算法有排序、搜索、查找等。

// 排序算法:快速排序使用分治思想,通过把数组分成较小的块来排序

function quickSort(arr) {if (arr.length < 2) {return arr;}let pivot = arr[0];let left = [];let right = [];for (let i = 1; i < arr.length; i++) {if (arr[i] < pivot) {left.push(arr[i]);} else {right.push(arr[i]);}}return [...quickSort(left), pivot, ...quickSort(right)];
}// 查找算法:
function binarySearch(arr, target) {let left = 0;let right = arr.length - 1;while (left <= right) {const mid = Math.floor((left + right) / 2);if (arr[mid] === target) {return mid;} else if (arr[mid] < target) {left = mid + 1;} else {right = mid - 1;}}return -1;
}

函数式编程

高阶函数和柯里化

高阶函数和柯里化是函数式编程中的常见概念,它们可以让我们创建更加抽象、灵活的函数。

// 高阶函数
function higherOrderFunction(func) {return function (num) {return func(num);};
}function double(num) {return num * 2;
}const doubleFunc = higherOrderFunction(double);
console.log(doubleFunc(10)); // 20// 柯里化
function curry(func) {return function curried(...args) {if (args.length >= func.length) {return func.apply(this, args);} else {return function (...args2) {return curried.apply(this, [...args, ...args2]);};}};
}function sum(a, b, c) {return a + b + c;
}const curriedSum = curry(sum);
console.log(curriedSum(1)(2)(3)); // 6

闭包和作用域

闭包和作用域是JavaScript中比较常见的概念。闭包可以让我们维护函数内的状态,作用域则决定了变量的可见范围。

// 闭包
function closure() {let i = 0;return function () {return ++i;};
}const func = closure();
console.log(func()); // 1
console.log(func()); // 2// 作用域
let a = 10;function foo() {let a = 20;console.log(a); // 20
}foo();
console.log(a); // 10

函数式编程中的常见模式

函数式编程中有很多常见的模式,如map、filter、reduce等。

// map
const arr = [1, 2, 3];
const mapArr = arr.map((item) => item * 2);
console.log(mapArr); // [2, 4, 6]// filter
const filterArr = arr.filter((item) => item > 1);
console.log(filterArr); // [2, 3]// reduce
const reduceArr = arr.reduce((sum, curr) => sum + curr, 0);
console.log(reduceArr); // 6

异步编程

Promise和async/await

Promise和async/await是常见的异步编程方式,它们可以让我们更好地处理异步编程中的问题。

// Promise
function promise() {return new Promise((resolve, reject) => {setTimeout(() => {resolve('done');}, 1000);});
}promise().then((result) => console.log(result)); // 'done'// async/await
async function asyncFunc() {const result = await promise();console.log(result);
}asyncFunc(); // 'done'

事件循环和EventEmitter

事件循环和EventEmitter用于处理异步事件,它们可以让我们更好地处理事件流。

// 事件循环
console.log('start');
setTimeout(() => {console.log('setTimeout');
}, 0);
Promise.resolve().then(() => console.log('promise'));
console.log('end');// EventEmitter
const { EventEmitter } = require('events');
const emitter = new EventEmitter();emitter.on('doSomething', (arg1, arg2) => {console.log(`${arg1} ${arg2}`);
});emitter.emit('doSomething', 'Hello', 'World'); // 'Hello World'

Web Worker

Web Worker可以让我们将长时间运行的任务移出主线程,以避免阻塞UI。

// 主线程
const worker = new Worker('worker.js');worker.onmessage = (event) => {console.log(event.data);
};worker.postMessage('start');// worker.js
self.onmessage = (event) => {const result = longCalculation(event.data);self.postMessage(result);
};

面向对象编程

类和继承

JavaScript中的类和继承与其他面向对象编程语言类似。

// 类
class Animal {constructor(name) {this.name = name;}speak() {console.log(`${this.name} makes a noise.`);}
}class Cat extends Animal {constructor(name, breed) {super(name);this.breed = breed;}speak() {console.log(`${this.name} meows.`);}get description() {return `${this.name} is a ${this.breed} cat.`;}set nickname(nick) {this.name = nick;}
}const cat = new Cat('Fluffy', 'Persian');
cat.speak(); // 'Fluffy meows.'
console.log(cat.description); // 'Fluffy is a Persian cat.'
cat.nickname = 'Fuffy';
console.log(cat.name); // 'Fuffy'

Encapsulation、Inheritance、Polymorphism(封装、继承、多态)

封装、继承、多态是面向对象编程中的重要概念。

// 封装
class Person {constructor(name) {this._name = name;}get name() {return this._name.toUpperCase();}set name(newName) {this._name = newName;}
}const person = new Person('John');
console.log(person.name); // 'JOHN'
person.name = 'Lisa';
console.log(person.name); // 'LISA'// 继承
class Shape {constructor(color) {this.color = color;}draw() {console.log('Drawing a shape...');}
}class Circle extends Shape {constructor(color, radius) {super(color);this.radius = radius;}draw() {console.log(`Drawing a ${this.color} circle with radius ${this.radius}.`);}
}const circle = new Circle('red', 10);
circle.draw(); // 'Drawing a red circle with radius 10.'// 多态
function drawShape(shape) {shape.draw();
}drawShape(new Shape('blue')); // 'Drawing a shape...'
drawShape(new Circle('green', 20)); // 'Drawing a green circle with radius 20.'

总结和实战

在本文中,我们介绍了一些JavaScript的高级知识点,如高级数据结构和算法、函数式编程、异步编程和面向对象编程。我们还提供了一些代码示例和实战案例,让掘友们更好地理解和掌握这些技术。

通过Promise.all实现并发请求

function fetchData(urls) {const promises = urls.map((url) => fetch(url));return Promise.all(promises).then((responses) =>Promise.all(responses.map((response) => {if (!response.ok) throw new Error(response.statusText);return response.json();})));
}

使用async/await实现异步调用

async function getData(url) {const response = await fetch(url);if (!response.ok) throw new Error(response.statusText);const data = await response.json();return data;
}

在面向对象编程中使用工厂模式

class Product {constructor(name, price) {this.name = name;this.price = price;}
}class ProductFactory {createProduct(name, price) {return new Product(name, price);}
}const productFactory = new ProductFactory();
const product = productFactory.createProduct('Apple', 1);
console.log(product.name); // 'Apple'
console.log(product.price); // 1

以上是一些简单的实战示例,但实际开发中,我们需要更加复杂和具体的案例来应对实际问题。希望本文能够为读者提供一些参考,让大家更好地掌握JavaScript的高级用法,像大神一样使用JavaScript进行开发。

在掌握一些高级技巧之后,还应该注重代码质量与可维护性等方面。我们可以采用一些工具和规范来帮助我们改善代码质量,例如ESLint、Prettier、代码规范等。只有在代码质量和可维护性上下功夫,我们才能成为真正的JavaScript大神。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/688510.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在线黑色响应式全屏滚动主页html源码

html5黑色大气的个人博客全屏滚动个人主页源码 右键记事本即可修改 直接上传服务器空间就可使用

如何从 0 开始学 Python 自动化测试开发

&#x1f525; 交流讨论&#xff1a;欢迎加入我们一起学习&#xff01; &#x1f525; 资源分享&#xff1a;耗时200小时精选的「软件测试」资料包 &#x1f525; 教程推荐&#xff1a;火遍全网的《软件测试》教程 &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1…

2.18通过字符设备驱动分步注册过程实现LED驱动的编写,编写应用程序测试

应用程序&#xff1a; #include<stdlib.h> #include<stdio.h> #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h> #include<unistd.h> #include<string.h> #include<sys/ioctl.h> #include"myled.h&quo…

阿里云香港轻量应用服务器是什么线路?cn2?

阿里云香港轻量应用服务器是什么线路&#xff1f;不是cn2。 阿里云香港轻量服务器是cn2吗&#xff1f;香港轻量服务器不是cn2。阿腾云atengyun.com正好有一台阿里云轻量应用服务器&#xff0c;通过mtr traceroute测试了一下&#xff0c;最后一跳是202.97开头的ip&#xff0c;1…

递归算法与分治思想

递归算法 直接或间接的调用自身的算法称为递归函数,采用栈结构,先调用的最后返回。 主要形式就是先纵后横,一个分支走到底,再退回一个到兄弟节点,依次回退。 列出递归的三种形式:切蛋糕、递推公式、等价转换。 递归要素: 明确递归得到结果是什么提取重复的逻辑,缩小…

数据库第五次实验

目录 1 创建数据表 2 创建多个用户 ​​​​​​​3 用户的授权 ​​​​​​​4 用户权限的回收 ​​​​​​​5 角色的创建与授权 ​​​​​​​6 回收角色的权利 ​​​​​​​7 审计的设置 1 创建数据表 SQL语句&#xff1a; use experimentfive; create table…

【多线程】进程和线程的区别和联系

进程和线程 什么是进程什么是线程为啥要有线程&#x1f332;进程和线程的关系&#x1f332;系统管理与分配资源和CPU调度角度&#x1f332;资源使用角度&#x1f332;线程的特点 什么是进程 进程是操作系统对⼀个正在运⾏的程序的⼀种抽象&#xff0c;换⾔之&#xff0c;可以把…

rtt设备io框架面向对象学习-pin设备

目录 1.pin设备基类2.pin设备基类的子类3.初始化/构造流程3.1设备驱动层3.2 设备驱动框架层3.3 设备io管理层 4.总结5.gpio的pin映射6.使用 1.pin设备基类 此层处于设备驱动框架层。 在/ components / drivers / include / drivers 下的pin.h定义了如下pin设备基类 struct rt…

2024年开工,煮熟的鸭子飞了咋办

去年是我居家创业的第一个年头&#xff0c;业绩总体来说不及预期&#xff08;上班的收入&#xff09;&#xff0c;仅仅满足日常开支&#xff0c;没有任何的盈余。 去年有点项目没完成收尾&#xff0c;所以初四我就选择开工了&#xff0c;就图一个大吉大利。年前积压的客户需求…

【uCore 操作系统】1. 应用程序与基本执行环境

文章目录 【 1. 代码框架简述 】1.1 OS 是怎么跑起来的&#xff1f;1.1.1 qemu 的作用1.1.2 rustsbi.bin 的作用 1.2 qemu 是怎么跑起来的&#xff1f;1.3 OS 文件夹1.3.1 kernel.ld1.3.2 entry.S1.3.3 main.c1.3.4 sbi.c 1.4 bootloader 文件夹 【 2. makefile 和 qemu 】2.1 …

【SpringBoot】项目启动增加自定义Banner

SpringBoot项目启动增加自定义Banner 前言 最近有个老哥推荐我给博客启动的时候加上自定义Banner&#xff0c;开始我还不太明白他说的是那部分&#xff0c;后面给我发了这样一个&#xff0c;瞬间就懂了~ // _ooOoo_ …

C++入门篇——命名空间

在C/C中&#xff0c;变量、函数和后面要学到的类都是大量存在的&#xff0c;这些变量、函数和类的名称将都存 在于全局作用域中&#xff0c;可能会导致很多冲突。使用命名空间的目的是对标识符的名称进行本地化&#xff0c; 以避免命名冲突或名字污染&#xff0c;namespace关键…

内联函数与普通函数的区别

内联函数与普通函数的区别 内联函数与普通函数的主要区别在于它们在编译过程中的处理方式。 普通函数&#xff1a; 普通函数在编译后会被放到代码段中。当程序需要调用一个普通函数时&#xff0c;会先进行参数压栈&#xff0c;然后根据函数调用地址调用函数。函数执行完成…

【开源讲解】

开源讲解 开源介绍 开源介绍 开源是指一种项目、产品或创意的设计、开发和分享过程&#xff0c;它鼓励公开协作。在IT与软件领域&#xff0c;开源指的通常是开源软件&#xff0c;它的源代码可以被任何人查看、修改和改进。这与传统的专有软件形成鲜明对比&#xff0c;后者的源…

数字经济政策 | ZF工作报告-60个文本词频

根据各省政府工作报告&#xff0c;参考金灿阳(2022)和陶长琪(2022)&#xff0c;借助Python软件&#xff0c;统计数字经济相关的关键词词频&#xff0c;分别记为数字经济政策词频A、数字经济政策词频B A文献参考 B文献参考 年度趋势 一、数据介绍 数据名称&#xff1a; 政府工…

Spring Boot java -jar --spring.profiles.active=dev 失效问题

之前动态部署修改配置文件的情况不多&#xff0c;所以也没注意过&#xff0c;这个问题今天困扰了好久&#xff0c;经过多方查询后得到了解决办法 直接上代码 <profiles><profile><!-- 本地开发环境 --><id>dev</id><properties><profi…

债券专题二:可转债估值-二叉树模型

1. 模型背景 由于可转债自身的属性较多&#xff0c;因此对其定价的难度也会加大&#xff0c;在诸多影响因素中&#xff0c;未来的股价占比最高。由于股价的不可预测性&#xff0c;导致了可转债的定价在实际交易中作用非常有限。随着可转债发行数量和规模的增大&#xff0c;越…

2.18 C++ day6

思维导图 以下是一个简单的比喻&#xff0c;将多态概念与生活中的实际情况相联系&#xff1a; 比喻&#xff1a;动物园的讲解员和动物表演 想象一下你去了一家动物园&#xff0c;看到了许多不同种类的动物&#xff0c;如狮子、大象、猴子等。现在&#xff0c;动物园里有一位讲…

C++初阶(十三) 模板

一、非类型模板参数 模板参数分类类型形参与非类型形参。类型形参即&#xff1a;出现在模板参数列表中&#xff0c;跟在class或者typename之类的参数类型名称。非类型形参&#xff0c;就是用一个常量作为类(函数)模板的一个参数&#xff0c;在类(函数)模板中可将该参数当成常量…

基于微信小程序的健身房私教预约系统,附源码

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…