9.JavaScript-数组

数组

什么是数组?

数组就是专门用于存放一组数据的。
注意点：
和Number/String/Boolean/Null/undefined不同(基本数据类型),数组(Array)不是基本数据类型,是引用数据类型(对象类型)。

定义数组

格式：

//通过构造函数创建数组
let 变量名称=new Array(size);//创建一个指定大小数组
let 变量名称=new Array();//创建一个空数组
let 变量名称=new Array(data1,data2,data3,...);//创建一个带数据的数组
//通过字面量创建数组
let 变量名称=[];//创建一个空数组
let 变量名称=[data1,data2,...];//创建一个带数据的数组

let arr1=new Array(3);

使用数组

1.如何往数组中存储数据
变量名称 [索引号] = 需要存储的数据;
2.如何从数组中获取数据
变量名称 [索引号];

注意点

1.和其他编程语言不同,如果数组对应的索引中没有存储数据,默认存储的就是undefined;(其它编程语言中默认保存的是垃圾数据或者0)
2.和其他编程语言不同,JavaScript中访问了数组中不存在的索引不会报错,会返回undefined;(其他编程语言一旦超出索引范围会报错或者返回脏数据)
3.和其他编程语言不同,当JavaScript中数组的存储空间不足时数组就会自动扩容;(其他编程语言数组的大小是不定的)
4.和其他编程语言不同,JavaScript的数组可以存储不同类型数据;(其他编程语言只能存储相同类型数据,要么全是字符串,要么全部都是数值等)
5.和其他编程语言不同,JavaScript中的数组分配的存储空间不一定是连续的;(其他编程语言数组分配的存储空间都是连续的,JavaScript数组是采用"哈希映射"方式分配存储空间的.什么是"哈希映射"?类比字典可以通过偏旁部首找到对应汉字,我们可以通过索引找到对应空间)
6.在浏览器中也对分配存储空间进行了优化:如果存储的都是相同类型的数据,那么会尽量分配连续的存储空间;如果存储的不是相同的数据类型,那么就不会分配连续的存储空间.

数组的遍历

什么是数组的遍历?

数组的遍历就是依次取出数组中存储的所有数据,我们称之为数组的遍历.

    let arr3 = [1, "123", true];
    arr3[3]="d";
    for(let i = 0; i < arr3.length; i++){
        console.log(arr3[i]);
    }

数组的解构赋值

解构赋值是ES6中新增的一种赋值方式.
格式:
let [a,b,c] = arr;

    let arr = [1,3,5];
    //let a = arr[0];
    //let b = arr[1];
    //let c = arr[2];
    let [a,b,c] = arr;
    console.log("a="+a);
    console.log("b="+b);
    console.log("c="+c);

注意点:
1.在数组的解构赋值中,等号左边的格式必须和等号右边的格式一模一样才能完全解构;
2.在数组的解构赋值中,左边的个数可以和右边的个数不一样;
3.在数组的解构赋值中,右边的个数可以和左边的个数不一样;
4.在数组的解构赋值中,如果右边的个数和左边的个数不一样,那么我们可以给左边指定默认值
5.在数组的解构赋值中,如果左边的个数和右边的个数不一样,那么如果设置默认值会被覆盖

	let [a,b=666,c=888] = [1,3,5];
    console.log("a="+a);
    console.log("b="+b);
    console.log("c="+c);

6.在数组的解构赋值中,还可以使用ES6中新增的扩展运算符来打包剩余的数据;
ES6中新增的扩展运算符: …
7.在数组的解构赋值中,如果使用了扩展运算符,那么扩展运算符只能写在最后

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

数组的操作

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);

3.将索引为1的数据修改为d,索引为2的修改为e(改)

	let arr = ["a","b","c"];
	//arr[1]="d";
    //arr[2]="e";
    //console.log(arr);
    arr.splice(1,2,"d","e");
    console.log(arr);

arr.splice(1,2,"d","e");
参数1:从什么位置开始
参数2:需要替换多少个元素
参数3开始:新的内容

4.要求在数组最后添加一条数据(增)
push方法可以在数组的最后新增一条数据,并且会将新增内容之后,数组当前的长度返回给我们.
arr.push(); 会返回数组长度.

let arr = ["a","b","c"];
//arr[3]="d";
arr.push("d");
console.log(arr);

5.在数组最后添加两条数据(增)
arr.push(); 可以接收1个或者多个参数

	let arr = ["a","b","c"];
    //arr.push("d");
    //arr.push("e");
    arr.push("d","e");
    console.log(arr);

6.在数组的最前面添加一条数据(增)
arr.unshift();
unshift和push方法一样会将新增内容之后,数组当前的长度返回给我们.

	let arr = ["a","b","c"];
    arr.unshift("m");
    console.log(arr);

7.在数组最前面新增两条数据
arr.unshift(); 可以接收1个或者多个参数

	let arr = ["a","b","c"];
    //arr.unshift("d");
    //arr.unshift("e");
    arr.unshift("d","e");
    console.log(arr);

8.删除数组最后一条数据(删)
arr.pop();
pop方法可以删除数组中的最后一条数据,并且将删除的数据返回给我们.
9.删除数组最前面的一条数据(删)
arr.shift();
shift方法可以删除数组中的最前面一条数据,并且将删除的数据返回给我们.
10.删除数组索引为1的数据(删)
arr.splice();

//以下代码的含义:从索引为1的元素开始删除1条数据
//参数1:从什么位置开始
//参数2:需要删除多少个元素
arr.splice(1,1);
console.log(arr);

11.要求删除数组中除了第0条以外的所有数据(删)
arr.splice(1,arr.length-1);

arr.splice(1,2);
console.log(arr);

数组的常用方法

1.如何清空数组?
方案一:用空数组覆盖;
方案二:将数组的长度改为0;
方案三:arr.splice();

		//方案一:用空数组覆盖
		//let arr = [1,2,3,4,5];
        //arr = [];
        //console.log(arr);
        //方案二:将数组的长度改为0
        //let arr = [1,2,3,4,5];
        //arr.length = 0;
        //console.log(arr);
        //方案三:arr.splice();
        let arr = [1,2,3,4,5];
        arr.splice(0,arr.length);
        console.log(arr);

2.如何将数组转为字符串?
let str = arr.toString();

		let arr = [1,2,3,4,5];
      	//2.如何将数组转化为字符串?
        let str = arr.toString();
        console.log(str);
        console.log(typeof str);

3.如何将数组转换成指定格式字符串?

• join()方法默认情况下如果没有传递参数,就是调用toString();
• join()方法如果传递了参数,就会将传递的参数作为元素和元素的连接符号.

		//3.如何将数组转换成指定格式字符串?
		let arr = [1,2,3,4,5];
        let str = arr.join("+");
        console.log(str);
        console.log(typeof str);

4.如何将两个数组拼接为一个数组?
方案一:concat();
方案二:…

		//4.如何将两个数组拼接为一个数组?
		let arr1 = [1,3,5];
        let arr2 = [2,4,6];
        //方案一:let res = arr1.concat(arr2);
        //let res = arr1.concat(arr2);
        //方案二:...
        let res = [...arr1,...arr2];
        console.log(res);
        console.log(typeof res);
        console.log(arr1);
        console.log(arr2);

注意点:

• 数组不能够使用加号进行拼接,如果使用加号进行拼接会先转换成字符串再拼接;
• 不会修改原有的数组,会生成一个新的数组返回给我们;
• 扩展运算符在解构赋值中(等号的左边)表示将剩余的数据打包成一个新的数组,扩展运算符在等号的右边,那么表示将数组中所有的数据解开,放到所在的位置.

5.如何对数组中的内容进行反转?
arr.reverse();
注意点:
会修改原有的数组

		//5.如何对数组中的内容进行反转?
		let arr = [1,2,3,4,5];
        let res = arr.reverse();
        console.log(res);
        console.log(arr);

6.如何截取数组中指定范围内容?
slice方法是包头不包尾(包含起始位置,不包含结束的位置)

		//6.如何截取数组中指定范围内容?
		// 0 1 2 3 4
		//[1,2,3,4,5]
        //假如截取2和3
        let arr = [1,2,3,4,5];
        //包头不包尾(包含头部不包含尾部)
        let res = arr.slice(1,3);
        console.log(res);
        console.log(arr);

7.如何查找元素在数组中的位置?
indexOf();方法如果找到了指定的元素,就会返回元素对应的位置;如果没有找到指定的元素,就会返回-1;
由于默认是从左到右的查找,一旦找到就会立即停止,所以如果数组中有多个相同的指定元素,只会找到最前面的一个;
indexOf();方法有两个参数
参数1:需要查找的元素;
参数2:从什么位置开始查找.
lastIndexOf();方法是从右至左查找

		//7.如何查找元素在数组中的位置?
        //[1,2,3,4,5]
        let arr = [1,2,3,4,5];
        let res = arr.indexOf(3);
        console.log(res);

8.如何判断数组中是否包含某个元素?
方案一:可以通过indexOf();方法和lastIndexOf();方法的结果,判断是否为-1即可;
方案二:arr.includes();

		//8.如何判断数组中是否包含某个元素
        let arr = [1,2,3,4,5];
        let res = arr.includes(8);
        console.log(res);

练习1:

	//需求:已知数组[3,5,-2,7,4],获取数组中的最大值并打印
    let arr = [3,5,-2,7,4];
    let max = arr[0];
    for(let i = 1; i < arr.length; i++){
        if(arr[i] > max){
            max = arr[i];
        }
    }
    console.log(max);

练习2:

	//需求:要求用户输入3个0-9的数,输出0-9中哪些用户没有输入过
    let str = prompt("请输入三个整数,并以逗号隔开");
    //字符串的split方法可以根据传入的参数切割字符串,转换成一个数组之后返回给我们
    let arr = str.split(",");
    // console.log(str);
    for(let i = 0;i < 10;i++){
      if (arr[0] == i | arr[1] == i | arr[2] ==i){
        continue;
      }
      console.log(i);
    }

计数排序练习1:

   		//需求:从键盘接收5个0-9的数字,排序后输出
        //输入的格式x,y,z...
        //2,6,3,8,1
        let str = prompt("请输入五个整数,并以逗号隔开");
        let arr = str.split(",");
        let res = new Array(10);
        for(let i = 0;i < arr.length; i++){
            let str = arr[i];
            res[str] = 6;
        }
        for(let i = 0;i < res.length;i++){
            if (res[i] === 6){
                console.log(i);
            }
        }

计数排序练习2:

//需求:从键盘接收5个0-9的数字,排序后输出
        //输入的格式x,y,z...
        //2,6,3,8,3
        let str = prompt("请输入五个整数,并以逗号隔开");
        let arr = str.split(",");
        let res = new Array(10);
        //数组的fill方法的作用:设置数组中所有元素的值为指定的数据
        res.fill(0);
        for(let i = 0;i < arr.length; i++){
            let str = arr[i];
            res[str] = res[str] + 1;
        }
        for(let i = 0;i<res.length;i++){
            for(let j = 0;j < res[i];j++){
                document.write(i);
                document.write("<br>");
            }
        }

排序

选择排序

从第一个数字开始,依次和后面的数字进行比较,如果第一个数字比后面的数字大,那么就交换,第一个和第二个,第一个和第三个,第一个和第四个…第一个数字就可以确认为是最小的数字了;然后第二个再和第三个数字比较,和第三个数字比较…然后就能确定倒数第二个最小的数字…以此类推,排序完成.

//需求:从键盘接收4个数字,排序后输出
    //4,3,2,1
    let str = prompt("请输入四个整数,用逗号隔开");
    let arr = str.split(",");
    console.log(arr);
    for(let i = 0;i < 3;i++){
      for(let j = i;j < 3;j++){
        // document.write("*");
        // console.log(i,j+1);
        if(arr[i] > arr[j + 1]){
          let temp = arr[i];
          arr[i] = arr[j+1];
          arr[j+1] = temp;
        }
      }
      // document.write("<br>");
    }
    console.log(arr);

冒泡排序

第0个数字和第一个数字进行比较,第一个数字和第二个数字进行比较,第二个和第三个进行比较…,经过第一轮比较,最大的数字就存储在最后一个位置了;然后又重复,第0个数字和第一个数字进行比较,第一个数字和第二个数字进行比较,第二个和第三个进行比较…,经过第二轮比较,第二大的数字就存储在倒数第二个位置…

<script>
    let str = prompt("请输入五个整数,用逗号隔开");
    let arr= str.split(",");
    console.log(arr);
    for(let i = 0;i < 3;i++){
      for (let  j = 0;j < 3-i; j++){
        // document.write("*");
        // console.log(j, j + 1);
        if (arr[j] > arr[j+1]){
          let temp = arr[j];
          arr[j] = arr[j+1];
          arr[j+1] = temp;
        }
      }
      // document.write("<br>");
    }
    console.log(arr);
  </script>

二维数组

什么是二维数组?

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

格式:

let arr = [[1,3],[2,4]];

如何操作二维数组?

如何从二维数组中获取数据?

let arr = [[1,3],[2,4]];
let arr1 = arr[0];
//取出二维数组中的第0个元素[1,3]
let arr2 = arr[0][1];
//取出二维数组中的第0个元素的第1个元素[3]

如何往二维数组中存储数据?

注意点:在定义二维数组的时候,将来需要存储多少个一维数组就写上多少个中括号即可.

let arr = [[],[]];
arr[0] = [1,3];
arr[1][1] = 2;