ES6 从入门到精通 # 07:解构赋值

简介: ES6 从入门到精通 # 07:解构赋值

说明

ES6 从入门到精通系列(全23讲)学习笔记。



解构赋值


解构赋值是对赋值运算符的一种拓展,它针对数组和对象来进行操作。

优点:代码书写上简单易读

let man = {
  name: "kaimo",
  value: 313
}
// es5
let name = man.name;
let value = man.value;
// es6 完全解构
let { name, value } = man;
console.log(name, value)



e45c041013744d919a2e6b546e5efd7a.png

let obj = {
  a: {
    name: "kaimo"
  },
  b: [],
  c: "hello cat"
}
// 不完全解构
let { a } = obj;
console.log(a);
// 剩余运算符
let { a, ...res } = obj;
console.log(a, res)
// 默认值
let { a, b = 30 } = { a: 20 };



7fb14e1c516b43f59ecfc6fd80045831.png


对数组解构

let arr = [1, 2, 3];
let [a, b, c] = arr;
console.log(a, b, c);


04fb306ce10e4559a9684d3330151ce6.png


// 可嵌套
let [a, [b], c] = [1, [2], 3];
console.log(a, b, c);



ad2d90ed6a514759b9afe98df96690d9.png





目录
相关文章
ES6学习(2)解构赋值
ES6学习(2)解构赋值
|
2月前
ES6解构赋值
本文介绍了ES6中解构赋值的用法,包括对象和数组的解构,展示了如何从复杂数据结构中提取需要的变量,以及使用重命名和嵌套解构来简化代码。
33 0
ES6解构赋值
|
5月前
|
JSON JavaScript 前端开发
ES6 解构赋值详解
ES6是JavaScript语言的一次重大更新,引入了许多新特性和语法改进,其中解构赋值是一个非常实用和灵活的语法特性。它可以让我们从数组或对象中提取值,并赋给对应的变量,让代码变得更加简洁和易读。本文将深入探讨ES6解构赋值的语法、用法及其在实际开发中的应用。
191 58
ES6 解构赋值详解
|
3月前
es6 的解构赋值
【8月更文挑战第22天】
20 3
|
4月前
ES6 解构赋值【详解】
ES6 解构赋值【详解】
27 0
|
JavaScript 前端开发 网络架构
ES6 解构赋值
ES6 解构赋值
85 0
|
6月前
|
移动开发 前端开发 JavaScript
web前端之ES6的实用深度解构赋值方法、复杂的解构赋值
web前端之ES6的实用深度解构赋值方法、复杂的解构赋值
71 1
|
6月前
|
小程序
es6学习笔记(二)解构赋值
es6学习笔记(二)解构赋值
|
6月前
|
Web App开发 JavaScript 前端开发
【ES6系列第一篇】ES6简介与特性、let、const、解构赋值
【ES6系列第一篇】ES6简介与特性、let、const、解构赋值
58 0
|
JSON 数据格式
ES6系列笔记-解构赋值
ES6系列笔记-解构赋值
67 1