深入理解 ECMAScript 6 核心特性-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00192/article/details/148505340

深入理解 ECMAScript 6 核心特性

jstutorial Javascript tutorial book 项目地址: https://gitcode.com/gh_mirrors/js/jstutorial

ECMAScript 6（简称ES6）是JavaScript语言的重大更新，为开发者提供了更强大、更现代的编程能力。本文将深入解析ES6的核心特性，帮助开发者全面掌握这些新语法和功能。

变量声明新方式

let 命令

let是ES6新增的变量声明方式，与var相比有以下显著特点：

块级作用域：let声明的变量只在当前代码块内有效
不存在变量提升：必须先声明后使用
不允许重复声明：同一作用域内不能重复声明同一变量

{
  let a = 10;
  var b = 1;
}
a // ReferenceError
b // 1

let特别适合用于循环计数器，解决了var在循环中变量共享的问题：

for (let i = 0; i < 10; i++) {
  // 每次循环i都是独立的
}

const 命令

const用于声明常量，具有以下特性：

声明后值不能改变
必须立即初始化
作用域与let相同（块级作用域）
对于复合类型变量，变量名不指向数据，而是指向数据所在的地址

const PI = 3.1415;
PI = 3; // 报错

const obj = {};
obj.prop = 123; // 可以修改属性
obj = {}; // 报错

新的数据结构

Set 集合

Set是一种不包含重复值的集合：

const s = new Set();
[2,3,5,4,5,2,2].forEach(x => s.add(x));
for (let i of s) {
  console.log(i); // 2, 3, 5, 4
}

Set常用方法：

add(value)：添加值
delete(value)：删除值
has(value)：检查是否存在
clear()：清空集合
size：获取元素数量

Map 映射

Map是键值对的集合，与Object的主要区别是：

键可以是任意类型（Object只能是字符串或Symbol）
有size属性
可以直接遍历

const m = new Map();
const o = {p: 'Hello'};

m.set(o, 'content');
m.get(o); // "content"

Map常用方法：

set(key, value)
get(key)
has(key)
delete(key)
clear()

函数增强特性

箭头函数

箭头函数提供更简洁的函数写法：

// 传统函数
var sum = function(a, b) {
  return a + b;
};

// 箭头函数
const sum = (a, b) => a + b;

箭头函数特点：

没有自己的this，继承外层this
不能用作构造函数
没有arguments对象
不能用作generator函数

函数参数默认值

ES6允许为参数设置默认值：

function log(x, y = 'World') {
  console.log(x, y);
}

log('Hello'); // Hello World
log('Hello', 'China'); // Hello China

rest参数

rest参数（形式为...变量名）用于获取函数的多余参数：

function add(...values) {
  let sum = 0;
  for (var val of values) {
    sum += val;
  }
  return sum;
}

add(2, 5, 3); // 10

迭代器和生成器

迭代器(Iterator)

迭代器是一种接口，为不同的数据结构提供统一的访问机制：

function makeIterator(array) {
  let nextIndex = 0;
  return {
    next: function() {
      return nextIndex < array.length ?
        {value: array[nextIndex++], done: false} :
        {done: true};
    }
  };
}

const it = makeIterator(['a', 'b']);
it.next(); // {value: 'a', done: false}
it.next(); // {value: 'b', done: false}
it.next(); // {done: true}

生成器(Generator)

生成器是返回迭代器的函数，使用function*语法：

function* idMaker() {
  let index = 0;
  while(true)
    yield index++;
}

const gen = idMaker();
gen.next().value; // 0
gen.next().value; // 1
gen.next().value; // 2

生成器特点：

function*声明
函数内部使用yield表达式
可以暂停执行和恢复执行
是异步编程的重要解决方案

解构赋值

ES6允许按照一定模式从数组和对象中提取值：

数组解构

let [a, b, c] = [1, 2, 3];
a // 1
b // 2
c // 3

let [x, y = 'b'] = ['a']; // x='a', y='b'

对象解构

let { foo, bar } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

let { sin, cos } = Math;

解构赋值的用途：

交换变量值 [x, y] = [y, x]
函数返回多个值
函数参数定义
提取JSON数据
函数参数默认值

字符串扩展

模板字符串

使用反引号(`)标识，可以嵌入变量和多行文本：

const name = 'Bob';
const time = 'today';
const str = `Hello ${name}, 
how are you ${time}?`;

新增方法

includes()：是否包含子串
startsWith()：是否以某子串开头
endsWith()：是否以某子串结尾
repeat()：重复字符串
padStart()/padEnd()：补全长度

面向对象增强

Class语法

ES6引入了class关键字：

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  
  toString() {
    return `(${this.x}, ${this.y})`;
  }
}

const p = new Point(1, 2);

继承

使用extends实现继承：

class ColorPoint extends Point {
  constructor(x, y, color) {
    super(x, y);
    this.color = color;
  }
  
  toString() {
    return super.toString() + ' in ' + this.color;
  }
}

模块系统

ES6引入了模块化概念：

导出

// profile.js
export var firstName = 'Michael';
export function multiply(x, y) {
  return x * y;
}

导入

import { firstName, multiply } from './profile';

默认导出

// export-default.js
export default function() {
  console.log('foo');
}

// import-default.js
import customName from './export-default';

Promise对象

Promise是异步编程的解决方案：

const promise = new Promise(function(resolve, reject) {
  // ... some code
  
  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

promise.then(function(value) {
  // success
}, function(error) {
  // failure
});