0
点赞
收藏
分享

微信扫一扫

数组的方法和用法

工程与房产肖律师 2022-01-27 阅读 22
javascriptvisual studio code前端

数组的各种方法和用法

一：数组的概念

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

二：创建数组

  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

  1. 书写格式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
  1. 书写格式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
  1. 书写格式2:数组名.indexOf(查找的数据)
    • 返回值：从数组的第一个值向后查找，返回第一个与数据相同的值的下标。不存在返回-1(从前往后开始找)
let arr3 = ['1','2','3','4','5','6','1'];
let result5 = arr7.indexOf('1'); 
console.log(result5);   //0为arr3[i]的数组下标
  1. 书写格式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);
举报

相关推荐

数组方法reduce的基础用法和奇怪的用法

javascript前端开发语言数组MathJavaScript前端开发

滚动数组 (定义和用法)

acm滚动数组数组#includeLinux系统/运维

箭头函数用法及和ECMA5数组方法结合

javascript前端html5

常量数组的用法

压力测试

js数组和list和map基础用法

javaSystem数组TypeScript前端开发yyds干货盘点

数组和对象方法&数组去重

web前端面试题JavaScript前端开发那些事儿

数组的.filter(_=＞_)用法解析

linqsafarip2p

JavaScript数组用法

JavaScript数组原型链for循环Linux系统/运维

stream常用方法及stream().filter()的用法和Collectors.toMap 用法

java开发语言后端数据空指针异常编程语言

数组的方法

javascript
0 条评论