解构赋值,你不能不懂!

解构赋值

很多人可能和我一样,第一次看到这个词的时候摸不着头脑。但是冷静再看一遍好像明白了,“把数据结构分解开分别进行赋值”。

我们先看几个小例子

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

let {name,age} = {name:"jack",age:"18"};
console.log(name,age);//jack 18

let {toString,length} = "hello";
console.log(toString === String.prototype.toString,length);//true 5

let [a,b,c,d,e] = "world";
console.log(a,b,c,d,e);//w o r l d

let {shift,length,key} =[1,2,3];
console.log(shift,length,key);//[Function: shift] 3 undefined

function fo([x,y,z]){
console.log(x,y,z);
}
fo([3,4,2]);//3,4,2

function fobj({x,y,z}){
console.log(x,y,z);
}
fobj({z:1,y:4,x:2});//2 4 1

let [x, y, z] = new Set([‘a‘, ‘b‘, ‘c‘]);
console.log(x) // "a"

相信大家不难从上述的几段代码案例总结出来解构赋值的规律,我总结到如下几点:
1、解构主体为数组或者对象。
2、解构源必须具备Iterator接口或者经过转换之后具备Iterator接口。(什么是Iterator可看我接下来文章)
3、数组解构是按顺序进行解构(有序),对象是通过方法名或者属性名进行结构(无序)。
4、数组解构解构源会被转换为数组,对象解构解构源会被转换成对象。
5、解构对象时关键词解构会从当前实例持续向上访问原型链直到查不到返回undefined。

以上总结包含了大部分基础场景我们会遇到的情况,但还是有更多的细节需要我们注意下:

我们可以嵌套解构

let [a,[b,{name,age}],d] = [1,[4,{name:1,age:1}],6];
console.log(a,b,d,name,age);//1 4 6 1 1

我们也可以改变解构的变量名

var {b:x,a:y} = {a:1,b:2};
console.log(x,y);//2 1

解构赋值可以设置默认值

var [x=1,y=2] = [,0];
console.log(x,y);//1 0

var {x=1,y=2] = {y:0};
console.log(x,y);//1 0

数组解构赋值对于不可迭代实例将报错

let [val] = 1;
let [val] = false;
let [val] = NaN;
let [val] = undefined;
let [val] = null;
let [val] = {};

数组解构可以跳跃赋值

//取出数组第三个
var [,,x] = [1,2,4];
console.log(x)//4

数组解构可以截取

let [,...x] = [1,2,4];
console.log(x)//[ 2, 4 ]

那它有哪些用途呢?

1、交换变量,是一种很酷的玩法

var {x:y,y:x} = {x:1,y:2};
console.log(x,y);//2 1

let x=1;let y = 2;
[y,x] = [x,y];
console.log(x,y);//2 1

2、接受函数返回的多个值

function test(){
return [1,2,3];
}
let [a,b,c] = test();
console.log(a,b,c);//1 2 3

function test(){
return {x:1,y:2,z:3};
}
let {y,z,x} = test();
console.log(y,z,x);//1 2 3

3、接受不按顺序的函数参数

function get({name,age,sex}){
console.log(name,age,sex);
}
get({name:"Topqiang",age:24,sex:1});//Topqiang 24 1
get({age:24,name:"Topqiang",sex:1});//Topqiang 24 1
get({name:"Topqiang",sex:1,age:24});//Topqiang 24 1

接口封装调用函数再也不用考虑参数顺序了,以后我们在封装方法提供工具包时就可以让我们的关注点放在业务本身而无需关注参数传入的顺序上。这是多么美好的一件事。 4、设置默认值

function get({name="topqiang",age,sex}){
console.log(name,age,sex);
}
get({age:24,sex:1});//Topqiang 24 1

5、为模块化编程提供优雅的模块引入方式

const {read,write} = require("fs");

6、函数的参数列表可以自动装载成数组

function getarr(...args){
console.log(args);
}
getarr(1,23,4);//[ 1, 23, 4 ]

。。。还有我没有发现的好处。。。

以上就是我对解构赋值的一些总结,希望能对还没入门的你提供到一些帮助。es6给我们提供了很多优美的语法糖,让我们编起码来更优雅,更易读(前提懂es6),更规范。但是这些语法糖相对es5实现方式性能怎么样?要不要来我们现场交流交流呢(详情请阅读原文找到我)!

原文地址:http://blog.51cto.com/13284080/2091466

时间: 2024-11-06 07:12:45

解构赋值,你不能不懂!的相关文章

ES6-个人学习笔记二--解构赋值

第二期,解构赋值如果能够熟练应用确实是个十分方便的功能,但是过分的依赖和嵌套只会让代码理解和维护起来十分困难,是个体现高逼格的表达式呢~ 1,解构赋值的基础 //定义:es6运行按照一定模式,从数组或对象中提取值,并对变量进行赋值,如 var [a,b,c] = [1,2,3]; //一些其他方式 let [ , , a1] = [1,2,3]; //a1:3 let [a2,...b2] = [1,2,3,4]; //a2:1,b2:[2,3,4] let [a3,b3,...c3] = [1

es6学习 -- 解构赋值

ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定值. let a = 1; let b = 2; let c = 3; ES6 允许写成下面这样. let [a, b, c] = [1, 2, 3]; 上面代码表示,可以从数组中提取值,按照对应位置,对变量赋值. 本质上,这种写法属于"模式匹配",只要等号两边的模式相同,左边的变量就会被赋予对应的值.下面是一些使用嵌套数组进行解构的例子. 我认为

ES6(二)解构赋值+字符串的扩展

详解一下之前的解构赋值 ①解构赋值中的"..." let [a,...b]= [1]; b // [] ...代表变量b去匹配剩余的所有元素返回一个数组 ,匹配不到时返回[] //注意:"...b"只能放在最后 ②解构赋值的等号两边的数据类型必须一样 即: let [] = [] 或者 let {} = {} 但是:Set结构也允许使用数组进行解构赋值 let [a,b]= new Set([1,2,3,4]) a //1 b //2 技巧: 如果你不确定该结构是否

ES6解构赋值

前面的话 我们经常定义许多对象和数组,然后有组织地从中提取相关的信息片段.在ES6中添加了可以简化这种任务的新特性:解构.解构是一种打破数据结构,将其拆分为更小部分的过程.本文将详细介绍ES6解构赋值 引入 在ES5中,开发者们为了从对象和数组中获取特定数据并赋值给变量,编写了许多看起来同质化的代码 let options = { repeat: true, save: false }; // 从对象中提取数据 let repeat = options.repeat, save = option

(6)解构赋值的用途

解构赋值的用途1.交换变量的值 var a = 100; var b = 200; var t; t = a; a = b; b = t; //解构赋值的写法完成[ES6交换变量的值] var x = 100; var y = 200; [x, y] = [y, x]; console.log(x); console.log(y); 优点1:直观 优点2:一一对应 优点3:节省内存空间(不用多申请变量) 2.从函数返回多个值 3.函数参数的定义4.提取json数据5.函数参数的默认值6.遍历Ma

(5)ES6解构赋值-函数篇

函数参数的解构赋值 function sum(x, y) { return x + y; } sum(1,2);//3 //解构赋值 function sum([x, y]) { return x + y; } console.log( sum([1,2]) );//3 函数参数解构赋值的默认值 function fun({x = 0, y = 0} = {}) { return [x, y]; } console.log( fun({}) ); //[0,0] console.log( fun

解构赋值 —— ES6新语法学习心得

## 3.解构赋值 ## 作用:将数组.对象.函数的参数 解构,对变量进行赋值,可以直接调用该变量,大大提高效率 ## 例 1: ##  标准模式的解构赋值 var [a,b,c]=[1,2,3] console.log(a) //1 console.log(b) //2 console.log(c) //3 ## 例2 : ##  嵌套解构赋值,只要"模式匹配",就能解构赋值,如果没有对应的值,就是undefined let [foo, [[bar], baz]] = [1, [[2

变量的解构赋值

*,html { font-size: 16px } 一.数组的解构赋值 基本用法 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构. 下面的代码表示,可以从数组中提取值,按照位置的对应关系对变量赋值.这种写法属于"模式匹配",只要等号两边的模式相同,左边的变量就会被赋予对应的值. var [a,b,c]=[1,2,3] a // 1 b // 2 c // 3 let [foo,[[bar],baz]]=[1,[[2],3]]; foo //1 bar //

ES6数组的解构赋值( 下)

对象的解构赋值 对象的解构赋值跟数组的解构赋值很类似,我们来看一段小代码: var { a,b,c} = {"a":1,"b":2,"c":3}; console.log(a);//结果:a的值为1 console.log(b);//结果:b的值为2 console.log(c);//结果:c的值为3 这段例子的代码是不是跟数组的解构赋值很相似,只不过是数组换成了对象.但是两者有一个不同的地方,我们对上面的代码稍做修改: var { a,b,c