[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的安装和使用 : 解构赋值是一种表达式, 利用这种新语法, 可以直接从数组或者对象中快速提取值 赋值给不 ...
随机推荐
- 用Lucene.net对数据库建立索引及搜索<转>
用Lucene.net对数据库建立索引及搜索 最近我一直在研究 Lucene.net ,发现Lucene.net对数据库方面建索引的文章在网上很少见,其实它是可以对数据库进行索引的,我闲着没事,写了个 ...
- 最短路-Floyd
简介: 算法的特点: 弗洛伊德算法是解决任意两点间的最短路径的一种算法,可以正确处理有向图或有向图或负权(但不可存在负权回路)的最短路径问题,同时也被用于计算有向图的传递闭 包. 算法思想: 通过F ...
- (2)go 规范,变量,基本数据类型
.一.规范 main 函数为入口 严格区分大小写 不需要加分号 一行只写一条语句 定义的变量或者导入的包必须要用到,否则编译时会报错 左括号不能单独一行 逗号可以用来在换行时连接字符串 标识符由字母数 ...
- Java学习之路(转)
Java学习之路(书籍推荐) 一.基础类 1.<Thinking in java>(阅读2遍),入门第一位是建立正确的概念 2.<Core Java>这本书更贴近实践,更多 ...
- 树形DP题目集合
[树形DP](https://cn.vjudge.net/contest/123963#overview) #include<cstdio> #include<string> ...
- 洛谷P1850换教室
题目传送门 理解题意:给定你一个学期的课程和教室数量以及教室之间的距离还有换教室成功的概率,求一个学期走的距离的期望最小值 题目是有够恶心的,属于那种一看就让人不想刷的题目...很明显的动规,但是那个 ...
- NOIP2018 提高组题解
Day1 T1 据说是原题积木大赛,但是考场上蠢了,只会写数据结构,于是写了一个线段树\(+\)堆\(+\)贪心,先选出最小的,然后区间修改,然后把左右两端区间的最小值丢进堆里,不停从堆中去最小值更新 ...
- HDU 6073 Matching In Multiplication(拓扑排序)
Matching In Multiplication Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 524288/524288 K ( ...
- Codeforces Round #294 (Div. 2) A and B and Lecture Rooms(LCA 倍增)
A and B and Lecture Rooms time limit per test 2 seconds memory limit per test 256 megabytes input st ...
- 初见Python<4>:字典
序列是python中的一种数据结构,映射是另一种.映射(mapping)通过名字来引用值.python内建的唯一一种映射结构是字典.字典中的值没有特殊的顺序,但都存储在一个特定的键中.键可以是数字.字 ...