ES6语法规范&ES6模块化（速记版）

ES6语法规范&ES6模块化（速记版）

（一） ES6核心语法详解（速记版）

一、ES6简介

• 官方名称：ECMAScript 2015
• 发布时间：2015年6月
• 核心改进：弥补ES5缺陷，新增现代编程特性
• 兼容方案：Babel转译器

二、变量声明

1. let命令

{
   
  let a = 10
  var b = 20
}
console.log(a) // ReferenceError
console.log(b) // 20

特性：

• 块级作用域
• 不可重复声明
• 暂时性死区（TDZ）

2. const命令

const PI = 3.1415
PI = 3.14 // TypeError

const obj = {
    name: 'Alice' }
obj.age = 25 // 允许修改属性

三、函数增强

1. 箭头函数

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

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

// this绑定示例
const counter = {
   
  count: 0,
  add: function() {
   
    setInterval(() => {
   
      this.count++ // 正确指向counter对象
    }, 1000)
  }
}

特性：

• 无arguments对象
• 不可作为构造函数
• 无prototype属性

2. 参数默认值

function log(name = 'Guest', level = 'info') {
   
  console.log(`${
     level}: ${
     name}`)
}

四、字符串扩展

1. 模板字符串

const name = 'Bob'
const html = `
  <div class="user">
    <h2>${
     name}</h2>
    <p>注册时间：${
     new Date().toLocaleString()}</p>
  </div>
`

2. 实用方法

'hello'.startsWith('he')  // true
'hello'.padStart(8, '0')  // '000hello'

五、解构赋值

1. 数组解构

const [x, y, z] = [1, 2, 3]
const [first, ...rest] = [1, 2, 3, 4] // first=1, rest=[2,3,4]

2. 对象解构

const {
    name, age } = {
    name: 'Alice', age: 25 }
const {
    data: result } = {
    data: [1,2,3] } // result=[1,2,3]

六、对象扩展

1. 属性简写

const name = 'Alice'