JavaScript 解构:示例与练习
本文提供 JavaScript 解构的示例和练习,帮助您更好地理解和应用解构技术。
嵌套解构:
从嵌套对象中提取值:
const person = { name: 'john', address: { city: 'new york', country: 'usa' } }; let { name, address: { city, country } } = person; console.log(name, city, country); // 输出: john new york usa
数组解构:
从数组中提取值并赋值给变量:
立即学习“Java免费学习笔记(深入)”;
const numbers = [1, 2, 3]; let [a, b, c] = numbers; console.log(a, b, c); // 输出: 1 2 3
练习 1:日期字符串分割
编写一个函数,接收 dd/mm/yyyy 格式的日期字符串,并返回一个包含日、月、年的数组。
function splitDate(dateString) { return dateString.split('/'); } let [day, month, year] = splitDate('11/05/2005'); console.log(day, month, year); // 输出: 11 05 2005
练习 2:改进日期分割函数
使用解构改进练习 1 中的函数,直接返回日、月、年三个变量。
function splitDateImproved(dateString) { const [day, month, year] = dateString.split('/'); return {day, month, year}; } const {day, month, year} = splitDateImproved('20/05/2024'); console.log(day, month, year); // 输出: 20 05 2024
函数参数解构:
使用解构简化函数参数:
function printPerson({ name, age, city }) { console.log(name, age, city); } const person = { name: 'john', age: 30, city: 'new york' }; printPerson(person); // 输出: john 30 new york
函数参数解构:另一种方式
使用自定义变量名进行解构:
function printPerson2({ name: n, age: a, city: c }) { console.log(n, a, c); } printPerson2(person); // 输出: john 30 new york
数组解构作为函数参数:
使用数组解构作为函数参数:
function printPerson3([name, age, city]) { console.log(name, age, city); } const personArray = ['Jooaca', 30, 'New York']; printPerson3(personArray); // 输出: Jooaca 30 New York
希望这些示例和练习能够帮助您理解和掌握 JavaScript 解构。 记住,解构可以使您的代码更简洁、更易于阅读和维护。