数组的遍历方式(齐全)

数组(遍历数组)Array

案例:

arr1=[1,2,3]

arr2=[3,4,5]

arr3=[arr1,arr2]

log(arr3[0][2]) //输出为 arr1 的 3

一:数组的概念

之前 变量只能存一个值 如果我们想存多个值呢?

这就涉及到数组了

数组可以把一组数据有序的全部一起存起来 ,并且提供方便的访问(获取)方式

概念:数组是指一组数据的集合,每个数据被称为元素 在数组中可以任意存放任意类型的元素!并且是一组数据储存在单个变量中的优雅方式

var arr ={1、2、3、4、56、7};

二:创建数组

1.利用new创建数组(用的比较少):

方法:1.1. let 数组明 = new Array();

​ 1.2. let arr = new Array();//创建一个新的空间数组

2.利用数组字面量来创建数组:

方法: 2.1. let 数组名 =[];

​ 2.2. 数组名 =[‘小黑’,‘大黄’,‘瑞奇’];

//利用数组字面量来创建数组[]

​     let arr = [];//创建了一个空的数组 里面的值为undefined;

​     let arr1 = [1,2,'pink老师',true];//任意的数据类型都可以存放
//声明时直接赋值 

三:获取数组中的元素

1.数组的索引:索引(下标):用来访问数组元素的序号(数组下标从0开始)

​ var arr =[‘小黑’,‘大黄’,‘瑞奇’];

log(arr1[2]); //瑞奇 2是下标/索引号

​ arr.length = 0;则表明是空数组

四:遍历数组(数组的元素从头到尾访问一次)

问:数组中的每一项我们怎么取出来?

1.循环的方式可以取出来

let arr =['red','green','blue'];
for (var i =0; i<arr.length; i++){
    log(arr[i]); 
}
//1.因为我们的数组索引号从0开始  所以i<=2
//输出的时候 arr[i]  i当计数器当索引号来使用
//arr.length 可以动态检测数组的元素个数,即使元素增加或者减少  都可以动态改变数量 切记不能写等号(因为数组是从元素0开始的)

2.遍历数组第二种 for of(元素)

const arr = ['a','b','c'];
for(let item of arr){
    log(item);
}// a b c

3.遍历数组第三种 for in(索引号)

const arr = ['a','b','c'];
for(let index in arr){
    log(arr[index]);
}// a b c

4.遍历数组的第四种forEach

const arr = ['a','b','c'];
arr.forEach(function(item,index){
    ...
});

5.map() 遍历 数组并操作数组元素 返回新的数组

let arr =[1,2,3,4,5];
let newArr= arr.map(function(item,index){
	return item*2;
});
log(newArr);//输出新数组 newArr[2,4,6,8,10]
//若此处部写*2
//就是遍历数组并传给新数组

6.筛选filter() 筛选后为true值 回忽略掉undefined的值

let arr =[10,12,13,15,16];
let newArr = arr.fliter(function(item,index){
	return item % 2 === 0;
});
log(newArr);//输出为[10,12,16]

7.some( ) 和 every() 遍历之后返回值时boolean值 表判断

let arr =[10,12,13,15,16];
let results = arr.some(function(item,index){
	return item % 2 === 0;
});
log(reaults);//输出为true

let results = arr.every(function(item,index){
	return item % 2 === 0;
});
log(reaults);//输出为false

五:数组中新增元素(扩容)

1.可以通过修改length长度来增加数组元素

var arr =['red','green','blue'];
log(arr.length);
arr.length = 5; //我们把数组的长度修改成了5 里面应该由五个元素
log(arr);//输出结果为 red green blue emptyx2  2个空元素为undefined元素 

2.可以通过修改索引号来增加数组元素

var arr =['red','green','blue'];
arr[3]='pink';
log(arr);//red green blue pink 四个元素

3.不要给数组名赋值 不然会覆盖掉数组所有元素

数组衍生:

删除数组元素:delete删除 remove移除

简单值存储于栈区(stack)
复杂值储存于堆区(heap)

简单值的比较是按值去比较
但是复杂值的比较是按址来比较的 例如arr1=[1,2,3] != arr2=[1,2,3] 比较的是值

六:数组案例

案例1:数组新增:

//新建一个数组 里面存放1~10  且其 索引号是0开始 所以i=0
var arr = [];
for(let i =0;i < 10;i++){
    arr[i]=i+1;
}

案例2:筛选数组元素:

//要求将数组大于等于10的元素筛选出来 存入新数组
//已知数组arr1[2,0,6,1,77,0,52,0,25,7]
var arr1 [2,0,6,1,77,0,52,0,25,7];
var arr2 = [];
var  j = 0;
for (let i = 0;i <= arr1.length;i++){
    if(arr1[i] > 10){
        //新数组应该从o开始 所以我们重新定义了一个j变量来当索引号
       arr2[j]=arr1[i]
        j++;
     }
}


案例二的新方法
//要求将数组大于等于10的元素筛选出来 存入新数组
//已知数组arr1[2,0,6,1,77,0,52,0,25,7]
var arr1 [2,0,6,1,77,0,52,0,25,7];
var arr2 = [];
for (let i = 0;i <= arr1.length;i++){
    if(arr1[i] > 10){
        //新数组的数组长度为0 新增进去可以当作变量来使用
       arr2[arr2.length] = arr1[i];
     }
}

案例3:删除指定数组元素(数组去重)

//已知数组arr1[2,0,6,1,77,0,52,0,25,7]
//去除 arr1中的0
var arr1 [2,0,6,1,77,0,52,0,25,7];
var arr2 = [];
for(i = 0; 0<arr.length;i++){
    fi(arr[i]!=0){
       arr2[arr2.length] = arr1[i];
    }
}

案例4:翻转数组元素(调位置)

//给arr 元素调换位置
var arr =['red','green','blue'];
var arr1 = [];
for(var i = arr.length - 1;i >= 0; i--){
    arr1[arr1.length] = arr[i];//此时的i是上面的数组长度减一 i = arr.length - 1
}
log(arr1);

案例4:冒泡排序

(一种算法 把一系列的数据按照一定顺序来进行来显示 (从小到大或者从大到小))

双重for循环

let arr = [2, 5, 9, 7, 8, 15, 74];
for (let count = 1; count < arr.length; count++) {
    for (let i = 0; i < arr.length; i++) {
        if (arr[i] < arr[i+1]) {
            let temp;
            temp = arr[i];
            arr[i] = arr[i+1];
            arr[i+1] = temp;
        }
    }
}
console.log(arr);

第二

var arr[5,4,3,2,1];
for(var i =0;i <= arr.length-1; i++){//外层循环管趟数
   for(var j =0;j<=arr.length - i -1;j++){//里面的循环管每一趟交换的次数
       //内部交换两个变量的值  前一个和后一个数组元素想比较
      if(arr[j]>arr[j+1]){
          var temp = arr[j];
          arr[j] =ar r[j+1];
          arr[j+1] = temp;
      }
   }
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dpXsEtLN-1639979707239)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20211211134721980.png)]

上一篇:JavaScript基础------(数组)


下一篇:JavaScript中,数组转换成字符串