ES6新特性

原创

于 2024-03-07 16:51:40 发布 · 1k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#es6 #前端 #ecmascript

ES6新特性

ECMAScript 6 (ES6)，也称为 ECMAScript 2015，是 JavaScript 语言的下一代标准，于 2015 年正式发布。ES6 在语言内置功能方面做了大幅度的增强，使得 JavaScript 可以用来编写复杂的大型应用程序。本文将详细介绍 ES6 中的新特性，并提供示例代码进行说明。

let 和 const 命令

在 ES6 之前，JavaScript 只有 var 命令用来声明变量。但是 var 命令有一些缺陷，比如变量提升和函数作用域等。为了解决这些问题，ES6 新增了 let 和 const 命令，用来声明变量。

1.1 let 命令

let 命令用来声明变量，它所声明的变量只在 let 命令所在的代码块内有效。使用 let 命令声明的变量不会在作用域之外被访问到，也不会被提升。

示例：

{
   
   
  let a = 1;
}

console.log(a);  // ReferenceError: a is not defined.

1.2 const 命令

const 命令用来声明常量，它所声明的变量也只在 const 命令所在的代码块内有效。使用 const 命令声明的变量必须在声明时赋值，一旦声明，就不能再改变它的值。

示例：

{
   
   
  const PI = 3.14;
  PI = 3;  // TypeError: Assignment to constant variable.
}

变量的解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值。

2.1 数组的解构赋值

示例：

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

2.2 对象的解构赋值

示例：

let {
   
    foo, bar } = {
   
    foo: "Hello", bar: "World" };
console.log(foo, bar);  // Output: Hello World

字符串的扩展

ES6 对字符串进行了扩展，增加了一些新的方法和功能。

3.1 模板字符串

ES6 引入了模板字符串，用反引号（）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

示例：

const name = 'Bob';
const age = 20;

const message = `Hello, my name is ${
     
     name}. I am ${
     
     age} years old.`;

console.log(message);  // Output: Hello, my name is Bob. I am 20 years old.

3.2 字符串的新方法

ES6 新增了一些字符串的方法，比如 includes()、startsWith()、endsWith() 等。

示例：

const str = 'Hello World';

console.log(str.includes('World'));  // Output: true
console.log(str.startsWith('Hello'));  // Output: true
console.log(str.endsWith('World'));  // Output: true