Typescript 解构、展开

最新推荐文章于 2025-05-24 14:18:08 发布

转载最新推荐文章于 2025-05-24 14:18:08 发布 · 193 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hbzyin/p/6524122.html

文章标签：

#javascript #ViewUI

本文详细介绍了JavaScript中解构和展开的概念及应用。解构赋值允许使用数组或对象字面量语法，将属性赋给变量；而展开则用于将一个数组或对象的内容合并到另一个数组或对象中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是解构、展开？

展开与解构作用相反，简单来说：

解构：解构赋值允许你使用数组或对象字面量的语法，将数组和对象的属性付给各种变量。

展开：允许你讲一个数组展开为另一个数组，或一个对象展开为另一个对象。

数组解构

// 1.数组元素的赋值-JavaScript语法
var first=someArray[0];
var second=someArray[1];
var third=someArray[2];

// 2.对比一下TypeScript、ES6提供简介、高效、可读的解构语法
var [first,second,third]=someArray;

// 3. 对任意深度的嵌套数组进行解构
var [foo,[[bar],baz]]=[1,[[2],3]];
console.log(foo);//1
console.log(bar);//2
console.log(baz);//3

// 4.忽略尾随元素
let [first]=[1,2,3,4];
console.log(first);//1

// 5 .忽略部分元素
let [,second,,forth]=[1,2,3,4];
console.log(second);//2
console.log(forth);//4

对象解构　

// 1. 解构对象
let o={
  a:'foo',
  b:12,      
  c:'bar' 
};
let {a,b}=o;

// 2. 没有声明的赋值
({a,b}={a:'foo',b:12,c:'bar'});//注意此处，需要用括号括起来，因为javascript通常会以{起始的语句作为一个代码块。

// 3.对象里面可以使用 ... 语法创建剩余变量
let {a,...passthrough}=o;
let total=passthrough.b+passthrough.c.length;

// 4. 属性重命名
let {a:newName1,b:newName2}=o;

//a:newName1读作“a作为newName1”,等价于一下写法：
let newName1=o.a;
let newName2=o.b;

// 5. 指定类型
let {a,b}:{a:string,b:number}=o;

// 6 .指定默认值(即使b为udefined，obj的属性a,b也都会有值)
function keepWhole(obj:{a:string,b?:number}{
   let {a,b=1001}=obj; 
});

展开　

// 1. 数组展开
let first=[1,2];
let second=[3,4];
let all=[0,...first,...second,5];
console.log(all);//0,1,2,3,4,5

// 2. 对象展开(属性值覆盖)
let default={ food:'spicy',price:'$',drink:'coko'};
let search={...default,food:'rich'};
console.log(search);//{food:'rich',price:'$',drink:'coko'}

// 3.对象展开：它只包含自身的可枚举的属性。 并且会丢失展开对象的方法：
class C={p:12,m(){}};
let c=new C();
let clone={...c};
console.log(clone.p);//12
console.log(clone.m);//error!