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 相关文章推荐
JavaScript 变量作用域分析
Jul 04 Javascript
jQuery中after的两种用法实例
Jul 03 Javascript
登陆成功后自动计算秒数执行跳转
Jan 23 Javascript
jQuery中:empty选择器用法实例
Dec 30 Javascript
JavaScript插件化开发教程(六)
Feb 01 Javascript
jQuery代码实现发展历程时间轴特效
Jul 30 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
Aug 18 Javascript
理解javascript中的闭包
Jan 11 Javascript
layui下拉列表select实现可输入查找的方法
Sep 28 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
Mar 14 Javascript
ssm+vue前后端分离框架整合实现(附源码)
Jul 08 Javascript
vue3.0 上手体验
Sep 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与mysql建立连接并执行SQL语句的代码
2011/07/04 PHP
谈谈关于php的优点与缺点
2013/04/11 PHP
PHP5.5基于mysqli连接MySQL数据库和读取数据操作实例详解
2019/02/16 PHP
Mootools 1.2教程 同时进行多个形变动画
2009/09/15 Javascript
jquery maxlength使用说明
2011/09/09 Javascript
js特效,页面下雪的小例子
2013/06/17 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
2014/06/07 Javascript
纯js实现仿QQ邮箱弹出确认框
2015/04/29 Javascript
bootstrap常用组件之头部导航实现代码
2017/04/20 Javascript
微信小程序 实现动态显示和隐藏某个控件
2017/04/27 Javascript
微信小程序页面开发注意事项整理
2017/05/18 Javascript
JavaScript之RegExp_动力节点Java学院整理
2017/06/29 Javascript
js实现省市级联效果分享
2017/08/10 Javascript
vue中的watch监听数据变化及watch中各属性的详解
2018/09/11 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
2019/03/06 Javascript
通过Nodejs搭建网站简单实现注册登录流程
2019/06/14 NodeJs
多个vue子路由文件自动化合并的方法
2019/09/03 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
2020/02/12 Javascript
[01:00:59]VP VS VG Supermajor小组赛胜者组第二轮 BO3第二场 6.2
2018/06/03 DOTA
[01:01:41]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第二场 1月31日
2021/03/11 DOTA
使用python检测手机QQ在线状态的脚本代码
2013/02/10 Python
python类型强制转换long to int的代码
2013/02/10 Python
python基础教程之类class定义使用方法
2014/02/20 Python
浅谈python多线程和队列管理shell程序
2015/08/04 Python
Python实现约瑟夫环问题的方法
2016/05/03 Python
tensorflow更改变量的值实例
2018/07/30 Python
对Pandas MultiIndex(多重索引)详解
2018/11/16 Python
对django后台admin下拉框进行过滤的实例
2019/07/26 Python
CSS3 对过渡(transition)进行调速以及延时
2020/10/21 HTML / CSS
医学毕业生自荐信
2013/10/11 职场文书
计算机毕业大学生推荐信
2013/12/01 职场文书
元旦晚会上单位领导演讲稿
2014/01/05 职场文书
制作部班长职位说明书
2014/02/26 职场文书
电子商务专业求职信
2014/03/08 职场文书
教师先进个人材料
2014/12/17 职场文书
SpringBoot2 参数管理实践之入参出参与校验的方式
2021/06/16 Java/Android