目录
其他 属性方法(size, get ,has,delete)
类型
基本类型
number、boolean、string、null、undefined
let
1 、any 定义变量类型支持动态类型推导
let a: any = 1
console.log(typeof a) // number
a = 1.1
console.log(typeof a) // number
a = '1'
console.log(typeof a) // string
a = true
console.log(typeof a) // boolean
a = undefined
console.log(typeof a) // undefined
a = null
console.log(typeof a) // object
2、 使用 let 声明变量时不指定具体类型,但赋初值,支持类型推导,后续不能把其他类型的值赋值给该变量
let b = 1 // 自动推导为 number
b = '1' // 会报错,Type '"1"' is not assignable to type 'number'
let n = 1
console.log(typeof n) //number
n = '1'
console.log(typeof n) // string
// 为啥我测试写的这样也是合法的?
let n: number = 1
console.log(typeof n) //number
n = '1'
console.log(typeof n) // string
//这样也没有保报错呀!!
吐槽:类型确定后还能更改变量的类型。这个也太变态了吧……岂止是变态,简直就是变态,变态。用的时候还是单一单一的好
String
使用反引号 ` (数字键盘1前面的一个键) 包围并且以 ${ expr } 这种形式嵌入表达式实现字符串拼接. 并且能原样输出原始字符串(中间用换行打印的也可换行)
let userName: string = '张三';
let age: number = 22;
let desc = `desc == 姓名:${userName}
年龄:${age}`
console.log(desc)
用 for of 遍历字符串
for (let character of desc) {
console.log(character)
}
boolean
类型的真假 (ture \ falsy)
function testValueTruthyOrFalsy(val: any) {
return val ? console.log('truthy') : console.log('falsy')
}
testValueTruthyOrFalsy('') // falsy
testValueTruthyOrFalsy(undefined) // falsy
testValueTruthyOrFalsy(null) // falsy
testValueTruthyOrFalsy(NaN) // falsy
console.log('--------------------------')
testValueTruthyOrFalsy(-1) // truthy
testValueTruthyOrFalsy(0) // falsy
testValueTruthyOrFalsy(1) // truthy
console.log('-----------------')
testValueTruthyOrFalsy(new Number(0)) // truthy
testValueTruthyOrFalsy(new Number(NaN)) // truthy
testValueTruthyOrFalsy(null == undefined) // truthy
testValueTruthyOrFalsy(null === undefined) // falsy
'' 、undefined、null、0、NaN 都是falsy
''空字符串也为falsy 有点想吐槽…
断言 as
let value: any = 'Red Sun'
let strLength2: number = (value as string).length
console.log(strLength2) // 7
枚举
enum Color {
Red,
Green,
Blue
}
let c1: Color = Color.Green
console.log(c1) // 1
console.log(Color) //{0: "Red", 1: "Green", 2: "Blue", Red: 0, Green: 1, Blue: 2}
自定义枚举值
enum Color {
Red = 'R',
Green = 'G',
Blue = 'B'
}
let c1: Color = Color.Green
console.log(c1) // G
console.log(Color) //{Red: "R", Green: "G", Blue: "B"}
console.log(Color['Red']) // R
console.log(Color.Red) // R
console.log(Color.R) //undefined
undefined 和 null 的区别
1、不指定类型且不赋初值,默认值为 undefined,并且自动推导类型为 undefined
console.log(typeof a) // undefined
console.log(a) // undefined
2、指定类型且不赋初值,默认值为 undefined,并且自动推导类型为 undefined
let a: number
console.log(typeof a) // undefined
console.log(b) // undefined
let b: any
console.log(typeof b) // undefined
console.log(b) // undefined
let c: string
console.log(typeof c) // undefined
console.log(c) // undefined
3、指定为 undefined 类型时,其值只能为 undefined,默认值也是 undefined
let d = undefined
console.log(d) // undefined
console.log(typeof d) // undefined
let e: any = undefined
console.log(e) // undefined
console.log(typeof e) // undefined
4、不指定类型 或 指定类型为 any,初始值为 null 时,自动推导为 object 类型,值为 null
let g = null // 推导类型
console.log(g) // null
console.log(typeof g) // object
g = 1;
console.log(g) // 1
console.log(typeof g) // number
let h: any = null // 指定类型 any
console.log(h) // null
console.log(typeof h) // object
}
5、可选参数
function testAnyOptional(p1?: any): void {
console.log(p1, typeof p1)
}
testAnyOptional(null) // null object
testAnyOptional(undefined) // undefined undefined
2、
function testNumberOptional(p1?: number|undefined): void {
console.log(p1, typeof p1)
}
testNumberOptional(null) // 会报错,只能传 undefined 或 number 类型 (然而,并没有) null object
testNumberOptional(undefined) // undefined undefined
testNumberOptional() // undefined undefined
testNumberOptional(1) // 1 number
testNumberOptional('1')// 1 string
容器类
数组 Array
1、for of 元素遍历
let arrayOne: number[] = [1, 2, 3, '4',true, null, undefined]
// let arrayOne: Array = [0, 1, 2, 3, '4', true, null, undefined] //创建方法
// let arrayOne: Array<any> = [0, 1, 2, 3, '4', true, null, undefined]
for (let iterator of arrayOne) {
console.log(`${iterator} => type :${(typeof iterator)}`)
}
1 => type :number
2 => type :number
3 => type :number
4 => type :string
true => type :boolean
null => type :object
undefined => type :undefined
真的是啥都能装,而且还是混装。但是不建议开发中如此用呀。再看元祖似乎没有意义了
2、 for in 索引遍历
for (const key in arrayOne) {
console.log(`${key} => value :${arrayOne[key]}`)
}
0 => value :1
1 => value :2
2 => value :3
3 => value :4
4 => value :true
5 => value :null
6 => value :undefined
3、 forEach 元素 + index 遍历
arrayOne.forEach((value: number, index: Number) => {
console.log(`位置 ${index}:${value} => 类型 type :${(typeof value)}`)
})
位置 0:1 => 类型 type :number
位置 1:2 => 类型 type :number
位置 2:3 => 类型 type :number
位置 3:4 => 类型 type :string
位置 4:true => 类型 type :boolean
位置 5:null => 类型 type :object
位置 6:undefined => 类型 type :undefined
4、splice 删除 or 插入数据
arrayOne.splice(4) // 删除index等于4(第5个)元素以后的元素 [1,2,3,'4',true]
arrayOne.splice(4,2) //index等于的元素开始,删除2个元素 [1,2,3,'4',undefined]
arrayOne.splice(4,2,5,6,'7') //第5个元素开始,删除2个元素,插入5, 6, '7'
arrayOne.splice(4, 0, '5', '6') // 不删除任何元素,在下标 4 处插入 '5','6',原来下标 4 对应的元素往后移动
凌乱了,太灵活了
5、shift删除第一个元素
arrayOne.shift()
6、unshift 头部添加一个或多个元素
arrayOne.unshift('a','b','c')
7、pop 删除尾部一个元素
arrayOne.pop()
8、push 尾部添加一个或多个元素
arrayOne.push('haha','hehe','heihei')
9、concat 拼接两个或多个数组,不会修改原数组
1、 直接拼接元素,类似于push()
let array = arrayOne.concat('haha','hehe','heihei')
// arrayOne,不会改变。array = [0,1, 2, 3, '4', true, null, undefined,'haha','hehe','heihei']
2、拼接多个数组
let arrayNew = array.concat(['A', 'B'], ['C','D'])
// arrayNew [0,1, 2, 3, '4', true, null, undefined,'haha','hehe','heihei','A', 'B','C','D']
10.map 遍历并执行map里的操作, 返回新的数组
let mapArry = arrayOne.map((item: let, index: number) => {
if (index%2 == 0) {
return item
}
}
)
// [0,undefined,2,undefined,4,undefined,null,undefined] 并不是删除,给了个undefind 的值
11、 find 查找元素
let result = arraySix.find((item: number, index: number) => {
return index % 2 == 0
})
console.log(result) // 0 返回第一个满足条件的元素
12、 filter 过滤元素
let mapArry = arrayOne.filter((item: let, index: number) => {
return index % 2 //过滤掉的条件
}
)
console.log(filteredArray) // [ 1, 3,ture ,nudefinde]
元组Tuple (同数组类似)
let tupleOne: [string, number] = ['张三', 22]
let first = tupleOne[0] // 自动类型推导为 string
tupleOne[0] = '李四'
Set
let setOne: Set<number> = new Set<number>()
setOne.add(1) // 添加元素
setOne.add(1) // 添加重复元素时不会生效
setOne.add(2).add(3).add(4).add('4') // add 方法支持链式调用
console.log(setOne.size) // 5
if (setOne.has(4)) { // has 方法判断是否包含某个元素
setOne.delete(4)
}
console.log(setOne)
setOne.forEach((value: let) => { // forEach 遍历
console.log(value)
})
Map
创建
let mapOne: Map = new Map()
mapOne.set('key', 'value')
mapOne.set('周', 32).set('wangT',null).set(1,'one')
console.log(mapOne)
// {"key" => "value", "周" => 32, "wangT" => null, 1 => "one"}
mapOne.set(null,).set()
//{"key" => "value", "周" => 32, "wangT" => null, 1 => "one", null => undefined, …}
遍历 for of
同时遍历 key 和 value
for (let entry of mapOne) {
console.log(entry, entry[0], entry[1])
}
// 输出
["key", "value"] "key" "value"
["周", 32] "周" 32
["wangT", null] "wangT" null
[1, "one"] 1 "one"
for (let [key, value] of mapOne) {
console.log(key, value)
}
//输出
key value
周 32
wangT null
1 "one"
仅遍历key / value
for (let key of mapOne.keys()) {
console.log(key)
}
for (let value of mapOne.values()) {
console.log(value)
}
其他 属性方法(size, get ,has,delete)
mapOne.size // 6 set()也算是元素
mapOne.get('张三') //undefined
mapOne.get('周') //32
mapOne.has('周') //true
mapOne.has('张三') //false
console.log(mapOne.delete('key')) //true
console.log(mapOne.delete('张三')) //false
mapOne.clear() // 清除所有元素
MAP与对象之间转换
// Map 转为对象
let obj = Object.fromEntries(mapOne.entries())
console.log(obj)
输出
{1: "one", key: "value", 周: 32, wangT: null, null: undefined, undefined: undefined}
// 对象转为 Map
let mapTwo: Map<string, number> = new Map(Object.entries(obj))
console.log(mapTwo) // {"1" => "one", "key" => "value", "周" => 32, "wangT" => null, "null" => undefined, …}
字符串处理