数组的基本用法

183 阅读10分钟

数组

数组的创建使用

1,什么是数组?

数组(Array): 指一组数据的集合,其中每个数据被称为元素,在数组中可以存放任意类型的元素 数组是一种将一组数据存储在单个变量名下单独优雅方式;

注意点:

数组(Array)不是基本的数据类型,是引用数据类型(对象类型);

2,创建数组

1.通过字面量创建数组:

    let 变量名称 = [];            创建一个空数组

    let 变量名称 = [data1,data2,....];    创建一个带数据的数组

2.通过new构造函数创建数组:

let 变量名称 = new Array;                 创建一个空数组;
let 变量名称 = new Array(size);             创建一个指定大小的数组;
let 变量名称 = new Array(data1,data2,....);     创建一个带数据的数组;用逗号分隔

3,存储数据

变量名称 [ 索引号 ] = 需要存储的数据 ;

​ arr [ 0 ] = " s j " ;

4,获取存储的数据

变量名称 [ 索引号 ] ;

​ console . log ( arr[ 0 ] ) ;

<script>
        let arr = new Array(3);				//创建一个新的名为 arr 的数组
        arr[0] = "sj";						//往数组索引为 0 的位置,存储 “sj”
        arr[1] = "xiaoming";				////往数组索引为 1 的位置,存储 “xiaoming”
        console.log(arr);           //输出数组arr内容 长度
        console.log(arr[0]);        //获取数组 arr 索引为0 的数据  "sj"
</script>



//求数组和 以及 平均值
let array = [1,2,3,4,5]
let sum = 0
for (let index = 0; index < array.length; index++) {
   sum += array[index];
}
console.log(sum);
console.log(sum/array.length);


//求数组最大值和最小值
        let arr = [2,6,1,77,52,25,7]     
        let max = arr[0]   
        let min = arr[0]
        for(let i = 0; i < arr.length; i++){
            if(arr[i] > max){
                max  = arr[i]
            }
            if(min > arr[i]){
                min = arr[i]
            }
        }
        console.log(max);
        console.log(min);

5,注意点:

1,和其他的编程语言不同,如果数组中对应的索引没有存储数据默认存储的是undefined;

2,js中访问了数组中不存在的索引不会报错,但会返回undefined;

let array = [1,2,3,4,5]
console.log(array[100])		//返回undefined

3,js中数组 存储的空间不够 时, 会自动扩容;

4,js中数组 可以存储 不同类型的数据;

但是不建议,一个数组内的数据类型建议要统一

let arr ['西瓜'100nulltrueNaN]

5,js中数组分配的存储空间 不一定是连续的,js采用哈希映射的方式分配存储空间

​ (什么是哈希映射:好比字典可以通过偏旁部首找到对应汉字,我们可以通过索引找到对应空间)

​ (在浏览器中各大浏览器也对数组分配存储空间进行了优化:

​ 如果存储的都是相同类型的数据, 那么会尽量分配连续的存储空间;

​ 如果存储的不是相同类型的数据, 那么就不会分配连续的存储空间;)

5, 数组的索引 索引(下标):用来访问数组元素的序号(数组下标从0开始); 数组可以通过索引来访问,设置,修改对应的数组元素,

我们可以通过“ 数组名[ 索引下标 ] ”的形式来获取数组中的元素。

数组的解构赋值

1,什么是数组的解构赋值

解构赋值是ES6中新增的一种赋值方式

//es5之前:
//需求:	把数组中的数值取出,赋值给新的变量		
        <script>
        let arr = [1, 3, 5];
        let a = [0];				//取数组中 索引为0数据 赋值给 a 
        let b = [1];
        let c = [2];
        console.log("a=" + a);
        console.log("b=" + b);
        console.log("c=" + c);
        </script>
        输出:  a=1;b=3;c=5

2,在数组的解构赋值中,等号左边的格式必须和**等号右边的格式***一模一样,才能完全解构;

//解构赋值中:
	<script>
            let [a, b, [c,d]] = [1, 3, [5,2]];			//对应的位置进行解构
            console.log("a=" + a);
            console.log("b=" + b);
            console.log("c=" + c);
            console.log("d=" + d);
	</script>
            输出: a=1;b=3;c=5;d=2

3,在数组的解构赋值中,左边的个数可以和右边的不一样(左边多少个 解构多少个)

//左边个数 少于 右边个数
let [a, b] = [1, 3, 5];
console.log("a=" + a);
console.log("b=" + b);
输出: a=1;b=3;

//左边个数 多于 右边个数
let [a, b,c] = [1, 3];
console.log("a=" + a);
console.log("b=" + b);
输出: a=1;b=3;c=undefined  // 解构不到的为undefined

4,在数组的解构赋值中,左边的个数和右边的不一样,那么我们可以给左边指定默认值;

//左边的个数比右边的个数多,可以给左边设置指定的默认值
let [a, b,c=666] = [1, 3];
console.log("a=" + a);
console.log("b=" + b);
console.log("c=" + c);
输出: a=1;b=3;c=666 			

5,在数组的解构赋值中,左边的个数和右边的不一样,那么设置默认值会被覆盖;

//当左右两边的个数相同,但是左边又设置了默认值的时候,右边数组的数值会覆盖设置的默认值
let [a, b,c=666,d=888] = [1, 3,5,7];
console.log("a=" + a);
console.log("b=" + b);
console.log("c=" + c);
console.log("d=" + d);
输出: a=1;b=3;c=5,d=7			

6,在数组的解构赋值中,还可以使用ES6中新增的扩展运算符来打包剩余的数据;

ES6中新增的扩展运算符: ...(三个实心点)

在数组的解构赋值中,如果使用了扩展运算符,那么扩展运算符只能写在最后;

let [a, ...b] = [1, 3,5,7];
console.log("a=" + a);
console.log("b=" + b);
输出: a=1;b=3,5,7

数组的增删改查

1,()

//需求:获取数组中索引为1的数据;
let arr = ["a", "b", "c"];
console.log(arr[1]); 

2,直接修改()

//将索引为1的数据修改为"m";
let arr = ["a", "b", "c"];
arr[1] = "m";						//赋值的形式	直接修改
console.log(arr);


//将索引为1的数据修改为d,将索引为2的数据修改为e
let arr = ["a", "b", "c"];
arr[1] = "d";
arr[2] = "e";
console.log(arr);

3,splice方法()

splice方法( 参数1,参数2 ,参数3)

参数1 从什么位置开始, 参数2 需要替换多少个元素 参数3 新的内容

//将索引为1的数据修改为d,将索引为2的数据修改为e;
let arr = ["a", "b", "c"];
arr.splice(1,2,"d","e");			//包头包尾
console.log(arr);

4,push方法(**后 增 **)

4-1数组push的方法可以接收1个多个参数

4-2push方法可以在数组的 最后 新增一条数据,并且会将新增数组内容之后数组当前的长度返回给我们

//要求在数组的 最后 增加 一条 数据;
let arr = ["a", "b", "c"];
let res = arr.push("d");
console.log(res);               
(返回值 4;)
console.log(arr);              
( 输出 ["a","b","c","d"])


//要求在数组的 最后 增加 两条 数据;
let arr = ["a", "b", "c"];
arr.push("d","e");
console.log(arr);           
(输出 ["a","b","c","d","e"])


//接收用户的4个输入,组成一个数组   
let arr =[]
for (let index = 1; index <= 4; index++) {
    let userName = prompt('请输入你的姓名')
    arr.push(userName)
}
console.log(arr);


//把数组中大于10 的元素存放到新的数组
let arr1 = [2,0,6,1,77,0,52,0,25,7]  
let arr2 = []      
for (let index = 0; index < arr1.length; index++) {
    if(arr1[index] >= 10 ){
        arr2.push(arr1[index])
    }
}
console.log(arr2);

5,unshift方法(前 增)

5-1unshift方法和push方法一样,可以接收1个多个参数

5-2unshift方法数组的 最前面 新增一条数据,并且会将新增数组内容之后数组当前的长度返回给我们

//要求在数组的 最前面 增加 一条 数据
let arr = ["a", "b", "c"];
let res = arr.unshift("m");
console.log(res);              
(返回值 4;)
console.log(arr);              
( 输出 ["m",a","b","c","d"])
      
//要求在数组的 最前面 增加 两条 数据  
let arr = ["a", "b", "c"];
arr.unshift("m","w");
console.log(arr);           
(输出 ["m","w","a","b","c"])      

6,splice(指定 增)

在指定的位置插入元素

let arr = ['西瓜','香蕉','苹果','梨']
splice('想要删除的元素的下标''想要删除几个''在该下标位置添加元素'//可以理解成: 想要插入位置的元素的下标,0,新的下标的元素
arr.splice(1,0,'芒果')
console.log(arr)			//['西瓜',‘芒果’,'香蕉','苹果','梨']

7,修改索引号方法(

通过修改索引号新增数组元素

//方法一:
var arr1 = ['pink', 'red', 'green'];

arr[1] = 'black';					//原来位置有内容时,表示修改		

arr[3] = 'blue';				//原来位置没有内容时,表示新增索引 新增一个数字元素

arr[100] = yellow;						//数组的长度会变成101,中间没有赋值的数,查询时会显示为:空属性 * n ,
								
console.log(arr1);  
console.log(arr[50])				//输出没有值的索引  显示undefined

//注意:不能直接给数组名赋值,否则会覆盖掉数组里面的所有数据;


//方法二:	通过for循环	增加数组元素
<script>
    var arr = [];
    for (var i = 0; i < 10; i++) {    //在数组内存放1-10这10个数字;
        arr[i] = i + 1;
    }
    console.log(arr);
</script>

8,pop方法(后 删)

数组pop方法可以删除数组中的 最后 一条数据,并且将删除的数据返回给我们

//要求删除数组的 最后 一条数据(删)
let arr = ["a", "b", "c"];
let res = arr.pop();
console.log(res);     			//会返回删除的数据     
(返回值 "c";)
console.log(arr);         
( 输出 [a","b"])

9,shift方法(前 删)

数组shift方法可以删除数组中 最前面 一条数据,并且将删除的数据返回给我们

//要求删除数组的最前面一条数据(删)
let arr = ["a", "b", "c"];
let res = arr.shift();			//会返回删除的数据 
console.log(res);     		         
(返回值 "a";)
console.log(arr);              
( 输出 ["b","c"])

10,splice方法(指定 删)

splic方法可删除数组中指定索引的数据

splice方法(参数1,参数2)

参数1 从什么位置开始 参数2 需要删除多少个元素

//要求删除数组中索引为1的数据(删)
let arr = ["a", "b", "c"];
arr.splice(1,1);			//从索引为1的元素开始删除1条数据;		包头包尾
console.log(arr);
 ( 输出 ["a","c"] )

//要求删除数组除了第0条以外的所有数据(删)
let arr = ["a", "b", "c"];
arr.splice(1,2);				//从索引为1的元素开始删除2条数据;
console.log(arr);
 ( 输出 ["a"] )

11,for循环()

<!-- 删除指定数组-->
<script>
    var arr = [2, 0, 6, 1, 77, 0, 52, 0]
    var newArr = [];        //需要一个新的数组存放筛选后的元素
    for (var i = 0; i < arr.length; i++) {      //遍历元素开始筛选;
        if (arr[i] != 0) {
            newArr[newArr.length] = arr[i];     //新数组的个数通过.length累加
        }
    }
    console.log(newArr);
</script>

数组的常用方法

1,清空数组

let arr = [1,2,3,4,5];
方法1 :

定义空数组 arr = [ ];

方法2:

将数组的长度定义为零,会自动清空数组;

arr.length = 0;

方法3:

从索引为零开始,清空的长度为数组的长度

arr.splice ( 0 , arr.length );

保留3个元素 其他的不要

arr.length = 3;

2,数组转字符串

将数组转换为字符串

toString()

//方法一:
let arr = [1,2,3,4,5];  
let str = arr.toString();
console.log(str);
(输出字符串 1,2,3,4,5)

//方法2
var arr = ['pink', 'red', 'green', 'blue'];
var str = '';       //需要一个新变量用于存放转换完的字符串 str
var sep = ',';
for (var i = 0; i < arr.length; i++) {
    str += arr[i] + sep;
}
console.log(str);
(输出:pink,red,green,blue,)

3,数组转指定格式字符串

将数组转换成指定格式字符串 join方法:

//默认情况下,如果没有传递参数,就是调用toString()
let arr = [1,2,3,4,5];  
let str = arr.join();
console.log(str);
(输出字符串 1,2,3,4,5)



//如果传递了参数,就会将传递的参数作为元素和元素连接的符号
let arr = [1,2,3,4,5];  
let str = arr.join("+");
console.log(str);
(输出字符串 1+2+3+4+5)

4,数组拼接

将两个数组拼接成一个数组 (数组之间不能使用+号进行拼接,如果使用+号进行拼接会先转换为字符串再拼接)

方法1:concat

let arr1 = [1,3,5];
let arr2 = [2,4,6];
let res =arr1.concat(arr2);
console.log(res);
(输出 [1,3,5,2,4,6])

使用concat不会修改原来的数组,会生成一个新的数组返回给我们

方法2:扩展运算符...

let arr1 = [1,3,5];
let arr2 = [2,4,6];
let res = [...arr1,...arr2];		//表示将数组1和数组2中的所有数据解开,放到所在的位置
console.log(res);
(输出 [1,3,5,2,4,6])

扩展运算符在解构赋值中(等号的左边),表示将剩余的数据打包成一个新的数组;

扩展运算符在等号的右边,那么表示将数组中的所有数据解开,放到所在的位置;

5,数组内容反转

对数组中的内容进行反转(就是把元素的顺序反过来排列)

reverse()

let arr = [1,2,3,4,5]; 
let res = arr.reverse(); 
console.log(res);
(输出 [5,4,3,2,1])
      

6,截取数组内容

截取数组中指定范围内容

slice(参数1,参数2) 从 参数1 到 参数2 的所有元素

       0 1 2 3 4
let arr = [1,2,3,4,5]; 
let res = arr.slice(1,3); 
//表示截取索引号为1(包头:包括1),到索引号为3(不包尾:不包括3)之前的所有元素
console.log(res);
(输出 [2,3])

slice方法是包头不包尾(包含起始位置,不包含结束位置)

7,查找元素位置

查找元素在数组中的位置

indexOf(参数)

从左往右,查找参数在数组中的位置/索引号

//indexOf 只有一个参数时
let arr = [1,2,3,4,5,3]; 
let res = arr.indexOf(3); 		//从左往右 查找元素为3的元素的 位置/索引号
console.log(res);
(输出 2  因为元素3的位置是索引号为2)

indexOf方法如果找到了指定的元素,就会返回元素对应的索引号位置;
indexOf方法如果 没有找到 指定的元素,就会返回 -1 ;
indexOf方法默认是 从左至右 的查找,一旦找到就会 立即停止 查找;

indexOf(参数1,参数2)

参数1 需要查找的元素 参数2 从什么位置开始查找

//indexOf 有2个参数时
let arr = [1,2,3,4,5,3]; 
let res = arr.indexOf(3,4); 	//从左往右	查找元素为3	从位置/索引号为4 的位置开始查找 元素3在数组中的位置
console.log(res);
(输出 5  因为第二个元素3的位置的索引号为5)

lastIndexOf(参数)

从右往左,查找参数在数组中的位置/索引号

//lastIndexOf
let arr = [1,2,3,4,5,3]; 
let res = arr.lastIndexOf(3); 			////从右往左 查找元素为3的元素的 位置/索引号
console.log(res);
(输出 5  从右到左第一个3的位置的索引号为5)

lastIndexOf方法默认是从右至左的查找,一旦找到就会立即停止查找;

8,判断数组包含元素

判断数组中是否包含某个元素 方法1 通过indexOf或lastIndexOf的返回值确定是否包含某个元素,因为如果没有该元素会返回-1;

方法2:includes(参数)

let arr = [1,2,3,4,5,3]; 
let res = arr.includes(8); 		//判断数组中是否包含元素8
console.log(res); 
(输出 false   存在则返回true)

9,数组的遍历/长度

.length

数组的遍历:就是把数组的元素从头到尾访问一次;

arr.length 表示该数组的长度

<script>
    var arr = ['red', 'blue', 'green'];
    for (var i = 0; i < arr.length; i++) {    //用arr.length而不是3,可以自动统计长度;
        console.log(arr[i]);
    }                           //一次提取里面的全部数据;
    console.log(arr.length);      //获取数组的长度,而且是动态变化,可以随时修改
</script>

.length - 1

获取数组中最后一个元素

let arr = ['西瓜','香蕉','苹果','梨']
console.log(arr[arr.length - 1]); 		// '梨'			获取数组中最后一个元素

10,数组中的特殊值

求数组中的 最大值 平均值

//<!-- 求数组中的最大值-->
<script>
    var arr = [2, 6, 1, 77, 52, 25, 7];
    var max = arr[0];               //选取数组中的第一个数与其他的逐个比较
    for (var i = 1; i < arr.length; i++) {
        if (arr[i] > max) {        //遍历数组,把每一个元素与max比较
            max = arr[1];   //如果数组元素大于max,就把这个数存到max,否则继续比较
        }
    }
    console.log(max);
</script>



//<!-- 求数组中的和以及平均值-->
<script>
    var arr = [2, 6, 1, 77, 52, 25, 7];
    var sum = 0;
    var average = 0;
    for (var i = 0; i < arr.length; i++) {
        sum += arr[i];
    }
    average = sum / arr.length;
    console.log(sum, average);   //输出多个变量用逗号分隔
</script>

11,split函数

返回值: 返回一个下标从零开始的一维数组

let num1 = prompt('请输入数字,中间用逗号隔开')
let arr = num1.split(",");			//返回的是用逗号分割后,的一个数组
let sum = 0;
for (let i = 0; i < arr.length; i++) {
    sum += arr[i];
}
alert(sum);

冒泡排序

数组的排序(冒泡排序) 是一种算法,把一系列的数据按照一定的顺序进行排列显示; 一次比较两个元素,如果顺序错误就把他们交换过来,越小的元素会经由 交换慢慢“浮”到数列顶端;

冒泡排序:

​ 原理:在一列乱序的数字中,先第一个和第二个比较,数字大的在第二位,然后第二位数字跟第三位数字

​ 进行比较,数字大的在第三位,一次类推,第一轮比较过后,最大的数字会在最后的位置,以此确定最大值;

​ 第二轮比较,先第一个和第二个比较,数字大的在第二位....,倒数第二大的位置会在倒数第二的位置;

//方法一
<script>
        function sort(arr) {
            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] = arr[j + 1];
                        arr[j + 1] = temp;
                    }
                }
            }
            return arr;
        }
        var arr1 = sort([1, 4, 2, 9]);
        console.log(arr1);
</script>



//方法二
// 编写方法,实现冒泡
    var arr = [29,45,51,68,72,97];
    //外层循环,控制趟数,每一次找到一个最大值
    for (var i = 0; i < arr.length - 1; i++) {
        // 内层循环,控制比较的次数,并且判断两个数的大小
        for (var j = 0; j < arr.length - 1 - i; j++) {
            // 白话解释:如果前面的数大,放到后面(当然是从小到大的冒泡排序)
            if (arr[j] > arr[j + 1]) {
                var temp = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = temp;
            }
        }
 
    }
    console.log(arr);//[2, 4, 5, 12, 31, 32, 45, 52, 78, 89]

二维数组

1,二维数组

二维数组就是数组的每一个元素又是一个数组,我们称之为二维数组;

let arr = [[2,4],[1,3],[5,7]]

2,获取数据

从二维数组中获取数据

let arr = [[2,4],[1,3],[5,7]]
let arr1 = arr[0] ;
//从数组中取出arr中索引号为1的数据,2,4


数组名称[二维数组索引];得到一个一维数组;
数组名称[二维数组索引][一维数组索引];得到一个一维数组中的元素;
let arr = [[2,4],[1,3],[5,7]]
let arr1 = arr[0][1] ;
//从数组中取出arr中索引号为0的数据,再从0里面取出索引为1的数据,4

3,存储数据

从二维数组中存储数据

在定义二维数组的时候,将来需要储存多少个一维数组,就写上多少
let arr = [[],[]];

arr[0] = [1,3]
arr = [[1,3],[]];
//往二维数组索引号为0的位置中存储1,3;

arr[1][0] = 2//往一维数组索引号为1的 索引为0的位置存入2  [[],[2]];



遍历二维数组,从里面取出二维数组:
let arr = [2,4],[1,3];
for(let i = 0;i < arr.length;i++){
    let subArray = arr[i];
    console.log(subArray);
}
输出 [2,4],[1,3]


遍历二维数组,从里面取出二维数组中一维数组的元素:
 let arr = [2,4],[1,3];
for(let i = 0;i < arr.length;i++){
    let subArray = arr[i];
    for(let j = 0;j < subArray.length;j++){
        console.log(subArray);
    }
}
输出 2 4 1 3