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 相关文章推荐
一个JS翻页效果
Jul 23 Javascript
初窥JQuery(二) 事件机制(1)
Nov 25 Javascript
javascript学习笔记(三)显示当时时间的代码
Apr 08 Javascript
jquery如何把参数列严格转换成数组实现思路
Apr 01 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
May 28 Javascript
JQuery给网页更换皮肤的方法
May 30 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
Feb 23 Javascript
基于JavaScript实现弹幕特效
Aug 27 Javascript
Vue2 轮播图slide组件实例代码
May 31 Javascript
JavaScript事件冒泡与事件捕获实例分析
Aug 01 Javascript
Vue Prop属性功能与用法实例详解
Feb 23 Javascript
layui radio单选限制下一个radio单选的实例
Sep 03 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
VFP与其他应用程序的集成
2006/10/09 PHP
强烈推荐:php.ini中文版(2)
2006/10/09 PHP
我的群发邮件程序
2006/10/09 PHP
SWFUpload与CI不能正确上传识别文件MIME类型解决方法分享
2011/04/18 PHP
PHP怎么实现网站保存快捷方式方便用户随时浏览
2013/08/15 PHP
php从数组中随机选择若干不重复元素的方法
2015/03/14 PHP
PHP安装扩展mcrypt以及相关依赖项深入讲解
2021/03/04 PHP
关于onScroll事件在IE6下每次滚动触发三次bug说明
2011/09/21 Javascript
Javascript图像处理—为矩阵添加常用方法
2012/12/27 Javascript
提交表单时执行func方法实现代码
2013/03/17 Javascript
jquery indexOf使用方法
2013/08/19 Javascript
JavaScript 基本概念
2015/01/20 Javascript
layui导航栏实现代码
2017/05/19 Javascript
利用vueJs实现图片轮播实例代码
2017/06/03 Javascript
Vue2路由动画效果的实现代码
2017/07/10 Javascript
Angular 4.0学习教程之架构详解
2017/09/12 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
2017/11/22 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
2018/01/09 jQuery
详解如何在Vue里建立长按指令
2018/08/20 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
2018/10/16 Javascript
手把手15分钟搭一个企业级脚手架
2019/09/16 Javascript
SpringBoot在yml配置文件中配置druid的操作
2020/11/16 Javascript
Python标准异常和异常处理详解
2015/02/02 Python
Python导入txt数据到mysql的方法
2015/04/08 Python
python进程管理工具supervisor的安装与使用教程
2017/09/05 Python
Django中使用CORS实现跨域请求过程解析
2019/08/05 Python
python实现快递价格查询系统
2020/03/03 Python
10个python3常用排序算法详细说明与实例(快速排序,冒泡排序,桶排序,基数排序,堆排序,希尔排序,归并排序,计数排序)
2020/03/17 Python
CSS3——齿轮转动关键代码
2013/05/02 HTML / CSS
英国最大的百货公司:Harrods
2016/08/18 全球购物
美国花布包包品牌:Vera Bradley
2017/08/11 全球购物
党章学习思想汇报
2014/01/14 职场文书
机房搬迁方案
2014/05/01 职场文书
2014民事授权委托书范本
2014/09/29 职场文书
篮球比赛通讯稿
2015/07/18 职场文书
Mysql 如何查询时间段交集
2021/06/08 MySQL