[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的安装和使用 : 解构赋值是一种表达式, 利用这种新语法, 可以直接从数组或者对象中快速提取值 赋值给不 ...
随机推荐
- .net core 2.0学习记录(三):内置IOC与DI的使用
本篇的话介绍下IOC和ID的含义以及如何使用.Net Core中的DI. 一.我是这么理解IOC和DI的: IOC:没有用IOC之前是直接new实例来赋值,使用IOC之后是通过在运行的时候根据配置来实 ...
- NodeJs中使用jQuery?
在NodeJs中使用jQuery? 有时候在项目中需要使用jq在node中,但是使用起来却不是那么友好,那么现在该怎么做?改写JQ插件?将JQ插件打包成npm包,再在项目中进行引用?显然这些相比较于难 ...
- margin和spacing的区别
margin指的是与边框间的距离. spacing指的是组件间的距离
- 关于自建yum源拾遗
yum参数解释[updates]--->源name=CentOS-$releasever - Updates --->源的名字baseurl=http://mirror.centos.or ...
- CentOS6.5修改/etc/pam.d/sshd后root无法ssh登陆
现象:由于公司需要服务器的登陆操作进行安全加固,同事为了省事,直接把CentOS7上的/etc/pam.d/sshd替换掉CentOS6.5上的/etc/pam.d/sshd,导致root用户ssh登 ...
- [USACO 2017 Feb Gold] Tutorial
Link: 传送门 A: 分层图最短路(其实就是最短路转移时多记录一维的数据 #include <bits/stdc++.h> using namespace std; #define X ...
- BZOJ 3997 [TJOI2015]组合数学(单调DP)
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=3997 [题目大意] 给出一个网格图,其中某些格子有财宝,每次从左上角出发,只能向下或右 ...
- 【线性基】hdu3949 XOR
给你n个数,问你将它们取任意多个异或起来以后,所能得到的第K小值? 求出线性基来以后,化成简化线性基,然后把K二进制拆分,第i位是1就取上第i小的简化线性基即可.注意:倘若原本的n个数两两线性无关,也 ...
- 【Trie】MIPT-2016 Pre-Finals Workshop, Taiwan NTU Contest, Sunday, March 27, 2016 Problem B. Be Friends
题意:一个n个点的完全图,点带权,边权是两端点点权的异或值.问你最小生成树. 一个性质,把所有点按照二进制最高位是否为1划分为2个集合,那么这两个集合间只会有一条边.可以递归处理. 把所有点建成01T ...
- 【极角排序】【扫描线】hdu6127 Hard challenge
平面上n个点,每个点带权,任意两点间都有连线,连线的权值为两端点权值之积.没有两点连线过原点.让你画一条过原点直线,把平面分成两部分,使得直线穿过的连线的权值和最大. 就把点极角排序后,扫过去,一侧的 ...