js中的数组方法和循环

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

let arr = [1,2,3]; for (let i=0; i<arr.length; i++){  console.log(i,arr[i]) } // 0 1 // 1 2 // 2 3

for 循环是 Js 中最常用的一个循环工具，经常用于数组的循环遍历。

2、for in 循环（VUE中常用到）

1 2 3 4 5 6

let obj = {name:'zhou',age:'**'} for(let i in obj){  console.log(i,obj[i]) } // name zhou // age **

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

let cars=["BMW","Volvo","Saab","Ford"]; let i=0; for (;cars[i];) { console.log(cars[i]) i++; }; // BMW // Volvo // Saab // Ford

然后是 while 循环方法

1 2 3 4 5 6 7

cars=["BMW","Volvo","Saab","Ford"]; var i=0; while (cars[i]) { console.log(cars[i] + "<br>") i++; };

我们发现，它们可以实现同样的效果，事实上它们底层的处理是一样的，不过 for 循环可以把定义、条件判断、自增自减操作放到一个条件里执行，代码看起来方便一些，仅此而已。

4、do while 循环

1 2 3 4 5 6 7 8 9

let i = 3; do{  console.log(i)  i--; } while(i>0) // 3 // 2 // 1

do while 循环是 while 循环的一个变体，它首先执行一次操作，然后才进行条件判断，是 true 的话再继续执行操作，是 false 的话循环结束。

5、数组forEach 循环（VUE中常用到）

1 2 3 4 5 6 7

let arr = [1,2,3]; arr.forEach(function(i,index){  console.log(i,index) }) // 1 0 // 2 1 // 3 2

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

let arr = [1,2,3]; let tt = arr.map(function(i){  console.log(i)  return i*2; }) // [2,4,6]

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
注意：map 和 forEach 方法都是只能用来遍历数组，不能用来遍历普通对象。

7、for of 循环

1 2 3 4 5 6

let arr = ['name','age']; for(let i of arr){  console.log(i) } // name // age