Javascript 中的解构赋值语法

首先在 ES6中引入的“解构赋值语法”允许把数组和对象中的值插入到不同的变量中。虽然看上去可能很难，但实际上很容易学习和使用。

数组解构

数组解构非常简单。你所要做的就是为数组中的每个值声明一个变量。你可以定义更少的变量，而不是数组中的索引(即，如果你只想解处理前几个值)，请跳过某些索引或甚至使用 REST 模式将所有剩余的值放到新数组中。

 
 
   
  
  const nums = [ 3, 6, 9, 12, 15 ];   
  
  const [   
  
    k,              // k = 3   
  
    l,              // l = 6   
  
    ,               // Skip a value (12)   
  
    ...n            // n = [12, 15]   
  
  ] = nums;

对象解构

对象解构与数组解构非常相似，主要区别是可以按名称引用对象中的每个key，从而创建一个有相同名称的变量。此外还可以将键解构为新的变量名，只解构所需的 key，然后用 rest 模式将剩余的 key 解构为新对象。

 
 
   
  
  const obj = { a: 1, b: 2, c: 3, d: 4 };   
  
  const {   
  
    a,              // a = 1   
  
    c: d,           // d = 3   
  
    ...rest         // rest = { b: 2, d: 4 }   
  
  } = obj;

嵌套解构

嵌套对象和数组可以通过相同的规则来进行解构。区别在于可以将嵌套 key 或值直接解构为变量，而不必将父对象存储在变量本身中。

 
 
   
  
  const nested = { a: { b: 1, c: 2 }, d: [1, 2]};   
  
  const {   
  
    a: {   
  
      b: f,         // f = 1   
  
      ...g          // g = { c: 2 }   
  
    },   
  
    ...h            // h = { d: [1, 2]}   
  
  } = nested;

高级解构

由于数组的行为与对象相似，所以可以通过使用索引作为对象解构分配中的 key，用解构分配语法从数组中获取特定值。用这种方法还可以得到数组的其他属性(例如数组的 length)。最后，如果解构后的值是 undefined，则还可以为解构过程中的变量定义默认值。

 
 
   
  
  const arr = [ 5, 'b', 4, 'd', 'e', 'f', 2 ];   
  
  const {   
  
    6: x,           // x = 2   
  
    0: y,           // y = 5   
  
    2: z,           // z = 4   
  
    length: count,  // count = 7   
  
    name = 'array', // name = 'array' (not present in arr)   
  
    ...restData     // restData = { '1': 'b', '3': 'd', '4': 'e', '5': 'f' }   
  
  } = arr;

网站题目：Javascript 中的解构赋值语法
转载注明：http://www.shufengxianlan.com/qtweb/news19/435669.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容