在传统的赋值语句中,只能一个变量一个等号对应一个值,稍微显得有点麻烦。

var a = 1;
var b = 2;
var c = 3;

或者是用逗号分隔

var a = 1,b = 2, c = 3;

node.js或者说ES6给我们提供了一种比较新的赋值方法,相比来说,传统的赋值方式没有解构赋值简洁。

下面介绍几种常用的解构赋值。

数组的结构赋值

let [a,b,c] = [1,2,3];
console.log(a,b,c);

结果为1 2 3,也就是说将所有的变量定义时都放在中括号内以逗号隔开,值也对应的放入到中括号中以逗号隔开,并且这两边是以逗号位置一一对应的。

let [a,b,c] = [,123,];
console.log(a,b,c);

程序的结果是undefined 123 undefined,而变量a和变量b都没有赋值,能看出来两边是一一对应的。

两边数组的变量和值数量不对等也是没有关系的。

let [a,b] = [123,123,123];
console.log(a,b);

程序结果就是123 123

let [a,b] = [123,123];
console.log(a,b,c);

程序结果为123 123 undefined

为解构赋值的变量设置默认值

在对变量进行解构赋值时,可以直接进行初始化赋值操作。

let [a = 111,b,c] = [,2,3];
console.log(a,b,c);

结果为111,2,3
a在右面相应的位置上是没有被赋值的,但是最后结果a是111,这就是因为默认值的原因。

对象的解构赋值

let {abc, def} = {abc : "abc",def : "def"};
console.log(abc, def);

结果为abc def

为每个对象设置别名

let {abc:cba, def} = {abc:"abd", def: "def"};
console.log(cba, def);

设置了别名之后需要注意,原来的名字只能用来赋值,而不能用来访问,相反的别名只能用来访问,而不能为其赋值。

let {abc:cba, def} = {cba:"abd", def: "def"};
console.log(cba, def);

这么写是不会报错的,但是结果是undefined,并没有为abc设置上值,所以cba这个别名在访问abc的时候是空的。

let {abc:cba, def} = {cba:"abd", def: "def"};
console.log(abc, def);

这么写就会报错了。

console.log(abc, def);
        ^

ReferenceError: abc is not defined
    at Object.<anonymous> (f:\workspace\node_study_workspace\解构赋值1.js:24:13)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:742:12)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:743:3)

因为原先的变量名相当于被隐藏了,所以是不允许被访问的。

所以我们也可以直接将一些内置对象的某些方法单独取出来。

let {sin,cos,tan} = Math;
console.log(typeof sin);
console.log(typeof cos);
console.log(typeof tan);

结果为

function
function
function

但是一定要和对象里的函数名对上号。

为解构赋值的对象设置默认值

let {abc = 'abc', def} = {def : "def"};
console.log(abc,def);

虽然abc在后面没有赋值,但是它有默认值。结果就是abc def

有别名也是一样的,但是还是一样得用别名访问。

let {abc:cba = 'abc', def} = {def : "def"};
console.log(cba,def);

结果为abc def

字符串的解构赋值

let [a,b,c,d,e] = "hello";
console.log(a,b,c,d,e);

结果为h e l l o
这种用法就和数组的结构一样的。他不能直接为变量设置字符串的长度。

let [a,b,c,d,e,length] = "hello";
console.log(a,b,c,d,e,length);

结果为h e l l o undefined

但是因为字符串也是一个对象,我们可以利用这一点使用它的length属性来取出字符串的长度。

let {length} = "hello";

注意上面的例子是[]表示数组,而下面的{}表示的是对象。

结果为5

最后编辑:2021年02月09日 ©著作权归作者所有

评论已关闭