ES6基础 结构赋值和模板字符串

目录

1.结构赋值

 1.1 对象解构

1.2 数组解构

1.3 默认值

1.4 嵌套结构

2.模板字符串

---

1.结构赋值

ES6中结构赋值可以快速地将对象或数组中的数据解构到变量中，让代码更加简洁易读。它的语法如下：

 1.1 对象解构

// 基本语法
let {属性1, 属性2} = 对象;

// 示例
let user = {name: '张三', age: 18};
let {name, age} = user;
console.log(name); // 输出：'张三'
console.log(age); // 输出：18

可以在声明变量时直接将对象中的属性解构到变量中，省去了每次都需要通过对象访问属性的步骤。

1.2 数组解构

// 基本语法
let [变量1, 变量2] = 数组;

// 示例
let nums = [1, 2, 3, 4, 5];
let [a, b, ...rest] = nums;
console.log(a); // 输出：1
console.log(b); // 输出：2
console.log(rest); // 输出：[3, 4, 5]

数组解构时可以通过"..."语法将剩余的元素解构到一个数组中，这在处理不定长数组时非常方便。

1.3 默认值

// 基本语法
let {属性1, 属性2 = 默认值} = 对象;
let [变量1, 变量2 = 默认值] = 数组;

// 示例
let user = {name: '张三'};
let {name, age = 18} = user;
console.log(name); // 输出：'张三'
console.log(age); // 输出：18

let nums = [1, 2];
let [a, b, c = 3] = nums;
console.log(a); // 输出：1
console.log(b); // 输出：2
console.log(c); // 输出：3

如果对象或数组中没有对应的属性或元素，可以用默认值来避免产生error。在解构时可以在变量后面添加"="语法来指定默认值。

1.4 嵌套结构

// 基本语法
let {属性1: {属性2}} = 对象;
let [[变量1], [变量2]] = 数组;

// 示例
let user = {name: '张三', info: {age: 18}};
let {name, info: {age}} = user;
console.log(name); // 输出：'张三'
console.log(age); // 输出：18

let nums = [[1], [2]];
let [[a], [b]] = nums;
console.log(a); // 输出：1
console.log(b); // 输出：2

如果对象或数组中的属性或元素是另一个对象或数组，可以通过嵌套结构来获取更深层次的数据。在解构时可以使用":"语法来指定获取的属性或元素。

模板字符串是一种新的字符串语法，可以通过 ${expression} 的方式插入变量或表达式。模板字符串使用反引号 (`) 包围，可以跨越多行，也可以包含普通字符串和表达式。

2.模板字符串

例如：

const name = 'Alice';
const age = 20;
const greeting = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(greeting); // 输出: Hello, my name is Alice and I am 20 years old.

模板字符串除了能够插入变量和表达式外，还支持标签模板，通过定义一个函数作为模板字符串的标签，可以对模板字符串进行自定义处理。