Beberapa ciri yang sangat berguna dalam JavaScript sepanjang lima tahun yang lalu!

Teknologi sentiasa berkembang, dan JavaScript telah banyak berubah sejak penubuhannya pada tahun 1995, dan ia telah menambahkan banyak ciri baharu sejak itu. Artikel ini membincangkan beberapa ciri yang sangat berguna (tetapi mungkin kurang dikenali) yang telah ditambahkan pada JavaScript dalam tempoh 5 tahun yang lalu! Tetapi ia tidak meliputi semua ciri.

String.padStart() dan String.padEnd()

Dua kaedah rentetan ialah mengisi rentetan ke dalam Quick dan kaedah mudah untuk rentetan lain. Seperti namanya, String.padStart() menambah rentetan baharu pada permulaan rentetan yang diberikan dan menambahkan String.padEnd() rentetan pada penghujung rentetan yang diberikan.

Nota: Kaedah ini tidak mengubah rentetan asal.

String.padStart(desiredStringLength, stringToAdd)

• desiredStringLength: Panjang nombor yang anda mahu rentetan baharu itu. [Pembelajaran yang disyorkan: tutorial video javascript]
• stringToAdd: Ini ialah rentetan yang akan ditambahkan pada permulaan rentetan asal.

Mari lihat contoh:

Contoh kod:

//最初的字符串
let originalString = 'Script';

//对原始的字符串添加字符串
let paddedString = originalString.padStart(10, 'Java');

console.log(paddedString);

// 输出 -->
// 'JavaScript'

Jika "panjang rentetan baharu yang kita mahukan"Lebih pendek daripada "panjang rentetan asal + rentetan yang akan ditambah". Apa yang berlaku?

Dalam kes ini, lebihan bahagian 将要添加到原始字符串开头的字符串 akan dipotong oleh .

Contoh:

let originalString = 'Script';

let paddedString = originalString.padStart(7, 'Java');

console.log(paddedString);

// 输出 -->
// 'JScript'
// 把将要添加到原始字符串开头的字符串从“Java”截断为“J”

Jika kita mahu panjang rentetan baharu lebih panjang daripada panjang rentetan asal + akan ditambah Apakah yang perlu saya lakukan jika rentetan " panjang?

Ini mungkin menghasilkan keputusan yang tidak seperti yang kami jangkakan! Ia akan berulang 将要添加到原始字符串开头的字符串 oleh sehingga sama dengan 我们希望的新字符串长度

Contoh kod:

let originalString = 'Script';

let paddedString = originalString.padStart( 15, 'Java');

console.log(paddedString);

// 输出 -->
// 'JavaJavaJScript'

Apa jika parameter "rentetan untuk ditambahkan pada permulaan rentetan asal" tidak disediakan?

Ia akan menambah ruang

di hadapan 原始字符串 sehingga panjang rentetan sama dengan 我们希望的新字符串长度

Contoh kod:

let originalString = 'Script';

let paddedString = originalString.padStart(15);

console.log(paddedString);

// 输出 -->
// "         Script"

Akhir sekali, bagaimana jika parameter "panjang rentetan baharu yang kami mahu" tidak disediakan?

Ia akan mengembalikan

rentetan asal yang utuh: 副本

Contoh kod:

let originalString = 'Script';

let paddedString = originalString.padStart('Java');

console.log(paddedString);

// 输出 --> 
// 'Script'

String.padEnd(desiredStringLength, stringToAppend)

• desiredStringLength: Panjang nombor yang anda mahu rentetan baharu itu.
• stringToAdd: Ini ialah rentetan yang akan ditambahkan pada permulaan rentetan asal.

Kaedah rentetan ini berfungsi sama seperti

tetapi menambahkan rentetan pada penghujung rentetan yang diberikan. String.padStart()

Contoh kod:

let originalString = 'Web';

let paddedString = originalString.padEnd(6, 'Dev');

console.log(paddedString);

// 输出 -->
// 'WebDev

Peraturan yang sama terpakai untuk penggunaan parameter:

• dikehendakiStringLength < stringToAppend? stringToAppend yang dilampirkan pada hujung rentetan asal akan dipotong.
• DikehendakiStringLength > StringToAppend akan berulang kali ditambahkan pada penghujung rentetan asal sehingga PanjangString yang dikehendaki dicapai.
• Tiada parameter stringToAppend diluluskan? Ruang akan dilampirkan pada rentetan asal sehingga PanjangString yang dikehendaki dicapai.
• Tiada parameterPanjangString yang dikehendaki diluluskan? Salinan rentetan asal akan dikembalikan tidak berubah.

String.replaceAll(corak, penggantian)

• corak: rentetan yang akan kami gantikan
• penggantian: Rentetan yang kami mahu gantikan dengan

Anda mungkin pernah menemui

sebelum ini, ia menerima parameter corak dan parameter gantian, dan menggantikan aksara The kejadian pertama corak padanan dalam rentetan. Parameter corak boleh menjadi String.replace() atau 字符串. RegEx

lebih berkuasa, seperti namanya, ia membolehkan kita menggantikan semua kejadian corak tertentu dengan rentetan gantian, bukan hanya kejadian pertama. String.replaceAll()

Contoh kod:

// 使用示例 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.entry(), Object.keys(), Object.values() dan Object.fromEntries()

Kaedah di atas berguna untuk menukar beberapa struktur data. .

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

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

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

Atas ialah kandungan terperinci Beberapa ciri yang sangat berguna dalam JavaScript sepanjang lima tahun yang lalu!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!