[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的安装和使用 : 解构赋值是一种表达式, 利用这种新语法, 可以直接从数组或者对象中快速提取值 赋值给不 ...
随机推荐
- SQL快速入门 ( MySQL快速入门, MySQL参考, MySQL快速回顾 )
SQL 先说点废话,很久没发文了,整理了下自己当时入门 SQL 的笔记,无论用于入门,回顾,参考查询,应该都是有一定价值的,可以按照目录各取所需.SQL数据库有很多,MySQL是一种,本文基本都是SQ ...
- 前端javascript实现二进制读写操作
由于种种原因,在浏览器中无法像nodejs那样操作二进制. 最近写了一个在浏览器端操作读写二进制的帮助类 !function (entrance) { "use strict"; ...
- mp4文件DASH切片程序
mp4文件DASH切片程序 一.简介 按照DASH标准文档要求与现有的DASH切片(生成DASH切片参见mb4box命令简介)来生成Initialization Segment与Media Segme ...
- Qt精简编译方法总结
原文请看:http://blog.csdn.net/loaden/article/details/6061702 Qt如果采取默认编译安装,一般都要占用上G的空间.当初自己不想涉及Qt的一个原因,就是 ...
- php导出excel时间错误(同一个时间戳,用date得到不同的时间)
通过在date之前设置时区解决了 date_default_timezone_set("Asia/Shanghai"); $schedule_time = date("Y ...
- 读书笔记(高性能javascript)(一)
1.加载与执行: (1)将脚本放在底部:(否则会阻塞) (2)由于每个<script>标签初始下载时都会阻塞页面渲染,所以减少页面包含的<script>标签数量有助于改善这一情 ...
- js实现杨辉三角
杨辉三角是计算二项式乘方展开式的系数时必不可少的工具.是由数字排列而成的三角形数表. 资料:杨辉三角第n行的第1个数为1,第二个数为1×(n-1),第三个数为1×(n-1)×(n-2)/2,第四个数为 ...
- canvas元素内容生成图片
转自https://segmentfault.com/a/1190000003853394 想要将canvas元素当前显示的内容生成为图像文件,我们首先要获取canvas中的数据,在HTML5 < ...
- 【主席树】【最近公共祖先】hdu6162 Ch’s gift
题意:一棵树,每个点有个权值,m次询问,每次给你一条链和两个值a,b,问你这条链上权值在[a,b]之间的权值的和是多少. std竟然是2个log的……完全没必要链剖,每个结点的主席树从其父节点转移过 ...
- Vue视图下
3 Vue视图 3.5 样式绑定 class绑定 <p :class='对象'> <p :class="数组"> <p :class="{类 ...