ES6 十大特性简介

下面就为大家详细讲解一下 “ES6 十大特性简介”。

1. let 和const

• let 与 var 的区别：let 声明的变量只在其块级作用域内有效。
• const：定义一个只读常量，一旦定义，其值就不可改变。

// let 示例
let a = 1;
if(true){
  let a = 2;
  console.log(a);  // 2
}
console.log(a);  // 1

// const 示例
const PI = 3.14;
PI = 3.1415926;  // 报错

2. 模板字符串

用反引号 ` 来做模板字符串标记，通过 ${} 插入变量和表达式。

var str1 = "world";
console.log(`Hello ${str1}`);
console.log(`1 + 2 = ${1 + 2}`);

3. 函数参数默认值

函数参数可以设置默认值，避免因函数调用时参数不足而导致的错误。

function sayHello(name = 'world') {
  console.log(`Hello ${name}`);
}
sayHello();  // Hello world
sayHello('Alice');  // Hello Alice

4. 箭头函数

箭头函数是 ES6 中的一个语法糖，简化了函数定义，也能解决 this 常见的问题。

// ES5
var fn1 = function(n) {
  return n * 2;
}

// ES6
let fn2 = n => n * 2;

5. 扩展运算符

扩展运算符 ... 能将一个数组展开成多个参数，或将多个参数打包成一个数组。

// 扩展参数
function add(a, b, c) {
  return a + b + c;
}
let arr1 = [1, 2, 3];
console.log(add(...arr1));  // 6

// 打包数组
let arr2 = [...arr1, 4, 5, 6];
console.log(arr2);  // [1, 2, 3, 4, 5, 6]

6. 对象属性简写

ES6 提供了一种更方便的方法，来定义对象的属性值。

let name = 'Alice';
let age = 20;
// 对象属性简写
let obj = {
  name,
  age,
  sayHello() {
    console.log('Hello');
  }
};
console.log(obj);  // {name: "Alice", age: 20, sayHello: ƒ}

7. 解构赋值

解构赋值是一种便捷的取出数组或对象中元素的方法。

// 数组解构
let arr = [1, 2, 3];
let [a,b,c] = arr;
console.log(a,b,c);  // 1 2 3

// 对象解构
let obj2 = {name: 'Bob', age: 18};
let {name: n , age: a2} = obj2;
console.log(n, a2);  // Bob 18

8. Promise

Promise，即承诺，在异步操作完成时，返回结果或返回错误信息。

function fetchData() {
  return new Promise(function(resolve, reject) {
    // 异步操作，成功完成时，调用resolve()，抛出异常时，调用reject()
  });
}

9. Class

ES6 引入了类的概念，可以更方便地创建对象，并有更好的继承机制。

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  sayHello() {
    console.log(`Hello ${this.name}`);
  }
}

class Student extends Person {
  constructor(name, age, grade) {
    super(name, age);
    this.grade = grade;
  }
}

let s = new Student('Alice', 20, 90);
s.sayHello();  // Hello Alice

10. 模块化

ES6 引入了 import 和 export，来方便模块化的编写和引入。

// module1.js
let name = 'Alice';
function sayHello() {
  console.log(`Hello ${name}`);
}
export {name, sayHello};

// module2.js
import {name, sayHello} from './module1';
console.log(name);  // Alice
sayHello();  // Hello Alice

以上是“ES6 十大特性简介”的简介，如果想更深入地了解，建议去官方文档中研究学习。