掌握ES6变量声明精髓，成为面试官的座上宾

2023-09-21 23:53:28

ES6 变量声明基础

1. let 和 const

ES6 引入了两个新的let 和 const，用于声明变量。let 声明的变量是可变的，即可以在声明后重新赋值。const 声明的变量是常量，即一旦声明就不可更改。

let name = "John";
name = "Mary"; // 允许重新赋值

const age = 30;
age = 31; // 报错：TypeError: Assignment to constant variable.

2. 变量提升

在 ES6 中，变量提升仍然存在，但是 let 和 const 的提升方式与 var 不同。let 和 const 声明的变量不会被提升到函数或块的顶部，而是被提升到它们所在的作用域的顶部。

console.log(x); // 报错：ReferenceError: x is not defined
let x = 10;

console.log(y); // 输出：undefined
const y = 20;

3. 块级作用域

ES6 引入了块级作用域的概念。在块级作用域内声明的变量只在该块内有效，不能在块外访问。

if (true) {
  let x = 10;
}

console.log(x); // 报错：ReferenceError: x is not defined

ES6 变量声明进阶

1. 解构赋值

解构赋值是一种将数组或对象中的元素提取出来并赋值给变量的简便语法。

const person = {
  name: "John",
  age: 30
};

let { name, age } = person;

console.log(name); // 输出：John
console.log(age); // 输出：30

2. 扩展运算符

扩展运算符（...）可以将数组或对象中的元素展开成单个元素。

const numbers1 = [1, 2, 3];
const numbers2 = [4, 5, 6];

const combinedNumbers = [...numbers1, ...numbers2];

console.log(combinedNumbers); // 输出：[1, 2, 3, 4, 5, 6]

3. 模板字符串

模板字符串是一种使用反引号（``）定义的字符串。模板字符串可以包含表达式，表达式中的值会自动转换为字符串并插入到字符串中。

const name = "John";
const age = 30;

const greeting = `Hello, my name is ${name} and I am ${age} years old.`;

console.log(greeting); // 输出：Hello, my name is John and I am 30 years old.