用ES6写出优雅的代码

2024-01-14 11:29:51

ES6引入了一种新的变量声明方式：const和let。const声明的变量是只读的，let声明的变量是可以重新赋值的。这两种变量声明方式取代了var，var声明的变量是全局变量，可以在任何地方使用。

const

const声明的变量是只读的，这意味着不能重新给它赋值。const变量在声明时必须初始化，否则会报错。const变量不能被重复声明，否则也会报错。

const name = 'John Doe';
name = 'Jane Doe'; // 报错：TypeError: Assignment to constant variable.

let

let声明的变量是可以重新赋值的，这意味着可以多次给它赋值。let变量在声明时可以不初始化，但是如果声明时不初始化，则变量的值为undefined。let变量可以被重复声明，但是每次声明时必须重新初始化。

let name = 'John Doe';
name = 'Jane Doe'; // 正确：重新赋值

变量提升

var命令会发生“变量提升”现象，既变量可以在声明之前使用，值为undefined。个人认为，对声明的变量确定后面不会发生更改时，即使性能上没有太大提升差异在，但使用const，代码的可读性也会增强很多。 const 实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址不得改动。也就是说，const声明的变量不能指向另一个对象，但其属性的值是可以改动的。

console.log(name); // undefined
var name = 'John Doe';

let和const不会发生变量提升，所以在使用前必须先声明。

console.log(name); // ReferenceError: name is not defined
let name = 'John Doe';

块级作用域

let和const声明的变量都是块级作用域的，这意味着它们只在声明它们的块内有效。块级作用域可以防止变量被意外修改。

{
  let name = 'John Doe';
  console.log(name); // John Doe
}

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

箭头函数

箭头函数是ES6引入的一种新的函数声明方式。箭头函数没有自己的this，并且不能使用arguments对象。箭头函数非常适合作为回调函数使用。

const add = (a, b) => a + b;

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((a, b) => a + b);

console.log(sum); // 15

模块

ES6引入了模块的概念。模块允许将代码组织成独立的文件，以便于管理和复用。模块可以使用import和export关键字来导入和导出变量、函数和类。

// module1.js
export const name = 'John Doe';

// module2.js
import { name } from './module1.js';

console.log(name); // John Doe

类

ES6引入了类（class）的概念。类是创建对象的蓝图，它可以包含属性和方法。类使用class关键字来声明，类的实例使用new关键字来创建。

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

  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}

const person = new Person('John Doe');
person.greet(); // Hello, my name is John Doe.

扩展运算符

扩展运算符（...）可以将数组或对象展开成一组参数或属性。扩展运算符非常适合用于函数调用和对象字面量。

const numbers = [1, 2, 3, 4, 5];
const sum = (...numbers) => numbers.reduce((a, b) => a + b);

console.log(sum(1, 2, 3, 4, 5)); // 15

const person = {
  name: 'John Doe',
  age: 30
};

const newPerson = {
  ...person,
  city: 'New York'
};

console.log(newPerson); // { name: 'John Doe', age: 30, city: 'New York' }