首页 > 编程语言 >ES6解构赋值详解;全面掌握:JavaScript解构赋值的终极指南

ES6解构赋值详解;全面掌握:JavaScript解构赋值的终极指南

时间:2024-08-24 11:25:01浏览次数:11  
标签:ES6 console log age name const 解构 赋值

目录

全面掌握:JavaScript解构赋值的终极指南

一、数组解构赋值

1、基本用法

2、跳过元素

3、剩余元素

4、默认值

二、对象解构赋值

1、基本用法

2、变量重命名

3、默认值

4、嵌套解构

三、复杂的嵌套结构解构

四、函数参数解构赋值

1、对象解构作为函数参数

2、带有默认值的函数参数解构

五、解构赋值中的交换变量

六、解构赋值与遍历

1、解构数组中的对象

七、结合 rest 运算符

八、处理函数返回的对象或数组

九、实际应用中的注意事项

1、属性不存在时的情况

2、深度解构可能导致错误

十、总结


作者:watermelo37

涉及领域:Vue、SpingBoot、Docker、LLM、python等

-----------------------------------------------------------------------------------

-------温柔地对待温柔的人,包容的三观就是最大的温柔。-------

-----------------------------------------------------------------------------------

全面掌握:JavaScript解构赋值的终极指南

        解构赋值(Destructuring Assignment)是 ES6(ECMAScript 2015) 引入的一种强大且灵活的语法,允许将数组或对象中的数据提取到变量中。它可以极大地简化从复杂数据结构中获取数据的过程。在以下内容中,我将详细解释解构赋值的语法及其在实践中的应用。

一、数组解构赋值

        数组解构赋值是基于数组元素的顺序,将数组中的值依次赋值给对应的变量。

1、基本用法

const arr = [10, 20, 30];

const [a, b, c] = arr;

console.log(a); // 输出: 10
console.log(b); // 输出: 20
console.log(c); // 输出: 30

2、跳过元素

const arr = [10, 20, 30];

const [a, , c] = arr;

console.log(a); // 输出: 10
console.log(c); // 输出: 30

3、剩余元素

        使用剩余运算符 (...) 获取数组中的其余元素(这里要注意区分剩余运算符和拓展运算符噢)。

const arr = [10, 20, 30, 40];

const [a, ...rest] = arr;

console.log(a);    // 输出: 10
console.log(rest); // 输出: [20, 30, 40]

4、默认值

        当解构的数组没有足够的元素时,可以为变量提供默认值。

const arr = [10];

const [a, b = 20] = arr;

console.log(a); // 输出: 10
console.log(b); // 输出: 20

二、对象解构赋值

        对象解构赋值是基于属性名的匹配,将对象属性的值赋给变量。

1、基本用法

const obj = { name: 'Alice', age: 25 };

const { name, age } = obj;

console.log(name); // 输出: Alice
console.log(age);  // 输出: 25

2、变量重命名

        可以将对象属性的值赋给一个新的变量名。

const obj = { name: 'Alice', age: 25 };

const { name: n, age: a } = obj;

console.log(n); // 输出: Alice
console.log(a); // 输出: 25

3、默认值

        如果对象中没有该属性,可以为变量提供默认值。

const obj = { name: 'Alice' };

const { name, age = 30 } = obj;

console.log(age); // 输出: 30

4、嵌套解构

        可以解构嵌套的对象或数组。

const obj = {
  user: {
    name: 'Alice',
    age: 25
  }
};

const { user: { name, age } } = obj;

console.log(name); // 输出: Alice
console.log(age);  // 输出: 25

三、复杂的嵌套结构解构

        解构可以处理复杂的数据结构,组合使用数组和对象的解构语法。

const data = {
  id: 1,
  name: 'John',
  locations: [
    {
      city: 'New York',
      state: 'NY'
    },
    {
      city: 'San Francisco',
      state: 'CA'
    }
  ]
};

const {
  name,
  locations: [
    { city: city1 },
    { city: city2 }
  ]
} = data;

console.log(name);   // 输出: John
console.log(city1);  // 输出: New York
console.log(city2);  // 输出: San Francisco

四、函数参数解构赋值

        在函数的参数中使用解构赋值,可以使函数更具可读性,特别是当参数是对象或数组时。

1、对象解构作为函数参数

function greet({ name, age }) {
  console.log(`Hello, ${name}. You are ${age} years old.`);
}

const person = { name: 'Alice', age: 25 };

greet(person); // 输出: Hello, Alice. You are 25 years old.

2、带有默认值的函数参数解构

function greet({ name = 'Anonymous', age = 0 } = {}) {
  console.log(`Hello, ${name}. You are ${age} years old.`);
}

greet(); // 输出: Hello, Anonymous. You are 0 years old.

五、解构赋值中的交换变量

        解构赋值可以简洁地交换两个变量的值,而不需要使用临时变量。

let a = 1;
let b = 2;

[a, b] = [b, a];

console.log(a); // 输出: 2
console.log(b); // 输出: 1

六、解构赋值与遍历

        解构赋值可以与 for-of 循环结合使用,来遍历对象或数组。

1、解构数组中的对象

const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 }
];

for (const { name, age } of users) {
  console.log(`${name} is ${age} years old.`);
}

// 输出:
// Alice is 25 years old.
// Bob is 30 years old.

七、结合 rest 运算符

        解构赋值可以与 rest 运算符结合使用,用于提取剩余的属性。

const obj = { a: 1, b: 2, c: 3 };

const { a, ...rest } = obj;

console.log(a);    // 输出: 1
console.log(rest); // 输出: { b: 2, c: 3 }

八、处理函数返回的对象或数组

        解构赋值可以用于处理函数返回的复杂对象或数组,使得函数调用更加简洁。

function getUserInfo() {
  return {
    name: 'Alice',
    age: 25,
    location: {
      city: 'New York',
      state: 'NY'
    }
  };
}

const {
  name,
  location: { city }
} = getUserInfo();

console.log(name); // 输出: Alice
console.log(city); // 输出: New York

九、实际应用中的注意事项

1、属性不存在时的情况

        如果解构的对象中不存在某个属性,变量的值将是 undefined,因此使用默认值是一个好习惯。

const obj = { name: 'Alice' };

const { name, age } = obj;

console.log(age); // 输出: undefined

2、深度解构可能导致错误

        深度嵌套的解构可能会导致 undefined 错误,因此在实际应用中要谨慎。

const obj = { name: 'Alice' };

// 错误:Cannot destructure property 'age' of 'undefined' as it is undefined.
const { name, age: { year } } = obj;

        在复杂数据结构中,务必确保数据的完整性,或为对象提供默认值。

十、总结

        解构赋值是一个强大且灵活的工具,它使得从数组和对象中提取数据变得更加简单和直观。通过掌握解构赋值的基本语法和实践,你可以写出更加简洁、可读性更强的代码。在实际项目中,解构赋值广泛应用于函数参数处理、变量交换、嵌套结构操作等场景,极大地提升了代码的灵活性和简洁度。

        只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~

        更多优质内容,请关注:

        你真的会使用Vue3的onMounted钩子函数吗?Vue3中onMounted的用法详解

        通过array.filter()实现数组的数据筛选、数据清洗和链式调用

        el-table实现动态数据的实时排序,一篇文章讲清楚elementui的表格排序功能

        极致的灵活度满足工程美学:用Vue Flow绘制一个完美流程图

        shpfile转GeoJSON且控制转化精度;如何获取GeoJSON?GeoJson结构详解

        Docker 入门全攻略:安装、操作与常用命令指南

        通过array.reduce()实现数据汇总、条件筛选和映射、对象属性的扁平化、转换数据格式等

        巧用Array.forEach:简化循环与增强代码可读性

        Mapbox添加行政区矢量图层、分级设色图层、自定义鼠标悬浮框、添加天地图底图等

        管理数据必备!侦听器watch用法详解

标签:ES6,console,log,age,name,const,解构,赋值
From: https://blog.csdn.net/RenGJ010617/article/details/141436850

相关文章

  • WPF 的 await Application.Current.Dispatcher.InvokeAsync,Func 如果是Task , 等待赋
    最近在检查我们组内的代码,发现好多用到awaitApplication.Current.Dispatcher.InvokeAsync相信好多WPF的开发都会用到该方法做UI线程切换。但是细看里边的执行,发现了个别存在存在没有等待完成的情况  执行的结果是i为null值。这也就说明了执行了awaitApplica......
  • 获取成员变量并赋值使用
    packagecom.shujia.day21;importjava.lang.reflect.Constructor;importjava.lang.reflect.Field;/*反射获取成员变量并赋值使用获取所有成员通过类的字节码文件对象获取 getFields只能获取公共的成员变量 getDeclaredFields获取私有的......
  • 一文彻底了解ES6中的var、let、const基本用法以及暂时性死区和变量提升的区别
             ECMAScript变量是松散类型的,意思是变量可以用于保存任何类型的数据。每个变量只不过是一个用于保存任意值的命名占位符。有三个关键字可以声明变量:var、let、const。其中var在ECMAScript的所有版本中都可以使用,而 const和let只能在ECMAScript6及更......
  • 【Python】函数的定义和调用、形参和实参、函数的返回值、多元赋值、全局和局部变量
    文章目录函数的定义函数的调用形参和实参函数的返回值一个return多个return多元赋值变量作用域函数内的变量全局变量和局部变量修改全局变量函数的定义函数的定义:分配任务def函数名(形参列表): 函数体 return返回值def:define,定义形参列表中,可以有多个形......
  • 再见了Try-Catch,ECMA增加安全赋值运算符提案
    JavaScript的错误处理即将获得重大升级。新的ECMAScript安全赋值运算符提案(?=)旨在通过减少对传统try-catch代码块的需求,来简化您的代码。让我们一起来看看这个提案如何简化您的错误管理,并使您的JavaScript代码更干净、更高效。简单示例传统的try-catch代码块常常导致代......
  • JavaScript ES6 Map
    Map对象保存键值对。任何值(对象或者原始值)都可以作为一个键或一个值。Maps和Objects的区别一个Object的键只能是字符串或者Symbols,但一个Map的键可以是任意值。Map中的键值是有序的(FIFO原则),而添加到对象中的键则不是。Map的键值对个数可以从size属性获......
  • C/C++ 拷贝构造函数 | 赋值构造函数 | 移动构造函数 | 移动赋值构造函数
    文章目录前言1.拷贝构造函数(CopyConstructor)2.赋值构造函数(CopyAssignmentOperator)3.移动构造函数(MoveConstructor)4.移动赋值构造函数(MoveAssignmentOperator)总结前言C++中关于一个对象的构造,就有很多讲究。其中最常用的可能就是拷贝构造函数......
  • 轻松理解es6执行上下文
    想要学好js,深入理解js的如何运行肯定是少不了的。这篇文章是结合各个网站上的大佬们的文章在加上自己的理解形成的,如有错误的地方,请帮我纠正一下,谢谢。前言当js引擎去执行一段代码的时候,如何确定代码的执行顺序,以及变量何时被定义,this的指向等,想要更深入理解这些问题,必须了......
  • ES6 (二)——ES6 let 与 const
    目录let命令不存在变量提升const命令注意要点ES2015(ES6)新增加了两个重要的JavaScript关键字: let 和 const。let声明的变量只在let命令所在的代码块内有效。const声明一个只读的常量,一旦声明,常量的值就不能改变。let命令基本用法:{leta=0;a......
  • ES6(三)——ES6 解构赋值和Symbol
    目录ES6解构赋值概述解构模型数组模型的解构(Array)对象模型的解构(Object)ES6Symbol概述基本用法使用场景ES6解构赋值概述解构赋值是对赋值运算符的扩展。他是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值。在代码书写上简洁且易读,语义更加清晰......