ES6解构
解构:“解开--重构”
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:
ES6解构的更多相关文章
- ES6解构赋值
前面的话 我们经常定义许多对象和数组,然后有组织地从中提取相关的信息片段.在ES6中添加了可以简化这种任务的新特性:解构.解构是一种打破数据结构,将其拆分为更小部分的过程.本文将详细介绍ES6解构赋值 ...
- ES6 解构
{ "code": 200, "msg": "success", "data": { "total" ...
- ES6解构赋值常见用法
解构赋值出现的契机: let obj = { a: 1, b: 2 } // 取值 let a = obj.a let b = obj.b 问题核心: 每次取值既要确定对象属性名,还得重新定义一个变量 ...
- ES6—解构赋值
1.什么是解构赋值 ES6允许按照预定的模式,从数组.对象中提取值,对变量进行赋值. 我们直接用例子说明. 2. 数组的解构赋值 数组传统的变量赋值: var arr=[1,2,3]; ...
- es6 解构赋值
ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 关于给变量赋值,传统的变量赋值是这样的: var arr = [1,2,3];//把数组的值 ...
- (2)ES6解构赋值-数组篇
1.解构赋值-数组篇 //Destrcturing(解构) //ES5 /* var a = 1; var b = 2; var c = 3; */ //ES6 var [a,b,c] = [1,2, ...
- es6 解构赋值 新认知/新习惯
es6 的解构赋值其实很早就学习了,但一直纠结于习惯和可读性问题,所以没有大规模使用.最近被 react调教一番之后.已经完全融入认知和习惯中去了.总结一下三个常用的技巧: 对象取值 取值并重命名 剩 ...
- 初识ES6 解构
1.数组的解构 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构 例子: let [a, b, c] = [1, 2, 3]; console.log(a);//1cons ...
- 简单看看es6解构赋值
哎,我真的是太难了,今天就被这个解构赋值(也可以叫做析构,貌似析构是在c++中的,所以我这里叫做解构赋值吧)弄的我很烦,本来以为很容易的,结果还是弄了好久...就总结一下解构吧! 1.解构的基本使用 ...
- ES6 解构 destructuring
解构的作用:简化书写长度,提升开发效率. 解构对象 在开发中我们常用到使用ajax请求数据,并且把数据渲染到页面上.可能这个数据返回的对象或数组.例如返回一个obj{name:'zwq',age:18 ...
随机推荐
- 都 9102 年了,一起来攻克 Linux 吧!
都 9102 年了,一起来攻克 Linux 吧! 对 Java 程序员来说,天天会和 Linux 打交道,如果你无法熟练地操作 Linux ,基本上等于少了一半的功力,也少了一半的机会-- 身边的开发 ...
- FrameWork内核解析之布局加载与资源系统(三)
阿里P7Android高级架构进阶视频免费学习请点击:https://space.bilibili.com/474380680本篇文章将继续从以下两个内容来介绍布局加载与资源系统: [ LayoutM ...
- 在MVC4.5.1中使用Ninject
看完Pro ASP.NET MVC5的前14章之后,终于开始了自己的项目搭建. 打算在实际项目中使用Ninject 但是总是出现各种问题.这里记录一下 在书中使用的Ninject的版本是: Insta ...
- 快速上手的Glide4.x教程
安卓基础开发库,让开发简单点. DevRing & Demo地址:https://github.com/LJYcoder/DevRing 学习/参考地址: https://blog.csdn. ...
- qfile读取txt文件
QFile f("D:\\测试数据\\单波束数据\\灯浮.TGT"); if (!f.open(QIODevice::ReadOnly|QIODevice::Text))//打开指 ...
- centos7-关闭 rpcbind 服务
1.关闭 rpcbind 服务 sudo systemctl disable rpcbind 2.关闭开机自启动 sudo systemctl disable rpcbind 3.立即执行关闭 sy ...
- mac MAMP安装redis扩展
一般情况下目录大概是一样的,只是php的版本不同,所以选择好自己对应的php版本目录即可 git clone https://github.com/nicolasff/phpredis.git cd ...
- 【JZOJ6434】【luoguP5665】【CSP-S2019】划分
description analysis 首先有一个结论,对于\([1,i]\)区间划分最后一段的和尽量小,答案会更优,具体证明参考毛爷爷的博客 设\(f[i]\)为满足\([1,i]\)划分最优时. ...
- Delphi 常用API 函数列表
Delphi 常用API 函数 AdjustWindowRect 给定一种窗口样式,计算获得目标客户区矩形所需的窗口大小AnyPopup 判断屏幕上是否存在任何弹出式窗口ArrangeIconicWi ...
- JSTL标签的用法详解
在JSP中写Java代码是一件很恶心的事情,代码量少的话还可以,要是多的话,就蛋疼了,整个页面都是<% %>所以EL表达式和JSTL就应运而生了,这里我们注重讲解一下JSTL标签的使用: ...