这篇文章将为大家详细讲解有关ES6z2数组解构和字符串解构的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
具体如下:
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
关于“ES6z2数组解构和字符串解构的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。