数组
数组的创建使用
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 ['西瓜',100,null,true,NaN]
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