ECMAScript 6 入门之变量的解构赋值
1、数组
1、
var a=1,b=2,c=3;
console.log("a:",a)
console.log("b:",b)
console.log("c:",c)
var[q,w,e]=[4,5,6];
console.log("q:",q)
console.log("w:",w)
console.log("e:",e)

2、
var[q,[w,e]]=[4,[5,6]];
console.log("q:",q)
console.log("w:",w)
console.log("e:",e)

3、
var[q,,e]=[4,5,6];
console.log("q:",q)
console.log("e:",e)
console.log("w:",w)

4、
var[q,...e]=[4,5,6];
console.log("q:",q)
console.log("e:",e)

5、默认值
var[q,w,r='default',e='default']=[4,5,6];
console.log("q:",q)
console.log("w:",w)
console.log("r:",r)
console.log("e:",e)

6、
var[q,w,r,e]=[4,5,6];
console.log("q:",q)
console.log("w:",w)
console.log("r:",r)
console.log("e:",e)

2、对象
1、
var obj={
a:1,b:2
}
let{a,b}=obj;
console.log("a:",a)
console.log("b:",b)

var obj={
a:1,b:2
}
let{c,b}=obj;
console.log("c:",c)
console.log("b:",b)

2、重命名
var obj={
a:1,b:2
}
let{a:A,b}=obj;
console.log("b:",b)
console.log("A:",A)
console.log("a:",a)

3、
var obj={
a:1,b:2
}
let{a,b}=obj;
let a;

4、
var obj={
a:1,b:2
}
let a;
{a,b}=obj;

var obj={
a:1,b:2
}
let a=0;
console.log("a:",a)
({a,b}=obj);
console.log("b:",b)
console.log("a:",a)

5、
var obj={
arr:[
'Yo.',
{
a:1
}
]
}
let {arr:[greet,{a}]}=obj;
console.log("greet:",greet);
console.log("a:",a);

6、
let{a=1,b=2}={a:10}
console.log("b:",b);
console.log("a:",a);

let{a:A=1,b=2}={A:10}
console.log("b:",b);
console.log("A:",A);
console.log("a:",a);

7、
let res={
status:200,
id:12,
data:[{name:'bobo'},{name:'jjjj'}]
}
let {status,id,data}=res;
console.log("status:",status);
console.log("id:",id);
console.log("data:",data);

8、
let{floor,pow}=Math;
let a=1.9;
console.log("floor(a):",floor(a));//取整数
console.log("pow(2,3):",pow(2,3));//2的3次方

3、其他
1、
var len='yo.'.length;
console.log('len:',len)
let{length}='yo.'
console.log('length:',length)

2、
let[a,b,c]='yo.';
console.log(a,b,c);

3、
var arr=[1,2];
function test(a, b) {
console.log("a:",a);
console.log("b:",b);
}
test(arr[0],arr[1]);

var arr=[1,2];
function test([a, b]) {
console.log("a:",a);
console.log("b:",b);
}
test(arr);

4、
var obj={b:2,a:1}
function test({a, b}) {
console.log("a:",a);
console.log("b:",b);
}
test(obj);

5、
var obj={b:2}
function test({a=10, b}) {
console.log("a:",a);
console.log("b:",b);
}
test(obj);

ECMAScript 6 入门之变量的解构赋值的更多相关文章
- ES6入门之变量的解构赋值(二)
前言 在上一章 ES6入门之let和const命令中我们对ES6的相关语法已经有了初步了解,上一章中我们主要学习了三大部分的内容,let命令的使用,块级作用域,const命令的使用,那么从本篇博客将进 ...
- ES6标准入门之变量的解构赋值简单解说
首先我们来看一看解构的概念,在ES6标准下,允许按照一定模式从数组和对象中提取值,然后对变量进行赋值,这被称作解构,简而言之粗糙的理解就是变相赋值. 解构赋值的规则是,只要等号右边的值不是对象或者数组 ...
- ECMAScript 6入门 - 变量的解构赋值
定义 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 解构赋值不仅适用于var命令,也适用于let和const命令. 解构赋值的规则是,只要 ...
- ECMAScript 6之变量的解构赋值
1,数组的解构赋值 基本用法 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定值. var a = 1; va ...
- ECMAScript6 入门教程记录 变量的解构赋值
(1)变量的解构赋值 基本用法:ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). let a = 1; let b = 2; let c = ...
- ES6入门——变量的解构赋值
1.数组的解构赋值 以前为变量复制,只能直接指定值.现在ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 本质上,这种写法属于模式匹配,只要等 ...
- ES6标准入门 第三章:变量的解构赋值
解构赋值:从数组和对象中提取值,对变量进行赋值. 本质上,这种写法属于“匹配模式”:只要等号两边的模式相同,左边的变量就会被赋予对应的值. 1.数组的结解构赋值 基本用法 let [foo, [[ba ...
- 《ES6标准入门》(阮一峰)--3.变量的解构赋值
1.数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定值. let a = 1; l ...
- ES6学习之变量的解构赋值
前言:什么是ES6?ECMAScript 6(简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了.其中相比较于ES5新增了诸多的特性,并且ES6可转换为ES5的语法.- ...
随机推荐
- IntelliJ IDEA 2018.3 重大升级(转)
|0前言 2018.11.28 IntelliJ IDEA 2018.3 正式版发布.对于一个忠实爱好者,迫不及待的我下载了最新版本来体验下.而且 IDEA 今年的第三次重大更新提供了不容错过的显著功 ...
- EntityFramework Core
1,安装EF Core 在.csproj中添加一下配置,用于使用dotnet ef 命令 <ItemGroup> <DotNetCliToolReference Include=&q ...
- v-on指令监听dom事件
一.无参 <div id="J_app"> <button v-on:click="eatWhat">吃啥</button> ...
- Python学习 ——正则表达式
正则表达式是一个特殊的字符序列,它能帮助你方便的检查一个字符串是否与某种模式匹配. re 模块使 Python 语言拥有全部的正则表达式功能. compile 函数根据一个模式字符串和可选的标志参数生 ...
- PHP is_numeric 检测变量是否为数字或数字字符串
bool is_numeric ( mixed $var ) 如果 var 是数字和数字字符串则返回 TRUE,否则返回 FALSE. For example 1: <?php $v = is_ ...
- [BZOJ2238]Mst
[BZOJ2238]Mst 题目大意: 给你一个\(n(n\le50000)\)个点,\(m(m\le10^5)\)条边的无向带权图.\(q(q\le10^5)\)次询问,每次询问去掉一条边后图能否连 ...
- navLI鼠标滑上显示下拉导航
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>l ...
- C++ 经典知识点面试题
1.指针的优点和缺点 优点:灵活高效 (1)提高程序的编译效率和执行速度(数组下标往下移时,需要使用乘法和加法,而指针直接使用++即可) (2)通过指针可使用主调函数和被调函数之间共享变量或数据结构, ...
- React系列文章:JSX生成真实DOM结点
在上一篇文章中,我们介绍了Babel是如何将JSX代码编译成可执行代码的,随后也实现了一个自己的解析器,模拟了Babel编译的过程. 现在我们再来回顾一下,假定有如下业务代码: const style ...
- linux 配置sendmail支持php mail 函数
参考自:http://blog.csdn.net/shiningstarpxx/article/details/41008325 http://blog.sina.com.cn/s/blog_65c8 ...