ES6 let与const的区别及变量解构赋值详解

ES6 let与const的区别及变量解构赋值详解

本文通过具体实例，解析ES6标准中let和const两个关键字的核心差异，并详细介绍变量的解构赋值用法，供读者参考学习。

注：本文内容基于阮一峰所著《ECMAScript 6 入门》一书进行总结。

let与const关键字对比

let与const关键字对比

共同特性

1. 均具备块级作用域，限制变量仅在指定代码块内有效。
2. 均不会发生变量声明提升，避免在声明前访问变量。
3. 均会形成“暂时性死区”，在声明语句执行前访问变量将报错。
4. 在同一作用域内，禁止对同一变量进行重复声明。

主要差异

1. 使用const声明变量时，必须立即进行初始化赋值。
2. const声明的变量，其指向的内存地址不可更改，即变量本身不可重新赋值。

变量解构赋值基础

变量解构赋值基础

数组解构赋值

数组解构赋值

成功解构情况

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

解构失败处理

let [foo] = [];

不完全解构场景

let [x, y] = [1, 2, 3];

设置默认值

let [foo = true] = [];

解构前提：只要目标数据结构具备Iterator接口，即可采用数组形式的解构赋值。

对象解构赋值

对象解构赋值

与数组解构的关键区别在于：数组元素按顺序排列，取值取决于位置；而对象属性无序，变量名必须与属性名一致才能正确获取值。

实用场景：可将现有对象的方法便捷地赋值给变量，便于调用。

let { log, sin, cos } = Math;

字符串解构赋值

字符串解构赋值

实现原理：字符串会被自动转换为类似数组的对象结构。

const [a, b, c, d, e] = 'hello';

由于该类似数组对象包含length属性，因此也可以对该属性进行解构赋值。

let {length : len} = 'hello';
len // 5

数值与布尔值的解构赋值

数值与布尔值的解构赋值

let {toString: s} = 123;
s === Number.prototype.toString // true

let {toString: s} = true;
s === Boolean.prototype.toString // true

函数参数解构赋值

函数参数解构赋值

[[1, 2], [3, 4]].map(([a, b]) => a + b);
// [ 3, 7 ]

如需了解更多JavaScript相关知识，可参考本站系列教程：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》。

希望上述内容能对您的JavaScript编程实践提供有效帮助。