ES6知识点整理之数组解构和字符串解构的应用示例
本文实例讲述了ES6知识点整理之数组解构和字符串解构的应用。分享给大家供大家参考，具体如下：
ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）,而数组的解构赋值是从数组中提取值，按照对应位置，对变量赋值。
ES6之前的赋值操作
vararr=[1,2,3]; vara=arr[0]; varb=arr[1]; varc=arr[2]; console.log(a,b,c);//123
对一维数组的解构赋值的应用
vararr=[1,2,3]; var[a,b,c]=arr; console.log(a,b,c);//123
对多维数组的解构赋值的应用
letarr=[22,[5,8],11]; let[a,[b,c],d]=arr; console.log(a,b,c,d);//225811
解构赋值用于变量的交换举例
letx=11; lety=22; [y,x]=[x,y]; console.log(x,y);//2211
解构赋值中不完全的解析示例
letarr=[22,[5,8],11]; let[a,[b],c]=arr; console.log(a,b,c);//22511 let[m,[,n],o]=arr; console.log(m,n,o);//22811
不能被数组解析的值
let[m]="";
console.log(m);//undefined;
let[x,y]=NaN;//NaNisnotiterable.不能被数组解析的值：NaN,undefined,null,{}
实现了iterator接口的类型都可以被解析赋值
let[x,y]=newSet([22,33]); console.log(x,y);//2233
自己创造一个实现iterator接口的对象进行解构赋值
classGroup{
constructor(){
}
next(){
return{value:'Joh',done:false};
}
[Symbol.iterator](){
returnthis;
}
}
letgroup=newGroup();
let[x,y,z,m,n]=group;
console.log(x,y,z,m,n);//JohJohJohJohJoh备注：这里如果类中的next的done为true，那么全为undefined
…运算符转换成数组的解构举例
var[x,w,...y]=[1,2,3,4,5,6]; console.log(x,w,y);//12[3,4,5,6]
解构数组的默认值
如果数组中的不是undefined，都会被成功解构,不会被默认值替代
let[x=15,y]=[undefined,12]; console.log(x,y);//1512 let[m=12,n]=[null,10]; console.log(m,n);//null10
字符串解构的处理
var[a,b,c]='hello'; console.log(a,b,c);//hel
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试上述代码运行结果。
更多关于JavaScript相关内容可查看本站专题：《javascript面向对象入门教程》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。