JavaScript 的 ES6 (ECMAScript 2015) 是一次重大的版本更新,引入了许多新特性,极大地提升了开发效率和代码可读性。本文将结合代码示例,深入浅出地讲解 ES6 的核心特性。
一、变量声明:let 和 const
ES6 引入了 let 和 const 来替代传统的 var 声明,解决了变量提升和作用域混乱的问题。
// 示例 1:let 的块级作用域
{
let age = 19
var myname = '康总'
}
console.log(myname) // 正常输出
// console.log(age) // 报错,age只在块级作用域内有效
与 var 的主要区别:
- 不存在变量提升(必须先声明后使用)
- 不会成为 window 对象的属性
- 不允许重复声明
- 配合
{}形成块级作用域
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 开发的必备技能。
建议在实际开发中逐步应用这些特性,你会发现代码变得更简洁、更易维护,开发体验也会大幅提升!