ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript 配列のさまざまな一般的な使用法を要約する

JavaScript 配列のさまざまな一般的な使用法を要約する

巴扎黑
リリース: 2017-09-06 10:25:54
オリジナル
1506 人が閲覧しました

本文实例讲述了JavaScript数组各种常见用法。分享给大家供大家参考。具体如下:

运行效果如下图所示:

具体代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>javascript各种数组方法的使用</title>

<style>

p{color:green;padding:10px 15px;margin:12px 0;background:#f0f0f0;border:1px dotted #333;font:12px/1.5 Courier New;word-wrap:break-word;}

</style>

<script type="text/javascript">

window.onload = function ()

{

  var ap = document.getElementsByTagName("p");

  var aInput = document.getElementsByTagName("input");

  var i = 0;

  var bS1 = bS2 = true;

  var aTmp = [];

  //删除/添加第一项

  aInput[0].onclick = function ()

  {

    aTmp = getArray(ap[0].innerHTML);

    bS1 ?

    //删除第一项, shift()方法

    (aTmp.shift(), this.value = this.value.replace("删除","添加"), bS1 = false) :

    //添加第一项, unshift()方法

    (aTmp.unshift("January(1)"), this.value = this.value.replace("添加","删除"), bS1 = true);

    //输出

    ap[0].innerHTML = aTmp.join()

  };

  //删除/添加最后一项

  aInput[1].onclick = function ()

  {

    aTmp = getArray(ap[0].innerHTML);

    bS2 ?

    //删除最后一项, pop()方法

    (aTmp.pop(), this.value = this.value.replace("删除","添加"), bS2 = false) :

    //添加最后一项, push()方法

    (aTmp.push("December(12)"), this.value = this.value.replace("添加","删除"), bS2 = true);

    //输出

    ap[0].innerHTML = aTmp.join()

  };

  //复制, concat()方法

  aInput[2].onclick = function ()

  {

    aTmp = getArray(ap[1].innerHTML);

    //输出

    ap[1].innerHTML = aTmp.concat(aTmp).toString().replace(/s/g,"")

  };

  //还原, 利用数组的 length 特点

  aInput[3].onclick = function ()

  {

    aTmp = getArray(ap[1].innerHTML);

    //设置数组长度

    aTmp.length = 10;

    //输出

    ap[1].innerHTML = aTmp.join()

  };

  //第三组数据还原

  aInput[4].onclick = function ()

  {

    aTmp = ["red","green","blue","white","yellow","black","brown"];

    //输出

    ap[2].innerHTML = aTmp.join()

  };

  //删除前三项

  aInput[5].onclick = function ()

  {

    aTmp = getArray(ap[2].innerHTML);

    //删除, 0开始, 删除3个

    aTmp.splice(0, 3); 

    //输出

    ap[2].innerHTML = aTmp.join()

  };

  //删除第二至三项

  aInput[6].onclick = function ()

  {

    aTmp = getArray(ap[2].innerHTML);

    //删除, 2开始, 删除2个

    aTmp.splice(1, 2); 

    //输出

    ap[2].innerHTML = aTmp.join()

  };

  //在第二顶后插入"orange", "purple"

  aInput[7].onclick = function ()

  {

    aTmp = getArray(ap[2].innerHTML);

    //插入, 2开始, 插入"orange", "purple"

    aTmp.splice(1, 0, "orange", "purple"); 

    //输出

    ap[2].innerHTML = aTmp.join()

  };

  //替换第二项和第三项

  aInput[8].onclick = function ()

  {

    aTmp = getArray(ap[2].innerHTML);

    //插入, 2开始替换

    aTmp.splice(1, 2, "#009900", "#0000ff"); 

    //输出

    ap[2].innerHTML = aTmp.join()

  };

  //将p中的内容转为数组

  //str  p对象

  function getArray(str)

  {

    aTmp.length = 0;

    str = str.split(",");

    for (var i in str)aTmp.push(str[i]);

    return aTmp

  }

}

</script>

</head>

<body>

<p>January(1),February(2),March(3),April(4),May(5),June(6),July(7),Aguest(8),September(9),October(10),November(11),December(12)</p>

<input type="button" value="删除January(1)" />

<input type="button" value="删除December(12)" />

<p>0,1,2,3,4,5,6,7,8,9</p>

<input type="button" value="复制" />

<input type="button" value="还原" />

<p>red,green,blue,white,yellow,black,brown</p>

<input type="button" value="还原" />

<input type="button" value="删除前三项" />

<input type="button" value="删除第二至三项" />

<input type="button" value="在第二项后插入(orange, purple)" />

<input type="button" value="替换第二项和第三项" />

</body>

</html>

ログイン後にコピー

以上がJavaScript 配列のさまざまな一般的な使用法を要約するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート