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进行开发。

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

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

相关文章

LayUI之增删改查

目录 一、前言 1.1 前言 1.2 前端代码(数据表格组件) 1.3 封装JS 二、LayUI增删改查的后台代码 2.1 编写Dao方法 2.1 增加 2.2 删除 2.3 修改 三、LayUI增删改查的前端代码 3.1 增加 一、前言 1.1 前言 上一篇文章我们一起做了LayUI的动态添加选项卡&#xff0c;这一篇…

IP库新增多种颜色转换空间IP

颜色空间转换是图像及视频中常用的解决方案&#xff0c;涉及hsv-rgb、rgb-ycrcb等一些常见的颜色空间互相转换&#xff0c;今天带来几种常见的颜色空间转换IP&#xff0c;主要如下&#xff1a; IP库简介 一直想做一个可以供大家学习、使用的开源IP库&#xff0c;类似OpenCores&…

基于单片机快递柜的设计与实现

功能介绍 以51单片机作为主控系统&#xff1b;液晶显示当前信息&#xff0c;最多可存储几十个&#xff1b;按下存储按键液晶显示当前快递柜剩余数量&#xff1b;继电器打开&#xff0c;表示用来放物品&#xff1b;正次按下存储按键将取消存快递&#xff0c;继电器关闭快递柜可用…

“探索图像处理的奥秘:使用Python和OpenCV进行图像和视频处理“

1、上传图片移除背景后下载。在线抠图软件_图片去除背景 | remove.bg – remove.bg 2、对下载的图片放大2倍。ClipDrop - Image upscaler 3、对放大后的下载照片进行编辑。 4、使用deepfacelive进行换脸。 1&#xff09;将第三步的照片复制到指定文件夹。C:\myApp\deepfakeliv…

Proxmox VE 为 Windows 虚拟机添加硬盘遇到的问题

环境&#xff1a;PVE 8.x、Windows 11/Windows Server 2019 &#x1f449;问题一&#xff1a; 为 windows 虚拟机添加磁盘&#xff0c;重启虚拟机后&#xff08;在 windows 系统中重启&#xff09;磁盘未能生效&#xff0c;并显示为橘色。 ❗橘色 意味需要重启VM才能生效&…

如何应对客户报价要求过低的情况?这些方案帮你化解危机!

有个客户在寄样品之前让报价&#xff0c;并且要求承诺价格必须低于15美金&#xff0c;业务员同意了&#xff0c;让客户把样板安排寄到中国&#xff0c;但是收到样品后发现客户的样品在侧面还有一块突出的部分&#xff0c;所以15美金太低了&#xff0c;无论如何也得18美金&#…

【数据挖掘】如何为可视化准备数据

一、说明 想要开始您的下一个数据可视化项目吗&#xff1f;首先与数据清理友好。数据清理是任何数据管道中的重要步骤&#xff0c;可将原始的“脏”数据输入转换为更可靠、相关和简洁的数据输入。诸如Tableau Prep或Alteryx之类的数据准备工具就是为此目的而创建的&#xff0c;…

深入理解React与闭包的关系

深入理解React与闭包的关系 声明一、介绍二、React组件及状态管理三、闭包在React中的应用保存状态处理作用域 四、总结 声明 本文将深入探讨React与闭包之间的关系。 我们将首先介绍React和闭包的基本概念&#xff0c;然后详细解释React组件中如何使用闭包来处理状态和作用域…

网络虚拟化相关的Linux接口介绍

Linux拥有丰富的网络虚拟化功能&#xff0c;能被虚拟机&#xff0c;容器还有云网络使用。在这篇文章中&#xff0c;我会给出所有通用网络虚拟化接口的简要介绍。没有代码分析&#xff0c;只有简短的接口介绍和在Linux上的使用操作。这系列接口都可以使用ip link命令实现。 这篇…

微信原生实现一个简易的图片上传功能

一、实现原理 wx.showActionSheet()&#xff1a;显示操作菜单&#xff0c;选择是从相册选择还是相机拍摄照片wx.chooseImage()&#xff1a;从本地相册选择图片或使用相机拍照。wx.uploadFile()&#xff1a;将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求&#xff0c…

docker部署rabbitmq

docker部署rabbitmq 镜像搜索 docker search rabbitmq下载镜像 docker pull rabbitmq启动 docker run -d --name rabbitmq --restart always \ -p 15672:15672 \ -p 5672:5672 \ rabbitmq后台插件安装 docker exec -it rabbitmq /bin/bash rabbitmq-plugins enable rabb…

项目实战Qt网盘系统

背景&#xff1a;随着时代的发展&#xff0c;业务数据量的剧增及移动办公需求&#xff0c;人们对内存的需求越来越强&#xff0c;传统的存储产品&#xff0c;在容量及携带型日益不能满足人工的工作需求&#xff0c;网盘再此背景下应运而生。网盘是能够提供文件同步&#xff0c;…

回归预测 | MATLAB实现GRU(门控循环单元)多输入单输出(不调用工具箱函数)

回归预测 | MATLAB实现GRU(门控循环单元)多输入单输出(不调用工具箱函数) 文章目录 回归预测 | MATLAB实现GRU(门控循环单元)多输入单输出(不调用工具箱函数)预测效果基本介绍程序设计参考资料 预测效果 基本介绍 GRU神经网络是LSTM神经网络的一种变体&#xff0c;LSTM 神经网 …

Ubuntu 考虑采用新的 “统一默认安装 (unified default install)”

导读Ubuntu安装程序中的 “最小化安装” (Minimal installation) 是该发行版多年来最受欢迎的功能之一。 当用户选择 Ubuntu 的 “最小化安装” 选项时&#xff0c;可以在安装更少的预装应用程序情况下&#xff0c;获得完整、功能齐全的 Ubuntu 系统。 但这个功能可能要被砍掉…

个人博客系统(二)

该博客系统共有八个页面,即注册页面、登录页面、添加文章页面、修改文章页面、我的博客列表页面、主页、查看文章详情页面、个人中心页面。 1 注册页面 该页面如图所示: 首先,要先判断注册的用户名、密码、确认密码以及验证码是否为空,若有一个为空,点击提交,则会提醒 …

网络知识点之-IS-IS协议

中间系统到中间系统&#xff08;IS-IS&#xff0c;Intermediate system to intermediate system&#xff0c;读作“i-sys”&#xff09;是一种内部网关协议&#xff0c;是电信运营商普遍采用的内部网关协议之一。标准的IS-IS协议是由国际标准化组织制定的ISO/IEC 10589:2002 所…

文献阅读:MathPrompter: Mathematical Reasoning using Large Language Models

文献阅读&#xff1a;MathPrompter: Mathematical Reasoning using Large Language Models 1. 内容简介2. 方法细节3. 实验内容4. 结论&思考 文献链接&#xff1a;https://arxiv.org/abs/2303.05398 1. 内容简介 这篇文章是今年3月份的时候微软提出的一篇工作&#xff0…

HTML+CSS复习第一天

浏览器内核标签&#xff1a; 单行省略号 white-space:nowrap text-overflow:ellipsis overflow:hidden多行省略号&#xff1a;使用到浏览器内核:-webkit- 谷歌浏览器 overflow:hidden text-overflow:ellipsis -webkit-box-orient: vertical; -webkit-line-clamp: 3; display…

uniapp请求接口封装

uniapp请求接口封装 在uniapp发送请求跟web的不同&#xff0c;而且通过uni.request这个方法进行调用。 示例&#xff1a; uni.request({url: https://www.example.com/request, //仅为示例&#xff0c;并非真实接口地址。data: {text: uni.request},header: {custom-header:…

【云原生】k8s安全机制

前言 Kubernetes 作为一个分布式集群的管理工具&#xff0c;保证集群的安全性是其一个重要的任务。API Server 是集群内部各个组件通信的中介&#xff0c; 也是外部控制的入口。所以 Kubernetes 的安全机制基本就是围绕保护 API Server 来设计的。 比如 kubectl 如果想向 API…