es6解构赋值的作用是什么

本文主要介绍"es6解构赋值的作用是什么" 有关的知识，希望能够解决您遇到有关问题，下面我们一起来看看这篇 "es6解构赋值的作用是什么" 文章。

作用：1、交换两变量的值，语法“[x,y] = [y,x];”；2、分解字符串，将字符传入变量，语法“[变量列表]=字符串”；3、从函数中返回多个值，语法“[变量列表]=函数”；4、提取json数据，语法“{变量列表}=json变量”等等。

本教程操作环境：windows7系统、ECMAScript 6版、Dell G3电脑。

es6解构赋值

es6允许按照一定的模式，从数组或对象中提取值，给变量进行赋值，称为解构赋值。

解构赋值在代码书写上简单易懂，语义清晰明了，方便对复杂对象中数据字段的获取。

解构模型

在解构中，解构的源，位于解构赋值表达式的右边，而解构的目标，在解构表达式的左边。

解构赋值的作用

1、交换x,y变量的值

利用解构赋值可以不借助第三个变量的交换两变量的值

    let x = 1;     let y = 2;     console.log('x:'+x, 'y:'+y);   //x:1 y:2     //结构赋值       [x,y] = [y,x];     console.log('x:'+x, 'y:'+y);   //x:2 y:1

2、分解字符串，将字符传入变量

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

3、从函数返回多个值

//函数只能返回一个值，如果要返回多个值，要将他们放在数组或者对象里返回。

  function example(){         //返回一个数组         return [1,2,3]     }     let [a,b,c]= example();     console.log('a:'+a,'b:'+b,'c:'+c);  //a:1 b:2 c:3               function example2(){         //返回一个对象         return {             name:'kang+',             age:20         }     }     let {name,age} = example2();     console.log('name:'+name,'age:'+age);  //name:kang+ age:20

4、函数参数的定义

 //参数是一组有次序的值          function f([x,y,z]){              console.log('x:'+x);              console.log('y:'+y);              console.log('z:'+z);          }          f([1,2,3]);         //参数是一组没有次序的值          function f({x,y,z}){              console.log('x:'+x);              console.log('y:'+y);              console.log('z:'+z);          }          f({z:3, x:2, y:1});

5、提取json数据(项目开发中一定用的到的)

    let jsonData = {         number:01,         status:'200',          data:[{person:'kang+',age:20}]      }     // 获取json数据      let {number,status,data,data:[{person,age}]} = jsonData;      console.log('number:'+number);   //number:1      console.log('status:'+status);   //status:200       console.log(data)                // [{…}]      console.log('person:'+person);   //person:kang+      console.log('age:'+age);         //age:20

6、函数参数的默认值 (这个个人认为作用不大)

   function Person(name,age,school = 'xiyou'){          this.name = name;          this.age = age;         this.school = school;      }      var son = new Person('kang+',20);      console.log(son)   // {name: "kang+", age: 20, school: "xiyou"}

7、遍历map结构

 Map 结构原生支持 Iterator接口，配合变量的解构赋值获取键名和键值就非常方便。    var map = new Map();     map.set('name','kang+');     map.set('age','20');     for(let [key, value] of map){         console.log(key + ' is ' + value);     }     name is kang+     age is 20     获取键名    var map = new Map();     map.set('name','kang+');     map.set('age','20');     for(let [key] of map){         console.log(key);    //name   age     }     // 获取键值     var map = new Map();     map.set('name','kang+');     map.set('age','20');     for(let [,value] of map){         console.log(value);   // kang+    20     }

关于 "es6解构赋值的作用是什么" 就介绍到这。希望大家多多支持编程宝库。

本文主要介绍"es6遍历对象属性的方法有哪些" 有关的知识，希望能够解决您遇到有关问题，下面我们一起来看看这篇 "es6遍历对象属性的方法有哪些" 文章。遍历对象的6种方法：1、“for...in”语句，可循 ...