基于ES6作用域和解构赋值详解

作用域 Scope

作用域是程序代码中声明变量的区域。作用域可以分为全局作用域和局部作用域。

在ES6中，可以使用let和const声明变量，这两种声明方式都是块级作用域。

示例 1

// 全局作用域
let a = 1;

function test() {
  // 局部作用域
  let b = 2;
  console.log(a); // 1
  console.log(b); // 2
}

test();
console.log(a); // 1
console.log(b); // 报错：b未定义

示例 2

// let声明的变量不允许重复声明
let a = 1;
let a = 2; // 报错

解构赋值 Destructuring

解构赋值是一种特殊的赋值方式，它可以将数组或对象中的值解构到不同的变量中。

数组解构

let arr = [1, 2, 3];

// 将数组的第一个值赋值给a，第二个值赋值给b，第三个值赋值给c
let [a, b, c] = arr;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

对象解构

let obj = { name: 'Tom', age: 18 };

// 将对象的name属性赋值给a，age属性赋值给b
let { name: a, age: b } = obj;

console.log(a); // Tom
console.log(b); // 18

示例 3

// 混合使用数组解构和对象解构
let arr = [{ name: 'Tom', age: 18 }, { name: 'Jerry', age: 20 }];

// 将第一个数组元素的name属性赋值给a，age属性赋值给b，将第二个数组元素的name属性赋值给c，age属性赋值给d
let [{ name: a, age: b }, { name: c, age: d }] = arr;

console.log(a); // Tom
console.log(b); // 18
console.log(c); // Jerry
console.log(d); // 20

结束语

ES6的作用域和解构赋值在开发中非常常用，掌握好这部分内容对于编写高质量的JavaScript代码非常有帮助。