数组介绍,用法,语法,语句。。你会用的到的

179 阅读17分钟

JavaScript数组 array/arr 概念:存储数据的集合 理解:一个数据类型中可同时存储多个数据元素 语法: 自变量语法 var 变量=[数据1,数据2,数据3.....]; 在[]中定义存储多个数据单元,数据单元之间使用逗号间隔 推荐使用 构造函数语法 var 变量=new Array(数据1,数据2,数据3......); 数组是引用数据类型,两个数组比较判断的是内存地址,执行结果是false 属性: 索引下标 JavaScript程序定义的数组中存储的数据单元的编号,从0开始的连续的整数数值 在JavaScript中,下标只支持数值类型的索引下标,在其他计算机语言中,数组的下标可以是字符串类型,称为关联下标 通过索引下标指定操作的数组单元 语法是数组[索引下标] length 数组的长度,也就是数组中数据单元的个数 语法是数组.length .点可以理解为 的 的意思 因为索引下标是从0开始的连续整数,最后一个单元的索引下标一定是数组.length-1 数组索引下标的范围是0-数组.length-1 数组中存储的数据 在JavaScript中,数组可以存储任意JavaScript支持的数据类型 一个数组可以存储多种数据类型 数组中可以存储函数,一般存储的是匿名函数 实际项目中后端程序返回的数据一般都是比较复杂的数组/对象形式,数组一般是数组中存储对象 数组的基本操作 数据的调用 通过数组[索引下标]调用数组中指定索引下标对应的数据单元存储的数据数值, 如果没有对应的索引下标,调用结果是undefined 1.如果存储的是基本数据类型,数组[索引下标]获取对应的数据 2.如果存储的是函数程序,数组[索引下标]获取的是指定索引下标对应数据单元存储的函数的内存地址,浏览器显示结果是函数存储空间中存储的程序代码;数组索引下标是按照存储的内存地址调用执行函数,如果需要可以在()中输入实参 3.如果存储的是数组(多维数组的调用),通过多个并列的[]语法获取指定单元存储的数据,数组[索引下标]获取的是数组中存储的数组,这称为二维数组; 数组中存储多层数组称为多维数组 实际项目中会使用结构赋值语法对多维数组进行数据获取 4.如果数组中存储对象,通过索引下标获取对应的对象,再通过对象的取值语法获取具体的数据 arr[3].name; arr[4][‘name’]; 数组的基本操作 修改 新增 修改 对已经存在的数组单元进行操作 数组[索引下标]=数值数据; 通过[]语法对指定索引下标对应的数组单元进行重复赋值操作 执行效果是后赋值的数据覆盖前赋值的数据,达到修改数组单元存储数据的效果 新增 对不存在的数组单元进行操作 数组[索引下标]=数值数据; 通过[]语法对指定索引下标对应的数组单元进行赋值操作 执行效果是给数组新增单元,对新增单元设定索引下标同时赋值存储的数据 如果设定的索引下标不是连续的索引下标可以执行新增操作,但是数组中会生成empty空单元,空单元的调用结果是undefined,实际项目中新增单元必须是连续的索引下标 如果新增单元索引下标一定要设定成字符串/true/false/null/undefin,数组单元中会新增这个单元,但是length属性没有增加,也就是下标是字符串的数组单元不计算在数组长度中 如果新增单元索引下标输入的是符合整数语法规范的字符串(不包括科学计数法),会将字符串转化为对应的数字作为索引下标 实际项目中,新增数组单元一般使用专门的函数方法操作执行

数组的函数操作 比较重要:首位新增、末位新增、首位删除、末位删除、指定删除、数组转为字符串,字符串转为数组、数组的查询操作、数组的排序 二阶段不怎么用三阶段重要:数组的映射、数组的过滤、数组复杂查询、数组的判断、数组的叠加 简单了解:数组反转、数组的截取、数组的拼接

数组的循环语法

数组的循环遍历 是通过循环的语法操作数组中的每一个单元 方法1 for循环 通过for循环生成数组第一个单元到最后一个单元的索引下标,也就是0到数组.length-1的所有连续整数;再通过[]语法也就是数组[循环变量]来获取操作数组中的每一个单元 for(i=0;i<=arr.length-1;i++){ console.log(i,arr[i]); }

     方法2   for...in循环
       JavaScript程序自动循环数组中的每一个单元,获取每一个单元的索引下标,以字符串形式存储
       通过[]语法使用获取的索引下标操作当前循环的数组单元

for(var index in arr){ console.log(index,arr[index]); }

     方法3   for...of循环
       JavaScript程序自动循环数组中的每一个单元,获取每一个单元的数据数值存储到变量中

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

     方法4   forEach循环
       JavaScript程序自动循环数组的每一个单元
       获取每一个单元的索引下标、数据数值、原始数组本身存储到对应的变量中
       是专门针对数值操作的函数方法
       第一个参数存储当前循环单元的数据数值,第二个参数存储房钱循环单元的索引下标,第三个参数存储原始数组

arr.forEach(function(value,index,array) { console.log(value,index,array); }); 数组循环遍历方法的区别 for循环 实际项目中推荐使用 执行效率最高,for循环本质上没有针对数组进行循环,只是按照设定的循环条件生成数组对应的索引下标,然后通过索引下标操作数组单元 本质上只是0至数组.length-1的数字的循环 可以操作循环的进程,可以通过操作循环变量的数值,控制循环程序执行的过程 可以通过break终止循环 如果数组单元有非数字索引下标,不能循环操作 for...in循环 实际项目中一般用于循环变量对象的语法,一般不用来循环数组 真正的循环遍历操作每一个数组单元,一定会从数组的第一个单元循环遍历到数组的最后一个单元,每次循环获取当前循环单元的索引下标存储到设定的变量中 不能通过修改变量中存储的索引下标控制循环的进程,因为这个循环的进程执行是JavaScript程序默认设定的执行进程,也就是一定会从第一个单元循环至最后一个单元 只是获取当前循环单元的索引下标存储到变量中,不是通过变量中存储的数据控制for...in的循环 如果数组单元有非数字索引下标,可以循环遍历获取对应的索引下标存储到变量中 可以通过break终止循环 for...of循环 实际项目中一般用于迭代操作,一般不用来循环数组 不能修改循环进程 可以通过break终止循环 如果数组单元有非数字索引下标,不能循环遍历获取对应的数据数值 forEach循环 如果需要循环遍历数组的每一个单元,使用foreach语法比较简单 执行效率最低的循环,因为是通过指针操作循环遍历数组的每一个单元 指针概念:是计算机程序中一种数据的操作方式,可以理解为一种指向操作,指针指向谁,操作的就是谁 基本循环过程:(一定是从第一个单元至最后一个单元) 首先指针指向数组的起始位置,判断当前位置是不是数组范围内,有没有对应的数据单元,如果没有对应的数据单元就终止循环,如果有对应的数据单元,获取这个数据单元的数据数组、索引下标、原始数组 将指针移动到数组的下一个位置,同上 ...... 最终指针移动到数组范围外,终止整个循环 不能修改循环进程 如果数组单元有非数字索引下标不能获取对应单元的数据数值存储到变量中 不能通过break终止循环(forEach是指针操作,不能执行break)

    总结:
      for循环:执行效率最高,可以控制进程,可以break终止,不能获取非数字索引下标单元的数据
      for...in:一般循环对象,不能控制进程,可以break终止, 可以获取非数字索引下标单元的数据
      for...of:一般用于迭代操作,不能控制进程,可以break终止,不能获取非数字索引下标单元的数据
      forEach:循环效率最低,执行的是指针操作,不能控制进程,不能break终止,不能获取非数字索引下标单元的数据

数组的首位末位新增删除操作 新增 首位新增 数组.unshift(数据1,数据2...); 在数组的首位新增数据单元,一次可以新增一个单元或者多个单元,多个单元之间用逗号隔开 执行结果返回值是新增单元之后新数组的长度length 末位新增 数组.push( 数据1 , 数据2 ... ); 在数组的末位新增数据单元,一次可以新增一个单元 或者 多个单元,多个单元之间使用逗号间隔 执行结果返回值是新增单元之后新数组的长度length 删除 首位删除 数组.shift(); 一次只能删除一个单元 执行结果返回值是删除单元存储的数据数值 末位删除 数组.pop(); 一次只能删除一个单元 执行结果返回值是删除单元存储的数据数值

数组删除指定单元操作 数组.splice( 参数1 , 参数2 , [ 其他所有参数 ] ); 参数1 删除起始位置的索引下标 0或者正数是起始位置的索引下标 负数是从倒数第几个开始删除 参数2 删除数组单元的个数,必须是连续的数组单元 负数没有执行效果 其他所有参数 在删除位置替换写入的新内容 可以一次替换写入一个单元,可以替换写入多个单元 如果删除0个单元,新增写入的单元在删除起始位置前新增 执行结果返回值 是 删除单元数据 组成的新数组

数组数据查询操作 var 变量=数组.indexOf( 数值数据 ) 查询指定数据在数组中第一次出现的位置 如果有符合的数据返回值是存储数据单元的索引下标,如果没有符合的数据返回值是-1 var变量=数组.lastIndexOf( 数值数据 ) 查询指定数据在数组中最后一次出现的位置 如果有符合的数据返回值是存储数据单元的索引下标,如果没有符合的数据返回值是-1

数组去重的12种方法 blog.csdn.net/weixin_4631… 实际项目中 推荐使用使用 set数据类型方法 数组去重方法1 indexOf 数组中默认是可以存储重复数据 实际项目中数组中不能存储重复数据 基本原理 创建一个新的空数组,将原始数组数据写入新数组中,写入时执行判断,要写入的数据新数组中没有再执行写入操作

数组的截取方法 从数组中截取部分数据单元组成新数组,不会改变原始数组中存储的数据内容 语法 var 变量 = 数组.slice( 参数1 , 参数2 ); 执行结果返回值是截取原始数组内容组成的新数组 参数1 截取起始位置的索引下标 负数 结果是[]空字符串 参数2 截取结束位置的索引下标 负数 从起始位置截取至倒数第几个单元 不写 从起始位置截取至最后一个单元 截取结果不包括结束位置的数据数值

数组的反转 将原始数组内容都反向排序 数组.reverse();

数组的排序方法 数组.sort(); 按照首字符的大小排序,本质上是按照ASCII码表排序 ASCLL码是一种编码方式,所有字符都有对应的码表数值 数组.sort(function(参数1,参数2){return 参数1-参数2}); 从小到大 数组.sort(function(参数1,参数2){return 参数2-参数1}); 从大到小

数组的拼接 将两个数值的数据拼接成 一个数组,不会改变原始数组的内容 执行结果返回值是数值拼接的结果 var 变量 = 原始数组.concat( 数组1 , 数组2 .... ); 可以将一个或者多个数值的数据拼接到一个数组中

数组转为字符串 var 变量=数组.join(); 将数组数据拼接为字符串 以逗号为间隔符号 var 变量 = 数组.join('间隔符号'); 将数组数据拼接为字符串 以设定的符号为间隔符号 var 变量 = 数组.join(''); 将数组数据拼接为字符串 以设定参数是空字符串,没有间隔内容

字符串转为数组 var 变量 = 字符串.split(); 没有设定参数,整个字符串作为一个整体存储到数组中 var 变量 = 字符串.split(‘间隔符号’); 以设定的间隔符号作为依据将字符串分割,分割结果中不包括分割符号 var 变量 = 字符串.split(‘’); 使用空字符串作为分割符号,每一个字符都是一个数组单元

数组的扁平化 将多维数组转化为一维数组 [100,200,300,[400,500,600,[700,800,900]]]; 多维数组 [100,200,300,400,500,600,700,800,900] 一维数组 实际项目中数组如果存储的是复杂的数据结构,例如对象/函数,需要使用复杂的递归程序完成或者其他的函数方法完成;如果存储的是基本数据类型,可以使用简单的方法实现 简单方法:将数组转化为字符串,默认以逗号间隔,转化结果将多维数组数据都获取到,拼接为字符串,再将字符串以逗号为间割符号转为数组

数组的映射 将数组单元执行对应的操作,生成一个新的数组,不会改变原始数组中存储的数据单元 镜像 一模一样的 [1,2,3,4,5]===[1,2,3,4,5] 映射 一一对应但是经过操作数据不同 单元个数相同但是数据做过操作 [1,2,3,4,5]===[2,3,4,5,6,] var 变量=数组.map(function(参数1,参数2,参数3){ return 操作; 例:return value/10; 具体执行什么根据实际项目需求设定 }); 自动循环遍历原始数组的每一个单元 参数1 原始数组的数据数值 参数2 原始数组的索引下标 参数3 原始数组 执行结果返回值是映射的新的数组 将设定的操作结果通过return作为范围值生成一个新的数组,一般情况下操作时针对原始数组单元存储的数据数值的操作,也就是针对参数1的操作 数组的过滤 将符合条件的数组单元存储的数组生成一个新的数组,不会改变原始数组 过滤的条件可以是任意条件,生成的新数组是符合条件的单元的数据 var 变量 = 数组.filter( function( 参数1 , 参数2 , 参数3 ){ return 设定的条件; }) 自动循环遍历原始数组的每一个单元 参数1 原始数组的数据数值 参数2 原始数组的索引下标 参数3 原始数组

数组的判断 判断数组中有没有符合条件的数据 数组.some( function( 参数1 , 参数2 , 参数3 ){ return 判断的条件 ; }) 自动循环遍历原始数组的每一个单元 参数1 原始数组的数据数值 参数2 原始数组的索引下标 参数3 原始数组 只要有一个符合条件的数据返回值就是 true 如果所有数据都不符合条件返回值才是 false 数组.every( function( 参数1 , 参数2 , 参数3 ){ return 判断的条件 ; }) 自动循环遍历原始数组的每一个单元 参数1 原始数组的数据数值 参数2 原始数组的索引下标 参数3 原始数组 每一个数据单元必须都符合条件返回值才是 true 有一个数据单元不符合条件附加值就是 false

数组的复杂查询 1, 数组的简单查询 数组.indexOf( 数据 ) 数组.lastIndexOf( 数据 ) 返回:索引下标 / -1 数据只能是基本数据类型 2, 数组的判断 数组.some( function(参数1, 参数2){ return 条件 } ) 数组.every( function(参数1, 参数2){ return 条件 } ) 返回 true / false 3, 数组的复杂查询 数组.find( function( 参数1 , 参数2 , 参数3 ){ return 条件; }) 返回符合条件的数据,返回的是第一个符合条件的数据 ,如果没有符合条件的数据,返回值是undefined 实际项目中数组存储复杂数据类型执行数据查询时使用,一般是数组中存储对象时使用 数组.findIndex( function( 参数1 , 参数2 , 参数3 ){ return 条件 }) 返回符合条件的数据, 返回的是第一个符合条件的数据所在单元的索引下标,如果没有符合条件的数据,返回值是-1 一般是针对数组中存储的对象执行操作

数组的叠加 将数组单元的数据执行累加操作 没有设定初始值 var 变量 = 数组.reduce(function(参数1,参数2,参数3,参数4){ return 参数1 + 数据 ; }) 自动循环遍历原始数组的每一个单元 参数1 存储初始值 和 叠加结果 参数2 原始数组数据数值 参数3 原始数组索引下标 参数4 原始数组

                循环次数是数组.length-1 次
                默认获取第一个单元存储的数据作为初始值存储到参数1中
                从第二个单元开始循环,每次循环给参数1累加设定的数值
         
        设定初始值
            var 变量 = 数组.reduce(function(参数1,参数2,参数3,参数4){
                return 参数1 + 数据 ;
            } , 初始值 )
                自动循环遍历原始数组的每一个单元
                参数1   存储初始值 和 叠加结果
                参数2   原始数组数据数值
                参数3   原始数组索引下标
                参数4   原始数组
                先将设定的初始值存储到参数1中,从数组的第一个单元开始循环,循环次数是数组.length