es6解构赋值

刺骨的言语ヽ痛彻心扉 2022-12-23 06:57 172阅读 0赞

es6解构赋值

定义：

解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。

语法：

  1. //数组结构
  2. var a, b, rest;
  3. [a, b] = [10, 20];
  4. console.log(a); // 10
  5. console.log(b); // 20
  7. //对象解构
  8. ({  a, b } = {  a: 10, b: 20 });
  9. console.log(a); // 10
  10. console.log(b); // 20
  12. // ...rest 解构数组
  13. [a, b, ...rest] = [10, 20, 30, 40, 50];
  14. console.log(a); // 10
  15. console.log(b); // 20
  16. console.log(rest); // [30, 40, 50]
  18. // ...rest 解构对象（最新）
  19. ({ a, b, ...rest} = { a: 10, b: 20, c: 30, d: 40});
  20. console.log(a); // 10
  21. console.log(b); // 20
  22. console.log(rest); // {c: 30, d: 40}
  24. //解析一个从函数返回
  25. function f() { 
  26.   return [1, 2];
  27. }
  29. var a, b; 
  30. [a, b] = f(); 
  31. console.log(a); // 1
  32. console.log(b); // 2

更多应用场景

默认值

  1. var a, b;
  3. [a=5, b=7] = [1];
  4. console.log(a); // 1
  5. console.log(b); // 7

交换变量

  1. var a = 1;
  2. var b = 3;
  4. [a, b] = [b, a];
  5. console.log(a); // 3
  6. console.log(b); // 1

忽略你不感兴趣的返回值

  1. function f() { 
  2.   return [1, 2, 3];
  3. }
  5. var [a, , b] = f();
  6. console.log(a); // 1
  7. console.log(b); // 3

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

当解构一个数组时，可以使用剩余模式，将数组剩余部分赋值给一个变量。
  1. var [a, ...b] = [1, 2, 3];
  2. console.log(a); // 1
  3. console.log(b); // [2, 3]

给新的变量名赋值

可以从一个对象中提取变量并赋值给和对象属性名不同的新的变量名。
  1. var o = { p: 42, q: true};
  2. var { p: foo, q: bar} = o;
  4. console.log(foo); // 42 
  5. console.log(bar); // true

For of 迭代和解构

  1. var people = [
  2.   { 
  3.     name: 'Mike Smith',
  4.     family: { 
  5.       mother: 'Jane Smith',
  6.       father: 'Harry Smith',
  7.       sister: 'Samantha Smith'
  8.     },
  9.     age: 35
  10.   },
  11.   { 
  12.     name: 'Tom Jones',
  13.     family: { 
  14.       mother: 'Norah Jones',
  15.       father: 'Richard Jones',
  16.       brother: 'Howard Jones'
  17.     },
  18.     age: 25
  19.   }
  20. ];
  22. for (var { name: n, family: { father: f}} of people) { 
  23.   console.log('Name: ' + n + ', Father: ' + f);
  24. }
  26. // "Name: Mike Smith, Father: Harry Smith"
  27. // "Name: Tom Jones, Father: Richard Jones"

发表评论

表情：
评论列表 （有 0 条评论，172人围观）

还没有评论，来说两句吧...

相关阅读

    相关 es6解构赋值

    一、定义 ES6允许按照一定的模式，从数组和对象中提取值，对变量进行赋值，被称为解构 二、详情讲解 1、数组解构：数组解构时数组的元素是按次序排列的，变量的取

    浅浅的花香味﹌浅浅的花香味﹌/ 0 赞/ 300 阅读

    相关 ES6解构赋值

    ES6 解构赋值 概述 解构赋值是对赋值运算符的扩展。 他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。 在代码书写上简洁且易读，语义更加清晰明

    迷南。迷南。/ 0 赞/ 322 阅读

    相关 es6 解构赋值

    ES6解构赋值 传统的变量赋值： 变量的解构赋值： 数组的解构赋值: 对象的解构赋值:\`(和数组解构赋值类似)\`

    短命女短命女/ 0 赞/ 445 阅读

    相关 ES6——解构赋值

    原文链接：[小邵教你玩转ES6][ES6] 解构赋值 解构赋值主要分为对象的解构和数组的解构，在没有解构赋值的时候，我们赋值是这样的 let arr = [0

    迷南。迷南。/ 0 赞/ 572 阅读