Javascript中的解构赋值语法详解
2021-04-08 04:06
1126 查看
前言
首先在 ES6中引入的“解构赋值语法”允许把数组和对象中的值插入到不同的变量中。虽然看上去可能很难,但实际上很容易学习和使用。
解构赋值语法是一种 JS表达式。ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。
在ES6解构赋值出现之前,我们需要为变量赋值的时候,只能直接指定值。
比如:
let a = 1; let b = 2; let c = 3; let d = 4; let e = 5;
数组解构非常简单。你所要做的就是为数组中的每个值声明一个变量。你可以定义更少的变量,而不是数组中的索引(即,如果你只想解处理前几个值),请跳过某些索引或甚至使用 REST 模式将所有剩余的值放到新数组中。
const nums = [ 3, 6, 9, 12, 15 ]; const [ k, // k = 3 l, // l = 6 , // Skip a value (12) ...n // n = [12, 15] ] = nums;
对象解构
对象解构与数组解构非常相似,主要区别是可以按名称引用对象中的每个key,从而创建一个有相同名称的变量。此外还可以将键解构为新的变量名,只解构所需的 key,然后用 rest 模式将剩余的 key 解构为新对象。
const obj = { a: 1, b: 2, c: 3, d: 4 }; const { a, // a = 1 c: d, // d = 3 ...rest // rest = { b: 2, d: 4 } } = obj;
嵌套解构
嵌套对象和数组可以通过相同的规则来进行解构。区别在于可以将嵌套 key 或值直接解构为变量,而不必将父对象存储在变量本身中。
const nested = { a: { b: 1, c: 2 }, d: [1, 2]}; const { a: { b: f, // f = 1 ...g // g = { c: 2 } }, ...h // h = { d: [1, 2]} } = nested;
高级解构
由于数组的行为与对象相似,所以可以通过使用索引作为对象解构分配中的 key,用解构分配语法从数组中获取特定值。用这种方法还可以得到数组的其他属性(例如数组的 length)。最后,如果解构后的值是 undefined,则还可以为解构过程中的变量定义默认值。
const arr = [ 5, 'b', 4, 'd', 'e', 'f', 2 ]; const { 6: x, // x = 2 0: y, // y = 5 2: z, // z = 4 length: count, // count = 7 name = 'array', // name = 'array' (not present in arr) ...restData // restData = { '1': 'b', '3': 'd', '4': 'e', '5': 'f' } } = arr;
总结
到此这篇关于Javascript中解构赋值语法的文章就介绍到这了,更多相关JS解构赋值语法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
您可能感兴趣的文章:相关文章推荐
- JavaScript语法详解:JS简介&变量
- JavaScript语法详解(二)__ 数据类型和变量
- JavaScript学习记录day6-函数变量作用域、解构赋值与方法
- JavaScript语法基础:数组的常用方法详解
- ES6数组与对象的解构赋值详解
- 详解JavaScript语法对{}处理的坑爹之处
- 如何理解es6语法的,对象前面加三个点(...) 对象的解构赋值和扩展
- ES6的解构赋值实例详解
- JavaScript对象引用与赋值实例详解
- ES6 解构赋值详解:对象解构赋值、数组解构赋值
- 优雅的JavaScript-基础语法详解
- ECMAScript6(ES6)标准之解构赋值语法及应用
- JavaScript语法详解(三)__基本数据类型
- JavaScript语法详解(五)____运算符
- 详解JavaScript语法对{}处理的坑爹之处
- JavaScript语法详解(二)
- Javascript 赋值机制详解
- 基于ES6作用域和解构赋值详解
- ES6解构赋值详解
- ES6语法---解构赋值