JavaScript可以定义一个List吗?

JavaScript027

JavaScript可以定义一个List吗?,第1张

JavaScript可以定义数组类型，没有所谓的List类型。

JavaScript也没有必要存在List类型。JAVA的List类型是为了解决数组长度不可变的问题，但JavaScript不存在从这个问题。JavaScript的数组长度可变，并有非常多且实用的方法可使用，比JAVA的数组灵活的多，JAVA的List的大部分功能，JavaScript的数组也都有。

JavaScript的数组的定义方法有以下几种：

var arr = []//定义一个空数组

var arr = [1,2,3]//定义一个带元素的数组

var arr = new Array()//定义一个空数组，啰嗦的写法

var arr = new Array(5)//定义一个长度为5的数组，容易误导人，非常不建议的一种写法

扩展阅读：数组对象的方法

concat()    连接两个或更多的数组，并返回结果。  

copyWithin()    从数组的指定位置拷贝元素到数组的另一个指定位置中。  

entries()    返回数组的可迭代对象。  

every()    检测数值元素的每个元素是否都符合条件。  

fill()    使用一个固定值来填充数组。  

filter()    检测数值元素，并返回符合条件所有元素的数组。  

find()    返回符合传入测试（函数）条件的数组元素。  

findIndex()    返回符合传入测试（函数）条件的数组元素索引。  

forEach()    数组每个元素都执行一次回调函数。  

from()    通过给定的对象中创建一个数组。  

includes()    判断一个数组是否包含一个指定的值。  

indexOf()    搜索数组中的元素，并返回它所在的位置。  

isArray()    判断对象是否为数组。  

join()    把数组的所有元素放入一个字符串。  

keys()    返回数组的可迭代对象，包含原始数组的键(key)。  

lastIndexOf()    返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。  

map()    通过指定函数处理数组的每个元素，并返回处理后的数组。  

pop()    删除数组的最后一个元素并返回删除的元素。  

push()    向数组的末尾添加一个或更多元素，并返回新的长度。  

reduce()    将数组元素计算为一个值（从左到右）。  

reduceRight()    将数组元素计算为一个值（从右到左）。  

reverse()    反转数组的元素顺序。  

shift()    删除并返回数组的第一个元素。  

slice()    选取数组的的一部分，并返回一个新数组。  

some()    检测数组元素中是否有元素符合指定条件。  

sort()    对数组的元素进行排序。  

splice()    从数组中添加或删除元素。  

toString()    把数组转换为字符串，并返回结果。  

unshift()    向数组的开头添加一个或更多元素，并返回新的长度。  

valueOf()    返回数组对象的原始值

很简单的一个使用：点击菜单，能够显示下面的或者不显示

1，主要目的：： 展现的是的一个菜单项，然后点击一下，隐藏，点一下，弹出下面的内容

用到的是 overflow：hidden    和  overflow="visible"这两个属性 在点击的function中，设置属性应该node.style.overflow="visible"当然设置tr的高度也是很重要的，要恰好让其他的选项隐蔽。

2，采用同样的技术，多加几个，但是就是传参数比较麻烦，采用this传参很常用

具体代码如下。

<!DOCTYPE html>

<html>

<head>

<!-- 1，主要目的：： 展现的是的一个菜单项，然后点击一下，隐藏，点一下，弹出下面的内容

用到的是 overflow：hidden    和  overflow="visible"这两个属性 在点击的function中，设置属性应该

node.style.overflow="visible"

2，采用同样的技术，多加几个，但是就是传参数比较麻烦

-->

<title>list.html</title>

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

<style type="text/css">

dl{

height:18px/*优先级问题，必须要写*/

overflow:hidden

}

dd{

margin:0px

padding:0px

}

.close{

height:18px/*优先级问题，必须要写*/

overflow:hidden

}

.open{

height:80px

overflow:visible

background-color:#ff8000

}

</style>

<script type="text/javascript">

function click2(node1){

//                      alert("aa"+node.nodeName)// td

var nodes=node1.parentNode

//                      alert(nodes.nodeName)

//  alert("aa"+nodes.className)

//※※通过传进的对象 判断采用哪种css模式

if(nodes.className=="open"){

nodes.className="close"

}else{

nodes.className="open"

}

}

</script>

</head>

<body>

<!--层次列表-->

<!--当很多时候采用传参就很麻烦,每个都需要去传参

<dl>

<dt onclick="click1(0)">菜单条1</dt>

<dd>菜单1</dd>

<dd>菜单2</dd>

<dd>菜单3</dd>

<dd>菜单4</dd>

</dl>

<dl>

<dt onclick="click1(1)">菜单条2</dt>

<dd>菜单11</dd>

<dd>菜单22</dd>

<dd>菜单33</dd>

<dd>菜单44</dd>

</dl>

<dl>

<dt onclick="click1(2)">菜单条3</dt>

<dd>菜单12</dd>

<dd>菜单23</dd>

<dd>菜单34</dd>

<dd>菜单45</dd>

</dl>

-->

<br/>

<br/>

<hr/>

<!--<dl class="close">先手动采用css测试，可以然后采用编程使用-->

<dl>

<dt onclick="click2(this)">1菜单条1</dt>

<dd>菜单1</dd>

<dd>菜单2</dd>

<dd>菜单3</dd>

<dd>菜单4</dd>

</dl>

<dl>

<dt onclick="click2(this)">2菜单条2</dt>

<dd>菜单11</dd>

<dd>菜单22</dd>

<dd>菜单33</dd>

<dd>菜单44</dd>

</dl>

<dl>

<dt onclick="click2(this)">3菜单条3</dt>

<dd>菜单12</dd>

<dd>菜单23</dd>

<dd>菜单34</dd>

<dd>菜单45</dd>

</dl>

</body>

</html>