字符串、对象与数组的新特性

🎯 引言

这篇文章聚焦 ES6 中字符串、对象和数组的实用特性，帮助你理解和使用模板字符串、字符串方法、对象解构、对象属性简写、数组扩展运算符以及数组新方法。掌握这些知识后，你可以写出更简洁、易读且功能强大的前端代码，让日常开发更高效。

✨ 字符串的新玩法

ES6 提供了对字符串的增强功能，其中最常用的就是模板字符串。它让我们拼接变量、构造多行文本变得更简单、更直观。

以前我们写字符串拼接，经常要用 + 号，代码乱得一塌糊涂：

const name = '小明';
const age = 18;
const str = '我叫' + name + '，今年' + age + '岁了。';
console.log(str);

用 ES6 的模板字符串（反引号 ` 包裹）后，写起来就很舒服：

const name = '小明';
const age = 18;
const str = `我叫 ${name}，今年 ${age} 岁了。`;
console.log(str);

你看，只需要 ${} 直接把变量嵌入，非常直观！

除了模板字符串，ES6 还给字符串增加了不少新方法，让你操作字符串轻松很多：

• startsWith：检测字符串开头，比如：

  const str = 'hello world';
  console.log(str.startsWith('hell')); // true
  

• endsWith：检测字符串结尾：

  console.log(str.endsWith('world')); // true
  

• includes：检测字符串中是否包含某个子串：

  console.log(str.includes('lo wo')); // true
  

• repeat：重复字符串，比如：

  console.log('ha'.repeat(3)); // "hahaha"
  

🧩 对象的便利新特性

对象是前端中非常重要的数据结构。ES6 在对象的操作上带来了几个超实用的改进。

对象属性简写

以前创建对象的时候，属性和值是分开的：

const name = '小红';
const age = 20;
const obj = {
    name: name,
    age: age,
};

用 ES6 可以这样写，属性名和变量名相同就简写：

const name = '小红';
const age = 20;
const obj = { name, age };

写起来简洁多了，而且减少了出错的机会。

对象解构赋值

解构赋值是 ES6 的大杀器。它让你可以快速从对象里提取字段：

const person = { name: '小红', age: 20 };
const { name, age } = person;
console.log(name, age); // 小红 20

还可以给解构出来的变量设置默认值：

const { name, age, gender = '女' } = person;
console.log(gender); // 女

新增方法：Object.assign

Object.assign 用来合并对象，把多个对象的属性合并到一个目标对象上：

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const obj3 = Object.assign({}, obj1, obj2);
console.log(obj3); // { a: 1, b: 2 }

你可以用它来做浅拷贝或者合并配置项。

🔢 数组的新冷知识

数组在前端用得超多，ES6 也增加了很多实用的操作方法。

扩展运算符

扩展运算符用三个点 ... 表示，可以快速展开数组：

const arr1 = [1, 2];
const arr2 = [3, 4];
const arr3 = [...arr1, ...arr2];
console.log(arr3); // [1, 2, 3, 4]

这个操作比用 concat 更简洁。

数组解构赋值

和对象解构类似，数组也可以用解构赋值：

const arr = [100, 200, 300];
const [a, b, c] = arr;
console.log(a, b, c); // 100 200 300

数组新增方法

ES6 给数组新增了不少方法，常用的有：

• find：找到第一个满足条件的元素

  const arr = [5, 12, 8, 130, 44];
  const found = arr.find(function (value) {
      return value > 10;
  });
  console.log(found); // 12
  

• findIndex：找到第一个满足条件元素的索引

  const index = arr.findIndex(function (value) {
      return value > 10;
  });
  console.log(index); // 1
  

• includes：判断数组中是否包含某个值

  console.log(arr.includes(8)); // true
  

• fill：快速填充数组

  const arr2 = new Array(4).fill(1);
  console.log(arr2); // [1, 1, 1, 1]
  

🧾 小节总结：

• 模板字符串让字符串拼接更简单，新增字符串方法提升了字符串处理效率。
• 对象属性简写和解构赋值让代码更简洁，Object.assign 方便对象合并和浅拷贝。
• 数组扩展运算符和解构赋值让数组操作更灵活，数组新增的 find、includes 等方法极大方便查找和判断。

❓ 知识问答（Q&A）

Q：模板字符串和普通字符串最大区别是什么？

A：模板字符串可以嵌入变量和表达式，写法更简洁，支持多行字符串。

Q：Object.assign 是深拷贝还是浅拷贝？

A：Object.assign 是浅拷贝，只拷贝对象的第一层属性，嵌套对象仍然是引用。

Q：数组解构赋值可以跳过某些元素吗？

A：可以，比如 [a, , c] = [1, 2, 3]，变量 a=1，c=3，中间元素跳过不赋值。

🧪 小练习：

1. 使用模板字符串写一段自我介绍，包含姓名、年龄和爱好。

const name = '张三';
const age = 25;
const hobby = '篮球';
// 在这里用模板字符串写出自我介绍
const intro = ``;
console.log(intro);

2. 用对象解构和扩展运算符实现将两个数组合并，并且用 find 方法找出合并后第一个大于 50 的数字。

const arr1 = [10, 20, 60];
const arr2 = [30, 50, 70];
// 合并数组
const merged = [];
// 找出第一个大于50的数字
const found = null;

console.log(merged);
console.log(found);

🎉 恭喜你已经掌握 模板字符串、对象解构、数组扩展运算符 这些 ES6 的实用技能啦！ 继续坚持练习，你会越来越顺手，前端开发也会更加得心应手。加油！