Einige super nützliche Funktionen in JavaScript der letzten fünf Jahre!

Die Technologie entwickelt sich ständig weiter. JavaScript hat sich seit seiner Einführung im Jahr 1995 stark verändert und seitdem viele neue Funktionen hinzugefügt. In diesem Artikel werden einige der äußerst nützlichen (aber wahrscheinlich weniger bekannten) Funktionen besprochen, die in den letzten 5 Jahren zu JavaScript hinzugefügt wurden! Aber es deckt nicht alle Funktionen ab.

String.padStart() und String.padEnd()

Die beiden String-Methoden sind eine schnelle und einfache Möglichkeit, Strings in andere Strings aufzufüllen. Wie der Name schon sagt, fügt String.padStart() eine neue Zeichenfolge am Anfang der angegebenen Zeichenfolge hinzu und String.padEnd() hängt eine Zeichenfolge an das angegebene Zeichen am Ende an der Saite. String.padStart()将一个新字符串添加到给定字符串的开头，并将String.padEnd()一个字符串附加到给定字符串的末尾。

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

String.padStart(desiredStringLength, stringToAdd)

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

让我们看一个例子：

代码示例：

//最初的字符串
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()

Hinweis: Diese Methoden ändern nicht die ursprüngliche Zeichenfolge.

String.padStart(desiredStringLength, stringToAdd)

• desiredStringLength

  : Sie möchten, dass die neue Stringlänge der Länge einer Zahl entspricht. [Empfohlenes Lernen: Javascript-Video-Tutorial]

  stringToAdd: Dies ist die Zeichenfolge, die am Anfang der ursprünglichen Zeichenfolge hinzugefügt werden soll.

// 使用示例 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了

🎜In diesem Fall fügen wir die Zeichenfolge hinzu, die am Anfang der ursprünglichen Zeichenfolge hinzugefügt wird und der überschüssige Teil wird 🎜abgeschnitten🎜. 🎜

const fruitObject = {
  'banana': 'yellow',
  'strawberry': 'red',
  'tangerine': 'orange' 
};

const fruitArray = Object.entries(fruitObject);

console.log(fruitArray);

// 输出 -->
// [["banana", "yellow"], ["strawberry", "red"], ["tangerine", "orange"]]

🎜Dies kann dazu führen, dass die Ergebnisse nicht unseren Erwartungen entsprechen! Es wird die Zeichenfolge, die am Anfang der ursprünglichen Zeichenfolge hinzugefügt wird 🎜wiederholen🎜, bis sie 🎜unserer gewünschten neuen Zeichenfolgenlänge🎜

const fruitObject = {
  'banana': 'yellow',
  'strawberry': 'red',
  'tangerine': 'orange' 
};

const firstFruit = Object.entries(fruitObject)[0];

console.log(firstFruit);

// 输出 -->
// ['banana', 'yellow']

🎜Es werden Leerzeichen 🎜 vor 🎜 der ursprünglichen Zeichenfolge hinzugefügt, bis die Zeichenfolgenlänge unserer gewünschten neuen Zeichenfolgenlänge🎜

const string = 'Hello'

const stringAsArgument = Object.entries(string);

console.log(stringAsArgument);

// 输出 --> 
// [["0", "H"], ["1", "e"], ["2", "l"], ["3", "l"], ["4", "o"]]

🎜Es wird eine Kopie der ursprünglichen Zeichenfolge intakt zurückgegeben: 🎜

const array = [1,2,3]

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

🎜String .padEnd(desiredStringLength, stringToAppend)🎜

• 🎜desiredStringLength🎜: Sie möchten, dass die neue Stringlänge der Länge der Zahl entspricht.
• 🎜stringToAdd🎜: Dies ist die Zeichenfolge, die am Anfang der ursprünglichen Zeichenfolge hinzugefügt werden soll.

const programmingLangs = {
  'JavaScript': 'Brendan Eich', 
  'C': 'Dennis Ritchie',
  'Python': 'Guido van Rossum'
};

const langs = Object.keys(programmingLangs);

console.log(langs);

// 输出 -->
// ["JavaScript", "C", "Python"]

• 🎜desiredStringLength < raw string + stringToAppend? 🎜 stringToAppend, das an das Ende der ursprünglichen Zeichenfolge angehängt wird, wird abgeschnitten.
• 🎜desiredStringLength > Original-String + stringToAppend? 🎜 StringToAppend wird wiederholt an das Ende der ursprünglichen Zeichenfolge angehängt, bis die gewünschteStringLength erreicht ist.
• 🎜Kein stringToAppend-Parameter übergeben? 🎜 Leerzeichen werden an die ursprüngliche Zeichenfolge angehängt, bis die gewünschte Zeichenfolgenlänge erreicht ist.
• 🎜Der gewünschteStringLength-Parameter wird nicht übergeben? 🎜 Eine Kopie der Originalzeichenfolge wird unverändert zurückgegeben.

🎜String.replaceAll(pattern, replacement)🎜🎜

• 🎜pattern🎜: die Zeichenfolge, die wir ersetzen werden

li>

🎜replacement🎜: die Zeichenfolge, durch die wir ersetzen möchten

🎜Möglicherweise sind Sie auf String gestoßen .replace() davor, das einen Musterparameter und einen Ersatzparameter akzeptiert und das erste Vorkommen des passenden Musters in der Zeichenfolge ersetzt. Der Musterparameter kann String oder RegEx sein. 🎜🎜String.replaceAll() ist leistungsfähiger, wie der Name schon sagt, es ermöglicht uns, alle Vorkommen eines bestimmten Musters durch eine Ersatzzeichenfolge zu ersetzen, nicht nur das erste Vorkommen. 🎜🎜🎜Codebeispiele: 🎜🎜

const string = 'Hallo';

const stringArray = Object.keys(string);

console.log(stringArray);

// 输出 -->
// ["0", "1", "2", "3", "4"]

Nach dem Login kopieren

Nach dem Login kopieren

🎜🎜Object.entries(), Object.keys(), Object.values() und Object.fromEntries()🎜🎜🎜Die oben genannten Methoden sind nützlich zum Konvertieren einiger Datenstrukturen. . 🎜

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 处的元素作为值。

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

更多编程相关知识，请访问：编程教学！！

Das obige ist der detaillierte Inhalt vonEinige super nützliche Funktionen in JavaScript der letzten fünf Jahre!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!