公众号

typescript数组操作方法

数组的语法和语义与C#数组非常相似,首先要指定一个数组名,后跟冒号,冒号后面紧跟数组的类型,数组类型名后面跟方括号表示当前定义的是一个数组,对于一个空的数组定义,可以使用如下的语法:

1
2
3
4
5
6
btnArrayClick(sender: Core.Classes.TComponent){
//定义一个字符串类型的数组
var actors:string[]=["张三","李四","王五","赵六"];
//可以使用Array对象的任何属性
alert(actors.length);
}

数组属于Array对象的实例,因此要实例化一个空白的数组,可以直接赋一个空白的Array对象实例即可,如下代码所示:

1
2
3
4
5
6
7
8
btnemptyArrayClick(sender: Core.Classes.TComponent){
//定义一个任意类型的空白数组,这个语法不被支持
//var emptyArray:any[]=new Array();
//建议使用如下的语法
var emptyArray:any[]=[];
emptyArray[0]="这是一个测试";
alert(emptyArray[0]);
}

我发现在WisOne IDE直接赋一个new Array()对象实例给类型为any的数组不被支持,因此在这里直接赋了一个[]空白数组符号,并为其第1个元素赋了一个字符串,然后用alert函数输出其第1个元素.

TypeScript建议用户最好只为数组赋一种类型的值,当然通过any[]也可以类似javaScript那样为数组中的元素分配任何类型的值.假定你定义了一个字符串类型的数组,但是又为其分配数字类型的元素,那么TypeScript编译器也不会抛出异常,尽管如此,你还是应该总是确保总是只使用一种类型:

1
2
3
4
5
6
btnArrayTypeClick(sender: Core.Classes.TComponent){
//定义数字类型的数组,但是又分配了字符串和数字值,编译器没有抛出异常
var actors:number[]=["李小五",123];
alert(actors[0]);
}

在TypeScript数组尽管具有与C#类似的语法,但它是变长数组类型的,这意味着可以使用数组的一些方法比如push或pop来添加或删除元素,因而数组的length属性值也是经常变化的,对于数组中的元素,可以使用for或for..in循环来遍历其中的元素.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
btnArrayForClick(sender: Core.Classes.TComponent){
//定义一个字符串类型的数组
var actors:string[]=["张三","李四","王五","赵六"];
//使用标准for循环
for (var i = 0; i < actors.length; i++)
{
console.log(actors[i]);
}
//使用for..in循环
for (var actor in actors)
{
console.log(actors[actor]);
}
}

在javaScript中,数组的下标即可以是整数类型,也可以是字符串类型,但是使用数值类型的下标返回的值类型为any类型,而不是特定的类型.

1
2
3
var asExpected = actors[0]; // 返回字符串类型的 "张三"
var gotcha = actors["Ian Holm"]; //返回任意类型的值
TypeScript中还可以使用很多类似javaScript中的函数来实现对数组的操纵,接下来讨论一些常见函数的使用:

Concat()方法

该方法用于连接或者是合并2个或多个数组,并且返回一个新的数组,它并不改变已经存在的数组,而是返回一个包含所有数组值的数组.
语法如下:

1
2
3
array.concat(value1,value2,valu3,....................valuen)
array: 所有的其他数组要进行合并的源数组
value:要添加到源数组中的其他数组元素.

举例:

1
2
3
4
5
6
7
8
9
var fstarry: string[] = ['C','Sharp'];
var scndarry: string[] = ['Corner', '.com'];
var result = fstarry.concat(scndarry);
```
## IndexOf()方法
用来在数组中搜索指定的元素值,并且返回所发现的第1个结果值的下标,语法如下所示:

array.indexOf(searchvalue,start)
searchvalue是指定要搜索的值,start指定要搜索的起始索引位置,如果没有指定,那么表示从0开始进行搜索.如果找到则返回找到的索引值,如果没有找到,则返回-1.

var arrayName: string[] = ['C','Sharp','Corner','Dot','Net','Heaven'];
var index = arrayName.indexOf('Dot');
1
2
3
4
5
6
## Join()方法
该方法用于连接一个数组的元素到一个字符串,并且返回该字符串.join方法接收一个分隔符作为参数,指定特定的像空格\逗号或加号等其他的字符来分隔数组中的元素,如果没有指定任何参数,这个方法将转换数组中的所有元素为字符串,并且连接并通过逗号分隔字符串数组元素.
array.join(separator)
示例如下所示:
btnArrayJoinClick(sender: Core.Classes.TComponent){
     var fstarry: string[] = ['C','Sharp','Corner', '.com']; 
   var result = fstarry.join();
   var result1 = fstarry.join('+');
   var result2 = fstarry.join('*');
   this.edit1.text="Join Method \n 第1个join示例 -> " + result + "\n" + "第2个使用+号的示例 (+) -> " + result1 + "\n" +
                     "第3个使用*号的示例(*) -> " + result2 +"\n";
}
1
2
结果如下所示:

Join Method 第1个join示例 -> C,Sharp,Corner,.com
第2个使用+号的示例 (+) -> C+Sharp+Corner+.com
第3个使用号的示例() -> CSharpCorner*.com

1
2
3
4
5
## LastIndexOf()方法
与IndexOf相反,它返回的是最后一次批配的字符串的索引位置,如下语法所示:

array.lastIndexOf(searchvalue,start)
如下示例所示:

button1Click(sender: Core.Classes.TComponent){
       var arrayName: string[] = ['C','Sharp','Corner','VB','Net','Heaven'];
       var index = arrayName.lastIndexOf('Corner');
       this.edit1.text="Corner的索引位置是:"+index;
}
1
2
3
4
5
6
7
8
9
10
11
输出结果如下:
Corner的索引位置是:2
## Push() 方法
Push方法向数组的最后位置中插入一个或多个元素,返回新的数组的长度,push方法视数组为一个堆栈结构,语法如下所示:
array.push(element1,element 2,.........)
示例如下所示:
btnpushdemoClick(sender: Core.Classes.TComponent){
    var fstarry: string[] = ['C','Sharp','Corner']; 
    var elemnt ="wis_one"
    fstarry.push(elemnt);
    this.edit1.text= "Push Method \n 插入了数组元素值之后, Array is -> " + fstarry + "\n";       
}
1
2
3
4
5
6
7
8
9
10
11
输出结果如下所示:
Push Method 插入了数组元素值之后, Array is -> C,Sharp,Corner,wis_one
## pop()方法
pop方法是Array对象中最流行的方法,该方法移除数组中的最后一个元素,减少数组的长度并且返回被移除的元素,如果数组为空,则pop方法会返回null.
语法如下所示:

array.pop()
示例如下所示:

btnpopDemoClick(sender: Core.Classes.TComponent){
     var arrayName: string[] = ['C','Sharp','Corner','VB','Net','Heaven'];
     var index = arrayName.pop().toString();
     this.edit1.text= "Pop Method \n 从数组中移除元素-> " + index;
}
1
2
3
4
5
6
7
8
9
输出结果如下所示:
Pop Method 从数组中移除元素-> Heaven
## reverse()方法
用于反转数组元素的顺序,reverse方法没有参数,返回被反转后的数组,使得最后一个元素变为第1个元素,第1个元素变为最后一个元素.
语法如下所示:

array.reverse()
示例如下所示:

var fstarry: string[] = ['C','Sharp','Corner']; 
fstarry.reverse();
this.edit1.text = "Revrese Method \n 反转后的数组: -> " + fstarry + "\n";     
1
2
3
4
5
6
7
8
结果如下所示:
Revrese Method 反转后的数组: -> Corner,Sharp,C
## shift() 方法
移除数组中的首个元素,减少数组的长度并且返回被移除的元素,如果数组的键为数字型,那么所有的元素将得到新的键,从0开始依次递增.

array.shift()
示例如下所示:

var arrayName: string[] = ['C','Sharp','Corner','VB','Net','Heaven'];
var index = arrayName.shift().toString();
this.edit1.text = "Shift Method \n 移除的元素为 -> " + index;
1
2
3
4
5
6
7
8
9
10
结果如下所示:
Shift Method 移除的元素为 -> C
## slice() 方法
该方法返回指定起始位置的一个新的数组,slice和concat方法让用户可以根据指定的原始数组创建一个新的数组,并不会修改原始的数组,如果只想让原始数组被新数组替代,可以设置旧的数组等于新的数组.
语法如下所示:

array.slice(start,end)
示例如下所示:

var fstarry: string[] = ['C','Sharp','Corner','Dot','Net','Heaven','Modeling','Corner']; 
var sliceArry=fstarry.slice(3, 7);
this.edit1.text = "Slice Method \n 新的数组为 -> " + sliceArry + "\n";
1
2
3
4
5
6
7
8
示例运行结果如下:
Slice Method 新的数组为 -> Dot,Net,Heaven,Modeling
## sort() 方法
排序数组,如果没有指定参数,那么将会按照字母数字顺序进行排序,语法如下:

array.sort(comparison_function)
示例如下所示:

var arrayName: string[] = ['C','Sharp','Corner','VB','Net','Heaven'];
var sortArry = arrayName.sort();
this.edit1.text= "Sort Method \n 排序后的结果为-> " + sortArry+"\n";

```
运行效果如下所示:

Sort Method 排序后的结果为-> C,Corner,Heaven,Net,Sharp,VB

最后想说:Star me on GitHub 欢迎 Star

🙈坚持原创技术分享,您的支持将鼓励我继续创作🙈
显示 Gitment 评论