[JavaScript知识库]数组的方法和用法

数组的各种方法和用法

一：数组的概念

• 数组可以把一组相关的数据一起存放，并提供方便的访问(获取）方式。
• 数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。

二：创建数组

1. 字面量:关键字 标识符 赋值符号 中括号

   let arr1 = [];  //数据类型object
   

2. 构造函数:关键字 标识符 赋值符号 new Array()

   let arr2 = new Array(); 
   

三：栈和堆的区别

1. 栈:存储的是基本数据类型的值，或者引用数据类型的地址

2. 堆:存储引用数据类型的数据，并创建一个地址，与栈关联(通过指针),即:并返回这个数据的地址，给栈

   let str = 123;
   let str1 = 'as';
   let arr = [];
   

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CKWkChBu-1643288659580)(E:\js\4.1.png)]

四：属性和方法

书写格式1:对象.属性名

书写格式2:对象.方法名(实参)

1. 方法会有小括号，属性没有

2. 一般情况下都是给引用数据类型使用

3. 都会有返回值（属性或方法的结果）

let arr = [];
console.log(arr);
let len = arr.length;  //属性
console.log(len);
let result = arr.push('er','er',43,null);   //方法
console.log(arr,result);

五：[增]

1. 书写格式1:数组名,unshift(数据)

   • 注：数据可以是多个

   • 功能:在数据前添加1个或多个数据

   • 返回值:新增后数组的长度(数据的个数)

let arr1 = [1,2,3];
let result1 = arr1.unshift('a','b'); //在数据前面添加
console.log(arr1,result1); //a,b,1,2,3  5

2. 书写格式2:数组名,push(数据)

   • 注：数据可以是多个

   • 功能:在数据前添加1个或多个数据

   • 返回值:新增后数组的长度(数据的个数)

let arr1 = [1,2,3];
let result2 = arr1.push('dd');  //在数据后添加
console.log(arr1,result2);   //1,2,3,dd   4

六：[删]

1. 书写格式1:数组名.shift()
   • 注:每次只能删除一个数据
   • 功能:删除数组第一个数据
   • 返回值:返回删除的那个数据

let arr1 = [1,2,3];
let result3 = arr1.shift();
console.log(arr1,result3);   //2,3  1

2. 书写格式2:数组名.pop(数据)
   • 注：数据可以是多个
   • 功能:删除数组最后一个数据
   • 返回值:返回删除的那个数据

let arr1 = [1,2,3];
let result4 = arr1.pop();
console.log(arr1,result4);   //1,2 1

七：[改]

1. 书写格式1:数组名[下标] 赋值符号 修改的值
   • 注:下标或索引的起始值是0，即数组的第一个值下标为0，第二个下标为1，以此类推。

let arr2 = ['q','w','e'];
arr6[1] = 3;
console.log(arr6);  //q,3,e

八：[查]

1. 书写格式1:数组名.includes(查找的数据)
   • 返回值：Boolean，存在返回true，不存在返回false

let arr3 = ['1','2','3','4','5','6','1'];
let result5 = arr7.includes('3');  //true
console.log(result5);
result5 = arr7.includes('7');  //true
console.log(result5);  //false

2. 书写格式2:数组名.indexOf(查找的数据)
   • 返回值：从数组的第一个值向后查找，返回第一个与数据相同的值的下标。不存在返回-1(从前往后开始找)

let arr3 = ['1','2','3','4','5','6','1'];
let result5 = arr7.indexOf('1'); 
console.log(result5);   //0为arr3[i]的数组下标

3. 书写格式3:数组名.lastIndexOf(查找的数据)
   • 返回值：从数组的最后一个值向前查找，返回第一个与数据相同的值的下标。不存在返回-1（从后往前找）

let arr3 = ['1','2','3','4','5','6','1'];
let result5 = arr7.lastIndexOf('1');  //6 从后往前找第一个1这个数据的下标
console.log(result5);

九:数组的遍历

1. for…in:遍历数组的下标

   • 书写格式:for(关键字 标识符 in 数组)

   for(let index in arr){
       console.log(index);
   }
   

2. for…of:遍历数组的值(存储的数据)

   • 书写格式:for(关键字 标识符 of 数组名)

    for(let value of arr){
       console.log(value);
   }
   

3. 直接循环

   let arr4 = ['1','2','3','4','5'];
   for(i=0;i<arr9.length;i++){
       console.log(arr9[i]);
   } 
   

十：批量获取数据slice

1. 书写格式：数组名.slice(参1,参2)
   • 1个参数：从参数小标开始取到数组的最后一个值
   • 2个参数：
   • 参1代表起始下标
   • 参2代表结束下标
   • 但不包含参2的值
   • 注：
     • 1.若参数的下标不符合规范(不满足条件)，则返回空数组
     • 2.若参数为负数，则用数组长度与其相加
     • 3.不会改变原数组的数据

let arr5 = ['1','2','3','4','5','6'];
let temp = arr5.slice(1);  //批量获取数据
console.log(temp); //2,3,4,5,6
temp = arr5.slice(2,5);
console.log(temp);  //3,4,5
temp = arr5.slice(-4)
console.log(temp);  //3,4,5,6
console.log(arr5);  //1,2,3,4,5,6

十一：splice

1. 书写格式：数组名.splice(参1,参2,参3…参n)
2. 返回值：Array(返回被删除或修改的数据)
   • 1个参数：从参数小标开始取到数组的最后一个值
   • 2个参数：
     • 参1代表起始下标，
     • 参2代表结束下标,
     • 但不包含参2的值
   • n个参数:
     • 参1代表起始下标，
     • 参2代表:0代表插入，非0代表修改个数,
     • 参数3到参n代表插入或修改的数据
3. 注：
   • 1.若参数的下标不符合规范(不满足条件)，则返回空数组
   • 2.若参数为符数，则用数组长度与其相加
   • 3.会改变原数组的数据

let arr10 = ['a','b','c','d','e','f'];

let temp = arr10.splice(2);  //从下标为2开始取数，因为splice会改变数据所以temp得到的值就是要删除的值
console.log(temp);  //c,d,e,f
console.log(arr10); //a,b

let temp = arr10.splice(3,0,1);  //从下标为3的前面插入一个数为1（0为修改，1为修改的数）
console.log(temp);  //[]
console.log(arr10);  //a,b,c,1,d,e,f 

let temp = arr10.splice(3,2,1)  //除了0以外的数都为修改，所以从下标为第三的开始,写的后面的是几个数字就把后面的几个数字修改成第三个参数的值
console.log(temp);	   //返回值：d,e
console.log(arr10);   //a,b,c,1,f

let temp = arr10.splice(3,3,1,2)  //从下标开始的那个数开始的后三个数修改成1，2
console.log(temp);   //返回值：d,e,f
console.log(arr10);  //a,b,c,1,2

十二：多维数组

let arr1['1','2','3'];
let arr2['5','6','7'];
let arr3[arr1,arr2];
console.log(arr[0][1]);  //2

十三：倒叙输出reverse

1. reverse倒序输出数组的数据
2. 书写格式：数组名.reverse()
3. 返回值：倒序后的数组

let arr1 = ['1','2','3','4'];
console.log(arr1.reverse());  //4,3,2,1

十四：数,字(相互转换)split

1. 数组与字符串之间的相互转换
2. 书写格式：字符串.split(分隔符)
3. 注：如果没有写分隔符则把字符串当成一个整体存入数组

let str = '2022-1-20';
let str1 = '2022:1:20';
let arr = str.split('-');
let arr1 = str1.split(':');
console.log(arr,arr1); //[ '2022', '1', '20' ] [ '2022', '1', '20' ]

字符串转数组

1. 通过下标循环来操作

   let submit = 'username=zhansan&pwd=123&gender=male';
   let str = submit.split('&');
   // console.log(str);  //[ 'username=zhansan', 'pwd=123', 'gender=male' ]
   let arr1 = [];
   for(let index in str){  
       let str1 = str[index].split('=');
       // console.log(str1);  //[ 'username', 'zhansan' ]  [ 'pwd', '123' ] [ 'gender', 'male' ]
       arr1.push(str1[0],str1[1]);
   }
   console.log(arr1);  //[ 'username', 'zhansan', 'pwd', '123', 'gender', 'male' ]
   
   

2. 通过值来循环操作

   let submit = 'username=zhansan&pwd=123&gender=male';
   let arr2=[];
   for(let value of str){
       let str2 = value.split('=');
       // arr2.push(str2[0],str2[1]);
       arr2.push(...str2);  //扩展运算符
   
       // console.log(str2);
   }
   console.log(arr2);
   

数组转字符串

let arr1=[ 'username', 'zhansan', 'pwd', '123', 'gender', 'male' ]
let str11= "";
for(let index in arr1){
    if(index%2==0){
        str11 += arr1[index];
    }else{
        index == arr1.length-1?
         str11 += '='+arr1[index]:
         str11 += '='+arr1[index]+'&'
    }
}
console.log(str11);  //username=zhansan&pwd=123&gender=male

十五：扩展运算符...

1. 功能：既能转换成字符串，也能转换数组

2. 还可以用来连接字符串

   let str3 = [1,2,3];
   console.log(...str3);
   let str4 = "123";
   console.log(...str4); 
   

   let str5 = [1,2,3];
   let str6 = ['a','b','c'];
   let str7 = [...str5,...str6]
   console.log(str7); //[ 1, 2, 3, 'a', 'b', 'c' ]
   

十六：数组的合并 concat

1. 书写格式:数组A.concat(数组B);

2. 返回值：返回一个新的数组（即A和B合并，A数据在前，B数据在后）

   let str5 = [1,2,3];
   let str6 = ['a','b','c'];
   let str8 = str6.concat(str5);
   console.log(str8);  //[ 'a', 'b', 'c', 1, 2, 3 ]
   

十七：数组转字符串join

1. 书写格式:数组.join(‘分隔符’)

let a=['2020','1','20'];
let str=a.join('/');//2020/1/20

十八：复制copyWithin

1. 书写格式：数组名.copyWithin(参1，参2，参3);
2. 参1:目标下标（即把拷贝的数据，放置的下标）
3. 参2:拷贝数据的起始下标
4. 参3:拷贝数据的结束下标（不包含）
5. 注1：如果没有给定参数3，则从参数2一直取到数组的最后一个值
6. 注2：会改变原数组
7. 返回值：返回一个数组（添加拷贝数据后的新数组）

//因为会改变原数组，所以要一个一个的运行
let arr = ['A','B','C'];
console.log(arr.copyWithin(1)); // [ 'A', 'A', 'B' ]
console.log(arr.copyWithin(0,1));  //[ 'B', 'C', 'C' ]
console.log(arr.copyWithin(0,1,1)); //[ 'A', 'B', 'C' ]
console.log(arr.copyWithin(0,1,2)); //[ 'B', 'B', 'C' ]

十九：数据填充fill

1. 书写格式：数组名.fill(参1，参2，参3);
2. 参1:填充的数据
3. 参2:填充的数据的起始下标
4. 参3:填充的数据结束下标（不包含）
5. 注1：如果没有给定参数3，则从参数2一直填充到数组的最后一个值
6. 注2：会改变原数组
7. 返回值：返回一个数组（填充数据后的结果）

let arr = ['a','b','c'];
let result = arr.fill(1,2,3);
console.log(result);  //[ 'a', 'b', 1 ]

二十：快速清空数组的方法

arr = []; //方法1
arr.splice(0)  //方法2
arr.length = 0;  //方法3
console.log(arr);