返回顶部
首页 > 资讯 > 前端开发 > 其他 >过去五年里,JavaScript中的一些超级有用的特性!
  • 527
分享到

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

javascript 2023-05-14 22:05:34 527人浏览 独家记忆
摘要

例子:let originalString = 'Script'; let paddedString = originalString.padStart(7, 'Java'); console.log(p

例子:

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 regex
const  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()

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

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

// 输出 --> 

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

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

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

--结束END--

本文标题: 过去五年里,JavaScript中的一些超级有用的特性!

本文链接: https://lsjlt.com/news/207116.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 过去五年里,JavaScript中的一些超级有用的特性!
    例子:let originalString = 'Script'; let paddedString = originalString.padStart(7, 'Java'); console.log(p...
    99+
    2023-05-14
    javascript
  • Python中不可错过的五个超有用函数
    目录1.引言2. Lambda 函数3. Map 函数4. Filter 函数5. Zip 函数6. Reduce 函数7. 总结1.引言 在本文中,我们用代码详细说明了Python...
    99+
    2024-04-02
  • python3中函数的高级特性有哪些
    python3中函数的高级特性有哪些?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。Python主要用来做什么Python主要应用于:1、Web开发;2、数据科学...
    99+
    2023-06-14
  • JavaScript中border标记的BORDER特性有哪些
    本篇内容主要讲解“JavaScript中border标记的BORDER特性有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript中border标记的BORDER特性有哪些”吧!...
    99+
    2023-06-03
  • JavaScript中有用的特性是什么
    这篇文章主要讲解了“JavaScript中有用的特性是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript中有用的特性是什么”吧!String.padStart() 和 S...
    99+
    2023-07-05
  • HTML中超级实用的工具有哪些
    本篇内容介绍了“HTML中超级实用的工具有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!1.onlin...
    99+
    2024-04-02
  • 详解JavaScript中数组的一些特殊用法
    目录前言基本介绍数组类型和判断判断为数组的方式数组索引值和长度索引值是字符串索引值为小数、负数索引值是字符串等其他类型时索引与属性length属性数组的最大长度创建数组的三种方式数组...
    99+
    2023-02-20
    JavaScript数组特殊用法 JavaScript数组用法 JavaScript数组
  • For-else:Python中一个奇怪但有用的特性
    导语无论使用哪种编程语言,我们都会编写“if-else”语句,但是“for-else”呢?对于许多语言来说,例如 C、C++ 和 Java,在一个循环后使用“else”是完全错误的。然而 Python 作为一门优雅的语言,拥有这个“奇怪但有...
    99+
    2023-05-14
    Python For-else
  • JavaScript中有哪些常用的属性方法
    JavaScript中有哪些常用的属性方法?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。JavaScript常用属性方法有:document.write(&qu...
    99+
    2023-06-14
  • Javascript 中的数组与并发编程有哪些值得探究的特性?
    在前端开发中,我们经常需要处理大量的数据。而数组作为一种基本的数据结构,是我们经常使用的一种工具。同时,随着前端技术的发展,越来越多的应用需要支持并发编程,这就使得数组的并发性能成为了一个值得探究的问题。本文将探讨 Javascript ...
    99+
    2023-10-04
    并发 数组 javascript
  • JavaScript中常用的简洁高级技巧有哪些
    这篇文章主要为大家展示了“JavaScript中常用的简洁高级技巧有哪些”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript中常用的简洁高级技巧有...
    99+
    2024-04-02
  • Vue3 style中新增的特性有哪些及怎么用
    三、插槽选择器默认情况下,作用域样式不会影响到 <slot/> 渲染出来的内容,因为它们被认为是父组件所持有并传递进来的。使用 :slotted 伪类以确切地将插槽内容作为选择器的目标:<style scoped> ...
    99+
    2023-05-14
    Vue3 style
  • HTML5中一些酷炫又有趣的新特性代码整理汇总
    目录一、详情标签二、内容可编辑三、地图四、标记内容五、data-* 属性六、输出标签七、数据列表八、范围(滑块)九、Meter十、Inputs必需的自动对焦使用正则表达式验证颜色选择...
    99+
    2023-02-25
    html5有趣的新特性 html5有哪些新特征
  • shell脚本中常见的一些特殊符号和作用有哪些
    这篇文章主要讲解了“shell脚本中常见的一些特殊符号和作用有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“shell脚本中常见的一些特殊符号和作用有哪些”吧!1、{} 大括号:用法一:...
    99+
    2023-06-09
  • 互联网中使用超级外链工具带来的危害有哪些
    这篇文章将为大家详细讲解有关互联网中使用超级外链工具带来的危害有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。  1、外链的数量变化频繁会直接导致降权  说实话,这个自动宣传工具所带来的效果其实是很有...
    99+
    2023-06-12
  • javascript中提高应用程序性能的方法有哪些
    本篇文章给大家分享的是有关javascript中提高应用程序性能的方法有哪些,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。像任何其他编程语言一...
    99+
    2024-04-02
  • Go语言的高并发特性在云计算中的应用有哪些?
    随着互联网技术的不断发展,对高性能、高并发的要求也越来越高。为满足这种需求,Go语言应运而生。Go语言是Google推出的一种全新的编程语言,特别适合处理高并发的网络服务,被广泛应用在云计算、Web后端、分布式系统等领域。本文将探讨Go语言...
    99+
    2023-05-17
    Go语言 云计算 高并发。
  • css属性使用中的一些注意事项分别有哪些
    css属性使用中的一些注意事项分别有哪些,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。新的一年开始了,得开始总结点东西了,以前...
    99+
    2024-04-02
  • PHP 函数新特性在实际应用中的优势示例有哪些?
    php 新特性在实际应用中提供了显著优势:箭头函数:简化匿名函数语法,提高可读性。匹配表达式:提供更简洁的模式匹配,提升代码可读性。解构赋值:轻松提取数据结构的一部分,简化数据处理。nu...
    99+
    2024-05-04
    php 函数新特性 代码可读性
  • CSS3中的Transition过度与Animation动画属性使用要点有哪些
    本篇文章给大家分享的是有关CSS3中的Transition过度与Animation动画属性使用要点有哪些,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作