ES6数组解构与字符串解构教程：从基础到高级应用

ES6解构赋值概述

本文通过具体示例整理并讲解了ES6中数组解构与字符串解构的应用方法，旨在帮助读者深入理解并掌握相关技术，供学习参考。

ES6引入了按照特定模式从数组或对象中提取值并对变量进行赋值的机制，这一特性被称为解构（Destructuring）。其中，数组解构赋值是指从数组中提取值，并依据对应位置将值赋给变量。

ES6之前的赋值操作

在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

当解构模式与数组结构不完全匹配时，未匹配到的变量将保持为undefined，这被称为不完全解析。


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

解构赋值的限制与条件

并非所有值都能被数组解构解析。例如NaN、undefined、null以及普通对象{}等类型，若尝试对其解构会报错或返回undefined。


let [m] = "";
console.log(m); // undefined;
let [x,y] = NaN; // NaN is not iterable. 不能被数组解析的值：NaN, undefined, null, {}

Iterator接口与自定义解构

任何实现了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时，默认值生效。

需要注意的是，只有当解构位置的值严格等于undefined时，默认值才会被使用。如果该位置存在其他任何值（包括null），则不会触发默认值替换。


let [x=15, y] = [undefined, 12];
console.log(x,y); // 15 12
let [m=12, n] = [null, 10];
console.log(m, n); // null 10

字符串解构处理

字符串也可以像数组一样进行解构处理，因为字符串实现了Iterator接口，可以按字符提取值。


var [a,b,c] = 'hello';
console.log(a,b,c); // h e l

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试上述代码运行结果。

更多关于JavaScript相关内容可查看本站专题：《javascript面向对象入门教程》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

ES6数组与字符串解构赋值详解及示例