解构:“解开--重构”

1.数组的解构:

 //数组的解构;
// let arr=[1,2,3,6]
// let[a,b,c,d]=arr;
// console.log(a,b,c,d)// 1,2,3,6
!!伪数组也可以进行解构,如获取得DOM节点(就是一个伪数组)

2.对象的解构:

//对象的解构;
// let obj={
// name:'gbb',
// age:89,
// }
// let{name,age}=obj;
// console.log(name,age) gbb 89

3.复杂对象的解构:

复杂对象的解构;
let obj={
name:'gbb',
age:89,
obj1:{
sex:'nan',
height:175,
}
} let{name,age,obj1:{sex,height}}=obj;
console.log(name,age,sex,height)

//注:等号右侧如果不能进行遍历,都不能解构。

let [a] = 10;
let [a] = null;
let [a] = true
let [a] = false;
let [a] = undefined;
let [c] = NaN;

let [a] = [] //返回的为undefined
let {a} = {} //返回的为undefined

4.扩展运算符:...

... 的作用:

a:对函数的参数进行解构;(函数的所传参数不确定)

function fn(...num){
console.log(num) //[1,3,5,9]
}
let arr=[1,3,5,9];
fn(...arr);

b:对象进行合并:

var obj1={
name:'nana',
age:66,
}
var obj2={
sex:'nan',
height:15,
name:'会不会覆盖了?' //相同属性将会被覆盖!!
}
var obj3={...obj1,...obj2};
console.log(obj1,obj2,obj3)

c: 对其他数据的保存:

function fn(a,b,...c){
console.log(c); //3,4,5,6 将不确定的数据保存
}
fn(1,2,3,4,5,6);

eg:

1、交换两个变量的值
    var a = 10;
    var b = 20;
    var [a,b] = [b,a];
    console.log(a);

ES6解构的更多相关文章

  1. ES6解构赋值

    前面的话 我们经常定义许多对象和数组,然后有组织地从中提取相关的信息片段.在ES6中添加了可以简化这种任务的新特性:解构.解构是一种打破数据结构,将其拆分为更小部分的过程.本文将详细介绍ES6解构赋值 ...

  2. ES6 解构

    { "code": 200, "msg": "success", "data": { "total" ...

  3. ES6解构赋值常见用法

    解构赋值出现的契机: let obj = { a: 1, b: 2 } // 取值 let a = obj.a let b = obj.b 问题核心: 每次取值既要确定对象属性名,还得重新定义一个变量 ...

  4. ES6—解构赋值

    1.什么是解构赋值 ES6允许按照预定的模式,从数组.对象中提取值,对变量进行赋值. 我们直接用例子说明.    2. 数组的解构赋值 数组传统的变量赋值:      var arr=[1,2,3]; ...

  5. es6 解构赋值

    ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 关于给变量赋值,传统的变量赋值是这样的: var arr = [1,2,3];//把数组的值 ...

  6. (2)ES6解构赋值-数组篇

    1.解构赋值-数组篇 //Destrcturing(解构) //ES5 /* var a = 1; var b = 2; var c = 3; */ //ES6 var [a,b,c] = [1,2, ...

  7. es6 解构赋值 新认知/新习惯

    es6 的解构赋值其实很早就学习了,但一直纠结于习惯和可读性问题,所以没有大规模使用.最近被 react调教一番之后.已经完全融入认知和习惯中去了.总结一下三个常用的技巧: 对象取值 取值并重命名 剩 ...

  8. 初识ES6 解构

    1.数组的解构 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构 例子: let [a, b, c] = [1, 2, 3]; console.log(a);//1cons ...

  9. 简单看看es6解构赋值

    哎,我真的是太难了,今天就被这个解构赋值(也可以叫做析构,貌似析构是在c++中的,所以我这里叫做解构赋值吧)弄的我很烦,本来以为很容易的,结果还是弄了好久...就总结一下解构吧! 1.解构的基本使用 ...

  10. ES6 解构 destructuring

    解构的作用:简化书写长度,提升开发效率. 解构对象 在开发中我们常用到使用ajax请求数据,并且把数据渲染到页面上.可能这个数据返回的对象或数组.例如返回一个obj{name:'zwq',age:18 ...

随机推荐

  1. linux中errno及perror的应用

    1 perror 定义在头文件<stdlib.h>中 void perror(const char *s);函数说明 perror ( )用 来 将 上 一 个 函 数 发 生 错 误 的 ...

  2. CF1216X

    由于rating限制,和慎老师用小号打了一场div 3 从A到F都没啥思维含量..感觉最难想的就是C了?? CF1216C 考完以后想hack一下这道题,然后发现满屏都是分类讨论 我大概是写不动 or ...

  3. 暴力穷举zip、rar压缩文件的密码

    生成密码的方式类似与时钟,末尾遍历完了第k位所有的字符,就让第k位的前一位到下一位字符,第k位回到第0个字符. 对python还不太熟悉,效率比较低,但是能破解简单的密码. import zipfil ...

  4. 我的scoi2018

    高一,很尴尬,凉~ -------- 大家好,我是分界线,我弱弱的说本次采用倒序的写作手法 -------- 故事是这样讲的: Day0: 刚刚去那个电科搞的集训,早上才考了一波模拟赛,下午就过来住酒 ...

  5. shell 脚本文件类型.sh ,变量

    1. shell脚本编程的基本过程 (1)建立shell文件,以 .sh 结尾的文件 (2)赋予shell文件执行权限,chmod 0777 文件名 (3)执行shell文件, ./ 文件名 或者ba ...

  6. windows 添加永久路由

    打开cmd 命令为: route  add  目的网络    mask   子网掩码     下一跳   -p 添加完成后 可以使用如下命令进行查看: route print

  7. StringUtils的Join函数

    有一天看到同事用了这么个函数,然而我并没有见过,所以查了查,以后说不定用得到. 包路径:org.apache.commons.lang3.StringUtils; 函数名:StringUtils.jo ...

  8. php操作redis--列表篇

    常用函数:lpush/rpush/lpop/rpop/lrange/lrem等 应用场景:关注列表,粉丝列表,发送缓冲队列等 特点:可理解为数组操作,插入和删除数据按照一定的规律排序,数据可重复 连接 ...

  9. java内存泄露与内存溢出

    内存溢出 out of memory,是指程序在申请内存时,没有足够的内存空间供其使用,出现out of memory: 内存泄露 memory leak,是指程序在申请内存后,无法释放已申请的内存空 ...

  10. (转)Ubuntu下用eclipse cdt编写多线程程序的简单设置

    在Ubuntu下用eclipse cdt编写了一个多线程程序,但是总是出现pthread_create函数未定义! 查找了下原因,原来是要对eclipse进行一些简单的设置: 右键单击项目->P ...