js中的数组
2020-04-05 本文已影响0人
无崖老师
数组
概念
数组就是一系列有序数据的集合
1、数组中每个值，称之为一个“数组元素”;
2、数组元素可以是任意类型的数据
创建数组(重点)
1、使用new关键字和Array()来创建一个数组(了解)
构造函数方式
var arr = new Array(元素1,元素2,元素3,.....,元素N);
例:创建一个包含五个元素的数组
// 创建方式1
// new Array(元素1,元素2,元素3.....)
// 数组元素时字符串就 ''
// 数字则不用
var arr1 = new Array('huahua',18,'boy','china','latiao');
console.log(arr1);
2、使用中括号[]来创建数组（推荐）
字面量方式
var arr = [元素1,元素2,元素3,...,元素N];`
例:创建数组有五个元素
//元素的个数不限
// 元素之间使用','隔开
var arr2 = ['weilong',2.5,'luohe','latiao','面筋'];
console.log(arr2);
脚下留心
1、new 和 Array关键字，Array 首字母大写
2、数组元素可以写多个，多个之间用逗号隔开“,”
3、var arr = new Array[]; 错误的写法
数组索引(掌握)
1、数组每个元素都对应一个“编码”，通过这个“编号”可以获取指定元素的值.
2、数组元素对应的“编号”，通常称之为“数组下标”或“数组索引”.
图片.png
脚下留心：
1 数组元素下标从0开始.
2 最大的下标是数组长度-1
例1 :创建一个数组,存入[1,4,5,6,7],并且取出下标为2的,新增下标为8的数据,修改下标为3的数据
// 创建一个arr数组
var arr = [1,4,5,6,7];
console.log(arr);
// 获取下标为2的元素
console.log(arr[2]); // 5
// 给数组arr添加下标为8的元素
arr[8] = '新增的元素';
console.log(arr);
// 修改数组arr下标为3的元素
arr[3] = '修改下标为3的元素';
console.log(arr);
总结
1 可以手动为数组指定不存在的下标的值.
2 如果索引对应的值,已存在,再次给其赋值,就是覆盖前面的;</pre>
遍历数组,使用for()[重点]
使用length获取数组的长度
var arr = [1,2,3,4,5,6,7,8,9,10];
// 获取数组的长度length
console.log(arr.length); // 10</pre>
例1:var arr = [1,2,3,4,5,6,7,8,9,10]; 求出这个数组的和
// 声明变量存储和
var sum =0;
for(var i=0;i<arr.length;i++){
// 循环输出所有的元素
// console.log(arr[i]);
//让数组的每一个元素想加
sum+=arr[i];
}
console.log(sum);
数组的赋值方式
1.静态赋值：直接使用指定的值给指定位置的数组
arr[0] = 1
arr[1] = "hello"
2.动态赋值：在程序运行过程中，创建具体的值给元素赋值
arr[0] = Math.random();
arr[1] = Math.random();
数组对象的属性和方法[掌握]
数组属性
| 属性名 | 描述 |
|---|---|
| length | 获取数组元素长度，如：arr.length 注：最大下标值，数组长度-1 |
数组的方法
| 方法名 | 描述 |
|---|---|
| arr.sort(); | 给数组排序，先数字后英文再中文 |
| arr.reverse(); | 反转数组元素 |
| arr.join(str); | 将数组划分为字符串，数组元素以str分隔（默认是逗号） |
| arr.concat(arr1,arr2,...,arr3); | 合并数组，可以是多个，多个之间用逗号隔开“,” |
| arr.pop(); | 弹出arr数组最后一个元素，返回弹出的元素值 |
| arr.push(data); | 给arr数组最后添加一个data元素，返回新数组的长度 |
| arr.shift() | 弹出arr数组第一个元素，并反弹出的元素值 |
| arr.unshift(data); | 给arr数组最前面添加一个data元素，返回新数组的长度 |
| arr.slice(start,end) | 分割数组,返回arr中start到end之间的元素 |
例1:数组的各种操作
var arr = ['feifei',32,'上围36','腰围35','身高169'];
var arr1 = [7,4,5,9,3,2,8];
var arr2 = ['饺子','大盘鸡','拉面'];
// 给数组排序
// 任务:sort的扩展
// console.log(arr1.sort())
// 数组的反转
// console.log(arr1.reverse());
// 将数组分割为字符串,默认逗号分隔
// console.log(arr.join())
// 合并多个数组
//console.log(arr.concat(arr1,arr2))
// 弹出数组最后一个元素
//console.log(arr2.pop());
// 向数组最后,添加元素,返回新数组的长度
// var len = arr2.push('大腰子');
// console.log(arr2,len)
// 弹出数组的第一个元素
// console.log(arr2.shift())
// 数组最前面返回一个元素,返回新数组长度
// var len = arr2.unshift('KFC');
// console.log(arr2)
// console.log(len);
// 数组的分隔,slice(start,end),不包括end
console.log(arr.slice(0,3))
</script></pre>
各种类型数组
数组的元素为整数
字符串数组：arr = ["h","e","l","l","o”]
数组的元素为字符串
对象数组：arr = [{name:"Lisa"},{name:"Jack"},{name:"Loss"}]
数组的元素为对象
如何获取对象数组内的元素：arr[1].name; //Jack</pre>
例: 创建一个对象数组用于保存商品的信息
var goods =[{'name':'越南新娘','price':100000,'imgs':'xx/cc.jpg','desc':'挣钱'}];
console.log(goods);
二位数组
数组元素可以是任意类型，如果其中一个元素依旧是数组，我们称之为多维数组
元素1,
[元素1,元素2,元素3],
元素3,
元素4
]
脚下留心
1、元素和元素之间用逗号隔开（,）最后一个元素不用加“，”
2、多维数据理论上可以有N层，在实际工作中一般三层，称之为：三维数组
// 二维数组
var arr = [
1,2,3,[ // 第二维数组
4,5,6
]
];
// console.log(arr);
// 取出第二维中的4
// arr[一维数组的索引][二维数组的索引]
console.log(arr[3][0])
操作多维数组
例:创建一个二维数组,通过下标修改值
// 创建一个二维数组
var arr = [
1,
[8,2,3,4,5],
[8,2,3,4,5],
4,
5
];
// 如何操作二维数组
// 将下标为4的元素值改为：8
console.log(arr[4]);
arr[4] = 8;
console.log(arr);
// 修改arr下标为1的元素
console.log(arr[1]); // [8, 2, 3, 4, 5]
var arr2 = arr[1];
// 获取arr2下标为1的元素值
console.log(arr2[1]);
问题:
在使用for遍历数组的过程中，需要至少确定数组的长度，以判断遍历的次数
但如果遇到数组的元素个数不确定的情况，就不适合使用for循环遍历了
解决办法:
新的遍历方式：for-in循环
例1: 使用for-in循环数组
// n表示是数组的索引
var arr = [1,1,2,3,5,8,13,21,34];
for(var n in arr){
console.log(arr[n]);
}
注意：for-in循环一般用来遍历非数组对象
例2:使用for-in循环对象(了解)
for-in循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作。我们也称这种循环为“枚举”。
var obj = {
name:"lz",
age:36
}
for(var i in obj){
console.log(obj[i]);
}
冒泡排序
概念
依次对数组中相邻数字进行比较(两两比较)，大的放后面
学前准备
思考1 : i < arr.length 是遍历几次 i < arr.length-1 是遍历几次
思考2 : 交换两个变量,使用第三个变量 var a=10;b=20;
思考3 : 数组中的最大值放到最后 var arr = [5, 4, 3, 2, 1];
冒泡排序算法[理解]
比较相邻的元素。如果第一个比第二个大，就交换他们两个。
对每一对相邻元素作同样的工作，从开始第一对到结尾的最后一对。在这一点，最后的元素应该会是最大的数。
针对所有的元素重复以上的步骤，除了最后一个。
持续每次对越来越少的元素重复上面的步骤，直到没有任何一对数字需要比较。 [1]
代码实现
理解方式1
<script>
// 1.两个for循环 2. -1 -1 -j
var arr = [5, 4, 3, 2, 1];
console.log(arr);
// 通过排序 =>[1,2,3,4,5];
// 遍数 : 5遍 : 5 4 3 2
// 注意1: 5个值,,确立了4个,,最后一个必须给留下了
// 遍数 : 5-1 = arr.length-1 次
// var ci = 0;
for (var j = 0; j < arr.length-1; j++) {
//次数 : 两两比较 找到最大值
// 5个数 : 比较4次就可以了
for (var i = 0; i < arr.length-1-j; i++) {
//ci++;
if (arr[i] > arr[i + 1]) {
var temp = arr[i];
arr[i] = arr[i + 1];
arr[i + 1] = temp;
}
}
}
// console.log(ci);
console.log(arr);
// -j :
// j=0; 确定了5
// j=1; 已经确定了5 可以少1次
// j=2 已经确定了4 和 5 , 可以少2次
// j=3 已经确定了 3 4 5 可以少 3次了
</script>
选择排序
算法原理[理解]
将第一位依次与后面的元素相比较，得到最小值，与第一位交换。
再用第二位依次与后面元素相比较，得到最小值，与第二位交换。
从原始数据中找到最小元素，并放在数组的最前面。然后再从下面的元素中找到最小元素，放在之前最小元素的后面，直到排序完成
图片.png
// 两个值互相比较,小的值放在前面
// 将第一位依次与后面的元素相比较，得到最小值，与第一位交换。
// 再用第二位依次与后面元素相比较，得到最小值，与第二位交换。
var arr = [5,4,3,2,1];
for(var i=0;i<arr.length-1;i++ ){ // 确定比较的遍数
// 假设一个最小值,和索引
var min = arr[i];
var minIndex = i;
for(var j=i+1;j<arr.length;j++){ // 让数组中的每一个元素进行比较
// 用假设的最小值,和当前循环的元素进行比较
if(min>arr[j]){
// 替换最小值,继续进行比较
min = arr[j];
minIndex = j;
}
}
// 将真正的最小值,放到对应的位置
arr[minIndex] = arr[i];
arr[i] = min;
}
console.log(arr);
栈和堆
每个内存单元中分为两个部分，栈(stack)和堆(heap)
栈内存主要用于存储各种基本类型的变量，包括Boolean、Number、String、Undefined、Null，以及对象变量的指针，这时候栈内存给人的感觉就像一个线性排列的空间，每个小单元大小基本相等。
优点：存取速度比堆快，仅次于直接位于CPU中的寄存器，数据可以共享；
缺点：存在栈中的数据大小与生存期必须是确定的，缺乏灵活性
堆内存: 动态分配的内存，大小不定也不会自动释放，存放引用类型，指那些可能由多个值构成的对象，保存在堆内存中，包含引用类型的变量，实际上保存的不是变量本身，而是指向该对象的指针。
引用类型：Function，Array，Object
图片.png
栈内存中,存放的有堆内存中保存的对象对应的指针.每一次调用Object,都是通过栈中指针找到堆中Object的实际位置.
例1:new 两个数组比较
var a = new Array(1,2);
var b = new Array(1,2);
console.log(a==b, a===b)
>>> false false
如果a，b是存储在栈内存中的话，两者应该是明显相等的，就像null === null是true一样，但结果两者并不相等，说明两者都是存储在堆内存中的，指针指向不一致。
