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的更多相关文章

  1. [ES6] 09. Destructuring Assignment -- 2

    Read More: http://es6.ruanyifeng.com/#docs/destructuring Array “模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值: Ex ...

  2. 逆转序列的递归/尾递归(+destructuring assignment)实现(JavaScript + ES6)

    这里是用 JavaScript 做的逆转序列(数组/字符串)的递归/尾递归实现.另外还尝鲜用了一下 ES6 的destructuring assignment + spread operator 做了 ...

  3. ES6 Destructuring Assignment All In One

    ES6 Destructuring Assignment All In One ES6 & Destructuring Assignment Axios, vue https://develo ...

  4. 解构赋值 Destructuring Assignment

    解构赋值 Destructuring Assignment ES6中可以通过一定的模式将数组或对象中的值直接赋值给外部变量,称为解构 对象的解构赋值 // 在ES5中,当需要获取一个对象中的变量值的时 ...

  5. Destructuring Assignment in JS(解构assignment in js)

    Destructuring Assignment In JavaScript 更省事,代码显得也清楚. Arrays 传统的声明赋值: let johnDoe = ["John", ...

  6. destructuring assignment

    [destructuring assignment] The destructuring assignment syntax is a JavaScript expression that makes ...

  7. Object Destructuring Assignment vs Object.assign

    Object Destructuring Assignment vs Object.assign // const params = Object.assign({}, this.$route.par ...

  8. js destructuring assignment bug

    js destructuring assignment bug https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Op ...

  9. ES6新特性:利用解构赋值 (destructuring assignment), 简化代码

    本文的Demo的运行环境为nodeJS, 参考:让nodeJS支持ES6的词法----babel的安装和使用 : 解构赋值是一种表达式, 利用这种新语法, 可以直接从数组或者对象中快速提取值 赋值给不 ...

随机推荐

  1. .net core 2.0使用NLog写日志文件

    原文地址:传送门 之前也看了 linezero 大佬写的教程,但是总是没有成功写入日志文件.按照 曲廉卿 的已成功,以下正文: 最近研究了一下NLog的使用方式,简单的入了一下门. 实现的功能,对于不 ...

  2. node修改全局环境路径 与 全局后出现sh:exe command not found

    修改全局环境路径 当安装nodeJs时候需要修改全局环境的指向,先看看npm config get prefix  全局环境在哪里 然后执行更换命令,一个是主文件一个是缓存文件 npm config ...

  3. python正则的中文处理(转)

    匹配中文时,正则表达式规则和目标字串的编码格式必须相同 print sys.getdefaultencoding() text =u"#who#helloworld#a中文x#" ...

  4. 战火魔兽CJQ圣印问题

    本来一直是玩的T的. 一次偶然机会打了次团本,用CJQ(毒蛇),在副本中问CJQ用什么圣印 有人说命令,有人说腐蚀... 对此做先研究 无BUFF木桩测试:5分钟(开sp翅膀,不踩奉献,技能什么好了按 ...

  5. 从零开始做SSH项目(二)

    使用hibernate测试加载数据.删除数据和修改数据等功能时,针对的是与数据库表user对应的User. 为了简化对其他数据表对应的实体类的持久化操作,可以在项目中创建一个BaseHibernate ...

  6. 洛谷P3385 [模板]负环 [SPFA]

    题目传送门 题目描述 暴力枚举/SPFA/Bellman-ford/奇怪的贪心/超神搜索 输入输出格式 输入格式: 第一行一个正整数T表示数据组数,对于每组数据: 第一行两个正整数N M,表示图有N个 ...

  7. SublimeCodeIntel代码自动补全配置

    主要使用python3,所有配置以python3为例.其他语言同理.利用sublimeCodeIntel插件可以实现自动提示python3代码.跳转追踪自定义函数.查看系统函数等.功能还是相当强大的. ...

  8. 【模拟退火】poj1379 Run Away

    题意:平面上找一个点,使得其到给定的n个点的距离的最小值最大. 模拟退火看这篇:http://www.cnblogs.com/autsky-jadek/p/7524208.html 这题稍有不同之处仅 ...

  9. 20162304 实验二《Java面向对象程序设计》实验报告

    20162304 实验二<Java面向对象程序设计>实验报告 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S.O.L.I.D原则 ...

  10. 1.1(JavaScript学习笔记)、JavaScript基础

    一.JavaScript简介 JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型. 它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端 ...