[ES6] 08. Destructuring Assignment -- 1
Here is the way you get value from an object:
var obj = {
color: "blue"
}
console.log(obj.color); //blue
Destructuring Assignment:
Object
Destructuring Assignment is somehow different:
var {color} = {
color: "green"
}
console.log(color); //green
It tells to looking for color property, so I get "green".
If I have muli pros (color, name, position, state): And I want to get color, and position properties.
var {color, position} = {
color: "green",
name: "Great",
position: "Finland",
state: "Who knows"
}
console.log(color); //green
console.log(position); //Finland
Function
If I have a fn which return an object: And from the object, I just want name and state.
function getObj(){
return{
color: "green",
name: "Great",
position: "Finland",
state: "Who knows"
};
} var {name, state} = getObj();
console.log(name); //Great
console.log(state); //Who knows
From the example, if you want to name something else:
{name: who, state: where}
function getObj(){
return{
color: "green",
name: "Great",
position: "Finland",
state: "Who knows"
};
} var {name: who, state: where} = getObj();
console.log(who); //Great
console.log(where); //Who knows
Array
If I have an array, from which I just want the first and the third element from the array:
var [first,,third] = ['first', 'second', 'third', 'forth'];
console.log(first); //first
console.log(third); //third
If I want to forEach of array: and get the firstName
var people = [
{
firstName: "Allen",
secondName: "Hook",
email: "allen@abc.com"
},
{
firstName: "Anton",
secondName: "Tee",
email: "tee@abc.com"
},
{
firstName: "Yui",
secondName: "Gegg",
email: "gegg@abc.com"
}
]; people.forEach(({firstName}) => console.log(firstName)); /*
Allen
Anton
Yui
* */
To make it clear:
people.foreach(function(person){
console.log(person.firstName);
}); //Destructuring
people.foreach(function( {firstName} ){
console.log(firstName);
}); //Destructuring + Allow
people.foreach( ( {firstName} ) => console.log(firstName); )
or:
var [, secondPerson] = people;
function logEmail({email}){
console.log(email);
}
logEmail(secondPerson); //tee@abc.com
[ES6] 08. Destructuring Assignment -- 1的更多相关文章
- [ES6] 09. Destructuring Assignment -- 2
Read More: http://es6.ruanyifeng.com/#docs/destructuring Array “模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值: Ex ...
- 逆转序列的递归/尾递归(+destructuring assignment)实现(JavaScript + ES6)
这里是用 JavaScript 做的逆转序列(数组/字符串)的递归/尾递归实现.另外还尝鲜用了一下 ES6 的destructuring assignment + spread operator 做了 ...
- ES6 Destructuring Assignment All In One
ES6 Destructuring Assignment All In One ES6 & Destructuring Assignment Axios, vue https://develo ...
- 解构赋值 Destructuring Assignment
解构赋值 Destructuring Assignment ES6中可以通过一定的模式将数组或对象中的值直接赋值给外部变量,称为解构 对象的解构赋值 // 在ES5中,当需要获取一个对象中的变量值的时 ...
- Destructuring Assignment in JS(解构assignment in js)
Destructuring Assignment In JavaScript 更省事,代码显得也清楚. Arrays 传统的声明赋值: let johnDoe = ["John", ...
- destructuring assignment
[destructuring assignment] The destructuring assignment syntax is a JavaScript expression that makes ...
- Object Destructuring Assignment vs Object.assign
Object Destructuring Assignment vs Object.assign // const params = Object.assign({}, this.$route.par ...
- js destructuring assignment bug
js destructuring assignment bug https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Op ...
- ES6新特性:利用解构赋值 (destructuring assignment), 简化代码
本文的Demo的运行环境为nodeJS, 参考:让nodeJS支持ES6的词法----babel的安装和使用 : 解构赋值是一种表达式, 利用这种新语法, 可以直接从数组或者对象中快速提取值 赋值给不 ...
随机推荐
- 走进 Cake for .NET
一.什么是 Cake Cake(C# Make) 是一个使用 C# DSL 面向 Task 的跨平台构建自动化系统,像编译代码,复制文件和文件夹,运行单元测试,压缩文件和构建 NuGet 包. 更多 ...
- CentOS7下python工作环境管理
一.pyenv管理不同的python版本1.下载安装git clone git://github.com/yyuu/pyenv.git ~/.pyenv echo 'export PYENV_ROO ...
- 日志rsyslog
(1)日志基础 1)简介 rsyslog:记录大部分与系统操作有关,例如安全,认证sshd,su,计划任务at,cron rsyslog日志可以存在本地,也可以存放在远程服务器 2)常见的日志文件 / ...
- 如何直接运行python文件
1. 在Windows上是不能直接运行python文件的,但是,在Mac和Linux上是可以的,方法是在.py文件的第一行加上一个特殊的注释: #!/usr/bin/env python3 print ...
- Java流(一)
流: 概念:Java中对文件的操作是以流的方式进行的.流是Java内存中的一组有序数据序列.Java将数据从源(文件.内存.键盘.网络)读入到内存中,形成了流,然后将这些流还可 以写到另外的目的地(文 ...
- 在Eclipse调试Weblogic上的web项目
概述 参考原文:weblogic debug配置. weblogic版本:BEA WebLogic Platform 8.1 工作原理: 利用java tools里面的jdb程序连接远程的JAVA虚拟 ...
- ExtJs之组件(window)
Ext.create('Ext.window.Window',{ title:'', width:400, height:300, constrain:true,//限制窗口不 ...
- 洛谷——P2381 圆圆舞蹈
P2381 圆圆舞蹈 题目描述 熊大妈的乃修在时针的带领下,围成了一个圆圈舞蹈,由于没有严格的教育,奶牛们之间的间隔不一致. 奶牛想知道两只最远的奶牛到底隔了多远.奶牛A到B的距离为A顺时针走和逆时针 ...
- 29、Flask实战第29天:cms用户名渲染和注销功能实现
这节来完成用户名渲染和注销的功能,目前用户名在前端页面是写死的,我们需要动态的展示出来 用户名渲染 实现用户名动态展示,其中一种方法就是在视图函数,根据session信息,获取到user id,通过该 ...
- spring面试题 对DI , AOP概念的理解
1.降低了组件之间的耦合性 ,实现了软件各层之间的解耦 2.可以使用容易提供的众多服务,如事务管理,消息服务等 3.容器提供单例模式支持 4.容器提供了AOP技术,利用它很容易实现如权限拦截,运行期监 ...