avalon中数组所具备的方法与变量

最新推荐文章于 2020-05-14 12:17:23 发布

原创最新推荐文章于 2020-05-14 12:17:23 发布 · 3.8k 阅读

1 ·

CC 4.0 BY-SA版权

js 同时被 2 个专栏收录

73 篇文章

订阅专栏

avalon

11 篇文章

订阅专栏

本文介绍了在avalon框架下定义和操作数组的方法，包括数组的定义、显示、变量（$index、$last、$first、$remove、$outer）以及数组相关方法（every、forEach、sort）的使用。通过实例代码演示了如何实现数组遍历、判断、排序等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

其中所介绍的部分方法为js中数组所具备的方法，而不单单是只能在avalon中使用的方法

数组的定义方式

由于本人对于前端的学习是在avalon框架下进行的，so，我介绍的数组定义方式是在avalon框架的定义方式，别处是否也如此定义，三字，不知道！定义方式：

数组名：[数组内容（用逗号隔开）]（如array[1,2,3]）

用于显示数组的代码

恩~如果想要让数组中的元素在界面显示出来，不需要使用什么遍历代码哦，直接{{数组名}}就ok啦。比如，现在有一个array:[1,2,3]数组，那么想要显示出数组元素，只要通过如下代码

<span style="font-size:10px;"><body ms-controller="test"><!--此处为对avalon中vm的引用--->
	{{array}}
</body></span>

则显示效果如下：

avalon中的数组具有以下变量：

$index：用于指明当前数组中的指针所在索引值，即指向数组中第几个元素（索引值从0开始）

示例代码：

<!DOCTYPE html> 
<html> 
    <head> 
 <span style="white-space:pre">	</span><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
        <script src="avalon.js" ></script> 
        <script> 
            var model = avalon.define({ 
                $id: "test", 
                array: ["aaa","bbb","ccc"] 
            }) 
        </script> 
    </head> 
    <body ms-controller="test"> 
        <ul> 
            <li ms-repeat="array">{{el}} --- {{$index}}</li> <!---通过{{$index}}在页面上显示出了遍历时数组的索引值0,1,2。---->
        </ul> 
    </body> 
</html>

$last：判断当前指向的是否为数组中的最后一个元素

$first：判断当前指向的是否为数组中的第一个元素

$remove：删除当前指向的数组中的元素

示例代码：

<body ms-controller="test"> 
        <ul> 
            <li ms-repeat="array" 
                ms-click="$remove">{{xx}}:{{$index}}</li> <!----点击标签内容时，触发$remove，即删除当前标签中所指向的元素----->
        </ul> 
    </body>

$outer：指向外围数组元素。

<body ms-controller="test"> 
        <table border="1"> 
            <tr ms-repeat-el="array"> <!---1、array为一个3行4列的数组 2、ms-repeat-XX="数组名"，表示遍历指定数组，遍历得到的数组元素，用XX表示。3、哪个标签需要多次出现，就在哪个标签中定义ms-repeat。比如想让数组A在一行表示出来，也就是说需要出现多次出现td标签，则需要在td标签中定义ms-repeat="A"，而非在tr标签定义---->

                <td ms-repeat-elem="el">{{elem}}  它位于第<b style="color:orchid">{{$outer.$index}}</b>行</td> <!---此处$outer指向的就是上层遍历所指向的元素，即外围数组元素，该元素是一个1X4的数组---->
            </tr> 
        </table> 
    </body>

avalon中的数组具有以下方法：

every方法。

该方法可用于判断布尔类型的数组中，是否所有元素都为真，若是，返回true，否则返回false（该方法可能也有其他功能，但目前本人只使用该方法实现过这一个功能）。该方法通常用于对于全选checkbox功能的实现。使用格式为：数组名.every(function(el){return el})。代码示例：

vm定义代码：

var model=avalon.define({
		$id:"test",
		single_checkbox_array:[{checked:false},{checked:false},{checked:false}],
		all_select:false,
		single_checkbox_changed:function(){
		model.all_select=model.single_checkbox_array.every(function(el){
		return el.checked
		})
		}<!---当single_checkbox_array数组中所有元素皆为true时，all_select为true，否则为false---->
		})

forEach方法

该方法用于迭代循环依次对数组中的所有元素执行某一操作。比如，以下代码的作用为给数组中每个元素赋值：

var model=avalon.define({
		$id:"test",
		single_checkbox_array:[{checked:false},{checked:false},{checked:false}],
		all_select:false,
		all_select_changed:function(){
		model.single_checkbox_array.forEach(function(el){
		el.checked=model.all_select<!----将数组中每个元素赋值为all_select的值---->
		
		})
		
		
		}
		})

其使用格式为数组名.forEach(function(el){......对元素所进行操作的代码})

sort方法

通过名字就可以猜到，该方法用于对数组中的元素进行排序。对于该方法的使用分为两种：不带参数的排序和带参数的排序。

不带参数的排序：数组名.sort()。则该方法将数组中的对象按照字母表中的顺序进行排序。

示例代码：

var a=[33,4,1111,222];
a.sort();<!---则排序的结果为：1111,222,33,4--->

带参数的排序：使用方法为数组名.sort(function(a,b){.....})其中a和b分别表示进行比较的两个数组中的元素。当返回值为负数时，a排在b的后面，否则a排在b的前面。

示例代码：

var a=[33,4,1111,222];
a.sort(function(a,b){return a-b;});<!--从小到大排序--->
a.sort(function(a,b){return b-a;});<!--从大到小排序--->