ES6之解构---用于替换原始的JS的方案

    

ES6之解构---用于替换原始的JS的方案

构的作用是可以快速取得数组或对象当中的元素或属性,而无需使用arr[x]或者obj[key]等传统方式进行赋值

var arr = [1, 2, 3];

//传统方式
var a = arr[0], b = arr[1], c = arr[2];
console.log(a, b, c); // 1 2 3

//解构方式
var [a, b, c] = arr;
console.log(a, b, c); // 1 2 3

从上面的例子我们可以看出,要想获取一个数组中的值,我们可以利用传统的索引的方式,也可以声明一个数组变量来获取,第二种方式看起来更优雅。

如果上面的方法看起来我们的传统方法还过得去的话看下面的例子:

var arr = [1, [2, [3]]];

// 传统方法
var a = arr[0], b = arr[1][0], c = arr[1][1][0];
console.log(a, b, c);// 1 2 3

// 解构方法
var [a, [b, [c]]] = arr;
console.log(a, b, c);// 1 2 3

多层数组嵌套的话我们就可以看出解构的强大之处了。再看下面的例子:

var arr = [1, 2, 3];

// 传统方式
function bar(a, b, c) {
    console.log(a, b, c);
}
bar(arr[0], arr[1], arr[2]); // 1 2 3

// 解构方式
function baz([a, b, c]) {
    console.log(a, b, c);
}
baz(arr); // 1 2 3

我们将一个数组传值应用到实际的应用中,可以是代码看起来更加简洁优雅,在多层数组中更能体现出来,如下:

var arr = [[1, 2], [3, 4], [5, 6]];

// 传统方法
for (var a of arr) {
    // 第一种
    console.log(a[0], a[1]); // 1 2 3 4 5 6
    // 第二种
    for (var b of a) {
        console.log(b) // 1 2 3 4 5 6
    }
}

// 解构方法
for (var [a, b] of arr) {
    console.log(a, b); // 1 2 3 4 5 6
}

我们要分别获取 arr 数组中的值,如果不去下标索引的话传统方式需要两层循环才能获取,如果用解构的话只需要循环一次,从而加快了运行速度。如果数组嵌套层数更多的话效果更明显。

对象赋值解构:

var obj = {
    name: 'zhangsan',
    sex: 0,
    age: 26,
    son: {
        sonname: 'lisi',
        sonsex: 1,
        sonage: 2
    }
};

var {name, sex, age, son} = obj;
console.log(name, sex, age); //zhangsan 0 26
console.log(son); // { sonname: 'lisi', sonsex: 1, sonage: 2 }

var {name, sex, age, son:{sonname,sonsex,sonage}} = obj;
console.log(name,sex,age,sonname,sonsex,sonage); // zhangsan 0 26 lisi 1 2

但是如果对象的子对象中又重名的就需要在解构时重命名,如下:

var obj = {
    name: 'zhangsan',
    sex: 0,
    age: 26,
    son: {
        name: 'lisi',
        sex: 1,
        age: 2
    }
};

var {name, sex, age, son} = obj;
console.log(name, sex, age); //zhangsan 0 26
console.log(son); // { name: 'lisi', sex: 1, age: 2 }

var {name, sex, age, son: {name, sex, age}} = obj;
console.log(name, sex, age, name, sex, age); // lisi 1 2 lisi 1 2

var {name, sex, age, son: {name: sonname, sex: sonsex, age: sonage}} = obj;
console.log(name, sex, age, sonname, sonsex, sonage); // zhangsan 0 26 lisi 1 2

如果对象的子对象中有和父对象重名的变量名称,则会将父对象的变量值覆盖,重命名子对象的变量则不会,重命名规则为 (原变量名:新变量名)。

同样的我们也可以将对象解构应用到函数传参中,如下:

var obj = {
    name: 'zhangsan',
    sex: 0,
    age: 26,
    son: {
        name: 'lisi',
        sex: 1,
        age: 2
    }
};

// 传统方法
function foo(name,sex,age,son) {
    console.log(name,sex,age,son)
}
foo(obj.name,obj.sex,obj.age,obj.son); // zhangsan 0 26 { name: 'lisi', sex: 1, age: 2 }

// 解构方法
function foo({name,sex,age,son}) {
    console.log(name,sex,age,son)
}
foo(obj); // zhangsan 0 26 { name: 'lisi', sex: 1, age: 2 }

// 解构方法 子对象也进行解构,但是子对象中含有和父对象相同的变量名,不重命名会报错
function foo({name, sex, age, son: {name, sex, age}}) {
    console.log(name, sex, age, name, sex, age);  // SyntaxError: Duplicate parameter name not allowed in this context
}
foo(obj);  // SyntaxError: Duplicate parameter name not allowed in this context

// 解构方法 子对象也进行解构,但是子对象中含有和父对象相同的变量名,将子对象重命名
function foo({name, sex, age, son: {name: sonname, sex: sonsex, age: sonage}}) {
    console.log(name, sex, age, sonname, sonsex, sonage);
}

foo(obj); // zhangsan 0 26 lisi 1 2

在上述方法中如果子对象也进行解构,子对象中有和父对象相同的变量名,则需要将子对象中和父对象相同的变量名进行重命名,当然也可以重命名父对象。只要没有相同的变量名即可。

解构也可以将数组与对象组合起来使用,如下循环结构:

var arr = [{name: 'aaa', age: 26}, {name: 'bbb', age: 27}, {name: 'ccc', age: 28}];

for (var {age, name} of arr) {
    console.log(name, age);
}
//aaa 26
//bbb 27
//ccc 28

解构的特殊应用场景:

//变量互换
var x = 1, y = 2;
var [x, y] = [y, x];
console.log(x, y); // 2 1

//字符串解构
var str = 'hello';
var [a, b, c, d, e] = str;
console.log(a, b, c, d, e); // h e l l o

所有原创文章采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。
您可以自由的转载和修改,但请务必注明文章来源并且不可用于商业目的。
本站部分内容收集于互联网,如果有侵权内容、不妥之处,请联系我们删除。敬请谅解!

添加新评论

  关于博主

QQ:1960727927
E-Mail:ceet@vip.qq.com
个人主页:https://tencent.信息

  近期评论

  •  osc_omoo: 前端加密后端解密吧?你不会用的是nodejs吧?改成java的后端解密麻烦吗?
  •  环洋诚信SSL证书客服: 按照博主的思路和代码,我已经搭建成功了。但是有一个小小的问题想请教下,重新执行安装代码后,之前...
  •  澄弘: 已经添加了你的博客

我一个人,遗忘或者怀念,惋惜或者心有不甘,都只是我自己的事情,与其他人无关。

总是高估在别人心目中的地位,然后自己笑了笑,太自作多情了。

说起来可能有点夸张,感恩你活在这世上,你的生命,对我来说太有意义了。

生命中最困难的事情之一,就是心中有话却不能说。

以前是喜欢一个人,现在是喜欢一个人。