非常有用的JavaScript高阶面试技巧!

🍀一、闭包

闭包是指函数中定义的函数,它可以访问外部函数的变量。闭包可以用来创建私有变量和方法,从而保护代码不受外界干扰。

// 例1
function outerFunction() {const privateVariable = "私有变量";function innerFunction() {console.log(privateVariable); // 内部引用外部变量}return innerFunction;
}
const myFunction = outerFunction();
myFunction(); // 输出 "私有变量"// 例2
function makeAdder(x) {  return function(y) {return x + y;}
}
const add5 = makeAdder(5);
add5(2); // 7

innerFunction 可以访问 outerFunction 中定义的 privateVariable 变量,但外部的代码无法直接访问 privateVariable

🍀二、高阶函数

高阶函数是指接受一个或多个函数作为参数,并返回一个函数的函数。通过使用高阶函数,你可以将代码复用最大化,并提高代码的可读性和可维护性。例如:

function double(num) {return num * 2;
}function triple(num) {return num * 3;
}function apply(fn, num) {return fn(num);
}console.log(apply(double, 5)); // 输出 10
console.log(apply(triple, 5)); // 输出 15

apply 是一个高阶函数,它接受一个函数和一个数字作为参数,并调用该函数并返回结果。通过使用 apply 函数,我们避免了重复书写代码。

🍀三、原型链

原型链是JavaScript面向对象编程的基础之一。每个JavaScript对象都有一个原型对象,通过原型链,我们可以实现对象之间的继承关系。例如:

function Animal(name, sound) {this.name = name;this.sound = sound;
}Animal.prototype.makeSound = function() {console.log(this.sound);
};function Dog(name, sound) {Animal.call(this, name, sound);
}Dog.prototype = Object.create(Animal.prototype);Dog.prototype.bark = function() {console.log("Woof!");
};const myDog = new Dog("Buddy", "Bark");
myDog.makeSound(); // 输出 "Bark"
myDog.bark(); // 输出 "Woof!"

Animal 是一个构造函数,它有一个 makeSound 方法,Dog 构造函数继承自 Animal 构造函数,并添加了一个 bark 方法。通过使用原型链,我们实现了 Dog 对象继承了 Animal 对象的属性和方法。

🍀四、函数柯里化

函数柯里化是指将一个接收多个参数的函数转换成一系列只接收一个参数的函数。通过使用函数柯里化,你可以简化函数的调用方式,并提高代码的可读性和可维护性。

function multiply(a, b) {return a * b;
}function curry(fn) {return function curried(...args) {if (args.length >= fn.length) {return fn.apply(this, args);} else {return function(...moreArgs) {return curried.apply(this, args.concat(moreArgs));};}};
}const curriedMultiply = curry(multiply);
console.log(curriedMultiply(2)(3)); // 输出 6

curry 是一个函数,它接受一个函数作为参数,并返回一个新的函数。通过使用 curry 函数,我们将 multiply 函数转换成了一个只接收一个参数的函数,在调用时可以更加方便和灵活。

🍀五、函数节流和函数防抖

函数节流和函数防抖是两种常用的性能优化技巧。

函数节流指在一定时间内只执行一次函数,

函数防抖指在一定时间内只执行最后一次函数。

两种都可以帮助我们避免频繁触发函数,从而提高代码的性能和用户体验。

// 节流
function throttle(fn,waitTime) { let timer;return function(...args) { if (!timer) { timer = setTimeout(() => { fn.apply(this, args); timer = null; }, waitTime); } }; 
}
// 防抖
function debounce(fn, waitTime) { let timer;return function(...args) { clearTimeout(timer);timer = setTimeout(() => {fn.apply(this, args);}, waitTime);}; 
}const throttledFunction = throttle(() => console.log("Throttled function"), 1000);
const debouncedFunction = debounce(() => console.log("Debounced function"), 1000);// 在短时间内多次调用函数
for (let i = 0; i < 10; i++) {throttledFunction();debouncedFunction();
}
// 输出 
// Throttled function
// Debounced function

throttle 和 debounce 函数都接受一个函数和一个等待时间作为参数,并返回一个新的函数。通过使用这两种技巧,我们可以避免在短时间内多次触发函数,从而提高代码性能和用户体验。

🍀六、Promise

Promise是一种用于异步编程的解决方案,它用于处理异步操作并返回结果。Promise有三种状态:pending、resolved和rejected,分别表示异步操作正在进行、操作已成功完成和操作未成功完成。

function fetchData() {return new Promise((resolve, reject) => {// 异步操作setTimeout(() => {const data = { name: "John", age: 30 };if (data) {resolve(data);} else {reject(new Error("Failed to fetch data"));}}, 1000);});
}fetchData().then(data => console.log(data)).catch(error => console.error(error));

fetchData 函数返回一个Promise对象,并在异步操作完成后通过 resolvereject 方法来返回结果或错误信息。通过使用thencatch方法,我们可以获取异步操作的结果并进行处理。

🍀七、async/await

async/await是一种基于Promise的异步编程解决方案,它提供了更加简洁和直观的方式来处理异步操作。async函数用于声明一个异步函数,而await用于等待一个异步操作的结果。

function fetchData( {return new Promise((resolve, reject) => {// 异步操作setTimeout(() => {const data = { name: "John", age: 30 };if (data) {resolve(data);} else {reject(new Error("Failed to fetch data"));}}, 1000);});}async function getData() {try {const data = await fetchData();console.log(data);} catch (error) {console.error(error);}}
getData();

getData 函数使用async关键字声明一个异步函数,并在内部通过await关键字等待异步操作的结果。通过使用try/catch语句,我们可以捕获异步操作可能出现的错误。

🍀八、ES6模块化

ES6模块化是ECMAScript 6引入的一种新的模块化语法,它提供了一种简单且可靠的方式来组织JavaScript代码,并使得代码更加易于重用和维护。ES6模块化使用importexport关键字来导入和导出模块。

// math.js
export function add(a, b) {return a + b;
}
export function subtract(a, b) {return a - b;
}// main.js
import { add, subtract } from "./math.js";
console.log(add(2, 3));      // 输出 5
console.log(subtract(3, 2)); // 输出 1

math.js 的模块导出了两个函数 add 和 subtract。在 main.js 中,通过 import 关键字将这两个函数导入,并在内部使用它们来执行各种操作。

🍀九、Map 和 Set 数据结构

Map和Set是ES6引入的两个新的数据结构,它们都提供了一种更加高效和灵活的方式来存储和处理数据。Map是一种键值对集合,其中每个键唯一对应一个值;而Set是一种无序的、不重复的元素集合。

const myMap = new Map();myMap.set("key1", "value1");
myMap.set("key2", "value2");console.log(myMap.get("key1")); // 输出 "value1"const mySet = new Set([1, 2, 3, 3, 4]);console.log(mySet.size); // 输出 4
console.log(mySet.has(3)); // 输出 true

🍀十、类和对象

类和对象是JavaScript面向对象编程的基础之一,它们提供了一种抽象化和封装化的方式来组织和管理代码。类是一种抽象类型,用于描述具有相似属性和方法的对象,而对象则是类的实例化。

class Animal {constructor(name, sound) {this.name = name;this.sound = sound;}makeSound() {console.log(this.sound);}
}class Dog extends Animal {constructor(name, sound) {super(name, sound);}bark() {console.log("Woof!");}
}const myDog = new Dog("Buddy", "Bark");
myDog.makeSound(); // 输出 "Bark"
myDog.bark(); // 输出 "Woof!"// 原型继承
const animal = {walk() {console.log('Walking...');}
};const dog = Object.create(animal);
dog.bark = function() {console.log('Barking...');
}dog.walk(); // Walking...
dog.bark(); // Barking...

先定义了一个名为 Animal 的类,并在其中添加了一个名为 makeSound 的方法。还定义了一个名为 Dog 的子类,并在其中添加了一个名为 bark 的方法。通过使用 extends 关键字,使得 Dog 类可以继承 Animal 类的属性和方法。最后,创建了一个名为 myDog 的对象,该对象是 Dog 类的实例化。

🍀最后

当然还有很多其他的技巧,比如惰性求值、递归等等。掌握这些技巧可以让你更好地理解JavaScript,并写出更加高效、优雅的代码。欢迎大家评论补充~

学习更多JavaScript开发知识请下载CRMEB开源商城源码研究学习。

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

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

相关文章

群狼调研(长沙学校满意度调查)开展长沙游客满意度调查

长沙&#xff0c;作为湖南省的省会&#xff0c;是一座具有悠久历史和丰富文化底蕴的城市。近年来&#xff0c;随着旅游业的快速发展&#xff0c;越来越多的游客选择来长沙旅游观光。为了了解游客的需求和期望&#xff0c;提高游客的满意度&#xff0c;进行长沙游客满意度调查显…

完全背包 动态规划 + 一维dp数组

动态规划&#xff1a;完全背包理论基础 每件商品都有无限个&#xff01;&#xff01;&#xff01; &#xff08;1&#xff09;0-1背包的核心代码 解决0-1背包问题&#xff08;方案二&#xff09;&#xff1a;一维dp数组&#xff08;滚动数组&#xff09;_呵呵哒(&#xffe3;…

【.net core】使用nssm发布WEB项目

nssm下载地址&#xff1a;NSSM - the Non-Sucking Service Manager 配置方式 修改服务在nssm工具下输入命令:nssm edit jntyjr 其中 jntyjr为添加服务时设置的Service name nssm可以设置任何以参数启动的应用程序以服务形式启动,通过设置参数内容启动服务 以上配置等同于执行…

14:00面试,14:06就出来了,这问的谁顶得住啊

从小厂出来&#xff0c;没想到在另一家公司又寄了。 到这家公司开始上班&#xff0c;加班是每天必不可少的&#xff0c;看在钱给的比较多的份上&#xff0c;就不太计较了。没想到8月一纸通知&#xff0c;所有人不准加班&#xff0c;加班费不仅没有了&#xff0c;薪资还要降40%,…

在比特币上使用可检索性证明支付存储费用

我们为用户开发了一种为云存储付费的新方法。 与亚马逊的 S3 等传统云存储相比&#xff0c;用户不必信任服务器。 我们使用比特币智能合约来确保支付取决于服务器的可检索性证明 (PoR)&#xff0c;该证明只能在数据仍然可用且需要时可以检索的情况下生成。 可检索性证明 (PoR)…

国际播客日 · 森海塞尔精选播客设备满足各类音频需求

森海塞尔精选播客设备 为庆祝今年的国际播客日,森海塞尔带来一系列适合各类需求和预算的出色音频解决方案 9月30日被定为国际播客日,至今已有九年的时间了。作为庆祝播客力量的全球性节日,国际播客日备受播客听众和创作者喜爱。播客的选择琳琅满目,从真实犯罪案件、阴谋论和名…

如何办一份有价值的企业内刊/报纸?向《华为人》学习就够了

前两天有一个朋友联系华研荟&#xff0c;说他是今年大学毕业加入了一个中型公司&#xff0c;他学的是企业管理&#xff0c;在公司人力资源部门工作。上周老板说公司要办一份自己的内刊&#xff0c;这个工作由人力资源部负责&#xff0c;而人力资源经理就把这个活交给她了。 她…

springcloud:三、ribbon负载均衡原理+调整策略+饥饿加载

Ribbon负载均衡原理 调整Ribbon负载均衡策略 第一种会对order-service里所有的服务消费者都采用该新规则 第二种会针对order-service里某个具体的服务消费者采用该新规则 饥饿加载

混淆技术研究笔记(一)常见工具介绍

混淆技术研究笔记包含多篇内容&#xff0c;记录了一次混淆的研究和应用的过程。 本文首发于 CSDN&#xff0c;随后会发布在 MyBatis 微信公众号&#xff0c;通过公众号可以免费阅读。 最近有一个 Java 的底层框架需要进行混淆&#xff08;从原始的 Java 项目改造为了 Maven 多模…

logback.xml springboot 项目通用logback配置,粘贴即用,按日期生成

<configuration scan"false" scanPeriod"10 seconds"><!-- 定义日志存放的根目录 --><property name"log.dir" value"./logs" /><!-- 彩色日志依赖的渲染类 --><conversionRule conversionWord"clr&q…

究竟是什么样的讲解二分查找算法的博客让我写了三小时???

版本说明 当前版本号[20230926]。 版本修改说明20230926初版 目录 文章目录 版本说明目录二分查找基础版算法描述分步演示情况一&#xff1a;能在有序数组找到待查值情况二&#xff1a;不能在有序数组找到待查值 翻译成代码基础版代码&#xff08;包括测试类&#xff09;疑惑…

MySQL 事件

文章目录 1.简介2.事件调度器3.创建事件4.查看事件5.修改事件6.删除事件参考文献 1.简介 MySQL 事件&#xff08;Event&#xff09;事件是根据时间表运行的任务&#xff0c;类似于 Unix crontab 和 Windows 定时任务。 一个事件可调用一次&#xff0c;也可周期性地启动。它由…

分布式微服务架构中的关键技术解析

分布式微服务架构是构建现代应用的理想选择&#xff0c;它将复杂系统拆分成小而自治的服务&#xff0c;每个服务都能独立开发、测试和部署。在实际的开发过程中&#xff0c;如何实现高效的分布式微服务架构呢&#xff1f;下面笔者根据自己多年的实战经验&#xff0c;浅谈实战过…

【C++ Efficiency】使用运算符的复合形式取代其单独形式,效率更高

//单独形式 x x y; x x - y; //也可以写为复合形式 x y; x - y;效率问题 一般而言&#xff0c;复合操作符比其对应的单独形式效率高&#xff1a;因为单独形式需要返回一个新的对象&#xff0c;就会产生一个临时对象的构造和析构成本&#xff0c;复合版本则是直接写入左…

【微信小程序】全局配置

1.全局配置文件及常用的配置项 Window 1&#xff09;小程序窗口的组成部分 2&#xff09;window结点常用的配置项 3&#xff09;设置导航栏的标题 4&#xff09;设置导航栏的背景色 这个颜色仅支持“#”开头的十六进制颜色&#xff0c;不能直接使用如&#xff1a;red&#x…

暗猝灭剂BHQ-1 NHS,916753-61-2,BHQ-1 SE

产品简介&#xff1a;黑洞猝灭剂-1&#xff08;BHQ-1&#xff09;被归类为暗猝灭剂&#xff08;一种非荧光发色团&#xff09;&#xff0c;被广泛用作各种荧光共振、能量转移&#xff08;FRET&#xff09;和DNA检测探针中&#xff0c;此类探针主要用于核酸分析及核酸结构研究。…

酒店预订小程序制作详细步骤解析

" 随着移动设备的普及和互联网技术的不断发展&#xff0c;小程序成为了一个备受关注的应用领域。特别是在酒店预订行业&#xff0c;小程序可以为酒店带来更多的客源和方便快捷的预订服务。下面是酒店预订小程序的制作详细步骤解析。 第一步&#xff1a;注册登录【乔拓云】…

openvino 将onnx转为IR并进行int8量化

openvino 将onnx转为IR并进行int8量化 环境安装环境编译 mo下载 openvino编译 mo onnx 转为 IRIR 模型量化为 int8参考 环境 - Ubuntu 22.04 - python 3.10安装环境 sudo apt-get update sudo apt-get upgrade sudo apt-get install python3-venv build-essential python3-de…

Vue+ElementUI实现动态树和表格数据的查询

目录 前言 一、动态树的实现 1.数据表 2.编写后端controller层 3.定义前端发送请求路径 4.前端左侧动态树的编写 4.1.发送请求获取数据 4.2.遍历左侧菜单 5.实现左侧菜单点击展示右边内容 5.1.定义组件 5.2.定义组件与路由的对应关系 5.3.渲染组件内容 5.4.通过动态…

pg数据库操作,insert(sql)插入一条数据后获返回当前插入数据的id --chatGPT

gpt: 在 PostgreSQL 数据库中&#xff0c;可以使用 INSERT 语句插入一条数据&#xff0c;并通过 RETURNING 子句来返回插入数据的 ID。以下是一个示例 Go 代码来执行这个操作&#xff1a; go package main import ( "database/sql" "fmt" &…