TypeScript(Es6) 的一些使用的小技巧
栏目: JavaScript · 发布时间: 5年前
- 在处理 object 的时候我们使用 Object 的一些自带的一些方法
- Object.keys()返回 keys 的数组,Object.values()返回 values 的数组。
2、合理的使用 reduce/filter
- 需求1:处理这样的对象中的 value 值,拼接成一个字符串。
// 有这样的一个对象,value 可能为空 const obj = { a: '1', b: '2', c: '3', d: '', e: '5' ... } // 后端只需要这个对象中的 value 值的逗号拼接 eg: '1,2,3...' Object.values(obj).filter(Boolean).join(','); // => '1,2,3,5...' 复制代码
- 需求2:需要处理一个 object 中的 values 返回一个新的对象。
// 还是这个 obj 但是现在我们想把 value 的值处理成 number 类型,然后再返回一个key 相同的对象。 let obj = { a: '1', b: '2', c: '3', d: '', e: '5' ... } // 预想得的值 obj = { a: 1, b: 2, c: 3, d: '', e: 5 ... } // 使用 lodash reduce _.reduce(object, (result, value, key) => result[key] = (Number(value), result)), {}) // zipObject(arr1,arr2) _.zipObject(Object.keys(obj),Object.values(obj).map(item=>item = Number(item))) // demo _.zipObject(['a', 'b'], [1, 2]); // => { 'a': 1, 'b': 2 } // 这里可以 reduce Object.keys(obj).reduce((result,value,key,arr)=>{ obj[value] && (obj[value] = Number(obj[value])) },{}) // 原生的 forEach // Object.keys(obj).forEach(item=>{ // obj[item] && (obj[item] = Number(obj[item])) // },{}) console.log(obj) 复制代码
3、Ts 定义任意属性
- 需求:定义一个 any 的{}
const defaultValues: any = {}; const a = {} as any; 复制代码
- 接口任意属性
interface Person { name: string; age?: number; [propName: string]: any; } // [propName: string]:any 定义任意属性 let tom: Person = { name: 'Tom', gender: 'male' }; 复制代码
Ts 类型定义
数组的几种定义方法
- 类型 + 方括号」表示法
let fibonacci: number[] = [1, 1, 2, 3, 5]; 复制代码
- 数组泛型
let fibonacci: Array<number> = [1, 1, 2, 3, 5]; 复制代码
- 用接口表示数组
interface NumberArray { [index: number]: number; } let fibonacci: NumberArray = [1, 1, 2, 3, 5]; 复制代码
- any 在数组中的应用
let list: any[] = ['Xcat Liu', 25, { website: 'http://xcatliu.com' }]; 复制代码
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
JavaScript & jQuery交互式Web前端开发
[美]达克特(Duckett,J.) / 杜伟、柴晓伟、涂曙光 / 清华大学出版社 / 2015-6-9 / 79.80元
欢迎选择一种更高效的学习JavaScript和jQuery的方式。 你是一名JavaScript新手?或是您曾经向自己的Web页面上添加过一些脚本,但想以一种更好的方式来实现它们?本书非常适合您。本书不仅向您展示如何阅读和编写JavaScript代码,同时还会以一种简单且视觉化的方式,教您有关计算机编程的基础知识。阅读本书之前,您只需要对HTML和CSS有一些了解即可。 通过将编程理论......一起来看看 《JavaScript & jQuery交互式Web前端开发》 这本书的介绍吧!