解构赋值.一(数组)
解构赋值语法是一个JavaScript表达式,这使得可以将值从数组或属性从对象提取到不同的变量中。
(一个有趣的说法是:解构是一种打破数据结构,将其拆分为更小部分的过程。)
解构赋值表达式的值与表达式右侧(也就是=右侧)的值相等。
[注意]解构赋值表达式(也就是=右侧的表达式)如果为null或undefined会导致程序抛出错误。也就是说,任何尝试读取null或undefined**的**属性的行为都会触发运行时错误
使用解构赋值表达式时,如果指定的局部变量名称在对象中不存在,那么这个局部变量会被赋值为undefined
顺便一提,关于undefined
undefined 表示一个未声明的变量,或已声明但没有赋值的变量,或一个并不存在的对象属性。一个未初始化的变量的值为undefined,一个没有传入实参的形参变量的值为undefined,如果一个函数什么都不返回,则该函数默认返回undefined.
一、数组解构赋值
语法:
变量先声明后赋值时的解构
var a, b, rest;
var [a, b] = [10, 20]; //变量先声明后赋值时的解构
console.log(a); // 10
console.log(b); // 20
变量声明并赋值时的解构
var [a, b] = [10, 20, 30, 40, 50]; //变量声明并赋值时的解构
console.log(a); // 10
console.log(b); // 20
也可以在数组解构赋值表达式中为数组中的任意位置添加默认值,当指定位置的属性不存在或其值为undefined时使用默认值
如果不使用默认值,那么这种情况就会把局部变量赋值为undefined
var a,b;
var x=[];
[a=1,b=1]=x; //a,b的默认值为1,x明显不存在值
console.log(a); //1
console.log(b); //1
在解构模式中,也可以直接省略元素,只为感兴趣的元素提供变量名(用’,’做占位符)
var a;
var b=[1,2,3];
[,,a]=b;
console.log(a); //3
在一个解析表达式中可以交换两个变量的值。
这就不需要临时变量了
var a = 1;
var b = 3;
[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1
还可以用于解析一个从函数返回的数组
格式就是[a,b]=f(); //f();是个函数
还可以忽略一些返回值(具体做法和前面的省略元素解构相似)
等式左边定义了要从原变量中取出什么变量,等式右边是数组名,或数组。
还可以使用剩余模式( … ),可以将数组剩余部分赋值给一个变量
var [a,b, ...c]=[1,2,3,4,5];
console.log(a); //1
console.log(b); //2
console.log(c); //[3, 4, 5]
用在正则表达式(使用捕获组)可以匹配提取值
例如:这是个邮箱匹配的代码
var re = /^(\w+)@([a-z0-9]+)\.([a-z]+)$/i;
var email="hdefhfh@dg2.cjdu"; //是的。这个邮箱是乱写的
var arr=email.match(re);
console.log(arr); //["hdefhfh@dg2.cjdu", "hdefhfh", "dg2", "cjdu"]
var [,name,dizhi,yuming]=arr;
console.log(name); //hdefhfh
console.log(dizhi); //dg2
console.log(yuming); //cjdu