12-ES6 ++：JavaScript中的新功能内置功能-DEV365 开发者社区

从ES6开始，JavaScript在Arrays，Strings，Objects，Objects，Math和Number类中具有许多新的内置功能。在本文中，我们将了解其中的一些。

在我们开始之前

在开始之前，我想澄清有两种类型的方法，静态方法和实例方法。静态方法是直接在类上调用的方法，而在类的实例上调用了实例方法，我们将在本文中使用prototype方法来参考。

。

例如，Array.from是一种静态方法，可以从Array类本身中调用，而Array.prototype.includes是一种实例方法，可以从实际数组本身中调用。

array.from（）

Array.from()是Array类的静态方法。它从类似数组或迭代的对象创建一个新的Array实例。

const arrayLike = {
  0: 'Hasan',
  1: 'Ahmad',
  2: 'Mohammad',
  length: 3
};

const array = Array.from(arrayLike);

console.log(array); // ['Hasan', 'Ahmad', 'Mohammad']

我们还可以将映射函数作为第二个参数传递给Array.from()以映射类似数组的对象的值。

const arrayLike = {
  0: 'Hasan',
  1: 'Ahmad',
  2: 'Mohammad',
  length: 3
};

const array = Array.from(arrayLike, name => name.toUpperCase());

console.log(array); // ['HASAN', 'AHMAD', 'MOHAMMAD']

array.keys（）

Array.keys()是Array类的方法。它返回一个新的Array Iterator对象，该对象包含数组中每个索引的键。

const array = ['Hasan', 'Ahmad', 'Mohammad'];

const iterator = array.keys();

console.log(iterator.next()); // { value: 0, done: false }

console.log(iterator.next()); // { value: 1, done: false }

console.log(iterator.next()); // { value: 2, done: false }

console.log(iterator.next()); // { value: undefined, done: true }

您也可以使用for...of循环在键上迭代。

const array = ['Hasan', 'Ahmad', 'Mohammad'];

for (const key of array.keys()) {
  console.log(key); // 0, 1, 2
}

array.values（）

工作完全像Array.keys()，但返回值而不是键。

const array = ['Hasan', 'Ahmad', 'Mohammad'];

const iterator = array.values();

console.log(iterator.next()); // { value: 'Hasan', done: false }

console.log(iterator.next()); // { value: 'Ahmad', done: false }

console.log(iterator.next()); // { value: 'Mohammad', done: false }

console.log(iterator.next()); // { value: undefined, done: true }

当然，您可以使用for...of循环迭代值。

const array = ['Hasan', 'Ahmad', 'Mohammad'];

for (const value of array.values()) {
  console.log(value); // 'Hasan', 'Ahmad', 'Mohammad'
}

array.entries（）

Array.entries()是Array类的方法。它返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对。

const array = ['Hasan', 'Ahmad', 'Mohammad'];

const iterator = array.entries();

for (const entry of iterator) {
  console.log(entry); // [0, 'Hasan'], [1, 'Ahmad'], [2, 'Mohammad']
}

实际上，如果您想立即获得值和索引，我们可以破坏条目。

const array = ['Hasan', 'Ahmad', 'Mohammad'];

for (const [index, value] of array.entries()) {
  console.log(index, value); // 0 'Hasan', 1 'Ahmad', 2 'Mohammad'
}

array.prototype.includes（）

Array.includes()是Array类的方法。如果数组包含指定元素，则返回true，否则false。

const array = ['Hasan', 'Ahmad', 'Mohammad'];

console.log(array.includes('Hasan')); // true

console.log(array.includes('Ali')); // false

这将与对象和数组一起使用，但仅当它们是参考类型时。

const array = [
  { name: 'Hasan' },
  { name: 'Ahmad' },
  { name: 'Mohammad' }
];

console.log(array.includes({ name: 'Hasan' })); // false

让我们看一个带有参考类型的示例。

const hasan = { name: 'Hasan' };

const array = [
  hasan,
  { name: 'Ahmad' },
  { name: 'Mohammad' }
];

console.log(array.includes(hasan)); // true

array.prototype.flat（）

Array.flat()是Array类的方法。它创建了一个新数组，所有子阵列元素都递归地与指定的深度相连。

const array = [1, 2, [3, 4, [5, 6]]];

console.log(array.flat()); // [1, 2, 3, 4, [5, 6]]

我们可以指定扁平的深度。

const array = [1, 2, [3, 4, [5, 6]]];

console.log(array.flat(2)); // [1, 2, 3, 4, 5, 6]

array.prototype.flatmap（）

Array.flatMap()是Array类的方法。首先，它使用映射函数映射每个元素，然后将结果弄平到新数组。它与map()相同，然后是深度1的flat()，但是flatMap()通常非常有用，因为将这两种方法合并为一种方法略有效率。

const array = [1, 2, 3, 4];

console.log(array.flatMap(x => [x * 2])); // [2, 4, 6, 8]

array.prototype.find（）

Array.find()是Array类的方法。它返回匹配的数组中第一个元素的值提供的回调函数。否则，它返回undefined。

const array = [
  { name: 'Hasan', age: 25 },
  { name: 'Ahmad', age: 30 },
  { name: 'Mohammad', age: 35 }
];

console.log(array.find(person => person.age === 30)); // { name: 'Ahmad', age: 30 }

array.prototype.findindex（）

Array.findIndex()是Array类的方法。它返回数组中第一个元素的索引，匹配提供的回调函数。否则，它将返回-1。

const array = [
  { name: 'Hasan', age: 25 },
  { name: 'Ahmad', age: 30 },
  { name: 'Mohammad', age: 35 }
];

console.log(array.findIndex(person => person.age === 30)); // 1

array.prototype.copywithin（）

Array.copyWithin()是Array类的方法。它的浅副本将阵列的一部分到同一数组中的另一个位置，并在不修改其长度的情况下返回。

const array = [1, 2, 3, 4, 5];

console.log(array.copyWithin(0, 3)); // [4, 5, 3, 4, 5]

我们还可以指定开始和结束索引。

const array = [1, 2, 3, 4, 5];

console.log(array.copyWithin(0, 3, 4)); // [4, 2, 3, 4, 5]

array.prototype.fill（）

Array.fill()是Array类的方法。它填充了从开始索引到具有静态值的端索引的所有元素。最终索引不包括。

const array = [1, 2, 3, 4, 5];

console.log(array.fill(0)); // [0, 0, 0, 0, 0]

我们还可以指定开始和结束索引。

const array = [1, 2, 3, 4, 5];

console.log(array.fill(0, 2, 4)); // [1, 2, 0, 0, 5]

object.entries（）

Object.entries()是Object类的方法。它返回给定对象自己的枚举字符串钥匙[key, value]对的数组。

const object = {
  name: 'Hasan',
  age: 25
};

console.log(Object.entries(object)); // [['name', 'Hasan'], ['age', 25]]

object.fromentries（）

Object.fromEntries()是Object类的方法。它将键值对列表转换为对象。

实际上是Object.entries()的逆转。

const entries = [
  ['name', 'Hasan'],
  ['age', 25]
];

console.log(Object.fromEntries(entries)); // { name: 'Hasan', age: 25 }

object.keys（）

Object.keys()是Object类的方法。它返回给定对象自己的枚举属性名称的数组，以与普通循环相同的顺序进行迭代。

const object = {
  name: 'Hasan',
  age: 25,
};

console.log(Object.keys(object)); // ['name', 'age']

object.values（）

Object.values()是Object类的方法。它返回给定对象自己的枚举属性值的数组，以与普通循环相同的顺序进行迭代。

const object = {
  name: 'Hasan',
  age: 25,
};

console.log(Object.values(object)); // ['Hasan', 25]

object.assign（）

Object.assign()是Object类的方法。它将所有枚举自己的属性从一个或多个源对象复制到目标对象。它返回修改后的目标对象。

const object1 = {
  name: 'Hasan',
  age: 25,
};

const object2 = {
  name: 'Ahmad',
  age: 30,
};

const object3 = {
  name: 'Mohammad',
  age: 35,
};

const object = Object.assign(object1, object2, object3);

console.log(object); // { name: 'Mohammad', age: 35 }

，即使目标对象已经具有相同的属性，也可以将源对象的所有属性分配给目标对象。

const object1 = {
  name: 'Hasan',
  age: 25,
};

const object2 = {
  name: 'Ahmad',
  age: 30,
};

Object.assign(object1, object2);

console.log(object1); // { name: 'Ahmad', age: 30 }

因此，它可用于创建一个新对象并将源对象的属性复制到它。

object.is（）

Object.is()是Object类的方法。它确定两个值是否是相同的值。

console.log(Object.is(1, 1)); // true

console.log(Object.is(1, '1')); // false

console.log(Object.is(NaN, NaN)); // true

// checking for objects types
console.log(Object.is({}, {})); // false

// checking by reference
const object = {};

console.log(Object.is(object, object)); // true

object.freeze（）

Object.freeze()是Object类的方法。它冻结一个对象。冷冻的物体不能再更改；冻结对象可以防止将新属性添加到其上，现有属性被删除，防止更改现有属性的枚举性，可配置性或书写性，并防止现有属性的值更改。此外，冻结对象还可以防止其原型更改。 Freeze（）返回传递的相同对象。

const object = {
  name: 'Hasan',
  age: 25,
};

Object.freeze(object);

object.name = 'Ahmad';

delete object.age; // doesn't work

console.log(object); // { name: 'Hasan', age: 25 }

简单的单词不允许您更改对象。

object.seal（）

Object.seal()是Object类的方法。它密封一个对象，防止新属性被添加到其上，并将所有现有属性标记为不可配置。只要有正确的内容，当前属性的值仍然可以更改。 seal（）返回传递的相同对象。

const object = {
  name: 'Hasan',
  age: 25,
};

Object.seal(object);

object.name = 'Ahmad'; // allowed

delete object.age; // not allowed

console.log(object); // { name: 'Ahmad', age: 25 }

Object.seal()和Object.freeze()之间的区别在于，Object.seal()允许您更改属性的值，但Object.freeze()却没有。

string.prototype.trimstart（）

String.prototype.trimStart()是String类的方法。它从字符串的开头删除了空格。

const name = ' Hasan '; // length: 7

console.log(name.trimStart()); // 'Hasan ' length: 6

string.prototype.trimend（）

String.prototype.trimEnd()是String类的方法。它从字符串的末端删除了空格。

const name = ' Hasan '; // length: 7

console.log(name.trimEnd()); // ' Hasan' length: 6

string.prototype.trim（）

因为我们谈论了String.prototype.trimStart()和String.prototype.trimEnd()，所以我们还应该谈论String.prototype.trim()。

String.prototype.trim()是String类的方法。它从字符串的两侧删除了空格。

const name = ' Hasan '; // length: 7

console.log(name.trim()); // 'Hasan' length: 5

string.prototype.padstart（）

String.prototype.padStart()是String类的方法。它将当前字符串带有另一个字符串（如果需要的话，多次），直到所得的字符串达到给定的长度。从当前字符串的开始（左）开始应用填充。

const name = 'Hasan';

console.log(name.padStart(10)); // '     Hasan'

我们还可以传递第二个参数以指定字符串以填充当前字符串，这在使用数字时可能很有用。

const number = 25;

console.log(number.toString().padStart(10, '0')); // '0000000025'

string.prototype.padend（）

String.prototype.padEnd()是String类的方法。它将当前字符串带有另一个字符串（如果需要的话，多次），直到所得的字符串达到给定的长度。从当前字符串的末端（右）施加填充。

const name = 'Hasan';

console.log(name.padEnd(10)); // 'Hasan     '

我们还可以传递第二个参数以指定字符串以填充当前字符串，这在使用数字时可能很有用。

const number = 25;

console.log(number.toString().padEnd(10, '0')); // '2500000000'

string.prototype.matchall（）

String.prototype.matchAll()是String类的方法。它返回所有结果的迭代器，将字符串与正则表达式相匹配，包括捕获组。

// match all the words in a string
const string = 'Hello World!';

const regex = /\w+/g;

const matches = string.matchAll(regex);

for (const match of matches) {
  console.log(match);
}

// outputs: [ 'Hello', index: 0, input: 'Hello World!', groups: undefined ] [ 'World', index: 6, input: 'Hello World!', groups: undefined ]

string.prototype.replaceall（）

String.prototype.replaceAll()是String类的方法。它返回一个新的字符串，其所有模式的所有匹配都被替换。该模式可以是字符串或REGEXP，并且替换可以是每个匹配的字符串或函数。如果图案是字符串，则仅将更换第一次出现。

const string = 'Hello World!';

console.log(string.replaceAll('l', 'a')); // 'Heaao Warad!'

string.prototype.repeat（）

String.prototype.repeat()是String类的方法。它构造并返回一个新字符串，其中包含指定的副本，该字符串被称为串联。

const string = 'Hello World!';

console.log(string.repeat(3)); // 'Hello World!Hello World!Hello World!'

string.prototype.includes（）

String.prototype.includes()是String类的方法。它确定是否可以在另一个字符串中找到一个字符串，返回正确或错误。

const string = 'Hello World!';

console.log(string.includes('World')); // true

string.prototype.startswith（）

String.prototype.startsWith()是String类的方法。它确定字符串是否从指定字符串的字符开始，适当地返回真或错误。

const string = 'Hello World!';

console.log(string.startsWith('Hello')); // true

这是一种敏感方法。

const string = 'Hello World!';

console.log(string.startsWith('hello')); // false

您也可以传递第二个参数以指定从。
开始搜索的位置

const string = 'Hello World!';

console.log(string.startsWith('World', 6)); // true

string.prototype.endswith（）

String.prototype.endsWith()是String类的方法。它确定字符串是否以指定字符串的字符结束，适当地返回真或false。

const string = 'Hello World!';

console.log(string.endsWith('World!')); // true

这是一种敏感方法。

const string = 'Hello World!';

console.log(string.endsWith('world!')); // false

您也可以传递第二个参数以指定结束搜索的位置。

const string = 'Hello World!';

console.log(string.endsWith('Hello', 5)); // true

最后一句话

我主要列出了全部或至少大多数新的内置功能，但是我想说些什么，您并不是要记住所有这些功能需要它们，您可以查找它们，Google会为您提供帮助，但是您会知道的一些方法，因为您会经常使用它们。

- 结论

我们已经经历了许多新的内置功能，我们已经看到了如何在代码中使用它们，以及它们如何使我们的代码更加可读和易于理解。

â•给我买一杯咖啡。

如果您喜欢我的文章并看到对您有用，则可以buy me a coffee，它将帮助我继续前进并继续创建更多内容。

ð加入我们的社区

加入我们的社区Discord获得帮助和支持（节点JS 2023频道）。

ð奖励内容ð

您可能会看这些文章，这肯定会提高您的知识和生产力。

一般主题

软件包和库

React JS软件包

useFetcher: easiest way to fetch data in React Js

课程（文章）