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 相关文章推荐
从零开始学习jQuery (六) jquery中的AJAX使用
Feb 23 Javascript
jquery下jstree简单应用 - v1.0
Apr 14 Javascript
input 和 textarea 输入框最大文字限制的jquery插件
Oct 27 Javascript
判断浏览器的内核及版本号方法汇总
Jan 05 Javascript
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
深入理解vue-router之keep-alive
Aug 31 Javascript
vue的列表交错过渡实现代码示例
May 05 Javascript
利用Electron简单撸一个Markdown编辑器的方法
Jun 10 Javascript
微信小程序点餐系统开发常见问题汇总
Aug 06 Javascript
JS实现简单随机3D骰子
Oct 24 Javascript
vue2.0 解决抽取公用js的问题
Jul 31 Javascript
JavaScript实现简单计时器
Jun 22 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
source.php查看源文件
2006/12/09 PHP
相对路径转化成绝对路径
2007/04/10 PHP
php商品对比功能代码分享
2015/09/24 PHP
php 使用redis锁限制并发访问类示例
2016/11/02 PHP
PHP封装的PDO数据库操作类实例
2017/06/21 PHP
javascript SocialHistory 检查访问者是否访问过某站点
2008/08/02 Javascript
jQuery阻止同类型事件小结
2013/04/19 Javascript
jquery模拟多级复选框效果的简单实例
2016/06/08 Javascript
vue.js事件处理器是什么
2017/03/20 Javascript
JavaScript中数组常见操作技巧
2017/09/01 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
2018/02/07 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
2019/04/08 Javascript
在vue项目中 实现定义全局变量 全局函数操作
2020/10/26 Javascript
python局部赋值的规则
2013/03/07 Python
Python爬虫之模拟知乎登录的方法教程
2017/05/25 Python
python生成二维码的实例详解
2017/10/29 Python
Python有序查找算法之二分法实例分析
2017/12/11 Python
使用pandas中的DataFrame数据绘制柱状图的方法
2018/04/10 Python
对python append 与浅拷贝的实例讲解
2018/05/04 Python
Django实现登录随机验证码的示例代码
2018/06/20 Python
python将回车作为输入内容的实例
2018/06/23 Python
在Mac下使用python实现简单的目录树展示方法
2018/11/01 Python
Python简单获取二维数组行列数的方法示例
2018/12/21 Python
Python选择网卡发包及接收数据包
2019/04/04 Python
New Balance天猫官方旗舰店:始于1906年,百年慢跑品牌
2017/11/15 全球购物
如何设置Java的运行环境
2013/04/05 面试题
写clone()方法时,通常都有一行代码,是什么?
2012/10/31 面试题
2014年大堂经理工作总结
2014/11/21 职场文书
仓管员岗位职责
2015/02/03 职场文书
生日赠语
2015/06/23 职场文书
安全教育日主题班会
2015/08/13 职场文书
《水上飞机》教学反思
2016/02/20 职场文书
python解决12306登录验证码的实现
2021/04/18 Python
python自然语言处理之字典树知识总结
2021/04/25 Python
基于JavaScript实现省市联动效果
2021/06/22 Javascript
SQL实现LeetCode(197.上升温度)
2021/08/07 MySQL