从 ECMAScript 2019 到 ES6：JavaScript 基础语法总结-JavaScript中文网-JavaScript教程资源分享门户

前言

JavaScript 是现代 Web 开发中必不可少的编程语言之一。随着 ECMAScript 标准的不断更新和提升，JavaScript 不断地发生变化。因此，及时掌握最新的 ECMAScript 版本对于开发者来说非常重要。

本文将深入探讨 ECMAScript 2019 和 ES6 中的 JavaScript 基础语法，并提供示例代码和实际应用指导，帮助读者通过学习掌握这些知识。

ECMAScript 2019

Array.prototype.flat 和 Array.prototype.flatMap

在 ECMAScript 2019 中，Array.prototype 新增了两个方法 flat 和 flatMap，用于处理数组。

Array.prototype.flat 方法可以把嵌套的数组扁平化。例如：

const arr = [1, 2, [3, 4]];
const flattenedArr = arr.flat(); // [1, 2, 3, 4]

Array.prototype.flatMap 方法则是将数组扁平化后，再执行回调函数。例如：

const arr = [1, 2, 3, 4, 5];
const mappedAndFlattenedArr = arr.flatMap(x => [x * 2]); // [2, 4, 6, 8, 10]

这两个新方法可以很方便地处理嵌套的数组，提高代码的可读性和效率。

Object.fromEntries

Object.fromEntries 方法可以把由键值对组成的数组转换为对象。例如：

const entries = [['name', 'Alice'], ['age', 18]];
const obj = Object.fromEntries(entries); // {name: 'Alice', age: 18}

这个方法可以很方便地将获取到的服务器数据转换为对象，简化代码，提高可读性。

String.prototype.trimStart 和 String.prototype.trimEnd

String.prototype 新增了两个方法 trimStart 和 trimEnd，用于去除字符串两端的空白字符。例如：

const str = '   hello world ';
const trimmedStr = str.trimStart().trimEnd(); // 'hello world'

这两个方法可以很方便地处理用户输入的字符串，提高代码的鲁棒性和可读性。

ES6

let 和 const

ES6 新增了两个关键字 let 和 const，用于声明变量。let 和 const 与 var 的区别在于，let 和 const 声明的变量只在它所在的块级作用域内有效，而 var 声明的变量则无所谓块级作用域。

const 声明的变量是一个常量，即不可变的。例如：

const PI = 3.14159;
PI = 3; // TypeError: Assignment to constant variable.

箭头函数

ES6 引入了箭头函数。箭头函数的定义方式比普通函数更为简洁，同时省略了 this、super、arguments 等关键字的绑定。例如：

const sum = (a, b) => a + b;

相比之下，普通的函数定义方式如下：

function sum(a, b) {
  return a + b;
}

模板字符串

ES6 引入了模板字符串，用于更简单地定义多行字符串和字符串插值。例如：

const name = 'Alice';
const greeting = `Hello, ${name}!
Welcome to our website!`;

相比之下，传统的字符串定义方式如下：

const greeting = "Hello, " + name + "!\n" +
"Welcome to our website!";

默认参数

ES6 新增了默认参数的支持。使用默认参数可以减少代码的重复性。例如：

function orderCoffee(type = 'latte', size = 'small', milk = 'whole') {
  console.log(`Order: ${type} coffee, ${size} size, ${milk} milk.`);
}

在使用时，如果没有传入参数，则会使用默认参数。例如：

orderCoffee(); // Order: latte coffee, small size, whole milk.

解构赋值

ES6 新增了解构赋值语法，用于简化变量赋值。解构赋值可以从数组（或对象）中提取数据，然后将其赋值给变量。例如：

const [a, b, c] = [1, 2, 3];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

如果只想获取数组中的一部分，可以使用逗号分隔符。例如：

const [, b, c] = [1, 2, 3];
console.log(b); // 2
console.log(c); // 3

同时，我们也可以使用对象的属性名进行解构赋值。例如：

const person = { name: 'Alice', age: 18 };
const { name, age } = person;
console.log(name); // 'Alice'
console.log(age); // 18

类

ES6 引入了类的概念。类是一种面向对象编程的程序设计基础概念。类可以包含属性和方法，并且可以从其它类继承。

// javascriptcn.com 代码示例
class Animal {
  constructor(name) {
    this.name = name;
  }

  move() {
    console.log(`${this.name} is moving.`);
  }
}

class Dog extends Animal {
  constructor(name) {
      super(name);
  }

  bark() {
    console.log(`${this.name} is barking.`);
  }
}

const dog = new Dog('Lucy');
dog.move(); // Lucy is moving.
dog.bark(); // Lucy is barking.

类的定义方式比传统的函数定义方式更为简洁和易于理解。

总结

本文介绍了 ECMAScript 2019 和 ES6 中的 JavaScript 基础语法，包括 Array.prototype.flat 和 Array.prototype.flatMap、Object.fromEntries、String.prototype.trimStart 和 String.prototype.trimEnd、let 和 const、箭头函数、模板字符串、默认参数、解构赋值以及类。

这些新特性的引入，让 JavaScript 编程变得更加简单、高效，并且能够让开发者在更短的时间内完成更复杂的任务。相信通过学习本文，读者可以充分掌握这些知识，并应用于实际开发中。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/651cd85995b1f8cacd458db2