ES6知识点整理之数组解构和字符串解构的应用示例


Posted in Javascript onApril 17, 2019

本文实例讲述了ES6知识点整理之数组解构和字符串解构的应用。分享给大家供大家参考,具体如下:

ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring), 而数组的解构赋值是从数组中提取值,按照对应位置,对变量赋值。

ES6之前的赋值操作

var arr = [1,2,3];
var a = arr[0];
var b = arr[1];
var c = arr[2];
console.log(a,b,c); // 1 2 3

对一维数组的解构赋值的应用

var arr = [1,2,3];
var [a,b,c] = arr;
console.log(a,b,c); // 1 2 3

对多维数组的解构赋值的应用

let arr = [22, [5,8], 11];
let [a,[b,c],d] = arr;
console.log(a,b,c,d); // 22 5 8 11

解构赋值用于变量的交换举例

let x = 11;
let y = 22;
[y,x] = [x,y];
console.log(x,y); // 22 11

解构赋值中不完全的解析示例

let arr = [22, [5,8], 11];
let [a,[b],c] = arr;
console.log(a, b, c); // 22 5 11
let [m,[,n],o] = arr;
console.log(m, n, o); // 22 8 11

不能被数组解析的值

let [m] = "";
console.log(m); // undefined;
let [x,y] = NaN; // NaN is not iterable. 不能被数组解析的值:NaN, undefined, null, {}

实现了iterator接口的类型都可以被解析赋值

let [x,y] = new Set([22, 33]);
console.log(x,y); // 22 33

自己创造一个实现iterator接口的对象进行解构赋值

class Group{
 constructor() {
 }
 next() {
  return {value:'Joh', done: false};
 }
 [Symbol.iterator]() {
  return this;
 }
}
let group = new Group();
let [x,y,z,m,n] = group;
console.log(x,y,z,m,n); // Joh Joh Joh Joh Joh 备注:这里如果类中的next的done为true,那么全为undefined

… 运算符 转换成数组的解构举例

var [x,w, ...y] = [1,2,3,4,5,6];
console.log(x,w, y); // 1 2 [3,4,5,6]

解构数组的默认值

如果数组中的不是undefined,都会被成功解构, 不会被默认值替代

let [x=15, y] = [undefined, 12];
console.log(x,y); // 15 12
let [m=12, n] = [null, 10];
console.log(m, n); // null 10

字符串解构的处理

var [a,b,c] = 'hello';
console.log(a,b,c); // h e l

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.3water.com/code/HtmlJsRun测试上述代码运行结果。

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
父子窗体间传递JSON格式的数据的代码
Dec 25 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
Jun 05 Javascript
JavaScript定时器和优化的取消定时器方法
Jul 03 Javascript
从零学习node.js之简易的网络爬虫(四)
Feb 22 Javascript
Vue2.x中的父子组件相互通信的实现方法
May 02 Javascript
JavaScript 跨域之POST实现方法
May 07 Javascript
vue使用自定义icon图标的方法
May 14 Javascript
分享5个好用的javascript文件上传插件
Sep 16 Javascript
vue项目首屏打开速度慢的解决方法
Mar 31 Javascript
微信小程序实现同时上传多张图片
Feb 03 Javascript
Node.js中文件系统fs模块的使用及常用接口
Mar 06 Javascript
基于canvas实现手写签名(vue)
May 21 Javascript
ES6知识点整理之对象解构赋值应用示例
Apr 17 #Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
Apr 17 #Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
Apr 17 #Javascript
一篇文章,教你学会Vue CLI 插件开发
Apr 17 #Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
Apr 17 #Javascript
mpvue性能优化实战技巧(小结)
Apr 17 #Javascript
node.js监听文件变化的实现方法
Apr 17 #Javascript
You might like
php下网站防IP攻击代码,超级实用
2010/10/24 PHP
php入门学习知识点七 PHP函数的基本应用
2011/07/14 PHP
PHP实现把数字ID转字母ID
2013/08/12 PHP
php获得url参数中具有&的值的方法
2014/03/05 PHP
PHP 双链表(SplDoublyLinkedList)简介和使用实例
2015/05/12 PHP
JavaScript 数组运用实现代码
2010/04/13 Javascript
TextArea不支持maxlength的解决办法(jquery)
2011/09/13 Javascript
使用js实现的简单拖拽效果
2015/03/18 Javascript
jQuery Real Person验证码插件防止表单自动提交
2015/11/06 Javascript
详解AngularJS中的filter过滤器用法
2016/01/04 Javascript
js判断数组key是否存在(不用循环)的简单实例
2016/08/03 Javascript
JSON 数据详解及实例代码分析
2017/01/20 Javascript
深究AngularJS中ng-drag、ng-drop的用法
2017/06/12 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
2017/09/20 Javascript
vuex进阶知识点巩固
2018/05/20 Javascript
微信小程序实现下拉菜单切换效果
2020/03/30 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
2019/04/08 Javascript
使用React手写一个对话框或模态框的方法示例
2019/04/25 Javascript
如何获取vue单文件自身源码路径
2019/05/06 Javascript
vue子路由跳转实现tab选项卡
2019/07/24 Javascript
微信小程序实现可长按移动控件
2020/11/01 Javascript
用Python编写一个简单的FUSE文件系统的教程
2015/04/02 Python
Sanic框架请求与响应实例分析
2018/07/16 Python
python视频按帧截取图片工具
2019/07/23 Python
使用python去除图片白色像素的实例
2019/12/12 Python
解决pycharm下pyuic工具使用的问题
2020/04/08 Python
浅析PyCharm 的初始设置(知道)
2020/10/12 Python
英国派对礼服和连衣裙购物网站:TFNC London
2018/07/07 全球购物
党员群众路线承诺书
2014/05/20 职场文书
团日活动总结模板
2014/06/25 职场文书
“四风”问题对照检查材料思想汇报
2014/09/16 职场文书
悬空寺导游词
2015/02/05 职场文书
小学教师教学随笔
2015/08/14 职场文书
2016年中秋节晚会领导致辞
2015/11/26 职场文书
导游词之西安大清真寺
2019/12/17 职场文书
mapstruct的用法之qualifiedByName示例详解
2022/04/06 Java/Android