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. centos7安装与卸载JDK

    用yum安装JDK 首先检查jdk是否安装 rpm -qa | grep java      或者   java -version 1.查看yum库中都有哪些jdk版本(暂时只发现了openjdk) ...

  2. 【剑指offer】面试题 17. 打印从 1 到最大的 n 位数

    面试题 17. 打印从 1 到最大的 n 位数 题目描述 题目:输入数字 n,按顺序打印出从 1 最大的 n 位十进制数.比如输入 3,则打印出 1.2.3 一直到最大的 3 位数即 999. 解答过 ...

  3. SQL注入工具实践

    程序简介 超级SQL注入工具(SSQLInjection)是一款基于HTTP协议自组包的SQL注入工具,支持出现在HTTP协议任意位置的SQL注入,支持各种类型的SQL注入,支持HTTPS模式注入. ...

  4. Java流(一)

    流: 概念:Java中对文件的操作是以流的方式进行的.流是Java内存中的一组有序数据序列.Java将数据从源(文件.内存.键盘.网络)读入到内存中,形成了流,然后将这些流还可 以写到另外的目的地(文 ...

  5. POJ 3662 Telephone Lines (分层图)

    Telephone Lines Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 6785   Accepted: 2498 D ...

  6. Flask实战第44天:完成前台注册功能

    注册功能后端逻辑 用户注册要把注册的表单提交上来,因此,我要先对表单进行验证,编辑front.forms from apps.forms import BaseForm from wtforms im ...

  7. Flask实战第40天:图片验证码生成技术

    图片验证码生成 安装pillow pip install pillow 在utils下新建python package命名为captcha 把需要需要用到的字体放在captcha下 编辑captcha ...

  8. 使用appframework前端框架中输入框圆角问题

    目前使用HTML5技术来开发手机跨平台app已经成为了曾经的web开发人员介入移动开发的一条捷径.与此对应也出现了很多新的技术来支撑这样的开发方式,例如国外的phonegap和国内的APPcan等.很 ...

  9. [Lydsy1704月赛] 最小公倍佩尔数

    4833: [Lydsy1704月赛]最小公倍佩尔数 Time Limit: 8 Sec  Memory Limit: 128 MBSubmit: 202  Solved: 99[Submit][St ...

  10. Problem C: 矩阵对角线求和

    #include<stdio.h> int main() { ][]; scanf("%d",&n); ,sum2=; ;i<n;i++) ;j<n ...