基于ES6作用域和解构赋值详解


Posted in Javascript onNovember 03, 2017

ES6 强制开启严格模式

作用域

•var 声明局部变量,for/if花括号中定义的变量在花括号外也可访问

•let 声明的变量为块作用域,变量不可重复定义

•const 声明常量,块作用域,声明时必须赋值,不可修改

// const声明的k指向一个对象,k本身不可变,但对象可变

function test() {
 const k={
  a:1
 }
 k.b=3;
 
 console.log(k);
}

test()解构赋值

{
 let a, b, 3, rest;
 [a, b, c=3]=[1, 2];

 console.log(a, b);
}
//output: 1 2 3

{
 let a, b, 3, rest;
 [a, b, c]=[1, 2];

 console.log(a, b);
}
//output: 1 2 undefined

{
 let a, b, rest;
 [a, b, ...rest] = [1, 2, 3, 4, 5, 6];
 console.log(a, b, rest);
}
//output:1 2 [3, 4, 5, 6]

{
 let a, b;
 ({a, b} = {a:1, b:2})

 console.log(a ,b);
}
//output: 1 2

使用场景

变量交换

{
 let a = 1;
 let b = 2;
 [a, b] = [b, a];
 console.log(a, b);
}

获取多个函数值

{
 function f(){
  return [1, 2]
 }
 let a, b;
 [a, b] = f();
 console.log(a, b);
}

获取多个函数返回值

{
 function f(){
  return [1, 2, 3, 4, 5]
 }
 let a, b, c;
 [a,,,b] = f();
 console.log(a, b);
}
//output: 1 4

{
 function f(){
  return [1, 2, 3, 4, 5]
 }
 let a, b, c;
 [a, ...b] = f();
 console.log(a, b);
}
//output: 1 [2, 3, 4, 5]

对象解构赋值

{
 let o={p:42, q:true};
 let {p, q, c=5} = o;

 console.log(p ,q);
}
//output: 42 true 5

获取json值

{
 let metaData={
  title: 'abc',
  test: [{
   title: 'test',
   desc: 'description'
  }]
 }
 let {title:esTitle, test:[{title:cnTitle}]} = metaData;
 console.log(esTitle, cnTitle);
}
//Output: abc test

以上这篇基于ES6作用域和解构赋值详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
推荐11款jQuery开发的复选框和单选框美化插件
Aug 02 Javascript
图解prototype、proto和constructor的三角关系
Jul 31 Javascript
将angular-ui的分页组件封装成指令的方法详解
May 10 Javascript
angularjs封装$http为factory的方法
May 18 Javascript
javascript 中select框触发事件过程的分析
Aug 01 Javascript
Angular 数据请求的实现方法
May 07 Javascript
webpack file-loader和url-loader的区别
Jan 15 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
Sep 26 Javascript
vue element-ui读取pdf文件的方法
Nov 26 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
Oct 27 Javascript
详解JavaScript执行模型
Nov 16 Javascript
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
AngularJS中controller控制器继承的使用方法
Nov 03 #Javascript
vue解决跨域路由冲突问题思路解析
Nov 03 #Javascript
React-intl 实现多语言的示例代码
Nov 03 #Javascript
ztree实现左边动态生成树右边为内容详情功能
Nov 03 #Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
Nov 03 #Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
Nov 03 #Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
Nov 03 #Javascript
You might like
PHP学习资料汇总与网址
2007/03/16 PHP
PHPMailer的主要功能特点和简单使用说明
2014/02/17 PHP
php中__toString()方法用法示例
2016/12/07 PHP
PHP结合Vue实现滚动底部加载效果
2017/12/17 PHP
php命名空间设计思想、用法与缺点分析
2019/07/17 PHP
PHP字符串与数组处理函数用法小结
2020/01/07 PHP
JQuery入门——事件切换之toggle()方法应用介绍
2013/02/05 Javascript
解析URI与URL之间的区别与联系
2013/11/22 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
2013/12/30 Javascript
小议JavaScript中Generator和Iterator的使用
2015/07/29 Javascript
微信小程序 MD5加密登录密码详解及实例代码
2017/01/12 Javascript
JS中如何实现点击a标签返回页面顶部的问题
2017/01/19 Javascript
Flask中获取小程序Request数据的两种方法
2017/05/12 Javascript
浅谈JavaScript作用域和闭包
2017/09/18 Javascript
vue中post请求以a=a&b=b 的格式写遇到的问题
2018/04/27 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
2018/09/03 Javascript
解决vue cli使用typescript后打包巨慢的问题
2019/09/30 Javascript
vue项目中使用vue-layer弹框插件的方法
2020/03/11 Javascript
使用vue编写h5公众号跳转小程序的实现代码
2020/11/27 Vue.js
python处理图片之PIL模块简单使用方法
2015/05/11 Python
python实现给数组按片赋值的方法
2015/07/28 Python
使用pandas模块读取csv文件和excel表格,并用matplotlib画图的方法
2018/06/22 Python
Python+OpenCV目标跟踪实现基本的运动检测
2018/07/10 Python
python 等差数列末项计算方式
2020/05/03 Python
HTML5 canvas基本绘图之绘制曲线
2016/06/27 HTML / CSS
销售员自我评价怎么写
2013/09/19 职场文书
英语系毕业生自荐信
2013/10/31 职场文书
自主招生自荐信指南
2014/02/04 职场文书
婚礼主持词
2014/03/13 职场文书
小学二年级数学教学计划
2015/01/20 职场文书
自主招生专家推荐信
2015/03/26 职场文书
2015年党员岗位承诺书
2015/04/27 职场文书
胡桃夹子观后感
2015/06/11 职场文书
公司年会晚会开幕词
2019/04/02 职场文书
python3读取文件指定行的三种方法
2021/05/24 Python
Elasticsearch 配置详解
2022/04/19 Java/Android