TypeScript应用 极速上手（3）

1、数组

1. 字面量定义

let a = ['a','b','c'] //string[]
let b = ['a','b','c',4,5] //(string | number)[]
console.log("a:",a) //"a:",  ["a", "b", "c"]
console.log("b",b) // "b",  ["a", "b", "c", 4, 5] 

   2. 指定类型定义

//指定类型
let c:number[] = [4,5]
//通过泛型指定
let d: Array<number> = [6,7,8,9,10]
console.log("c:",c) //"c:",  [4, 5] 
console.log("d:",d) //"d:",  [6, 7] 
//输出长度
console.log(c.length,d.length) //2,  5 
//取值,下标越界会输出undefined
console.log(c[1],c[2],d[4],d[-1],d[9]) //5,  undefined,  10,  undefined,  undefined 

3.遍历

const  a = [3,2,5,6,1]

//遍历数组，不推荐使用for循环，
for(let i = 0; i < a.length; i++){
    console.log(a[i])
}

//forEach遍历(有副作用的函数)但是代码易懂
 const b:number[] = []
 a.forEach(v => {
     b.push(v*v)
 })


//推荐使用map和reduce函数
const b = a.map(v=>v*v)
console.log(b) //[9, 4, 25, 36, 1]


//求和
// let sum = 0
// b.forEach(v => sum+=v)

//reduce 无副作用
const sum = b.reduce((s,v) => s+v)
console.log(sum) //75

//模拟reduce函数
 function reduce(b:number[],r:(s:number,v:number)=> number){
     let previousValue = 0
     b.forEach(currentValue => {
         previousValue = r(previousValue,currentValue)
     })
     return previousValue
 }

//单机版map reduce
console.log([1,2,3,4].map(v=>v*v).reduce((s,v)=>s+v))

4.空数组及数组判空

//空数组必须指定类型 为any[]
//let e = []
let e: any[] = []
console.log(e) //[]

//数组判空
let f:number[] = []

//输出结果为："f is not empty" 
if(f){
    console.log('f is not empty')
}else {
    console.log('f is empty')
}

//判断数组为空要使用 数组.length !== 0
//输出结果为："f is empty"
if(f.length !== 0){
    console.log('f is not empty')
}else {
    console.log('f is empty')
}

5.push操作

//push 从尾部操作
let g: number[] = []
g.push(1)
g.push(2)
g.push(3)//1,2,3
g.pop() //1,2
g.push(4)//1,2,4
console.log(g) //1,2,4

6.unshift操作

//unshift从头部操作
//可以用const定义数组，使其不能指定到别的数组上面
const h:number[] = []
h.unshift(1)
h.unshift(2)
h.unshift(3)// 3,2,1
h.shift()//2,1
h.unshift(4)
console.log(h) //4,2,1

7.slice操作，取子数组（slice[a,b)）

//取子数组slice[a,b)
const k:number[] = [1,2,3,4,5,6,7,8]
console.log(k.slice(2,5),k.slice(5,10)) //[3, 4, 5],  [6, 7, 8] 
console.log(k.slice(2)) //[3, 4, 5, 6, 7, 8]

8,splice操作

//删除元素
const l = [0,1,2,3,4,5,6,7,8,9]
const deleted = l.splice(3,2)
console.log(l,"deleted ",deleted) //[0, 1, 2, 5, 6, 7, 8, 9],  "deleted ",  [3, 4] 

//删除并添加元素
const m = [0,1,2,3,4,5,6,7,8,9]
const deleted1 = m.splice(3,2,10,11,12)
console.log(m,'deleted',deleted1)//[0, 1, 2, 10, 11, 12, 5, 6, 7, 8, 9],  "deleted",  [3, 4] 

9.普通查找元素

//普通查找元素 indexOf
const n = [0,1,2,3,4,5,6,7,8,9,5]
//只返回第一个重复元素下标
console.log("index of 5",n.indexOf(5)) //"index of 5",  5 
console.log("index of 11",n.indexOf(11)) //"index of 11",  -1 
//指定查找位置
console.log("index of 11",n.indexOf(5,8)) // "index of 11",  10
//从右边查找
console.log("lastIndex of 5",n.lastIndexOf(5)) //"lastIndex of 5",  10

10.普通排序

//排序的坑
const p = [0,1,2,3,4,5,6,7,11,12,21]
p.sort()
//一般情况下，按照字典顺序排序的，非按照数值
console.log(p) //[0, 1, 11, 12, 2, 21, 3, 4, 5, 6, 7] 

11.split

//split
const t ='a,b,c,1,2,3'
//返回的是string[],如果输出数值型，则自行转换
console.log(t.split(',')) //["a", "b", "c", "1", "2", "3"] 

12.join

//join 返回字符串 string
const u = [1,2,3,4].join()
console.log(u)//"1,2,3,4" 
//join指定分割参数
const u1 = [1,2,3,4].join(' ')
console.log(u1)//"1 2 3 4" 

 

2、元组

//元组 tuple ,数组也可以当做元组使用 
const r = [1,2,3]
const [r1,r2] = r
console.log(r1,r2) // 1,  2

const s = [1,2,3]
const [s1,s2,s3,s4] = s
console.log(s1,s2,s3,s4) //1,  2,  3,  undefined