ES6 核心特性详解

110 阅读2分钟

JavaScript 的 ES6 (ECMAScript 2015) 是一次重大的版本更新,引入了许多新特性,极大地提升了开发效率和代码可读性。本文将结合代码示例,深入浅出地讲解 ES6 的核心特性。

一、变量声明:let 和 const

ES6 引入了 letconst 来替代传统的 var 声明,解决了变量提升和作用域混乱的问题。

// 示例 1:let 的块级作用域
{
  let age = 19
  var myname = '康总'
}
console.log(myname) // 正常输出
// console.log(age) // 报错,age只在块级作用域内有效

与 var 的主要区别

  1. 不存在变量提升(必须先声明后使用)
  2. 不会成为 window 对象的属性
  3. 不允许重复声明
  4. 配合 {} 形成块级作用域

const 用于声明常量,一旦赋值不可修改:

const age = 19
// age = 20 // 报错,常量不可修改

二、解构赋值

解构赋值是一种从数组或对象中提取值的简洁语法。

数组解构

const [a, b, c] = [1, 2, 3]
const [x, ...rest] = [1, 2, 3, 4] // x=1, rest=[2,3,4]

对象解构

const obj = { name: '康总', age: 18 }
const { name, age } = obj // name='康总', age=18

嵌套解构

const obj = { like: { n: '泡脚' } }
const { like: { n } } = obj // n='泡脚'

三、字符串扩展

ES6 为字符串添加了许多实用特性:

let myname = '康总'
// 模板字符串
console.log(`Hello, I am ${myname}`)

// 字符串遍历
for (let x of myname) {
  console.log(x) // 依次输出 '康', '总'
}

四、数值扩展

新增了更简洁的数学运算语法:

console.log(2 ** 10) // 1024,等价于 Math.pow(2, 10)

五、函数扩展

默认参数

function foo(x = 1, y = 1) {
  return x + y
}

剩余参数

function foo(...args) {
  console.log(args) // [1,2,3,4]
}
foo(1, 2, 3, 4)

箭头函数

const foo = () => {
  // 简洁的函数语法
}

六、数组扩展

扩展运算符

const arr = [1, 2, 3]
const newArr = ['a', ...arr] // ['a', 1, 2, 3]

新方法

arr.sort((a, b) => b - a) // 降序排序

七、对象扩展

简洁属性

const sex = 'boy'
const obj = {
  name: '康总',
  sex // 等价于 sex: sex
}

可选链操作符

console.log(obj.like?.n) // 安全访问嵌套属性

八、Set 和 Map

Set:成员唯一的类数组结构

const s = new Set([1, 1, 2, 2]) // {1, 2}
s.add(3).delete(2)

Map:键可以是任意类型的键值对集合

const m = new Map()
m.set([1, 2], '数组作为键')
console.log(m.get([1, 2]))

九、异步处理

Promise 解决了回调地狱问题:

xq()
  .then(() => marry())
  .then(() => baby())

async/await(ES7)让异步代码更同步化:

async function process() {
  await xq()
  await marry()
  baby()
}

总结

ES6 的这些特性大大提升了 JavaScript 的表达能力和开发效率。从变量声明到异步处理,每个特性都针对 JavaScript 的痛点进行了改进。掌握这些特性是现代 JavaScript 开发的必备技能。

建议在实际开发中逐步应用这些特性,你会发现代码变得更简洁、更易维护,开发体验也会大幅提升!