基于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 相关文章推荐
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
Nov 12 Javascript
JS获取浏览器语言动态加载JS文件示例代码
Oct 31 Javascript
javascript实现跨域的方法汇总
Jun 25 Javascript
JavaScript创建对象的方式小结(4种方式)
Dec 17 Javascript
javascript自动恢复文本框点击清除后的默认文本
Jan 12 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
Jul 27 Javascript
Node.js开启Https的实践详解
Oct 25 Javascript
基于Bootstrap框架实现图片切换
Mar 10 Javascript
Vue中props的详解
May 16 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
Nov 21 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
Feb 11 Javascript
创建与框架无关的JavaScript插件
Dec 01 Javascript
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提取数据库内容中的图片地址并循环输出
2010/03/21 PHP
php.ini中的request_order推荐设置
2015/05/10 PHP
浅谈PHP链表数据结构(单链表)
2016/06/08 PHP
JQuery 学习笔记 选择器之四
2009/07/23 Javascript
通过javascript获取iframe里的值示例代码
2013/06/24 Javascript
基于NodeJS的前后端分离的思考与实践(三)轻量级的接口配置建模框架
2014/09/26 NodeJs
jQuery mobile 移动web(4)
2015/12/20 Javascript
jquery form表单获取内容以及绑定数据
2016/02/24 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
2016/02/26 Javascript
jQuery 更改checkbox的状态,无效的解决方法
2016/07/22 Javascript
原生js实现中奖信息无间隙滚动效果
2017/01/18 Javascript
js实现用户输入的小写字母自动转大写字母的方法
2017/01/21 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
2017/08/29 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
2017/12/29 Javascript
vue 实现数字滚动增加效果的实例代码
2018/07/06 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
2019/01/30 Javascript
jQuery操作动画完整实例分析
2020/01/10 jQuery
javascript操作向表格中动态加载数据
2020/08/27 Javascript
跟老齐学Python之玩转字符串(2)更新篇
2014/09/28 Python
Python和perl实现批量对目录下电子书文件重命名的代码分享
2014/11/21 Python
python 第三方库的安装及pip的使用详解
2017/05/11 Python
Python插件virtualenv搭建虚拟环境
2017/11/20 Python
python机器学习理论与实战(五)支持向量机
2018/01/19 Python
matplotlib 输出保存指定尺寸的图片方法
2018/05/24 Python
pyqt实现.ui文件批量转换为对应.py文件脚本
2019/06/19 Python
python opencv 简单阈值算法的实现
2019/08/04 Python
Python基础之函数原理与应用实例详解
2020/01/03 Python
基于PyQT实现区分左键双击和单击
2020/05/19 Python
信息管理专业推荐信
2013/10/29 职场文书
电子商务专业学生的自我鉴定
2013/11/28 职场文书
英语教育专业自荐信
2014/05/29 职场文书
乡镇党的群众路线教育实践活动总结报告
2014/10/30 职场文书
培训督导岗位职责
2015/04/10 职场文书
团拜会主持词
2015/07/04 职场文书
《曾国藩家书》读后感——读家书,立家风
2019/08/21 职场文书
Python机器学习算法之决策树算法的实现与优缺点
2021/05/13 Python