八、JavaScript数组

2021/7/16 11:24:58

编程Tag： javascript 数组 var 索引 arr 下标 单元

本文主要是介绍八、JavaScript数组，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、基本概念

基本语法：

1、字面量方法：

1 var 变量 = [数据1, 数据2, 数据3, ...];

2、构造函数定义：

1 var 变量 = new Array();

  • 数组中存储的数据类型，可以是JavaScript支持的任意数据类型

  • 如果存储的是一个变量，会解析变量中的数据，存储在数组中

  • 数组中存储的每一个数据单元，都会被JavaScript定义一个索引下标，JavaScript中，数组的索引下标只能是数值，是从 0 开始的整数

  • 每一个数组，都具有一个length属性，属性值是数组中数据单元的长度(个数)，数组下标范围是0 - length-1

  • 调用数组的length属性是：数组名称.length

1 // 获取数组数据，通过下标获取
2 var int = 100;
3 var arr = [int,1,2,3,4,5,'北京','上海',true];
4 
5 // 如果要调用北京，那么北京对应的下标是6
6 console.log(arr[6]);
1 // 修改数组数据，通过已有的索引下标,对这个索引下标,重复赋值
2 var arr = [100,200,300];
3 arr[0] = '北京';
1 // 新增数组数据，对不存在的索引下标进行赋值操作
2 var arr = [100, 200, 300];
3 arr[3] = '我是新增的';
1 // 删除数组数据，项目中有操作数组的方法，这里通过修改数组length属性
2 var arr = [1,2,3,4,5,6,7,8,9,10];
3 arr.length = 3;

二、数组的循环

1、for...in

既可以循环数组，也可以循环对象

1 for(var 自定义变量 in 数组名称){
2   循环体
3 }

for..in执行原理

  • 每次循环，获取一个数组的索引下标，存储在自定义变量中

  • 通过自定义变量，就可以使用[]语法，调用数组中的数据信息

  • 存储在自定义变量中的数值是字符串类型，通过执行操作，转化为数值类型

1 var arr = ['北京','上海','广州','重庆','天津'];
2 
3 for( var i in arr ){
4   console.log(i);
5   console.log(arr[i]);
6 }

2、forEach

forEach 是数组专用的循环语法，不能循环对象

1 数组.forEach( 匿名函数 function(形参1, 形参2){
2   // JavaScript程序在forEach的执行中会自动给两个形参赋值
3   // 形参1,JavaScript自动存储数组单元的数据
4   // 形参2,JavaScript自动存储数组单元的索引,是数值类型
5 })

forEach可以直接获取到数组单元的数据信息，不再需要通过[]语法来提取获取

1 var arr = ['北京', '上海', '广州', '重庆', '天津'];
2 
3 arr.forEach(function (value, index) {
4   console.log(value, index);
5 })

三、数组的方法

1、数组.push(新增数据)

  • 在数组的结束位置新增一个单元或者多个单元，如果是多个数据单元，之间使用逗号间隔

2、数组.pop()

  • 在数组的结束位置删除单元，不用写参数

  • 永远是删除数组中的最后一个单元，执行一次只能删除最后一个单元

3、数组.unshift(新增数据)

  • 在数组的起始位置新增一个或多个单元，如果是多个数据单元，之间使用逗号间隔

4、数组.shift()

  • 在数组的开始位置删除单元，不用写参数

  • 永远是删除数组中的第一个单元，执行一次只能删除第一个单元

5、数组.splice(参数1,参数2,参数3)

作用：从指定的索引下标开始，删除指定个数单元

  • 参数1：

    • 删除起始单元的索引下标

    • 如果是正数，超出索引下标范围，没有执行结果

    • 如果是负数，执行效果都是起始位置，是第一个单元

  • 参数2：

    • 删除的单元个数

    • 如果超出数组单元个数范围，执行的效果是删除起始单元之后的所有数据单元

  • 参数3：

    • 作为一个整体，来替换被删除的单元

6、数组.reverse()

数组的反转，将数组单元从后往前重新排序

1 var arr = ['北京', '上海', '广州', '重庆', '天津'];
2 arr.reverse(); 
3 
4 console.log(arr); // ["天津", "重庆", "广州", "上海", "北京"]

7、数组.sort()

数组的排序，将数组的数值按照从小到大或者从大到小的顺序排序

默认：从左起按照第一个数值进行比较

1 // 从小到大，固定语法
2 数组.sort(function(形参1,形参2){return 形参1-形参2});
3 // 从大到小，固定语法
4 数组.sort(function(形参1,形参2){return 形参2-形参1});
1 var arr = [3,12,5468,453,45,432,4321,98,6,76987,3213];
2 arr.sort(); // 从数组单元的左数第一位开始比较，之后比较第二位...
3 arr.sort( function(a, b){return a-b} ); // 从小到大
4 arr.sort( function(a, b){return b-a} ); // 从大到小

8、数组.indexOf(参数1, 参数2)

查找数组中是否包含执行的数值数据

参数1：要查询的数值数据

参数2（可选）：查询的起始索引，默认是0，也就是从第一个单元开始查询

  • 执行结果返回值：

    • 如果有这个数值，返回值是存储这个数值单元的索引下标

    • 如果没有这个数值，返回值是 -1

    • 比较查找时，执行严格比较 ===

9、数组.join()

数组拼接为字符串，获取数组中的每一个数据，拼接为字符串形式

  • 默认以逗号为间隔

  • 可以在参数中设定，指定间隔符号

  • 如果不需要间隔符号，可以设定空字符串''

1 var arr = [1, 2, 3, 4, 5];
2 
3 var str1 = arr.join(); // 1,2,3,4,5
4 var str2 = arr.join('/'); // 1/2/3/4/5
5 var str3 = arr.join(''); // 12345

10、数组拼接

数组1.concat(数组2)

  • 将数组2的内容拼接在数组1之后

  • 一定要注意拼接顺序

11、数组.slice(参数1，参数2)

数组的截取

  • 参数1：起始的索引下标（包含），不写是从第一个单元开始截取

  • 参数2：结束的索引下标（不包含），不写是截取到最后一个数组单元

12、数组.some()

数组中只要有一个符合条件，返回值就是true

1 const arr1 = [1, 2, 3, 4, 5];
2 
3 let res1 = arr1.some(function (v) { return v > 2 });
4 console.log(res1); // true

13、数组.every()

数组中所有值都必须符合条件，返回值才能是true

1 const arr2 = [1, 2, 3, 4, 5];
2 let res2 = arr2.every(function (v) { return v > 3 });
3 console.log(res2); // false

四、数组的去重

使用JavaScript程序，对数组进行操作，去除数组中重复的数据

1 // 去除重复的数据,要执行数组的删除操作
2 // 执行删除操作时,因为删除了数组的单元
3 // 数组中之后的单元会左移,填补被删除单元的位置
4 // 就会造成数组的坍塌，进而会影响数组的循环遍历
5 // 必须要操作数组的循环,再发生数组删除操作单元,再次循环操作这个单元
6 
7 // 要操作数组的循环,只有使用for循环方法才能实现，for...in和forEach 都不行

1、方案一

  • 先给数组中的数据进行排序，从大到小、从小到大无所谓

  • 当前位置上的数据，与相邻的下一个位置上的数据进行比较

  • 如果相同，就删除下一个单元

 1 var arr = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 1, 2, 3, 4];
 2 
 3 // 排序
 4 arr.sort(function (a, b) { return a - b });
 5 
 6 // 相邻位置进行比较
 7 for (var i = 0; i <= arr.length - 1 - 1; i++) {
 8   // 一定要使用全等判断,确保判断数据类型
 9   if (arr[i] === arr[i + 1]) {
10     arr.splice(i + 1, 1);
11     // 为了防止数组的坍塌
12     i--;
13   }
14 }

2、方案二

  • 通过双重for循环实现

  • 从第一个数值开始，与之后所有的数值数据一一进行比较

  • 如果相同，就删除之后的数据，并且要执行 i-- 防止数组坍塌的影响

 1 var arr = [1,2,3,4,5,1,2,3,4,5,1,2,3,4,5,1,2,3,4,5];
 2 // 外层是从第一个到倒数第二个所有的索引下标
 3 for(var i = 0 ; i <= arr.length-1-1 ; i++){ 
 4   // 内层是从外层位置的下一个位置开始到最后一个索引下标
 5   for(var j = i+1; j <= arr.length-1; j++){
 6     // 如果两个数据相同 arr[i]  arr[j]
 7     if(arr[i] === arr[j]){
 8       // 删除后面的单元，也就是从j开始删除一个单元
 9       arr.splice(j, 1);
10       // 执行 j-- 防止数组坍塌的影响
11       j--;
12     }
13   }
14 }

3、方案三

  • 创建一个新的独立的数组

  • 将原始数组中的数据，通过 push() 或者 unshift()往新数组中写入

  • 添加判断条件，当新数组中没有当前数值时，再往新数组中写入数据

 1 var arr = [1,2,3,4,5,1,2,3,4,5,1,2,3,4,5,1,2,3,4,5];
 2 
 3 // 新建一个数组
 4 var newArr = [];
 5 
 6 // 循环遍历arr中的所有数据单元，for...in forEach都可以
 7 for(var i = 0 ; i <= arr.length-1 ; i++ ){
 8   // 在新数组中使用indexOf()查询当前arr的索引下标对应的数值数据
 9   // 如果当前索引存储的数值数据arr[i]不在新数组中,返回值是-1，执行新数组写入操作
10   if( newArr.indexOf(arr[i]) === -1 ){
11     // 向新数组中,写入当前单元的数据
12     newArr.push(arr[i]);
13   }
14 }

4、方案四（结合对象）

  • 将数组的数据，写成对象的属性

  • 如果有重复的数据，对象也不会新增属性，会对已有的属性做重复赋值操作

  • 执行之后，对象的数据，就是数组中不重复的数据

 1 var arr = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 1, 2, 3];
 2 var obj = {};
 3 var newArr = [];
 4 
 5 // 循环遍历数组,将数组的数据,作为对象的属性
 6 // 对象的属性值随便写
 7 arr.forEach(function (v) {
 8   obj[v] = '随便写';
 9 })
10 
11 // 将对象的属性，作为数值数据，写入到数组中
12 // key当中存储的是对象的属性
13 for (var key in obj) {
14   newArr.push(key);
15 }

五、数组的排序

1、冒泡排序

两个相邻的数值进行比较，如果第一个数值较大，就将两个单元交换存储数值

核心优化点

  • 循环比较时，是当前单元和下一个单元进行比较，最后一个单元是没有比较对象的，实际的循环范围是第一个单元到倒数第二个单元
1 i <= arr.length-1-1
  • 上一次比较出的最大值，不需要参与下一次的比较
1 j <= arr.length-1-1-i
 1 var arr = [3, 21, 3, 14, 342, 14, 34, 123, 4, 32];
 2 
 3 for (var i = 0; i <= arr.length - 1 - 1; i++) {
 4   for (var j = 0; j <= arr.length - 1 - 1 - i; j++) {
 5     // 如果当前单元数据,大于下一个单元数据,就做存储数据的交换
 6     if (arr[j] > arr[j + 1]) {
 7       var num = arr[j];
 8       arr[j] = arr[j + 1];
 9       arr[j + 1] = num;
10     }
11   }
12 }

2、选择排序

核心思路

  • 存储第一个单元的索引下标，默认是数组的最小值

  • 通过索引下标获取数据，跟之后的每一个单元的数据进行比较

  • 如果之后的单元存储的数据是较小值，那么就存储这个单元的索引下标

  • 循环一次之后，变量中存储的是最小值的索引下标

  • 如果这个索引下标不是原始的索引下标，就执行交换存储数据的操作

  • 完成上述操作，会比较出一个最小值在起始位置

  • 多次循环完成整个数组的排序

 1 var arr = [76,23,4,3,175,7658,3,33,2,123];
 2 
 3 for(var i = 0; i <= arr.length-1-1; i++){
 4   // 定义一个变量,存储每次参与循环起始单元的索引下标
 5   var min = i;
 6 
 7   // 从当前循环起始单元的下一个位置开始循环,也就是i+1，循环至最后一个单元
 8   for(var j = i+1; j <= arr.length-1; j++){
 9     // 如果变量中存储的索引获取的数据比当前循环到索引存储的数据大
10     // 变量存储当前位置的索引下标
11     if(arr[min] > arr[j]){
12       min = j;
13     }
14   }
15   // 变量中存储的索引下标，如果不是起始的索引下标，就交换两个索引下标
16   if(min != i){
17     var num = arr[min];
18     arr[min] = arr[i];
19     arr[i] = num;
20   }
21 }

六、数组的应用

1、记录字符出现的次数

 1 var str = 'abcabcdabcdeabcdef';
 2 
 3 // 1、将字符串转化为数组,以空字符串为间隔
 4 var arr1 = str.split('');
 5 
 6 // 2、数组去重
 7 var arr2 = [];
 8 arr1.forEach(function (val) {
 9   if (arr2.indexOf(val) === -1) {
10     arr2.push(val);
11   }
12 })
13 
14 // 3、将没有重复数据的数组中的数据作为新数组的索引，新数组的数值赋值为0
15 var arr3 = [];
16 arr2.forEach(function (v) {
17   // 获取arr2中的数据,作为arr3的索引,0作为数值数据
18   arr3[v] = 0;
19 })
20 
21 // 4、循环遍历原始数组 arr1，如果arr1中的数据与arr3中的索引相同,就给arr3中这个索引存储的数值 +=1 / ++
22 arr1.forEach(function (v1) {
23   // v3是 arr3 的索引 a,b,c...
24   for (var v3 in arr3) {
25     if (v1 == v3) {
26       // arr1数组中的数值,等于 arr3中索引
27       // 给arr3这个索引存储的数值累加1 可以是 +=1 / ++
28       arr3[v3]++;
29     }
30   }
31 })

2、记录数组数据出现的次数

 1 var arr = [1,2,3,1,2,3,4,1,2,3,4,5,1,2,3,4,5,6];
 2 
 3 // 1、数组去重（哪种方法都可以）
 4 var arr1 = arr;
 5 arr1.sort(function (a, b) { return a - b });
 6 // 相邻位置进行比较
 7 for (var i = 0; i <= arr1.length - 1 - 1; i++) {
 8   // 一定要使用全等判断,确保判断数据类型
 9   if (arr1[i] === arr1[i + 1]) {
10     arr1.splice(i + 1, 1);
11     // 为了防止数组的坍塌
12     i--;
13   }
14 }
15 
16 // 2、将没有重复数据的数组中的数据作为新数组的索引，新数组的数值赋值为0
17 var arr2 = [];
18 arr1.forEach(function (v) {
19   // 获取arr1中的数据,作为arr2的索引,0作为数值数据
20   arr2[v] = 0;
21 })
22 
23 // 3、循环遍历原始数组arr
24 arr.forEach(function (v1) {
25   // v2是 arr2 的索引 a,b,c...
26   for (var v2 in arr2) {
27     if (v1 == v2) {
28       // arr1数组中的数值,等于 arr2中索引
29       // 给arr2这个索引存储的数值累加1 可以是 +=1 / ++
30       arr2[v2]++;
31     }
32   }
33 })

七、数组高阶函数

1、filter

返回一个布尔值

  • true：当返回true时，函数内部会自动将这次回调的n加入新的数组中

  • false：当返回false时，函数内部会过滤掉这次的n

1 const nums = [10, 20, 111, 222, 333, 30, 40]
2 let newNums = nums.filter(function(n){
3     return n < 100
4 })
5 console.log(newNums) // [10, 20, 30, 40]

2、map

映射

1 const nums = [10, 20, 111, 222, 333, 30, 40]
2 let newNums = nums.filter(function(n){
3     return n < 100
4 })
5 
6 let mapNums = newNums.map(function(n){
7     return n * 2
8 })
9 console.log(mapNums) // [20, 40, 60, 80]

3、reduce

对数组中所有的内容进行汇总，两个参数

  • 参数一：函数

  • 参数二：初始值

 1 const nums = [10, 20, 111, 222, 333, 30, 40]
 2 let newNums = nums.filter(function(n){
 3     return n < 100
 4 })
 5 
 6 let mapNums = newNums.map(function(n){
 7     return n * 2
 8 })
 9 
10 let total = mapNums.reduce(function(preValue, n){ // preValue是上一次reduce执行的结果
11     return preValue + n
12 }, 0)
13 console.log(total) // 200

八、数组的其他问题

数组的一些小问题

1 // []中写字符串行不行
2 // for...in 在自定义变量中存储的是字符串类型的数值，是不是就是意味着可以使用字符串类型的数值来作为索引下标呢
3 var arr = ['北京'];
4 console.log(arr[0]); // 北京
5 console.log(arr['0']); // 北京
6 console.log(arr[false]); //undefined

  • 在 JavaScript 中数组是一种比较特殊的数据类型

  • 存储方式和其他计算机语言中的数组，都是不同的，调用方式也是不同的

  • []中数值和纯数字的字符串都可以调用数组中的数据，也就是数值和纯数字的字符串都可以做索引下标

1 // 如果非要定义一个数组单元,索引是字符串可以吗
2 // 新增数组单元的索引可以是字符串
3 // 新增单元可以存储在数组中，但是不算作数组的长度
4 // 也可以正常的通过[]写入字符串来调用数据
5 // for循环,forEach循环,都不能循环到字符串索引单元
6 // for...in循环可以循环到字符串索引单元
7 var arr2 = [1, 2, 3];
8 arr2['addr'] = '上海';

 



这篇关于八、JavaScript数组的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！


相关编程文章

更多>
本站官方QQ
官方QQ:
23002807

沪ICP备2023033072号-1

     

扫一扫关注最新编程教程