js 结构体数组导出为Excel（[JavaScript]解构赋值详解）

概念

ES6提供了更简洁的赋值模式    
    
    ，从数组和对象中提取值    


     


     


，这被称为解构

示例：

[a, b] = [50, 100]; console.log(a); // expected output: 50 console.log(b); // expected output: 100 [a, b, ...rest] = [10, 20, 30, 40, 50]; console.log(rest); // expected output: [30, 40, 50]

数组解构

数组解构是非常简单简洁的




 




 




，在赋值表达式的左侧使用数组字面量   

   

   ，数组字面量中的每个变量名称映射为解构数组的相同索引项

这是什么意思呢     

     

     

，就是如下面这个示例一样




  




  




，左边数组中的项分别得到了右侧解构数组相应索引的值

let [a, b, c] = [1, 2, 3]; // a = 1 // b = 2 // c = 3

声明分别赋值

你可以通过变量声明分别解构赋值

示例：声明变量
  


  


  ，分别赋值

// 声明变量 let a, b; // 然后分别赋值 [a, b] = [1, 2]; console.log(a); // 1 console.log(b); // 2

解构默认值

如果解构取出的值是undefined     
     
     
，可以设置默认值：

let a, b; // 设置默认值 [a = 5, b = 7] = [1]; console.log(a); // 1 console.log(b); // 7

在上面的例子中 




   




   




，我们给a和b均设置了默认值

这种情况下

 



 



 ，如果a或b的值是undefined               ，它将把设置的默认值赋给相应变量（5赋给a  




    




    




，7赋给b）

交换变量值

以往我们进行两个变量的交换












，都是使用

//交换ab c = a; a = b; b = c;

或者异或的方法

然而在解构赋值中               ，我们可以在一个解构表达式中交换两个变量值

let a = 1; let b = 3; //交换a和b的值 [a, b] = [b, a]; console.log(a); // 3 console.log(b); // 1

解构函数返回的数组

我们可以直接解构一个返回值为数组的函数

function c() { return [10, 20]; } let a, b; [a, b] = c(); console.log(a); // 10 console.log(b); // 20

在上面的例子中   



     



     



，**c()**的返回值[10













，20]可以在单独的同一行代码中使用解构

忽略返回值（或跳过某一项）

你可以有选择性的跳过一些不想得到的返回值

function c() { return [1, 2, 3]; } let [a, , b] = c(); console.log(a); // 1 console.log(b); // 3

赋值数组剩余值给一个变量

当你使用数组解构时    
    
    ，你可以把赋值数组剩余的部分全部赋给一个变量

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

这样的话b也会变成一个数组了    


     


     


，数组中的项是剩余的所有项

注意： 这里要小心结尾是不能再写逗号的




 




 




，如果多了一个逗号将会报错

let [a, ...b,] = [1, 2, 3]; // SyntaxError: rest element may not have a trailing comma

嵌套数组解构

像对象一样   

   

   ，数组也可以进行嵌套解构

示例：

const color = [#FF00FF, [255, 0, 255], rgb(255, 0, 255)]; // Use nested destructuring to assign red, green and blue // 使用嵌套解构赋值 red, green, blue const [hex, [red, green, blue]] = color; console.log(hex, red, green, blue); // #FF00FF 255 0 255

字符串解构

在数组解构中     

     

     

，解构的目标若为可遍历对象




  




  




，皆可进行解构赋值
  


  


  ，可遍历对象即实现Iterator接口的数据

let [a, b, c, d, e] = hello; /* a = h b = e c = l d = l e = o */

对象解构

基础对象解构

let x = { y: 22, z: true }; let { y, z } = x; // let {y:y,z:z} = x;的简写 console.log(y); // 22 console.log(z); // true

赋值给新变量名

当使用对象解构时可以改变变量的名称

let o = { p: 22, q: true }; let { p: foo, q: bar } = o; console.log(foo); // 22 console.log(bar); // true

如上代码var {p: foo} = o 获取对象 o 的属性名 p     
     
     
，然后赋值给一个名称为 foo 的变量

解构默认值

如果解构取出的对象值是undefined 




   




   




，我们可以设置默认值

let { a = 10, b = 5 } = { a: 3 }; console.log(a); // 3 console.log(b); // 5

赋值给新对象名的同时提供默认值

前面提到过我们赋值给新的对象名

 



 



 ，这里我们可以给这个新的对象名提供一个默认值               ，如果没有解构它  




    




    




，就会自动使用默认值

let { a: aa = 10, b: bb = 5 } = { a: 3 }; console.log(aa); // 3 console.log(bb); // 5

同时使用数组和对象解构

在结构中数组和对象可以一起使用

const props = [ { id: 1, name: Fizz }, { id: 2, name: Buzz }, { id: 3, name: FizzBuzz }, ]; const [, , { name }] = props; console.log(name); // "FizzBuzz"

不完全解构

let obj = {p: [{y: world}] }; let {p: [{ y }, x ] } = obj;//不解构x // x = undefined // y = world

赋值剩余值给一个对象

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}; // a = 10 // b = 20 // rest = {c: 30, d: 40}

嵌套对象解构（可忽略解构）

let obj = {p: [hello, {y: world}] }; let {p: [x, { y }] } = obj; // x = hello // y = world let obj = {p: [hello, {y: world}] }; let {p: [x, { }] } = obj;//忽略y // x = hello

注意事项

小心使用已声明变量进行解构

错误示范：

let x; {x} = {x: 1};

JavaScript引擎会将{x}理解为一个代码块












，从而产生语法错误               ，我们要避免将大括号写在行首   



     



     



，避免JavaScript将其解释为代码块

正确写法： let x; ({x} = {x: 1});

正确写法将整个解构赋值语句放在一个圆括号里













，就可以正确执行了

函数参数的解构赋值

函数的参数也可以使用解构赋值

function add([x, y]) { return x + y; } add([1, 2]);

上面代码中    
    
    ，函数add的参数表面上是一个数组    


     


     


，但在传参的时候




 




 




，数组参数就被解构为变量x和y了   

   

   ，对于函数内部来说     

     

     

，就和直接传入x和y是一样的

解构的用途

解构赋值的用法很多

交换变量的值

let x = 1; let y = 2; [x, y] = [y, x];

上面的代码交换x和y的值




  




  




，这样的写法不仅简洁而且易读
  


  


  ，语义清晰

从函数返回多个值

函数只能返回一个值     
     
     
，如果要返回多个值 




   




   




，我们只能将这些值放置数组或对象里返回

 



 



 ，当我们有了解构赋值后               ，从对象或数组里取出这些值犹如探囊取物

// 返回一个数组 function example() { return [1, 2, 3]; } let [a, b, c] = example(); // 返回一个对象 function example() { return { foo: 1, bar: 2 }; } let { foo, bar } = example();

提取JSON数据

解构赋值对于提取JSON对象中的数据  




    




    




，尤其有用

示例：

let jsonData = { id: 42, status: "OK", data: [867, 5309] }; let { id, status, data: number } = jsonData; console.log(id, status, number); // 42, "OK", [867, 5309]

使用上面的代码












，我们就可以快速取出JSON数据中的值