ES6中的Javascript解构的实现
ES6中的解构特性能让我们从对象（Object）或者是数组（Array）中取值的时候更方便，同时写出来的代码在可读性方面也更强。之前接触过python语言的小伙伴应该对这个不会陌生，这个特性早已在python中实现了。在python中，我们可以通过下面的代码来取值
lst = [3, 5] first, second = lst print(first, second)
first和second两个变量，分别被赋值上了数组中的3和5，是不是很简单很清晰？
那在有这个特性之前，我们一般怎么从对象或数组中取值呢？来看看下面的代码：
let list = [3, 5] let first = list[0] let second = list[1]
在这种方式中，你必须得手动指定个数组下标，才能把对应的值赋给你指定的变量。那如果用ES6的解构特性，代码将会变得更简洁，可读性也更高：
let [first, second] = list;
对象的解构
基础对象解构
首先我们来看看ES6中基本的对象解构应该怎么写：
const family = {
father: ''
mother: ''
}
const { father, mother } = family;
我们从family对象中解构出来了它的两个属性father和mother，并赋值给了另外定义的father和mother对象。此后，我们就能直接通过father和mother变量获取到family中相应key的值了。这个例子是解构对象最简单的一种应用，下面来看看更有趣的。
解构没有声明过的对象
在上面的例子中，我们先声明的family对象，然后再通过解构语法获取其中的值。那如果不声明是否可以呢：
const { father, mother } = {father: '',mother: ''}
其实也是可以的，在一些情况下，我们是没有必要特意去声明一个对象或是把对象赋值给一个变量，然后去才解构的。很多时候我们可以直接解构未声明的对象。
解构对象并重命名变量
我们也可以将对象中的属性解构之后，并对其重新命名，比如：
const { father: f, mother:m } = {father: '1',mother: '2'}
console.log(f); // '1'
在上面的代码中，对象中的father被解构出来后，重新赋值给了变量f，与前一个例子相比，相当于重名了了father变量为f。接下来就可以用f继续进行操作。
解构默认值
想象一下一种场景，后台返回了一个family对象，原本family对象约定了有三个属性，分别为father，mother，child。你拿到返回的数据并解构这三个属性：
const { father, mother, child } = {father: '1',mother: '2', child: '3'}
这看上去没有什么问题，但现实情况总是不如人意。后台由于代码有bug，返回的family对象中，只包含了mother和child，漏了father。这时经过上面代码的解构后， father就会变成undefined：
const { father, mother, child } = {father: '1',mother: '2'}
console.log(child) //undefined
很多时候我们会想要在后台漏了某个属性的时候，也能解构出一个默认值。那其实可以这么写：
const { father = '1', mother = '2', child = '3'} = {father: '1',mother: '2'}
console.log(child) //'3'
结合前一个例子，你既可以改变量名又能赋值默认值：
const { father: f = '1', mother: m = '2', child: c = '3'} = {father: '1',mother: '2'}
在函数参数中解构
const family = {
father: ''
mother: ''
}
function log({father}){
console.log(father)
}
log(family)
在函数的参数中，运用解构的方式，可以直接获取出入对象的属性值，不需要像以往使用family.father传入。
解构嵌套对象
在上面的例子中，family的属性都只有1层，如果family的某些属性的值也是一个对象或数组，那怎么将这些嵌套对象的属性值解构出来呢？来看看下面的代码：
const family = {
father: 'mike'
mother: [{
name: 'mary'
}]
}
const { father, mother: [{
name:motherName
}]} = family;
console.log(father); //'mike'
console.log(motherName) //'mary'
数组的解构
数组的解构方式其实跟对象的非常相似，在文章开头也略有提及，不过我们还是来看一下数组解构的一些典型场景。
基础对象解构
const car = ['AUDI', 'BMW']; const [audi, bmw] = car; console.log(audi); // "AUDI" console.log(bmw); // "BMW"
只要对应数组的位置，就能正确的解构出相应的值。
解构默认值
同对象解构的默认值场景，很多时候我们也需要在解构数组的时候加上默认值以满足业务需要。
const car = ['AUDI', 'BMW']; const [audi, bmw, benz = 'BENZ'] = car; console.log(benz); // "BENZ"
在解构中交换变量
假设我们有如下两个变量：
let car1 = 'bmw'; let car2 = 'audi'
如果我们想交换这两个变量，以往的做法是:
let temp = car1; car1 = car2; car2 = temp;
需要借助一个中间变量来实现。那利用数组的解构，就简单很多：
let car1 = 'bmw'; let car2 = 'audi' [car2, car1] = [car1, car2] console.log(car1); // 'audi' console.log(car2); // 'bmw'
如果是想在一个数组内部完成元素位置的交换，比如吧[1,2,3]交换成[1,3,2]，那么可以这么实现：
const arr = [1,2,3]; [arr[2], arr[1]] = [arr[1], arr[2]]; console.log(arr); // [1,3,2]
从函数的返回解构数组
很多函数会返回数组类型的结果，通过数组解构可以直接拿值：
functin fun(){
return [1,2,3]
}
let a, b, c;
[a, b, c] = fun();
当然，如果我们只想要函数返回数组中的其中一些值，那也可以把他们忽略掉
functin fun(){
return [1,2,3]
}
let a, c;
[a, , c] = fun();
可以看到，ES6的解构特性在很多场景下是非常有用的。期望大家能更多的将解构运用到项目中，让代码变得更加简单，清晰易懂。
到此这篇关于ES6中的Javascript解构的实现的文章就介绍到这了,更多相关ES6 解构内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
ES6知识点整理之对象解构赋值应用示例
本文实例讲述了ES6知识点整理之对象解构赋值应用.分享给大家供大家参考,具体如下: ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring), 在对象的解构赋值中有一些需要注意的事项 初识对象的解构 var {name} = { name:'Joh', age:10 }; console.log(name); // Joh 通过解构的形式取出对象中的属性值 对解构出的属性进行重命名 var {name} = { name:'Joh', age:1
-
ES6解构赋值的功能与用途实例分析
本文实例讲述了ES6解构赋值的功能与用途.分享给大家供大家参考,具体如下: (1)交换变量的值 [x, y] = [y, x]; 上面代码交换变量x和y的值,这样的写法不仅简洁,而且易读,语义非常清晰. (2)从函数返回多个值 函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回.有了解构赋值,取出这些值就非常方便. // 返回一个数组 function example() { return [1, 2, 3]; } var [a, b, c] = example(); // 返
-
深入理解ES6之数据解构的用法
一 对象解构 对象解构语法在赋值语句的左侧使用了对象字面量 let node = { type: true, name: false } //既声明又赋值 let { type, name } = node; //或者先声明再赋值 let type, name ({type,name} = node); console.log(type);//true console.log(name);//false type与name标识符既声明了本地变量,也读取了对象的相应属性值. 解构赋值表达式的值为表
-
ES6数组与对象的解构赋值详解
本文实例讲述了ES6数组与对象的解构赋值.分享给大家供大家参考,具体如下: 数组的解构赋值 基本用法 ES6允许按照一定的模式,从数组和对象中提取值,对变量进行赋值,这被称之为解构(Destructuring) // 以前为变量赋值,只能直接指定值 var a = 1; var b = 2; var c = 3; // ES6允许写成这样 var [a,b,c] = [1,2,3]; 本质上,这种写法属于"模式匹配",只要等号两边的模式相同,左边的变量就会被赋予对应的值. 下面是一些使
-
ES6知识点整理之数组解构和字符串解构的应用示例
本文实例讲述了ES6知识点整理之数组解构和字符串解构的应用.分享给大家供大家参考,具体如下: ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring), 而数组的解构赋值是从数组中提取值,按照对应位置,对变量赋值. ES6之前的赋值操作 var arr = [1,2,3]; var a = arr[0]; var b = arr[1]; var c = arr[2]; console.log(a,b,c); // 1 2 3 对一维数组的解构赋值
-
ES6解构赋值实例详解
本文实例讲述了ES6解构赋值.分享给大家供大家参考,具体如下: 基本用法 let [x, y, ...z] = ['a'] //"a", undefined, [] 1.等号右边如果不是数组,将会报错(不是可遍历结构) 2.解构赋值 var, let, const命令声明均适用 3.set结构也可解构赋值(具有Iterator接口,可采用数组形式结构赋值) set解构:任何类型的单个值的集合 let [x, y, z] = new Set(["a", "b
-
ES6学习之变量的解构赋值
变量的解构赋值 ES6中允许按照一定模式,从数组和对象中提取,对变量进行赋值. 数组的解构赋值 var [a,b,c] = [1,2,3]; a // 1; b // 2; c // 3; 上面的代码标示可以从数组中提取值,按照位置的对应关系对变量进行赋值. 本质上,这种写法属于"模式匹配",只要等号两边的模式相同,左边的变量就会被赋予对应的值. let [foo,[[bar],baz]] = [1,[[2],3]]; foo //1; bar //2; baz //3; let [,
-
深入浅出讲解ES6的解构
什么是解构? 解构与构造数据截然相反. 例如,它不是构造一个新的对象或数组,而是逐个拆分现有的对象或数组,来提取你所需要的数据. ES6使用了一种新模式来匹配你想要提取的数值, 解构赋值就是采用了这种模式. 该模式会映射出你正在解构的数据结构,只有那些与该模式相匹配的数据,才会被提取出来. 被解构的数据项位于赋值运算符 = 的右侧,可以是任何数组和对象的组合,允许随意嵌套.用于给这些数据赋值的变量个数不限. 数组解构 数组解构 使用一个数组作为一个数据项,你可以根据 数组模式 (用于从数组中匹配
-
解析JavaScript的ES6版本中的解构赋值
什么是解构赋值? 解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性值赋给一系列变量.这个语法非常简洁,而且比传统的属性访问更加清晰. 在不使用解构赋值的情况下,访问数组的前三项: var first = someArray[0]; var second = someArray[1]; var third = someArray[2]; var first = someArray[0]; var second = someArray[1]; var third = someArray
-
ES6中的Javascript解构的实现
ES6中的解构特性能让我们从对象(Object)或者是数组(Array)中取值的时候更方便,同时写出来的代码在可读性方面也更强.之前接触过python语言的小伙伴应该对这个不会陌生,这个特性早已在python中实现了.在python中,我们可以通过下面的代码来取值 lst = [3, 5] first, second = lst print(first, second) first和second两个变量,分别被赋值上了数组中的3和5,是不是很简单很清晰? 那在有这个特性之前,我们一般怎么从对象或
-
ES6下javascript解构赋值常见用法总结
Javascript解构赋值出现的契机: let obj = { a: 1, b: 2 } // 取值 let a = obj.a let b = obj.b Javascript解构赋值问题核心: 每次取值既要确定对象属性名,还得重新定义一个变量占用多一行,代码行数和重复的声明a,使得代码不够简洁,能否通过左边变量名,匹配到右边的属性名从而取得对应的值,ES6解构语法核心就基于这样的模式匹配思想 上面的问题解构方案: let obj = { a: 1, b: 2 } // 取值 let {a,
-
ES6新特性之解构、参数、模块和记号用法示例
本文实例讲述了ES6新特性之解构.参数.模块和记号用法.分享给大家供大家参考,具体如下: 一.解构 解构提供了一个方便的地从对象或数组中提取数据的方法,请看下面的例子: //ES6 let [x,y]=[1,2];//x=1,y=2 //ES5 var arr=[1,2]; var x=arr[0]; var y=arr[1]; 使用这个语法,可以一次性给多个变量赋值.一个很好的附加用处是可以很简单的交换变量值: let x=1,y=2; [x,y]=[y,x];x=2 y=1 解构也可以用于对
-
JavaScript解构赋值的5个常见场景与实例教程
目录 前言 1. 提取数据 2. 别名取值 3. 动态属性 4. 对象解构中的 Rest 5. 默认值 总结 前言 解构赋值语法是一种 JavaScript 表达式,通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量.这种语法是 ECMAscript 6 规范引入了一种新语法,可以更轻松地从数组和对象中获取值. 1. 提取数据 先来看看如何在 JavaScript 中解构对象,可以从这个商品对象的简单示例开始. const product = { id: 1, title: "Ni
-
Javascript 解构赋值详情
目录 1.数组解构 2.对象解构 3.不完全解构 4.用解构赋值实现变量交换 1.数组解构 let [a, b, c] = [1,2,3] console.log(a, b, c) // 1 2 3 除了数组,任何可迭代的对象都支持被解构, 例如字符串 let [first, second] = "he" console.log(first, second) // h e 2.对象解构 赋值右侧是对象,左侧是包含在花括号内逗号隔开的变量名 let {a, b, c} = {a:1, b
-
JavaScript解构赋值的实用技巧指南
目录 一.基本概念 二.解构分类 1. 对象的解构赋值 2. 数组的解构赋值 (1)字符串 (2)数组 (3)集合 (4)Map 三.嵌套解构 四.使用技巧 1. 函数解构 (1)解构函数参数 2. 循环中的解构 3. 动态属性解构 4. 交换变量 5. 数组拷贝 四.解构赋值注意点 总结 一.基本概念 为什么需要解构呢,先来看一个例子: const student = { name: 'ZhangSan', age: 18, scores: { math: 19, english: 85, c
-
JavaScript解构赋值详解
目录 概念 数组解构 声明分别赋值 解构默认值 交换变量值 解构函数返回的数组 忽略返回值(或跳过某一项) 赋值数组剩余值给一个变量 嵌套数组解构 字符串解构 对象解构 基础对象解构 赋值给新变量名 解构默认值 赋值给新对象名的同时提供默认值 同时使用数组和对象解构 不完全解构 赋值剩余值给一个对象 嵌套对象解构(可忽略解构) 注意事项 小心使用已声明变量进行解构 函数参数的解构赋值 解构的用途 交换变量的值 从函数返回多个值 提取JSON数据 总结 概念 ES6提供了更简洁的赋值模式,从数组和
-
es6基础学习之解构赋值
前言 es6的语法已经出了很长的时间了,在使用上也可以通过babel这类的编译工具转译为浏览器可以识别的es5的语法,但是依旧有很多开发在写代码的时候,依旧没有用es6的语法,而是习惯使用老的语法,这篇文章主要会介绍解构赋值基本用法以及在实际使用场景中相比es5语法的优势,让大家从根本上了解es6语法的优势 下面话不多说了,来一起看看详细的介绍吧 基本用法 数组解构 让我们一起先来看数组解构的基本用法: let [a, b, c] = [1, 2, 3] // a=1, b=2, c=3 let
-
Javascript中的解构赋值语法详解
前言 首先在 ES6中引入的"解构赋值语法"允许把数组和对象中的值插入到不同的变量中.虽然看上去可能很难,但实际上很容易学习和使用. 解构赋值语法是一种 JS表达式.ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构.通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量. 在ES6解构赋值出现之前,我们需要为变量赋值的时候,只能直接指定值. 比如: let a = 1; let b = 2; let c = 3; let d = 4; let e