JS数组的常用属性:length
length 是一个可读可写的属性,用来表示数组的长度(即数组元素个数)。通过访问 length 属性,可以获取数组长度;而通过修改 length 的值,可以增加或减少数组元素,甚至可以完全清空数组元素。
length 属性的读、写操作示例如下:
var arr = [1,2,3];
alert(arr.length);//读取数组长度,结果为3
arr.length = 1;//修改数组长度为1,此时数组只剩第一个元素
arr.length = 0;//快速清空数组,此时数组中没有任何元素
注:快速清空除了可以通过修改 length 属性值为 0 外,还有一种方法就是使用代码:arr=[]。如果 arr 原来的元素有很多,则使用 arr=[] 清空数组的方法效率比修改 length 属性值为 0 的方法更高。
JS数组的常用方法
数组提供了一些常用方法,可实现数组元素的添加、删除、替换以及排序等功能。
1) push(元素1,…,元素n)
push() 方法可把参数指定的元素依次添加到数组的末尾,并返回添加元素后的数组长度(该方法必须至少有一个参数)。
3) pop()删除数组末尾元素
4) shift()删除数组头部元素
shift() 方法可删除数组第一个元素,并返回删除的元素。
5) splice(index,count[,元素1,…,元素n])
splice() 方法实现的各个功能示例如下。
① 使用 splice() 从指定位置删除指定个数的元素
② 使用 splice() 用指定元素替换从指定位置开始的指定个数的元素
③ 使用 splice() 在指定位置添加指定的元素
sort()、sort(compareFunction)
var arr = [1,2,3];
alert(arr.push(4));//返回最终数组的长度:4
alert(arr);//返回:1,2,3,4
alert(arr.push(5,6,7));//返回最终数组的长度:7
alert(arr);//返回:1,2,3,4,5,6,7
2) unshift(元素1,…,元素n)
//unshift() 方法可把参数指定的元素依次添加到数组的前面,并返回添加元素后的数组长度。该方法必须至少有一个参数。注意:IE6、IE7 不支持方法的返回值。示例如下:
var arr = [1,2,3];
alert(arr.unshift('a'));//返回最终数组的长度:4
alert(arr);//返回:a,1,2,3
alert(arr.unshift('b','c','d'));//返回最终数组的长度:7
alert(arr);//返回:b,c,d,a,1,2,3
//pop() 方法可弹出(删除)数组最后一个元素,并返回弹出的元素。示例如下:
var arr = ['A','B','C','D'];
alert(arr.pop());//返回:D
alert(arr);//返回:A,B,C
var arr = ['A','B','C','D'];
alert(arr.shift());//返回:A
alert(arr);//返回:B,C,D
//splic() 方法功能比较强,它可以实现删除指定数量的元素、替换指定元素以及在指定位置添加元素。这些不同功能的实现需要结合方法参数来确定:
//当参数只有 index 和 count 两个参数时,如果 count 不等于 0,splice() 方法实现删除功能,同时返回所删除的元素:从 index参数指定位置开始删除 count 参数指定个数的元素;
//当参数为 3 个以上,且 count 参数不为0时,splice() 方法实现替换功能,同时返回所替换的元素:用第三个及其之后的参数替换 index 参数指定位置开始的 count 参数指定个数的元素;
//当参数为 3 个以上,且 count 参数为 0 时,splice() 方法的实现添加功能:用第三个及其之后的参数添加到 index 参数指定位置上。
var arr = ['A','B','C','D'];
//2个参数,第二个参数不为 0,实现删除功能
alert(arr.splice(0,2));
alert(arr); //返回C,D
var arr = ['A','B','C','D'];
//3个参数,第二个参数不为 0,实现替换功能:用 a 替换掉 A,返回:A
alert(arr.splice(0,1,'a'));
alert(arr); //返回:a,B,C,D
alert(arr.splice(0,2,'a or b'));//用a or b替换掉a和B,返回a,B
alert(arr); //返回:a or b,C,D
var arr = ['A','B','C','D'];
//4个参数,第二个参数为 0,实现添加功能:在下标为 1 处添加 aaa,bbb,没有返回值
alert(arr.splice(1,0,'aaa','bbb'));
alert(arr);//返回:A,aaa,bbb,B,C,D
var arr = [1,2,2,2,4,2];
for(var i = 0; i < arr.length; i++){
for(var j = i + 1; j < arr.length; j++){
if(arr[i] == arr[j]){
arr.splice(j,1);//删除 j 位置处的元素
j--;7
}
}
}
alert(arr);//返回1,2,4三个元素
1、for 循环
1 2 3 4 5 6 7 |
|
for 循环是 Js 中最常用的一个循环工具,经常用于数组的循环遍历。
2、for in 循环(VUE中常用到)
1 2 3 4 5 6 |
|
for in 循环主要用于遍历普通对象,i 代表对象的 key 值,obj[i] 代表对应的 value,当用它来遍历数组时候,多数情况下也能达到同样的效果,但是你不要这么做,这是有风险的,因为 i 输出为字符串形式,而不是数组需要的数字下标,这意味着在某些情况下,会发生字符串运算,导致数据错误,比如:'52'+1 = '521' 而不是我们需要的 53。
另外 for in 循环的时候,不仅遍历自身的属性,还会找到 prototype 上去,所以最好在循环体内加一个判断,就用 obj[i].hasOwnProperty(i),这样就避免遍历出太多不需要的属性。
3、while 循环
同样的遍历 cars 数组,先用 for 循环方法
1 2 3 4 5 6 7 8 9 10 11 |
|
然后是 while 循环方法
1 2 3 4 5 6 7 |
|
我们发现,它们可以实现同样的效果,事实上它们底层的处理是一样的,不过 for 循环可以把定义、条件判断、自增自减操作放到一个条件里执行,代码看起来方便一些,仅此而已。
4、do while 循环
1 2 3 4 5 6 7 8 9 |
|
do while 循环是 while 循环的一个变体,它首先执行一次操作,然后才进行条件判断,是 true 的话再继续执行操作,是 false 的话循环结束。
5、数组forEach 循环(VUE中常用到)
1 2 3 4 5 6 7 |
|
forEach循环,循环数组中每一个元素并采取操作, 没有返回值, 可以不用知道数组长度,他有三个参数,只有第一个是必需的,代表当前下标下的 value。
另外请注意,forEach 循环在所有元素调用完毕之前是不能停止的,它没有 break 语句,如果你必须要停止,可以尝试 try catch 语句,就是在要强制退出的时候,抛出一个 error 给 catch 捕捉到,然后在 catch 里面 return,这样就能中止循环了,如果你经常用这个方法,最好自定义一个这样的 forEach 函数在你的库里。
6、数组 map() fl方法 (VUE中常用到)
arr.map(function(i,[index],[arr]){ // i 代表数组中每一项 必须 index 代表数组中元素的下标 可选 arr 代表当前元素所属的数组对象 可选
..........
})
1 2 3 4 5 6 |
|
map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
注意:map 和 forEach 方法都是只能用来遍历数组,不能用来遍历普通对象。
7、for of 循环
1 2 3 4 5 6 |
|