目录
扩展运算符
概述
扩展运算符(spread operator)是 ES6 中新增的一种运算符,用三个点(...)表示。它可以将一个类似数组或可迭代对象(例如字符串、Set、Map)的对象展开成逗号分隔的值列表。
扩展运算符可以用于函数调用、数组字面量、对象字面量等多种场景。
语法
- 数组的展开操作
// 基本语法
[...array]
// 将两个数组合并
[...array1, ...array2]
// 将数组和其他元素合并
[...array, element1, element2, ..., elementN]
- 对象的展开操作
// 基本语法
{...object}
// 将两个对象合并
{...object1, ...object2}
// 将对象和其他属性合并
{...object, key1: value1, key2: value2, ..., keyN: valueN}
- 函数的传递参数
// 基本语法
functionname(...args)
// 将数组或类数组对象作为参数传递给函数
functionname(...array)
// 将对象作为参数传递给函数
functionname({...object})
需要注意的是,扩展运算符只能展开可迭代对象,即拥有 Symbol.iterator 属性的数据类型。因此,不能将普通的对象或类似对象的 null 和 undefined 进行展开。
应用
扩展运算符可以应用在很多地方,下面列举几个较常见的应用:
- 数组合并
可以使用扩展运算符将两个或多个数组合并成一个数组。示例代码如下:
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2];
console.log(arr3); // [1, 2, 3, 4, 5, 6]
- 数组复制
可以使用扩展运算符复制一个数组。示例代码如下:
const arr1 = [1, 2, 3];
const arr2 = [...arr1];
console.log(arr2); // [1, 2, 3]
- 函数传参
可以使用扩展运算符将数组作为函数的参数传递进去。示例代码如下:
function myFunction(x, y, z) {
console.log(x, y, z);
}
const arr = [1, 2, 3];
myFunction(...arr); // 1 2 3
- 对象合并
可以使用扩展运算符将两个或多个对象合并成一个对象。示例代码如下:
const obj1 = { name: 'John', age: 30 };
const obj2 = { gender: 'male' };
const obj3 = { ...obj1, ...obj2 };
console.log(obj3); // { name: 'John', age: 30, gender: 'male' }
- 函数返回值
可以使用扩展运算符将一个数组作为函数的返回值。示例代码如下:
function myFunction(a, b, c) {
return [a, b, c];
}
const arr = [1, 2, 3];
console.log(myFunction(...arr)); // [1, 2, 3]
- 字符串转数组
可以使用扩展运算符将一个字符串转成一个字符数组。示例代码如下:
const str = 'hello';
const arr = [...str];
console.log(arr); // ['h', 'e', 'l', 'l', 'o']
模板字符串
概述
模板字符串是 ES6 新增的一种字符串形式,也被称为“模板字面量”。它可以包含特定语法的占位符,可以在运行时动态替换这些占位符为实际的值,从而生成新的字符串。
语法
模板字符串使用反引号(``)作为字符串的定界符,占位符使用 ${}
包裹。格式如下:
`string text ${expression} string text`
其中,${expression} 可以是任何 JavaScript 表达式,它会被求值后插入到字符串中。
简单示例:
const name = 'Alice';
const age = 20;
const message = `My name is ${name}. I'm ${age} years old.`;
console.log(message); // 'My name is Alice. I'm 20 years old.'
模板字符串不仅支持变量的替换,还支持多行字符串、嵌套字符串、字符串插值等功能,可以提高代码的可读性和可维护性。
应用
- 字符串拼接
使用模板字符串可以方便地拼接字符串,不需要再使用 + 或者字符串连接函数。例如:
const firstName = 'Alice';
const lastName = 'Smith';
const fullName = `${firstName} ${lastName}`;
console.log(fullName); // 输出: Alice Smith
- 动态生成 HTML
使用模板字符串可以动态生成 HTML 代码,使代码更加简洁易懂。例如:
const items = ['item1', 'item2', 'item3'];
const list = `
<ul>
${items.map(item => `<li>${item}</li>`).join('')}
<