ES6-功能介绍

ES6，也被称为ES2015，是JavaScript语言的一次重大更新。它增加了很多新特性，提高了开发效率和代码可维护性。

let与const

ES6引入了let和const关键字，用于声明变量和常量，相较于原来的var有以下优点：

• 使用let关键字声明的变量具有块级作用域，避免了变量污染
• 使用const关键字声明的常量在声明后不可更改，提高了代码的可维护性

// 块级作用域
{
   let x = 1;
   var y = 2;
}
console.log(x) // Uncaught ReferenceError: x is not defined
console.log(y) // 2

// 常量
const PI = 3.14;
PI = 3 // Uncaught TypeError: Assignment to constant variable.

箭头函数

箭头函数是ES6中新增的函数定义方式，它具有以下特点：

• 箭头函数没有this，内部的this指向定义它的函数的this，避免了this指向问题
• 箭头函数没有arguments，可以使用Rest参数替代

// 普通函数
function add(a, b) {
  return a + b;
}
console.log(add(1,2)); // 3

// 箭头函数
const add = (a, b) => a + b;
console.log(add(1,2)); // 3

// 解决this指向问题
const obj = {
   name: 'ES6',
   sayHi: function() {
      setTimeout(() => {
         console.log(`Hello, ${this.name}`)
      }, 1000);
   }
}
obj.sayHi(); // Hello, ES6

模板字符串

ES6中提供了一个新的字符串表示形式——模板字符串，它可以与变量、表达式一起使用，并且支持多行文本。

const name = 'ES6';
const str = `Hello，${name}，
           Welcome to ES6!`;
console.log(str);

扩展操作符

扩展操作符是三个点(...)，用来将数组或对象“展开”，可以与函数一起使用，方便进行数组、对象的拷贝、合并等操作。

const arr1 = [1, 2, 3];
const arr2 = [4, 5];
const arr3 = [...arr1, ...arr2];
console.log(arr3); // [1, 2, 3, 4, 5]

const obj1 = {
   name: 'ES6',
   year: 2015
};
const obj2 = {
   ...obj1,
   author: 'ECMA'
};
console.log(obj2); // {name: "ES6", year: 2015, author: "ECMA"}

解构赋值

解构赋值是将数组或对象中的元素解构到变量中，能够方便地进行变量赋值、交换变量值等操作。

// 数组解构
const arr = [1, 2, 3];
const [x, y, z] = arr;
console.log(x); // 1
console.log(y); // 2
console.log(z); // 3

// 对象解构
const obj = {
   name: 'ES6',
   year: 2015
};
const {name, year} = obj;
console.log(name); // 'ES6'
console.log(year); // 2015

Promise

Promise是ES6中新增的处理异步请求的方式，它将回调函数封装到一个对象中，使得代码更加可读、可维护，避免了回调嵌套的问题。

function setTimeoutPromise(delay) {
   return new Promise((resolve, reject) => {
      setTimeout(() => {
         resolve(`Promise is resolved after ${delay} ms.`);
      }, delay)
   });
}

setTimeoutPromise(2000).then((result) => {
   console.log(result); // Promise is resolved after 2000 ms.
});

rest参数

rest参数是ES6中新增的语法，用来表示不定数量的参数。它可以与解构赋值、箭头函数等技术一起使用，非常方便。

function sum(...nums) {
   return nums.reduce((total, num) => total + num);
}
console.log(sum(1, 2, 3)); // 6

const arr = [1, 2, 3, 4];
const [head, tail, ...rest] = arr;
console.log(head); // 1
console.log(tail); // 2
console.log(rest); // [3, 4]

class

class是ES6中新增的类定义方式，支持继承、静态方法、实例方法、get、set等操作，使得面向对象编程更加方便。

class Animal {
   constructor(name) {
      this.name = name;
   }

   speak() {
      console.log(`${this.name} makes a noise.`);
   }
}

class Dog extends Animal {
   speak() {
      console.log(`${this.name} barks.`);
   }
}

const dog = new Dog('Rex');
dog.speak(); // Rex barks.