JavaScript ES6常用基础知识总结

变量声明

在ES6之前，JavaScript的变量声明只有 var 一种方式，而 var 有些缺陷，如变量提升和没有块级作用域。ES6 引入了 let 和 const 两种声明变量的方式，let 用于声明变量，其同作用域内的变量没有冲突，不受外部的影响。const 用于声明不可变的常量，其一旦声明就不能被修改。

let a = 1;
const b = 2;
a = 3;
// b = 4; // 报错，常量不能被修改

箭头函数

箭头函数是 ES6 中定义函数的一种新方式，其通过 => 符号来表示函数的参数和此函数的执行体。

const sum = (a, b) => a + b;
console.log(sum(1, 2)); // 输出 3

如果箭头函数只有一个参数，也可以省略掉括号。

const double = num => num * 2;
console.log(double(4)); // 输出 8

模板字符串

ES6 引入了模板字符串，使得字符串输出更加方便。使用反引号（``）和 ${} 来表示动态值。

const name = 'Jerry';
console.log(`Hello, my name is ${name}`); // 输出 "Hello, my name is Jerry"

在模板字符串中，还可以嵌入JavaScript表达式。

const a = 3;
const b = 5;
console.log(`The sum of ${a} and ${b} is ${a + b}`); // 输出 "The sum of 3 and 5 is 8"

解构赋值

解构赋值是从数组或者对象中提取数据并赋值给变量的一种方式。可以极大地减少代码的重复和提高代码的可读性。

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

const person = {
  name: 'Jerry',
  age: 20,
  gender: 'male',
};
const { name, age, gender } = person;
console.log(name, age, gender); // 输出 Jerry 20 male

类和对象

ES6中引入了类和对象的概念，使得javascript更加符合传统的面向对象编程（OOP）。类 通过 class 关键字来定义，在类中定义的方法就是类的方法，在实例化对象后，就可以使用它的原型方法来对其进行操作。

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHi() {
    console.log(`Hi, my name is ${this.name}, I am ${this.age} years old.`);
  }
}

const jerry = new Person('Jerry', 20);
jerry.sayHi(); // 输出 "Hi, my name is Jerry, I am 20 years old."

对象也有了新的方法，如 Object.assign() 和对象字面量中更好的属性定义方法。

// 对象字面量中更好的属性定义方法
const name = 'Jerry';
const age = 20;
const person = { name, age };
console.log(person); // 输出 {name: "Jerry", age: 20}

// Object.assign()
const obj1 = { a: 1 };
const obj2 = { b: 2 };
const obj3 = Object.assign({}, obj1, obj2);
console.log(obj3); // 输出 {a: 1, b: 2}

以上只是 ES6 的基础，ES6 内还有一些更高深的部分，如Generator函数、Promise、Symbol类型等等。在学习过程中，可以逐步深入学习其中的内容，逐步掌握更多的技能。