初学ES6点滴记录

# #

# #

# #

ES6简介

ES6，全称ECMAScript 2015，是JavaScript语言的第六个版本。它于2015年6月17日发布，引入许多新的特性和改进，使得JavaScript语言更加强大和易于使用。

ES6的新特性包括：

• 箭头函数
• 解构赋值
• 类
• 模块
• Symbol
• 迭代器
• 生成器
• Promise
• Async/Await
• Proxy
• Reflect
• Map
• Set
• WeakMap
• WeakSet
• BigInt

ES6新特性介绍

箭头函数

箭头函数是ES6中引入的一种新的函数写法。箭头函数没有自己的this，它的this关键字与所在函数的this关键字相同。箭头函数还可以简化函数的写法，例如：

function add(a, b) {
  return a + b;
}

可以使用箭头函数来改写为：

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

解构赋值

解构赋值是一种新的赋值语法，它允许将一个数组或对象的值分解并分别赋值给多个变量。例如：

const [a, b] = [1, 2];
const { x, y } = { x: 1, y: 2 };

类

类是ES6中引入的一种新的数据类型。类可以用来创建对象，对象是类的实例。例如：

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.

模块

模块是ES6中引入的一种新的组织代码的方式。模块可以被单独加载和执行，而不会影响其他模块。例如：

// module1.js
export const add = (a, b) => a + b;

// module2.js
import { add } from './module1.js';
console.log(add(1, 2)); // 3

Symbol

Symbol是ES6中引入的一种新的数据类型。Symbol值是唯一的，不可变的。Symbol值可以用来创建私有属性和方法。例如：

const symbol = Symbol('private property');

class Person {
  [symbol] = 123;

  getPrivateProperty() {
    return this[symbol];
  }
}

const person = new Person();
console.log(person.getPrivateProperty()); // 123

迭代器

迭代器是ES6中引入的一种新的数据类型。迭代器可以用来遍历数组、对象和字符串等数据结构。例如：

const numbers = [1, 2, 3];
const iterator = numbers[Symbol.iterator]();

while (true) {
  const next = iterator.next();
  if (next.done) {
    break;
  }

  console.log(next.value); // 1, 2, 3
}

生成器

生成器是ES6中引入的一种新的函数类型。生成器函数可以生成一个序列的值，而无需显式地返回它们。例如：

function* generateNumbers() {
  for (let i = 1; i <= 3; i++) {
    yield i;
  }
}

const generator = generateNumbers();

for (const number of generator) {
  console.log(number); // 1, 2, 3
}

Promise

Promise是ES6中引入的一种新的数据类型。Promise表示一个异步操作的最终结果。Promise可以处于三种状态：pending、fulfilled和rejected。例如：

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Hello, world!');
  }, 1000);
});

promise.then((result) => {
  console.log(result); // Hello, world!
});

Async/Await

Async/Await是ES6中引入的一种新的语法糖，它允许我们以同步的方式编写异步代码。例如：

async function fetchUserData() {
  const response = await fetch('https://example.com/api/users');
  const data = await response.json();
  return data;
}

const userData = await fetchUserData();
console.log(userData);

Proxy

Proxy是ES6中引入的一种新的数据类型。Proxy可以用来拦截对另一个对象的访问，并对这些访问进行自定义处理。例如：

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

const proxy = new Proxy(object, {
  get: function(target, property) {
    console.log(`Getting property ${property} from ${target}`);
    return target[property];
  },
  set: function(target, property, value) {
    console.log(`Setting property ${property} to ${value} on ${target}`);
    target[property] = value;
  }
});

console.log(proxy.name); // Getting property name from { name: 'John Doe', age: 30 }
// John Doe
proxy.age = 31; // Setting property age to 31 on { name: 'John Doe', age: 30 }
console.log(proxy.age); // Getting property age from { name: 'John Doe', age: 31 }
// 31

Reflect

Reflect是ES6中引入的一组新的全局函数，它们可以用来对对象的属性和方法进行操作。例如：

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

console.log(Reflect.get(object, 'name')); // John Doe
Reflect.set(object, 'age', 31);
console.log(object.age); // 31

Map

Map是ES6中引入的一种新的数据结构。Map是一种键值对的数据结构，它可以存储任何类型的值。Map的键可以是任何类型的值，包括对象和函数。例如：

const map = new Map();
map.set('name', 'John Doe');
map.set(123, 'value');
console.log(map.get('name')); // John Doe
console.log(map.get(123)); // value

Set

Set是ES6中引入的一种新的数据结构。Set是一种不重复值的数据结构，它可以存储任何类型的值。Set中的值是唯一的，不能重复。例如：

const set = new Set();
set.add('John Doe');
set.add('Jane Doe');
set.add('John Doe'); // duplicate value, ignored
console.log(set.size); // 2
console.log(set.has('John Doe')); // true

WeakMap

WeakMap是ES6中引入的一种新的数据结构。WeakMap是一种键值对的数据结构，它可以存储任何类型的值。WeakMap的键必须是对象，不能是其他类型的值。WeakMap中的键是弱引用的，这意味着当键不再被任何其他对象引用时，WeakMap中的键值对就会被自动删除。例如：

const weakMap = new WeakMap();
const object = {};
weakMap.set(object, 'value');
console.log(weakMap.get(object)); // value

object = null; // object is no longer referenced
console.log(weakMap.get(object)); // undefined

WeakSet

WeakSet是ES6中引入的一种新的数据结构。WeakSet是一种不重复值的数据结构，它可以存储任何类型的值。WeakSet中的值是弱引用的，这意味着当值不再被任何其他对象引用时，WeakSet中的值就会被自动删除。例如：

const weakSet = new WeakSet();
const object = {};
weakSet.add(object);
console.log(weakSet.has(object)); // true

object = null; // object is no longer referenced
console