过去五年里,JavaScript中的一些超级有用的特性!

技术总是在不断发展,javascript 自 1995 年提出诞生以来发生了很多的变化,从那时起到现在它添加了许多新功能。本文讨论了过去 5 年添加到 javascript 中的一些超级有用(但可能不太为人所知)的特性!但是它并不能的囊括所有的特性。

过去五年里,JavaScript中的一些超级有用的特性!

String.padStart() 和 String.padEnd()

这两个字符串方法是将字符串填充到其他字符串的快速简便的方法。顾名思义,String.padStart()将一个新字符串添加到给定字符串的开头,并将String.padEnd()一个字符串附加到给定字符串的末尾。

注意:这些方法不会改变原始字符串。

String.padStart(desiredStringLength, stringToAdd)

desiredStringLength:你希望新字符串长度为数字的长度。【推荐学习:javascript视频教程】stringToAdd:这是要添加到原始字符串开头的字符串。

让我们看一个例子:

立即学习“Java免费学习笔记(深入)”;

代码示例:

//最初的字符串let originalString = 'Script';//对原始的字符串添加字符串let paddedString = originalString.padStart(10, 'Java');console.log(paddedString);// 输出 -->// 'JavaScript'

如果“我们希望的新字符串长度”“原始字符串的长度+要添加的字符串” 。会发生什么情况呢?

在这种情况下,我们把将要添加到原始字符串开头的字符串多余的部分会被截掉。

例子:

let originalString = 'Script';let paddedString = originalString.padStart(7, 'Java');console.log(paddedString);// 输出 -->// 'JScript'// 把将要添加到原始字符串开头的字符串从“Java”截断为“J”

如果我们希望的新字符串长度“原始字符串的长度+要添加的字符串”怎么办?

这可能会导致结果不符合我们的预期!它会把将要添加到原始字符串开头的字符串进行重复,直到它等于 我们希望的新字符串长度

代码示例:

let originalString = 'Script';let paddedString = originalString.padStart( 15, 'Java');console.log(paddedString);// 输出 -->// 'JavaJavaJScript'

如果没有提供 “将要添加到原始字符串开头的字符串” 参数呢?

它会在原始字符串前面添加空格,直到字符串长度等于 我们希望的新字符串长度

代码示例:

let originalString = 'Script';let paddedString = originalString.padStart(15);console.log(paddedString);// 输出 -->// "         Script"

最后,没有提供 “我们希望的新字符串长度” 参数怎么办?

它会把原始字符串的副本被原封不动地返回:

代码示例:

let originalString = 'Script';let paddedString = originalString.padStart('Java');console.log(paddedString);// 输出 --> // 'Script'

String.padEnd(desiredStringLength, stringToAppend)

desiredStringLength:你希望新字符串长度为数字的长度。stringToAdd:这是要添加到原始字符串开头的字符串。

此字符串方法的工作方式与 String.padStart()相同,但将字符串附加到给定字符串的末尾。

代码示例:

let originalString = 'Web';let paddedString = originalString.padEnd(6, 'Dev');console.log(paddedString);// 输出 -->// 'WebDev

相同的规则适用于参数使用:

desiredStringLength < 原始字符串 + stringToAppend? 附加到原始字符串末尾的 stringToAppend 将被截断。desiredStringLength > 原始字符串 + stringToAppend? 将重复追加到原始字符串末尾的 stringToAppend,直到达到 desiredStringLength。没有传递 stringToAppend 参数? 空格将附加到原始字符串,直到达到 desiredStringLength。没有传递 desiredStringLength 参数? 原始字符串的副本将原封不动地返回。

String.replaceAll(pattern,replacement)

pattern:我们将要被替换的字符串replacement:我们希望替换成的字符串

你之前可能遇到过String.replace(),它接受一个pattern参数和一个replacement参数,并且替换字符串中匹配模式的第一个匹配项。pattern 参数可以是字符串也可以是RegEx

String.replaceAll()功能更强,顾名思义,它允许我们用替换字符串替换指定模式的所有匹配项,而不仅仅是第一个匹配项。

代码示例:

// 使用示例 String.replace() const aString = 'My name is z. z is my name.';const replaceString = aString.replace('z', 'zayyo');console.log(replaceString);// 输出 -->// "My name is zayyo. z is my name."// 仅仅吧第一个“z”被替换为“zayyo”// 使用示例 String.replaceAll() with regexconst  regex = /z/ig;const anotherString = 'My name is z. z is my name.';const replaceAllString = anotherString.replaceAll(regex, 'zayyo');console.log(replaceAllString);// 输出 -->// ""My name is zayyo. zayyo is my name."."// 把所有的z都替换成zayyo了

Object.entries()、Object.keys()、Object.values() 和 Object.fromEntries()

上面这些方法对于转换一些数据结构很有用。。

阿里妈妈·创意中心 阿里妈妈·创意中心

阿里妈妈营销创意中心

阿里妈妈·创意中心 0 查看详情 阿里妈妈·创意中心

Object.entries(originalObject)

此对象方法接收一个对象并返回一个新的二维数组,每个嵌套数组都包含原始对象的键和值作为元素。

代码示例:

const fruitObject = {  'banana': 'yellow',  'strawberry': 'red',  'tangerine': 'orange' };const fruitArray = Object.entries(fruitObject);console.log(fruitArray);// 输出 -->// [["banana", "yellow"], ["strawberry", "red"], ["tangerine", "orange"]]

在转换我们的数据时,这是一种超级好用的方法。下面这个示例是访问对象中的特定键值对的用法:

代码示例:

const fruitObject = {  'banana': 'yellow',  'strawberry': 'red',  'tangerine': 'orange' };const firstFruit = Object.entries(fruitObject)[0];console.log(firstFruit);// 输出 -->// ['banana', 'yellow']

在JavaScript 中的很多东西都是对象的形式保存的。因此,我们还可以将数组和字符串作为参数传入给Object.entries()它们会强制把数组和字符串转换为对象。

代码示例:

const string = 'Hello'const stringAsArgument = Object.entries(string);console.log(stringAsArgument);// 输出 --> // [["0", "H"], ["1", "e"], ["2", "l"], ["3", "l"], ["4", "o"]]

字符串中的每个字符都被插入到一个单独的数组中,并将其索引设置为数组的第一个元素。当您将数组作为参数传递时,也会发生一样的操作:

const array = [1,2,3]const formattedArray = Object.entries(array);console.log(formattedArray);// 输出 --> // [["0", 1], ["1", 2], ["2", 3]]复制代码

注意: 对于这两种情况,第一个元素(索引)都是一个字符串。

Object.keys(anObject)

Object.keys方法接受一个对象作为参数,并且返回一个以对象的键作为元素的数组。

代码示例:

const programmingLangs = {  'JavaScript': 'Brendan Eich',   'C': 'Dennis Ritchie',  'Python': 'Guido van Rossum'};const langs = Object.keys(programmingLangs);console.log(langs);// 输出 -->// ["JavaScript", "C", "Python"]

如果我们尝试传递一个字符串作为参数呢?会是什么结果呢?

代码示例:

const string = 'Hallo';const stringArray = Object.keys(string);console.log(stringArray);// 输出 -->// ["0", "1", "2", "3", "4"]

在这种情况下,字符串也会被强制转换为一个对象。每个字母代表值,它的索引代表键,所以我们返回的数组,就变成了包含字符串中每个字母的索引。

Object.values(anObject)

Object.values()方法的功能和我们刚刚学习的方法类似,但它不是返回数组中的对象键,而是返回数组中的对象值。

代码示例:

const programmingLangs = {  'JavaScript': 'Brendan Eich',   'C': 'Dennis Ritchie',  'Python': 'Guido van Rossum'};const creators = Object.values(programmingLangs);console.log(creators);// 输出 -->// ["Brendan Eich", "Dennis Ritchie", "Guido van Rossum"]

Object.entries()和我们在之前学习Object.keys()一样,我们也可以传入其他数据类型,例如字符串。

代码示例:

const string = 'Bonjour'const stringArray = Object.values(string);console.log(stringArray) // 输出 -->// ["B", "o", "n", "j", "o", "u", "r"]

Object.fromEntries(anIterable)

Object.fromEntries()Object.entries()相反。它接受一个可迭代对象作为参数,例如数组或映射,并返回一个对象。让我们来看看:

代码示例:

const arrayTranslations = [   ['french', 'bonjour'],    ['spanish', 'buenos dias'],    ['czech', 'dobry den']];const objectTranslations = Object.fromEntries(arrayTranslations);console.log(objectTranslations);// 输出 --> /*Object { french: "bonjour", spanish: "buenos dias", czech: "dobry den" }*/

因此,我们的可迭代对象(在示例中的嵌套数组)被迭代,并且每个子数组都转换为一个对象,其中索引 0 处的元素作为键,索引 1 处的元素作为值。

因为内容太多后续会继续补全,也欢迎大家在评论区补充..

更多编程相关知识,请访问:编程教学!!

以上就是过去五年里,JavaScript中的一些超级有用的特性!的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/542654.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
Excel和Word如何实现数据同步?
上一篇 2025年11月9日 16:00:47
王者荣耀s39赛季段位继承表 王者荣耀s39段位继承规则是什么
下一篇 2025年11月9日 16:00:49

相关推荐

  • Claude和ChatGPT有什么区别_Claude与ChatGPT功能对比分析

    Claude在长文本处理和复杂指令遵循上具有显著优势,主要得益于其超大上下文窗口(可达20万token)和“宪法式AI”训练机制。这使得它能同时处理大量文本信息,在法律合同分析、技术文档总结、代码库审查等场景中表现优异。其强大的上下文记忆能力确保了长时间多轮对话的连贯性,不易“失忆”或跑题。同时,宪…

    2026年9月5日
    000
  • VSCode代码空格怎么解决_VSCode空格与缩进格式问题处理教程

    答案是通过配置VSCode设置、使用.editorconfig文件、集成Prettier等格式化工具,并统一团队规范,可有效解决代码缩进与空格问题。具体包括调整tabSize、insertSpaces、detectIndentation等编辑器设置,禁用自动检测以避免混乱,配合Prettier、ES…

    2026年9月4日
    100
  • C语言头文件防卫式声明

    c语言一般提供三种预处理功能:宏处理、文件包含、条件编译。头文件防卫式申明中会用到条件编译中 #ifndef 、 #define 、 #endif 的用法。所以,首先价绍下条件编译。 1 条件编译 一般情况下,在生成可执行文件的过程中,源程序文件中的所有代码行都进行编译,但是在一些跨操作系统的情况下…

    2026年9月4日
    200
  • VSCode怎么弄颜色_VSCode自定义语法高亮和主题颜色教程

    自定义VSCode颜色需通过settings.json文件,结合主题扩展与个性化设置。首先安装喜欢的颜色主题,再通过workbench.colorCustomizations调整UI元素(如侧边栏、状态栏),使用editor.tokenColorCustomizations修改代码语法高亮,包括通用…

    2026年9月4日
    100
  • 解决PHP Web应用数据更新延迟:浏览器缓存管理与实时内容展示

    本文深入探讨了PHP应用在本地开发环境中,当JSON数据或图片文件更新后,Web视图未能及时反映最新内容的问题。核心原因在于浏览器缓存机制。文章将详细介绍多种有效的解决方案,包括利用查询参数强制缓存失效、通过修改文件名实现版本控制,以及配置服务器端的缓存策略,旨在帮助开发者确保Web应用能够准确、实…

    2026年9月4日
    100
  • VSCode怎么插动图_VSCode插入GIF动图与预览动态效果教程

    VSCode无法直接在编辑器中播放GIF,但可通过Markdown预览功能实现动图展示。具体步骤为:将GIF文件放入项目目录或使用网络链接,在.md文件中用![描述](路径)语法插入,再通过Ctrl+Shift+V打开预览窗口即可动态查看。此方法利用内置渲染引擎,不需额外插件,适用于文档编写;也可安…

    2026年9月4日
    400
  • 渗透测试安全检测漏洞

    最近由于渗透测试任务繁重,笔者一直未能抽出时间撰写文章。今天,我们sine安全的渗透主管将为大家普及java安全测试的基础知识。许多客户希望了解具体的javascript调用漏洞、提交payload的过程,以及如何获取最高权限、绕过登录等执行命令漏洞的安全检测方法。 4.4.1.1. 显式原型和隐式…

    2026年9月4日
    100
  • Karate框架中构建包含复杂嵌套参数的GET请求指南

    本教程详细介绍了如何在Karate API测试框架中正确处理包含复杂嵌套参数(如filters[key])的GET请求。当直接使用JSON对象定义此类参数时,Karate可能无法正确解析URL。文章将演示如何利用* param关键字逐一设置这些参数,确保生成的请求URL格式符合预期,并提供示例代码和…

    2026年9月4日
    200
  • 安全基线检查平台

    安全基线检查平台安全基线检查平台安全基线检查平台安全基线检查平台

    0x01 介绍 最近我在进行安全基线检查相关的工作,网络上的一些代码比较零散;也有一些比较完整的项目,比如OWASP中的安全基线检查项目,但需要付费;还有一些开源且完整的,比如Lynis,但这些都不符合我的需求。 我的需求如下: 最终的效果是什么呢?最好能够达到阿里云里的安全基线检查的样子,即使差一…

    2026年9月4日 用户投稿
    100
  • VSCode调试路径怎么写_VSCode配置调试工作目录与路径映射教程

    答案是通过在launch.json中正确配置cwd和路径映射字段。具体来说,program指定入口文件,cwd设置程序运行时的工作目录以确保相对路径正确,sourceMapPathOverrides或pathMappings则解决本地与远程/容器内路径不一致问题,从而实现断点命中和源码映射。排查时需…

    2026年9月4日
    200
  • Celery实现定时任务crontab

    Celery实现定时任务crontabCelery实现定时任务crontabCelery实现定时任务crontabCelery实现定时任务crontab

    定时任务在开发中应用广泛,几乎所有开发人员都会接触到。实现定时任务的方法有很多,其中celery的定时任务功能强大且使用简便,只需安装celery即可。以下是使用celery实现定时任务的详细步骤。 一. 搭建Celery定时任务架构 在项目中合适的位置新建一个定时任务目录 celery_cront…

    2026年9月4日 用户投稿
    200
  • 怎么用VSCode运行代码_VSCode执行不同语言代码的方法教程

    VSCode运行代码本质是调用语言解释器或编译器,主要通过内置终端手动执行命令、配置“运行与调试”功能一键启动、或使用语言扩展提供的快捷方式。对于Python,需安装Python扩展并选择正确解释器,可通过右上角运行按钮或调试功能执行;JavaScript/Node.js可直接在终端运行node命令…

    2026年9月3日
    400
  • VSCode怎么后台保持开启_VSCode进程后台运行教程

    答案:VSCode关闭后程序停止因其进程架构决定,关闭时主进程会终止所有子进程。实现后台运行的最佳方案是使用远程开发功能,将工作负载运行在远程服务器、WSL或Docker容器中,本地仅作为客户端,关闭本地界面不影响远程任务持续运行。 VSCode本身并没有一个“最小化到托盘并持续运行所有进程”的官方…

    2026年9月3日
    200
  • VSCode特效插件怎么设置_VSCode安装和配置界面动效与视觉增强插件教程

    答案:安装Power Mode、Custom CSS等插件可实现VSCode界面动效与视觉增强,通过扩展商店搜索、安装并配置settings.json文件,结合性能优化与实用性选择,提升编码体验。 VSCode的界面动效与视觉增强插件,本质上是通过安装特定的扩展程序来实现的。这就像给你的开发环境加了…

    2026年9月3日
    300
  • VSCode怎么写CSS文件_VSCode编写和预览CSS样式表详细教程

    VSCode怎么写CSS文件_VSCode编写和预览CSS样式表详细教程VSCode怎么写CSS文件_VSCode编写和预览CSS样式表详细教程VSCode怎么写CSS文件_VSCode编写和预览CSS样式表详细教程VSCode怎么写CSS文件_VSCode编写和预览CSS样式表详细教程

    首先新建.css文件并编写样式,通过链接HTML或使用Live Server插件实时预览;推荐使用CSS Peek、IntelliSense、Prettier等插件提升效率;调试可借助浏览器开发者工具,大型项目建议采用Sass、BEM命名和模块化管理。 VSCode编写CSS文件,简单来说,就是新建…

    2026年9月3日 用户投稿
    300
  • mac使用命令安装软件

    mac使用命令安装软件mac使用命令安装软件mac使用命令安装软件mac使用命令安装软件

    答案:Homebrew是macOS上高效管理命令行工具和图形应用的包管理器,通过简单命令实现软件安装、更新与卸载,支持依赖处理和Cask图形应用安装,安全可靠且可与其他语言包管理器协同使用。 在macOS上,想要通过命令来安装软件,最核心且效率最高的方式就是借助一个叫做Homebrew的包管理器。它…

    2026年9月3日 用户投稿
    300
  • VSCode里怎么卸载TS_VSCode移除TypeScript及相关依赖包教程

    答案:彻底卸载TypeScript需禁用VSCode内置服务、卸载相关扩展并清理项目与全局的TypeScript包。首先在设置中调整typescript.tsdk路径或禁用自动类型获取,将.ts文件关联为纯文本;其次通过扩展面板卸载所有TypeScript相关插件;最后删除项目中的typescrip…

    2026年9月2日
    100
  • VSCode怎么写CSS文件_VSCode创建和编写CSS样式表的详细方法与技巧教程

    首先在VSCode中创建CSS文件并编写样式,利用IntelliSense和Emmet实现智能补全与高效编码;接着通过模块化文件结构和扩展如CSS Peek管理大型项目;最后结合Live Server实时预览和浏览器开发者工具联动调试,提升CSS开发效率。 VSCode中编写CSS文件远比你想象的要…

    2026年9月2日
    200
  • VSCode的代码怎么运行_VSCode多语言代码执行方法与配置教程

    VSCode通过调用系统已安装的语言运行时来运行代码,需先安装对应语言环境,再结合扩展、集成终端或配置文件实现执行。 VSCode运行代码,说白了,它自己其实不“运行”代码,它更像是一个极其智能的遥控器和指挥中心。它利用你系统里已经安装好的各种语言运行时、编译器或解释器来完成这个任务。核心思路就是:…

    2026年9月2日
    200
  • VSCode怎么侧边显示函数_VSCode大纲视图侧边栏函数列表教程

    最直接的方式是启用VSCode的“大纲视图”功能,它能清晰列出文件中的函数、类等符号,支持快速导航与筛选,提升代码阅读与重构效率。 VSCode中想要在侧边栏看到函数列表,最直接、也是我个人觉得效率最高的方式,就是利用它的“大纲视图”(Outline View)。这个功能就像给你的代码文件画了一张清…

    2026年9月2日
    200

发表回复

登录后才能评论
关注微信