ES6新特性全面汇总39条你知道多少？（八）

导言

这篇文章是我开启ES6新特性全面汇总的第八章，我将在未来每天更新一篇后续，我将会较为详细深入的向大家介绍我们ES6+的新特性，而不是简单的标注一共有哪一些特性，本篇文章关于其中的三条：数字类型的扩展``新的数组方法``对象字面量的增强。大家可以翻阅目录寻找想要了解的内容，如果后续文章尚未发布可以关注作者并订阅专栏，专栏每日更新，敬请期待~

第二十章：数字类型的扩展

ES6引入了一些新的数字类型的扩展，包括二进制和八进制字面量，以及用于检测有限性和NaN的方法。

1. 二进制和八进制字面量

在之前我们没有确定的方式直接用数字来表示二进制和八进制，在ES6中，我们可以使用前缀来将默认识别的十进制改成识别二进制或者八进制，所以我们可以直接使用二进制（0b或0B前缀）和八进制（0o或0O前缀）字面量来表示数字。

• 二进制字面量示例：

const binaryNumber = 0b1010; // 十进制的10
console.log(binaryNumber); // 输出 10

• 八进制字面量示例：

const octalNumber = 0o755; // 十进制的493
console.log(octalNumber); // 输出 493

这些内容比较简单，主要也是为了方便我们使用所添加的新内容，为我们提供了更直观的方式来表示不同进制的数字。

2. Number.isFinite() 和 Number.isNaN()

我们知道，在JavaScript之中，我们独特的拥有无限（infinity）和不是一个数字（NaN）,而在ES6之中就引入了两个新的静态方法，专门用于检测数字是否有限（finite）和是否为NaN。

• Number.isFinite()：用于确定一个值是否为有限数字。

console.log(Number.isFinite(42)); // 输出 true
console.log(Number.isFinite(Infinity)); // 输出 false

• Number.isNaN()：用于确定一个值是否为NaN。

console.log(Number.isNaN(NaN)); // 输出 true
console.log(Number.isNaN(42)); // 输出 false

这两个方法的行为与全局方法isFinite()和isNaN()不同，有没有看花眼，是Number.isFinite() 和 Number.isNaN()和isFinite()和isNaN()哦~ 它们的区别就是后者会尝试将非数字值转换为数字，而前者只接受数字类型的参数。

这些数字类型的扩展提供了更多的工具来处理不同进制的数字和检测数字的有限性和NaN，使数字的处理更加严格和可靠。在一些特定的应用中，这些方法还是非常有用的。

第二十一章：新的数组方法

这里其实是对之前文章的一点补充。

数组方法的改进

1. Array.from() ：ES6引入了Array.from()方法，它可以将类数组对象或可迭代对象转换为一个真正的数组。这使得从类似NodeList、字符串或Set等非数组对象中创建数组更加容易。

const nodeList = document.querySelectorAll('p');
const arrayFromNodeList = Array.from(nodeList);

2. Array.of() ：Array.of()方法用于创建一个包含传入的参数的新数组。这对于在不同情况下创建数组更加一致和可靠。

const myArray = Array.of(1, 2, 3, 4, 5);

3. 数组方法的改进 ：ES6对一些常用的数组方法进行了改进，使它们更加强大和可预测。例如，Array.prototype.find()和Array.prototype.findIndex()用于查找数组中满足条件的元素，Array.prototype.fill()用于填充数组，Array.prototype.copyWithin()用于在数组内部复制元素，等等。

以下是对这些改进的数组方法的详细解释：

1. Array.prototype.find() ：Array.prototype.find()方法用于查找数组中满足指定条件的第一个元素，并返回该元素。如果没有找到匹配的元素，则返回undefined。

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

const result = numbers.find(num => num > 2);

console.log(result); // 输出 3

这个方法提供了一种更简洁的方式来查找数组中的元素，而不必使用显式循环。

2. Array.prototype.findIndex() ：Array.prototype.findIndex()方法类似于Array.prototype.find()，但它返回匹配元素的索引，而不是元素本身。如果没有找到匹配的元素，则返回-1。

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

const index = numbers.findIndex(num => num > 2);

console.log(index); // 输出 2（元素3的索引）

这个方法可以用于获取匹配元素的索引。

3. Array.prototype.fill() ：Array.prototype.fill()方法用于将数组的所有元素替换为静态值。它接受两参数，第一个是替换值，第二个是开始替换的索引（可选，默认为0），以及结束替换的索引（可选，默认为数组的长度）。

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

numbers.fill(0, 2, 4);

console.log(numbers); // 输出 [1, 2, 0, 0, 5]

这个方法可以用于在数组中填充特定的值，例如用零来初始化数组。

4. Array.prototype.copyWithin() ：Array.prototype.copyWithin()方法用于在数组内部复制元素，从指定位置开始复制到指定位置结束，覆盖原来的元素。它接受两个参数，第一个是目标位置的索引，第二个是开始复制的位置的索引。

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

numbers.copyWithin(0, 3);

console.log(numbers); // 输出 [4, 5, 3, 4, 5]

这个方法可以用于对数组进行局部复制和替换操作。

总之，ES6引入了一系列新的数组方法和对现有方法的改进，使数组的创建、操作和处理更加方便和功能丰富。这些方法是现代JavaScript开发中的有力工具，有助于提高开发效率。

第二十二章：对象字面量的增强

ES6引入了一些增强对象字面量的功能，使得创建和操作对象更加方便和灵活。

1. 属性名的表达式

在ES6中，对象字面量的属性名可以是表达式，而不仅仅是字面值。这使得属性名更加动态和灵活。

属性名的表达式是指在对象字面量中，用方括号 [] 包裹的表达式来作为属性名。我们就可以根据表达式的结果来确定属性名。这个特性在使用中非常方便，因为它可以让我们根据需要来为对象添加不同的属性。

下面是一个示例，演示了属性名的表达式的用法：

const dynamicKey = 'age';

const person = {
  name: 'Alice',
  [dynamicKey]: 30, // 使用属性名的表达式
};

console.log(person.age); // 输出 30

在上面的示例中，dynamicKey 是一个包含属性名的表达式，它的值是 'age'。在对象字面量中，我们可以使用 [dynamicKey] 来定义属性名，而不是使用字面值 'age'。这使得属性名更加动态，我们就可以根据需要设置不同的属性名了。

属性名的表达式在动态生成对象属性时非常有用，例如从外部数据源获取属性名，或根据运行时条件设置属性名。这样的灵活性使得 JavaScript 编程更加强大和适应多种场景。

在我们的实际应用中需要根据变量值来定义对象属性的时候简直不要太方便，我们就可以使用这样的方式从而实现更灵加活的对象构建。

2. 方法的简写形式

在ES6中，当对象的方法的键值对的键和值相同时，我们就可以使用一种简写的形式来定义方法。这就使对象字面量会变得更加的简洁。

传统的对象方法定义方式如下：

const person = {
  name: 'Alice',
  sayHello: function() {
    console.log(`Hello, my name is ${this.name}.`);
  },
};

而在ES6中，可以使用方法的简写形式，将方法名和函数定义合并为一个，如下所示：

const person = {
  name: 'Alice',
  sayHello() {
    console.log(`Hello, my name is ${this.name}.`);
  },
};

在上面的示例中，sayHello 方法的定义就会变得更加简洁，它不再需要冒号和function关键字就可以定义。

如果使用方法的简写形式的话，我们就不需要显式指定方法的名称，因为方法名就是键值对的键。这提高了对象字面量的可读性，减少了重复代码。

方法的简写形式就特别适用于定义对象的方法，这会使代码更加清晰和紧凑。这种语法的改进使JavaScript中的代码变得更具有表现力，提高了代码的可维护性。

这些对象字面量的增强功能使得对象的创建和操作更加便捷和灵活，提高了代码的可读性和可维护性。ES6也已经过去很久了，这些功能现在已经广泛应用于现代JavaScript的开发中了。

所以这正是我们不断学习新的内容，提高我们的代码水平的意义所在~

那么我们这篇文章到这里就结束啦~

如果你想了解更多这类文章，点赞关注作者更新更多后续~