ECMAScript 6 新特性上篇

原创于 2024-07-07 14:26:22 发布 · 338 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ecmascript #前端 #开发语言

前端全栈开发专栏收录该内容

207 篇文章

订阅专栏

一、什么是ECMAScript

ECMAScript（简写为ES）是一种基于标准化的脚本语言，用于在Web浏览器中编写交互式和动态的网页。它是由Ecma国际组织（以前称为欧洲计算机制造商协会）定义和标准化的。ECMAScript定义了语法、类型、控制结构、内置对象等方面的规范，使得不同的浏览器和平台能够遵循相同的规则来解释和执行脚本代码。

ECMAScript的发展历程如下：

ECMAScript 1（1997年）：第一个ECMAScript的标准版本，定义了基本的脚本语言结构。
ECMAScript 2（1998年）：对第一个版本进行了一些修订和改进。
ECMAScript 3（1999年）：这个版本引入了一些重要的改变，包括正则表达式、错误处理、更严格的运算顺序等。
ECMAScript 4：这个版本在草案阶段被废弃，没有正式发布。
ECMAScript 5（2009年）：引入了一些重要的改进，包括严格模式、JSON对象、函数绑定等。
ECMAScript 6（2015年）：也被称为ES2015，是ECMAScript历史上最重要的更新，引入了类、箭头函数、模块化、Promise等新特性。
ECMAScript 2016、2017、2018、2019等：ECMAScript每年更新一次，引入了一些新特性、修复了一些bug，并持续改进语言的功能和性能。

ECMAScript的确切规范可以在Ecma国际组织的官方网站上找到，并且它是一个开放的标准，任何人都可以参与到规范的制定和讨论中。此外，各个浏览器厂商也会根据ECMAScript的规范来实现自己的JavaScript引擎，以确保网页能够在不同的浏览器上正确运行。

ECMAScript是一种用于编写Web脚本的标准化语言，它的规范定义了语法、类型、控制结构等方面的规则，使得不同的浏览器和平台能够遵循相同的规范来解释和执行脚本代码。

二、ECMAScript 与JavaScript的关系

ECMAScript和JavaScript是密切相关的概念，它们在实际使用中经常被混用。下面详细解析ECMAScript与JavaScript的关系：

ECMAScript是一种脚本语言的标准化规范，定义了语法、类型、控制结构、内置对象等方面的规范。它由Ecma国际组织制定并进行标准化。
JavaScript是一种基于ECMAScript标准的编程语言。它是ECMAScript规范的一种具体实现。实际上，JavaScript是一种特定版本的ECMAScript的实现，并且是最常见的一种实现。
ECMAScript规范定义了JavaScript中的语法和语义。JavaScript实现了ECMAScript规范，并且在此基础上还提供了其他的功能和特性，例如浏览器API（如DOM操作、事件处理等）和Node.js的核心模块（如文件系统、网络等），它们不在ECMAScript规范中定义。
ECMAScript规范的版本是逐年更新的，每年都会发布一个新的版本，引入新的特性和改进。而JavaScript的版本则是根据ECMAScript规范的发布情况来命名的，例如JavaScript 1.5基于ECMAScript 3，JavaScript 5基于ECMAScript 5，JavaScript 6（也称为ES2015）基于ECMAScript 6等。
ECMAScript和JavaScript的术语经常被混用，很多人将它们视为同一概念。实际上，当我们说"JavaScript"时，通常指的是ECMAScript规范的一个实现，并且包括了其他相关的功能和特性。

ECMAScript是一种脚本语言的规范，而JavaScript是基于ECMAScript规范的一种具体实现。JavaScript实现了ECMAScript规范，并在此基础上提供了其他的功能和特性。因此，当我们说"JavaScript"时，通常是指ECMAScript规范的一个具体实现。

三、ES6 与ES5.1 基础之上的变化

ES6（也称为ES2015）是ECMAScript规范的第六个版本，相对于ES5.1（ECMAScript规范的第五个版本），引入了许多新的特性和变化。以下是ES6相对于ES5.1的一些重要变化：

块级作用域：ES6引入了let和const关键字，使得可以在块级作用域中声明变量，而不仅仅是函数作用域。
箭头函数：ES6提供了新的语法来定义箭头函数，这种函数更简洁，并且自动绑定了父级作用域的this。
类和模块：ES6引入了class关键字，使得面向对象编程更加方便。同时，ES6也引入了模块化的语法，使得可以轻松地拆分和组织代码。
解构赋值：ES6允许从数组或对象中提取值，并赋给变量，可以更快捷地进行变量赋值操作。
简化的对象字面量：ES6中，对象字面量的定义更加简洁，可以直接写入变量和函数，并且可以简写函数的定义。
模板字符串：ES6引入了模板字符串，可以通过反引号(`)来定义字符串，并且可以在其中使用变量和表达式，使得字符串拼接更加方便。
Promise：ES6引入了Promise对象，用于处理异步操作，使得异步编程更加易读和易维护。
迭代器和生成器：ES6允许定义自定义的迭代器和生成器。迭代器用于遍历数据集合，生成器则可以用于简化异步编程。
新的数据类型和方法：ES6引入了新的数据类型，如Symbol和Map等，以及新的方法，如数组的find和findIndex方法等。
模块化导入和导出：ES6提供了更方便的模块化语法，使得可以直接导入和导出代码模块。

这些是ES6相对于ES5.1的一些主要变化，引入了许多新的特性和语法，使得JavaScript更加现代化和易用。这些特性逐渐被各个浏览器和JavaScript引擎所支持，使得开发者可以更好地利用新的功能来编写更高效、易读和可维护的代码。

四、ES6 新特性

4.1、let 与块级作用域

ES6引入了let关键字，它与var关键字的作用类似，都是用于声明变量，但是let声明的变量具有块级作用域。块级作用域是指在代码块内部声明的变量只在该代码块内部有效，外部代码无法访问。

下面是let关键字和块级作用域的详细解析和代码示例：

块级作用域：块级作用域是指由一对花括号({})包围的代码块。在ES6之前，JavaScript中只有函数作用域和全局作用域，通过let关键字，可以在任意代码块内部创建一个新的作用域，这样可以避免变量污染和冲突。
let声明变量：使用let关键字声明的变量只在当前作用域内有效，不会被提升到作用域顶部。与var不同，let变量必须先声明后使用。
块级作用域中的变量提升：在块级作用域中，使用let关键字声明的变量不会被提升到块级作用域的顶部，只有在变量声明位置之后才能使用。

下面是一些示例代码，用于说明let关键字和块级作用域的使用：

// 示例1
function test() {
  if (true) {
    var x = 10;
    let y = 20;
  }
  console.log(x); // 输出10，var变量提升至函数作用域
  console.log(y); // 报错，y只在if代码块内有效
}

test();

// 示例2
for (let i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i); // 输出0，1，2，3，4
  }, 1000);
}

// 示例3
var x = 10;
{
  let x = 20;
  console.log(x); // 输出20，块级作用域内的x变量
}
console.log(x); // 输出10，全局作用域的x变量

在示例1中，使用let关键字声明的y变量只在if代码块内有效，而使用var关键字声明的x变量会被提升到函数作用域，所以在if外部也能访问到。

在示例2中，使用let关键字声明的变量i只在for循环内部有效，每次循环都会创建一个新的i变量，所以在setTimeout中可以正确地输出0，1，2，3，4。

在示例3中，块级作用域内的x变量与全局作用域的x变量互不干扰，它们是两个不同的变量，所以在两个代码块中分别输出20和10。

小结：let关键字可以在任意代码块内部创建一个新的作用域，并且声明的变量只在当前作用域内有效，可以有效避免变量污染和冲突。

4.2、const 恒量 / 常量

ES6引入了const关键字，用于声明恒量或常量。const声明的变量具有与let相同的块级作用域，但其值是恒定不变的。

const声明的常量必须在声明时进行初始化，并且一旦初始化后就不能再次赋值。这意味着const声明的变量在后续的代码中不能被修改。

下面是一些示例代码，演示了const关键字的用法：

const PI = 3.14; // 声明一个常量PI并初始化为3.14
console.log(PI); // 输出3.14

PI = 3.1415; // 这里会产生一个错误，因为常量不能被重新赋值

在上面的代码中，我们声明了一个名为PI的常量，并将其值初始化为3.14。然后在尝试将其值重新赋值为3.1415时，会因为常量不能被重新赋值而产生一个错误。

const关键字常用于声明不可变的常量，例如数学常量、配置项或固定的引用值。它有助于提高代码的可读性和可维护性，并防止不必要的错误和变量修改。

4.3、数组的解构

ES6引入了数组的解构赋值，可以方便地将数组中的元素解构到多个变量中。数组解构赋值的语法使用方括号([])来表示。

下面是一些示例代码，演示了数组解构赋值的用法：

// 基本用法
const arr = [1, 2, 3];
const [a, b, c] = arr;
console.log(a, b, c); // 输出：1 2 3

// 忽略某些元素
const [x, , y] = arr;
console.log(x, y); // 输出：1 3

// 不完全解构
const [m, n] = arr;
console.log(m, n); // 输出：1 2

// 默认值
const [p, q, r, s = 4] = arr;
console.log(p, q, r, s); // 输出：1 2 3 4

// 嵌套数组的解构
const nestedArr = [1, [2, 3], 4];
const [u, [v, w], x] = nestedArr;
console.log(u, v, w, x); // 输出：1 2 3 4

// 剩余元素
const [first, ...rest] = arr;
console.log(first, rest); // 输出：1 [2, 3]

在上面的代码中，我们使用数组解构赋值将arr数组中的元素解构到多个变量中。通过在方括号([])中指定变量名的方式，可以将数组的对应元素赋值给相应的变量。

数组解构赋值还可以忽略某些元素，不完全解构，给变量设置默认值，处理嵌套数组，以及提取剩余元素等。

数组解构赋值使代码更加简洁和清晰，减少了临时变量的使用，提高了开发效率。

4.4、对象的解构

ES6引入了对象的解构赋值，可以方便地将对象中的属性解构到多个变量中。对象解构赋值的语法使用花括号({})来表示。

下面是一些示例代码，演示了对象解构赋值的用法：

// 基本用法
const obj = {name: 'Alice', age: 20};
const {name, age} = obj;
console.log(name, age); // 输出：Alice 20

// 重命名变量
const {name: n, age: a} = obj;
console.log(n, a); // 输出：Alice 20

// 默认值
const {name: m, gender = 'female'} = obj;
console.log(m, gender); // 输出：Alice female

// 嵌套对象的解构
const nestedObj = {name: 'Bob', info: {age: 25, gender: 'male'}};
const {name: x, info: {age: y, gender: z}} = nestedObj;
console.log(x, y, z); // 输出：Bob 25 male

// 剩余属性
const {name: first, ...rest} = obj;
console.log(first, rest); // 输出：Alice {age: 20}

在上面的代码中，我们使用对象解构赋值将obj对象中的属性解构到多个变量中。通过在花括号({})中指定变量名的方式，可以将对象的对应属性值赋值给相应的变量。

对象解构赋值还可以给变量设置默认值，重命名变量，处理嵌套对象，以及提取剩余属性等。

对象解构赋值使代码更加简洁和清晰，减少了临时变量的使用，提高了开发效率。同时，它也提供了一种方便的方式来访问和操作对象的属性。

4.5、模板字符串字面量

ES6 的模板字符串字面量是一种新的字符串表示方法，使用反引号（`）来定义字符串。与普通字符串不同的是，在模板字符串中可以插入变量和表达式，并且支持换行符。

模板字符串的语法如下：

`string text ${expression} string text`

其中，${expression} 表示插入一个变量或表达式。在运行时，${expression} 会被替换为对应变量或表达式的值。

模板字符串的主要特性包括：

可以换行：在模板字符串中可以直接使用换行符，不需要使用转义字符或连接符。
可以插入变量或表达式：可以在模板字符串中使用 ${expression} 语法插入变量或表达式，并且支持嵌套使用。
可以使用标签函数：模板字符串可以紧跟在一个标签函数后面，标签函数可以自定义模板字符串的处理方式。

下面是一些示例代码来说明模板字符串的使用：

// 字符串拼接
const name = 'Alice';
const message = `Hello, ${name}!`;
console.log(message); // 输出 "Hello, Alice!"

// 多行字符串
const poem = `
  Roses are red,
  Violets are blue,
  Sugar is sweet,
  And so are you.
`;
console.log(poem);
// 输出
//   Roses are red,
//   Violets are blue,
//   Sugar is sweet,
//   And so are you.

// 插入表达式
const a = 10;
const b = 20;
const sum = `The sum of ${a} and ${b} is ${a + b}.`;
console.log(sum); // 输出 "The sum of 10 and 20 is 30."

// 标签函数
function upper(strings, ...values) {
  let result = '';
  for (let i = 0; i < strings.length; i++) {
    result += strings[i];
    if (i < values.length) {
      result += values[i].toUpperCase();
    }
  }
  return result;
}

const name = 'Alice';
const age = 25;
const message = upper`Hello, my name is ${name} and I am ${age} years old.`;
console.log(message); // 输出 "HELLO, MY NAME IS ALICE AND I AM 25 YEARS OLD."

总结起来，模板字符串字面量是一种更方便、更灵活的字符串表示方法，可以更简洁地拼接字符串、插入变量和表达式，并且支持多行字符串和标签函数。

4.6、模板字符串标签函数

ES6引入了一种新的语法特性，即模板字符串标签函数（Tagged Template）。它允许我们通过自定义的函数来处理模板字符串，并返回一个新的字符串。这种方式可以用于实现一些高级的字符串处理功能。

在使用模板字符串标签函数时，我们将模板字符串写在一个函数后面，并在模板字符串中使用${}来引用变量。函数的第一个参数是一个数组，包含了模板字符串中的所有静态部分，而后面的参数则是模板字符串中的动态部分对应的值。

下面是一个简单的示例，展示了如何使用模板字符串标签函数：

function myTag(strings, ...values) {
  console.log(strings);  // ["Hello ", " world! ", "", raw: Array(3)]
  console.log(values);   // ["ES6", "template strings"]
  
  let result = "";
  
  for(let i=0; i<strings.length; i++) {
    result += strings[i];
    
    if(i < values.length) {
      result += values[i];
    }
  }
  
  return result;
}

let name = "ES6";
let feature = "template strings";
let message = myTag`Hello ${name} world! I'm using ${feature}.`;

console.log(message);  
// 输出：Hello ES6 world! I'm using template strings.

在上面的例子中，myTag函数接收了两个参数，第一个参数是一个数组strings，它包含了模板字符串中的所有静态部分。在本例中，strings的值为["Hello ", " world! ", ""]。而第二个参数...values则是一个数组，包含了模板字符串中${}里面的动态部分对应的值。在本例中，values的值为["ES6", "template strings"]。

myTag函数会将两个数组进行组合，返回一个新的字符串。在本例中，最后返回的结果是"Hello ES6 world! I'm using template strings."。

通过模板字符串标签函数，我们可以灵活地处理模板字符串，实现一些高级的字符串操作，比如字符串拼接、过滤、转换等。这种方式可以提高代码的可读性和可维护性。

除了上面的例子，模板字符串标签函数还可以用于实现一些其他的功能，比如字符串的国际化、自定义字符串的格式化等。通过自定义标签函数，我们可以自由地控制字符串的处理逻辑。

4.7、字符串的扩展方法

ES6引入了许多字符串的扩展方法，使得在字符串处理方面更加方便和灵活。本文将详细解析和示例一些常用的字符串扩展方法。

1、includes()方法：判断字符串中是否包含指定的子字符串，并返回布尔值。

const str = 'Hello world';

console.log(str.includes('Hello')); // true
console.log(str.includes('foo')); // false

2、startsWith()方法：判断字符串是否以指定的子字符串开头，并返回布尔值。

const str = 'Hello world';

console.log(str.startsWith('Hello')); // true
console.log(str.startsWith('foo')); // false

3、endsWith()方法：判断字符串是否以指定的子字符串结尾，并返回布尔值。

const str = 'Hello world';

console.log(str.endsWith('world')); // true
console.log(str.endsWith('foo')); // false

4、repeat()方法：将字符串重复指定的次数，并返回新的字符串。

const str = 'Hello';

console.log(str.repeat(3)); // HelloHelloHello

5、padStart()方法和padEnd()方法：用指定的字符串填充原字符串的头部或尾部，使字符串达到指定的长度。

const str = 'Hello';

console.log(str.padStart(10, 'abc')); // abcabcHello
console.log(str.padEnd(10, 'abc')); // Helloabcabc

6、trimStart()方法和trimEnd()方法：去除字符串的头部或尾部的空格。

const str = '  Hello world  ';

console.log(str.trimStart()); // 'Hello world  '
console.log(str.trimEnd()); // '  Hello world'

7、repeat()方法、padStart()方法和padEnd()方法可以与模板字符串结合使用，更灵活地处理字符串。

const num = 5;

console.log(`${num} is ${'5'.repeat(num)} times`); // 5 is 55555 times
console.log(`Padding: ${'foo'.padStart(10, 'abc')}`); // Padding: abcabc4foo

4.8、箭头函数

箭头函数是ES6中的一种新的函数声明方式，它提供了一种更简洁的语法来定义函数，并且可以避免传统函数中this指向的困扰。以下是箭头函数的详细解析和代码示例。

1、基本语法

箭头函数的基本语法如下：

(param1, param2, …, paramN) => { statements }

其中，param1, param2, …, paramN 是函数的参数列表，statements 是函数体。

示例：

// 传统函数
function add(a, b) {
  return a + b;
}

// 箭头函数
const add = (a, b) => {
  return a + b;
}

2、简化语法

如果函数体只有一行返回语句，可以进一步简化箭头函数的语法，去掉花括号和return关键字。

示例：

// 传统函数
function multiply(a, b) {
  return a * b;
}

// 箭头函数
const multiply = (a, b) => a * b;

3、this指向

箭头函数中的this值是在定义时确定的，而不是在运行时确定的。这意味着箭头函数中的this指向的是定义时所在的对象，而不是调用时的对象。

示例：

const obj = {
  name: 'Alice',
  sayHello: function() {
    setTimeout(() => {
      console.log(`Hello, ${this.name}`);
    }, 1000);
  }
};

obj.sayHello(); // 输出: Hello, Alice

在上述示例中，箭头函数中的this指向的是定义时所在的obj对象，而不是setTimeout函数的调用者。

4、不绑定arguments对象

箭头函数中不存在arguments对象，但可以使用剩余参数语法来代替。

示例：

const sum = (...args) => {
  let total = 0;
  for (let arg of args) {
    total += arg;
  }
  return total;
};

console.log(sum(1, 2, 3, 4)); // 输出: 10

在上述示例中，使用了剩余参数语法(...args)来代替传统函数中的arguments对象。

4.9、箭头函数与 this

在ES6中，箭头函数是一种新的函数声明语法，它可以更简洁地定义函数，并且可以解决传统函数中使用this时可能出现的问题。

箭头函数的语法形式如下：

(parameters) => { statement }

其中，parameters 是函数的参数列表，可以包含零个或多个参数，如果只有一个参数，可以省略括号。statement 是函数体，可以包含零个或多个语句，如果只有一个语句，可以省略大括号。

现在我们来详细解析箭头函数与 this 的关系。

1、箭头函数没有自己的 this，它会继承上层作用域的 this 值。

const obj = {
  name: 'John',
  sayHi: function() {
    setTimeout(() => {
      console.log(this.name);
    }, 1000);
  }
};

obj.sayHi(); // 输出：John

在这个例子中，箭头函数 this 继承了 obj 对象的作用域，所以 this.name 输出的是 obj.name。

2、传统函数中的 this 是在函数被调用时确定的，而箭头函数中的 this 是在函数定义时确定的。

const obj = {
  name: 'John',
  sayHi: function() {
    setTimeout(function() {
      console.log(this.name);
    }, 1000);
  }
};

obj.sayHi(); // 输出：undefined

在这个例子中，传统函数中的 this 是在调用时确定的，所以 this.name 输出的是 undefined，因为在 setTimeout 的回调函数中，this 指向的是全局对象。

3、箭头函数可以解决回调函数中丢失 this 的问题。

const obj = {
  name: 'John',
  sayHi: function() {
    setTimeout(function() {
      console.log(this.name);
    }.bind(this), 1000);
  }
};

obj.sayHi(); // 输出：John

在这个例子中，我们使用了传统函数中的 bind 方法将当前对象的 this 绑定到回调函数中，这样 this.name 才能输出正确的值。

4、箭头函数不能用作构造函数。

const Person = (name) => {
  this.name = name;
};

const john = new Person('John'); // 报错

在这个例子中，使用箭头函数定义的构造函数会报错，因为箭头函数没有自己的 this，不能用来创建对象。

箭头函数是一种更简洁的函数定义语法，可以继承上层作用域的 this 值，解决了传统函数中使用 this 可能出现的问题，但不能用作构造函数。

待续...