[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的安装和使用 : 解构赋值是一种表达式, 利用这种新语法, 可以直接从数组或者对象中快速提取值 赋值给不 ...
随机推荐
- python之md5模块
python的md5模块使用非常简单,包括以下几个函数: md5.new([arg]) 返回一个md5对象,如果给出参数,则相当于调用了update(arg) md5.updte(arg) 用stri ...
- 345. Reverse Vowels of a String【Easy】【双指针-反转字符串中的元音字符】
Write a function that takes a string as input and reverse only the vowels of a string. Example 1: In ...
- 并发系列2-大白话聊聊Java并发面试问题之Java 8如何优化CAS性能?【石杉的架构笔记】
- 从Windows复制文件到Linux显示乱码问题
(1).文件名乱码 这并不是所有人都会碰到的问题,一般常见于使用putty的用户.使用convmv命令可以解决这个问题. 我写详细一点还原真实场景,首先我来上传一个测试文件“a此文件在windows下 ...
- 使用ICSharpCode.SharpZipLib+Aspose模板批量导出Word
由于是Web端的项目,所以点击按钮之后直接从Aspose模板读取数据,然后在内存中操作,而不是下载到本地后再打包弄到内存中下载.废话不多说,直接上代码 public ActionResult Expo ...
- BM算法--串匹配
BM(Boyer-Moore)算法,后缀匹配,是指模式串的比较从右到左,模式串的移动也是从左到右的匹配过程,一般情况比KMP算法要快.时间复杂度O(m/n) C++描述(教师版) int BM(cha ...
- linux基础环境搭建(2)
打开虚拟机,用Xshell连接之前,首先我们要获取IP的地址 先输入获取 IP的命令 ip addr 获取ipifup (网卡名字) #网卡启动ifdown (网卡名字) #网卡关闭 没有获取到的 ...
- <摘录>Linux 环境下编译 0.11版本内核 kernel
系统环境:Fedora 13 + gcc-4.4.5 最近在看<linux内核0.11完全注释>一书,由于书中涉及汇编语言的地方众多,本人在大学时汇编语言学得一塌糊涂,所以实在看不下去了, ...
- Delphi 类引用 Class Reference 元类 MetaClass 用法
delphi中类引用的使用实例 类引用类引用(Class Reference)是一种数据类型,有时又称为元类(MetaClass),是类的类型的引用.类引用的定义形式如下: class of type ...
- Linux(CentOS)下squid代理服务器配置-五岳之巅
squid是linux下的一款代理服务器软件,他可以共享网络 ,加快访问速度,节约通信带宽,同时防止内部主机受到攻击,限制用户访问,完善网络管理 rpm -qa|grep squidyum insta ...