TypeScript Array(数组)声明和简单使用

Posted 2023-03-29 samxiaoguai

目录

TypeScript Array(数组)

1.数组声明：数组对象是使用单独的变量名来存储一系列的值。

2.Array 对象：可以使用 Array 对象创建数组。

3:数组解构:可以把数组元素赋值给变量。

4.数组迭代:可以使用循环输出数组的各个元素

5.多维数组:一个数组的元素可以是另外一个数组

6.数组在函数中的使用

7.数组方法

8.数组方法的简单使用

---

TypeScript Array(数组)

1.数组声明：数组对象是使用单独的变量名来存储一系列的值。

let arr: number[] = [1, 2];  //数组
console.log(arr)
let arr2: Array<number> = [1,2];
console.log(arr2) //[ 1, 2 ]
let arr3: Array<string> = ["1","2"];
console.log(arr3) //[ '1', '2' ]
let arr4: Array<any> = ["1",2];
console.log(arr4) //[ '1', 2 ]

2.Array 对象：可以使用 Array 对象创建数组。

数组对象的构造函数接受以下两种值：

(1)表示数组大小的数值。

let oneArr:number[] = new Array(6)  
for(let i:number = 0; i< oneArr.length; i++)  
    oneArr[i] = i * 2 

console.log(oneArr) //[ 0, 2, 4, 6, 8, 10 ]

(2)初始化的数组列表，元素使用逗号分隔值。

let twoArr:number[] = new Array(1,2,3)  
console.log(twoArr) //[ 1,2,3 ]

3:数组解构:可以把数组元素赋值给变量。

let [x,y] = oneArr;
console.log(x,y) //0 2

4.数组迭代:可以使用循环输出数组的各个元素

let twoArr:number[] = new Array(1,2,3)  
for(let i:number = 0; i< twoArr.length; i++)  
    console.log(twoArr[i])

// 1
// 2
// 3

注： 可以参考TypeScript循环一章节

5.多维数组:一个数组的元素可以是另外一个数组

let manyArr:number[][] = [[1,2,3],[1,2,3]];
console.log(manyArr)
let manyArr2:string[][] = [["1","2","3"],["1","2","3"]];
console.log(manyArr2)
let manyArr3:any[][] = [[1,2,"3"],[1,2,"3"]];
console.log(manyArr3)
// [ [ 1, 2, 3 ], [ 1, 2, 3 ] ]
// [ [ '1', '2', '3' ], [ '1', '2', '3' ] ]
// [ [ 1, 2, '3' ], [ 1, 2, '3' ] ]

6.数组在函数中的使用

(1)作为参数传递给函数

let useValue = new Array(manyArr)
function useArr (manyArr:number[][][]) 
   console.log(manyArr)

useArr(useValue)  //[ [ [ 1, 2, 3 ], [ 1, 2, 3 ] ] ]

(2)作为函数的返回值

function returnArr(): number[][][] 
    return new Array(manyArr)

console.log(returnArr()) //[ [ [ 1, 2, 3 ], [ 1, 2, 3 ] ] ]

7.数组方法

方法	描述
concat()	连接两个或更多的数组，并返回结果。
every()	可以检测数值元素的每个元素是否都符合某种条件。
filter()	检测数值元素，并返回符合条件所有元素的数组。
forEach()	数组每个元素都执行一次回调函数。
indexOf()	搜索数组中的元素，并返回它所在的位置。如果搜索不到，返回值 -1，代表没有此项。
join()	把数组的所有元素连接为一个字符串，可以指定符号连接
lastIndexOf()	返回一个指定的字符串值最后出现的位置，在字符串中的指定位置从后向前搜索。如果搜索不到，返回值 -1，代表没有此项。
map()	通过指定函数处理数组的每个元素，并返回处理后的数组。
pop()	删除数组的最后一个元素并返回删除的元素。
push()	向数组的末尾添加一个或更多元素，并返回新的长度。
reduce()	将数组元素计算为一个值（从左到右）。
reduceRight()	将数组元素计算为一个值（从右到左）。
reverse()	反转数组的元素顺序。
shift()	删除并返回数组的第一个元素。
slice()	选取数组的的一部分，并返回一个新数组。
some()	可以检测数组元素中是否有元素符合指定条件。
sort()	对数组的元素进行排序。
splice()	从数组中添加或删除元素。
toString()	把数组转换为字符串，并返回结果。
unshift()	向数组的开头添加一个或更多元素，并返回新的长度。

8.数组方法的简单使用

注：

1. slice可以接受两个参数（起始位置和结束位置）或者一个或者不传值，当没传入值时，返回的数组的值原始数组值，如果只传入一个参数，则返回截取的原始数组从参数代表的起始位置到原始数组的结束位置（包含结束位置），如果传入两个参数，则返回截取的原始数组从参数代表的起始位置到参数代表结束位置（不包含结束位置）。

2.splice可以传入三个参数插入位置（删除起始位置）和删除数量和插入的值。

3.every和some的另外释意和使用可以参考TypeScript循环一章

let carr1: number[] = [1, 2, 3];
let carr2: number[] = [4, 5, 6];
let carr3: number[] = [7, 8, 9];
console.log(carr1.concat(carr2)) //[ 1, 2, 3, 4, 5, 6 ]
console.log(carr1.concat(carr2, carr3)) //[ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

function isBigEnough(item: number) 
    return (item >= 10);


let eArr = [1, 2, 20].every(isBigEnough);
console.log("Test Value : " + eArr); // false

let fArr = [1, 2, 20].filter(isBigEnough);
console.log(fArr); // [ 20 ]

let feArr = [1, 2, 20]
feArr.forEach((item: number) => 
    console.log(item);
);

let indexOfArr = [1, 2, 20];
console.log(feArr.indexOf(1));
console.log(feArr.indexOf(20));
console.log(feArr.indexOf(3));
// 0
// 2
// -1
let joinArr = [1, 2, 20];
console.log(joinArr.join("-")); //"1-2-20"

let lastArr = [1, 2, 2, 2, 20];
console.log(lastArr.lastIndexOf(20));
console.log(lastArr.lastIndexOf(2));
console.log(lastArr.lastIndexOf(3));
// 4
// 3
// -1
let mapArr = [1, 4, 9];
console.log(mapArr.map(Math.sqrt)); //[ 1, 2, 3 ]

let popArr = [1, 4, 9];
console.log(popArr.pop()); //9

let pushArr = [1, 4, 9];
pushArr.push(10);
console.log(pushArr); //[ 1, 4, 9, 10 ]

let reduceArr = [1, 2, 3].reduce((a, b) =>  return a + b; );
let reduceArr2 = ["1", "2", "3"].reduce((a, b) =>  return a + b; );
console.log(reduceArr)
console.log(reduceArr2)
// 6
// 123
let reduceRArr = [1, 2, 3].reduceRight((a, b) =>  return a + b; );
let reduceRArr2 = ["1", "2", "3"].reduceRight((a, b) =>  return a + b; );
console.log(reduceRArr)
console.log(reduceRArr2)
// 6
// 321

let reverseArr = [1, 2, 3];
console.log(reverseArr.reverse()); //[ 3, 2, 1 ]

let shiftArr = [1, 2, 3];
console.log(shiftArr.shift()); //1

let sliceArr = [4, 5, 6, 7, 8];
console.log(sliceArr.slice()); //[ 4, 5, 6, 7, 8 ]
console.log(sliceArr.slice(1, 2)); //[ 5 ]
console.log(sliceArr.slice(1, 3)); //[ 5, 6 ]
console.log(sliceArr.slice(0, 3)); //[ 4, 5, 6 ]
console.log(sliceArr.slice(3)); //[ 7, 8 ]

function isBigEnough2(item: number) 
    return (item >= 10);



let someArr = [1, 2, 13].some(isBigEnough2);
console.log(someArr);  //true
let someArr2 = [1, 2, 3].some(isBigEnough2);
console.log(someArr2); //false

let sortArr = new Array(1, 3, 2, 1); 
console.log(sortArr.sort()); //[ 1, 1, 2, 3 ]
let sortArr2 = new Array("1", "3", "2", "1"); 
console.log(sortArr2.sort()); //[ '1', '1', '2', '3' ]
let sortArr3 = new Array("abc", "cbc", "bbc", "abc"); 
console.log(sortArr3.sort()); //[ 'abc', 'abc', 'bbc', 'cbc' ]

let spliceArr = new Array("1", "2", "3");
spliceArr.splice(2, 0, "hello"); 
console.log(spliceArr) //[ '1', '2', 'hello', '3' ]
let spliceArr2 = new Array("1", "2", "3","4");
spliceArr2.splice(2, 1, "hello"); 
console.log(spliceArr2) //[ '1', '2', 'hello', '4' ]
let spliceArr3 = new Array("1", "2", "3","4","5");
spliceArr3.splice(2, 2); 
console.log(spliceArr3) //[ '1', '2', '5' ]

let tostringArr = new Array("1", "2", "3");
console.log(tostringArr.toString()) //1,2,3

let unshiftArr = new Array("1", "2", "3");
console.log(tostringArr.unshift("6")) //4
console.log(tostringArr) //[ '6', '1', '2', '3' ]
console.log(tostringArr.unshift("6","7")) //6
console.log(tostringArr) //[ '6', '7', '6', '1', '2', '3' ]

有问题可以在下面评论，我会为大家解答。

TypeScript Array.prototype.map 声明

【中文标题】TypeScript Array.prototype.map 声明

【英文标题】：TypeScript Array.prototype.map declaration

【发布时间】：2017-06-16 23:44:40

【问题描述】：

规格

根据MDN specification for Array.prototype.map()的映射应该这样使用...

var new_array = arr.map(callback[, thisArg])

问题

TypeScript 有几个 map 的重载声明，这使得extend Array<T> 变得非常困难。

我希望看到这个（在 lib.d.ts 中）...

map<U>(callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any): U[];

但是 lib.d.ts 也有这些...

map<U>(this: [T, T, T, T, T], callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any): [U, U, U, U, U];

map<U>(this: [T, T, T, T], callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any): [U, U, U, U];

map<U>(this: [T, T, T], callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any): [U, U, U];

map<U>(this: [T, T], callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any): [U, U];

反对

由于 JavaScript 不允许方法重载，TypeScript 也不允许用于类实现，我认为 TypeScript 也不应该允许这种环境声明。

问题

为什么 TypeScript 允许环境声明的重载签名？ 如何在扩展 Array 的类中覆盖地图实现？

我也在 GitHub 上提出了这个问题... https://github.com/Microsoft/TypeScript/issues/13785

注意

ReadonlyArray<T>只有一个map的签名，就是……

 map<U>(callbackfn: (value: T, index: number, array: ReadonlyArray<T>) => U, thisArg?: any): U[];

【问题讨论】：

有趣的是，您没有询问 IMO 在这里最重要的方面是什么：目的。正如“为什么首先定义所有这些重载签名？”——答案是这样的事实，TypeScript 具有元素数量有限的数组的类型概念，例如[number, number, number] 是一个三元素number[]。这对于 to 和 from number[] 都是可赋值的，但从编译器的角度来看，它并不精确相同。此外，这些在某些情况下也称为元组类型，并且可以定义不必要的可相互分配的元素类型。

@JohnWeisz 我得到了 n 元素数组的概念，但是为什么这个概念在这方面停留在 5 元素数组上呢？ n 肯定是无限的吗？

【参考方案1】：

(1) 如果不允许在环境声明中重载签名，您将如何在本机 js 函数/方法中获得不同的签名？lib.d.ts 中有很多重载，反映了原生 js 对象是如何工作的。

(2) 你需要告诉编译器你覆盖了所有可能的声明签名。 在您的情况下，您可以执行以下操作：

class A<T> extends Array<T> 
    map<U>(this: Array<U>, ...args: any[]);
    map<U>(this: Array<T>, callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any): U[] 
        return [];
    

第一个重载签名会处理您不想打扰的那些。

【参考方案2】：

您的问题涉及 TypeScript 的不同方面。我会单独处理它们，然后将它们放在一起。

数组

接口在 TypeScript 中有双重用途：

它们允许您为其他（尚不存在的）类创建“真正的”接口来实现。当您实现它时，您必须完全实现它，因为该接口保证其所有成员都可用。 它们允许您定义已经存在 javascript 类型的接口。当您想使用众多现有库之一并且仍然具有静态类型的优势时，这非常有用。这些接口通常在.d.ts 文件中定义（并且lib.d.ts 文件包含基本的JavaScript 类型）。这些接口是为现有类型量身定制的，它们通常不适合您实现。如果你愿意，你可以，但你必须实现它的所有成员。

Array<T> 接口属于第二种类型，因此不适合您实现。

this函数中的参数

函数定义中的this: 参数不是真正的参数，因为您可以传递参数。它允许您指定您希望函数体中的 this 值是哪种类型。如果不指定，this 将是 any 类型，这通常不是很有用。

函数/方法重载

在 TypeScript 中，函数和方法在 Java 或 C# 等语言中不会被重载。您不能多次实现它，但您可以定义替代签名以允许对返回变体类型或使用变体参数的函数进行静态类型化。尤其是在.d.ts 定义文件中，这很有用而且通常是必要的，因为现有库使用 JavaScript 的弱类型来返回值或期望不同类型的参数。这使您的反对意见错误。您需要函数重载来适应这些 JavaScript 结构。

元组

在 JavaScript 数组中，您可以在其每个插槽中分配多种类型的值。在 TypeScript 数组定义中，您指定 one 类型，这是编译器强制执行的。为了填补空白，您可以定义 元组。 [number, string, string] 这样的类型转换为 JavaScript 数组 any[]，TypeScript 仍然可以强制执行静态类型。

总结

如果数组是实际的[T, T]、[T, T, T]、[T, T, T, T]、[T, T, T, T, T]，则数组方法会重载您在Array<T> 中反对的对象，从而引入静态类型的this 参数。这并不意味着该数组提供了多个map 方法。它是相同的方法，但对某些特定的数组类型进行了重载。它在lib.d.ts 中提供，因此并非旨在由您实现。您可以扩展底层类（即使没有接口也已经存在），但重载不会伤害您（至少在这种情况下不会，因为它们只提供this 参数）。

【讨论】：

Array 实际上是一个可以扩展的类，在发布此答案之前您应该检查一下。 OP 可能知道您所有冗长的解释（基于他询问的内容和询问方式）。

@NitzanTomer：我查过（github.com/Microsoft/TypeScript/blob/master/lib/lib.d.ts - 搜索“interface Array ”），你似乎比我更了解 OP。

您还会看到，在 interface Array<T> 之后是 interface ArrayConstructor，它定义了构造函数，然后是 declare const Array: ArrayConstructor，它使 Array 成为一个类。

但不仅如此，只需尝试编译 class MyArray<T> extends Array<T> 并查看它是否有效。

@NitzanTomer：我会更正那部分，但从我在帖子中描述的意义上说，它是一个接口。 class 已经存在，interface 只是定义了它的成员。