IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> javascript数组 -> 正文阅读

[JavaScript知识库]javascript数组

一、数组的基础


1.基础概念


? ? ?什么是数组:在一个内存(变量名)中保存了多个数据的一个集合结构

2.创建


? ? 1.直接量:var arr=[值1,...];
? ? ?2.构造函数:var arr=new Array(值1,...);
? ? ? ? ? ?特殊:new Array(只放了一个数字num) - 创建长度为num的一个空数组,相当于设置length

3.访问:数组名[下标]--元素


? ? ?添加:数组名[下标]=新值;
? ? ? 特殊:读取元素,下标越界,返回undefined
? ? ? ? ? ? ? ? ?添加元素,下标越界,下标不再连续导致数组变成一个稀疏数组

4.三不限制


? ? ?1.不限制元素的个数
? ? ?2.不限制元素的类型
? ? ?3.不限制下标越界(但是不建议)

5.数组名.length:可以获取数组的长度(长度==最大下标+1)


? ? ? 三个固定套路:
? ? ? ? ? 1.末尾添加元素:arr[arr.length]=新值;
? ? ? ? ? 2.获取倒数第n个:arr[arr.length-n];
? ? ? ? ? 3.缩容:删除元素:从末尾删除元素:arr.length-=n;

6.遍历数组:将数组中的每个元素都取出来执行相同或者相似的操作


? ? ? ? for(var i=0;i<arr.length;i++){arr[i]//当前次元素}

7. 索引数组:下标都是由数字组成的数组

8.关联数组 - 也称之为hash数组


? ? ? 什么是:下标是可以自定义的
? ? ? 为什么:索引数组的下标无具体意义,不便于查找
? ? ? 如何使用:
?? ?1、先创建一个空数组
?? ??? ?var arr=[];
?? ?
?? ?2、为数组添加下标添加元素
?? ??? ?arr["自定义下标"]=新值

?? ?3、访问元素非常简单,不需要数下标,只需要直接写入下标:
?? ??? ?arr["自定义下标"];

?? ?4、强调:hash数组的length永远失效!永远为0!

?? ?遍历hash数组:必须使用for in循环遍历 - for in是专为遍历准备的
?? ??? ?公式:for(var 下标名 in 数组名){
?? ??? ??? ??? ?数组名[下标名];
?? ??? ??? ? ? ? }
?? ??? ?for in :既可以遍历索引数组 也可以 遍历 hash数组

二、数组的API


1.arr 转 string:


? ? ? ?var str=arr.join("连接符");
? ? 可以自定义连接符,也可以省略不写等效于String(arr);
? ?固定套路
? ? ? 1.如何将数组里面的内容拼接为一个句话(无缝拼接)?
? ? ? ? ? ? 语法: ?var str=arr.join("");
? ? ? ?2、将数组拼接为页面元素
? ? ? ? ? ? ? ?//数据
?? ?var cities=["-请选择-","北京","南京","重庆","天津","上海"];
?? ?//数组的API join拼接上了标签
?? ?var str="<option>"+cities.join("</option><option>")+"</option>";
?? ?//渲染到页面元素之上
?? ?sel.innerHTML=str;

?? ?实现:二级联动:
?? ?关键要点:1、两个数组:一个普通数组做一级,一个二维做二级
?? ??? ? 2、select专属事件onchange
?? ??? ? 3、事件中:this.selectedIndex - 获取到当前选中项的下标

2、拼接数组:添加数组元素的新方式:将concat后面的参数,拼接到arr之后


?? ?var newArr=arr.concat(值1,...);
?? ?强调:1、concat不修改原数组,只能返回一个新数组
?? ? ? ? ?2、concat可以直接传入数组参数,悄悄的把数组打散为单个元素

3、截取(获取)子数组:将arr从starti位置开始,一直截取到endi - 删除元素的新方式/复制


?? ?var subArr=arr.slice(starti,endi+1);
?? ?强调:1、slice不修改原数组,只能返回一个新数组
?? ? ? ? ?2、含头不含尾
?? ? ? ? ?3、endi可以省略,截取到末尾
?? ? ? ? ?4、两个参数都可以省略,从头到尾复制一份 - 深拷贝(复制了一个副本)

4、arr.splice():删除/添加/替换的新方式


?? ?删除:var dels=arr.splice(starti,n); n - 删除个数?
?? ? ? ? ?强调:其实此方法也有返回值,返回的是你删除的元素组成的一个新数组

?? ?添加:arr.splice(starti,0,值1,...);
?? ? ? ? ?强调:1、原starti位置的元素以及后续元素都会向后移动
?? ??? ? 2、插入数组也行,但是不推荐,因为不会帮我们打散数组,会导致一些部分是一维,一些部分是二维

?? ?替换:var dels=arr.splice(starti,n,值1,...);
?? ? ? ? ?强调:删除的个数不必等于插入的个数

5、翻转数组:arr.reverse();

6.排序:arr.sort();


? ? ? ?问题1:默认会将元素们转为字符串,按位PK,希望按照数字排序?
?? ? 解决:固定套路:
?? ??? ?arr.sort(function(a,b){//悄悄的带有循环
?? ??? ??? ?console.log(a);//a是后一个数
?? ??? ??? ?console.log(b);//b是前一个数
?? ??? ??? ?return a-b;//如果return 返回的是一个正数,说明后一个数>前一个数
?? ??? ??? ??? ? ? //如果return 返回的是一个负数,说明后一个数<前一个数
?? ??? ??? ? ? ? ? ? ? ? ? ? //如果return 返回的是0,两者一样大
?? ??? ??? ??? ? //而我们的sort方法正好可以根据你返回的正数/负数/0来进行排序
?? ??? ??? ?})

? ? ? ? ? 问题2:只能升序排列,如何降序:
?? ?解决:arr.sort(function(a,b){return b-a;})


7.栈和队列:其实就是数组,添加元素和删除元素的新方式


?? ?栈:数组,只不过是一端封闭,只能从另一端进出的操作
?? ??? ?开头进:arr.unshift(新元素,...);//添加元素的新方式,向前添加,缺陷:导致其余元素的下标发生变化
?? ??? ?开头出:var first=arr.shift();//只会一次调用删除第一个//删除元素的新方式,向前删除,缺陷:导致其余元素的下标发生变化

?? ??? ?结尾进:arr.push(新元素,...);//添加元素的新方式,向后添加
?? ??? ?结尾出:var last=arr.pop();//只会一次调用删除最后一个//删除元素的新方式,向后删除

?? ?队列:数组,只不过是只能从一端进入,另一端出
?? ? ? 何时:按照先来后到的顺序
?? ??? ?依然是以上4个:
?? ??? ?开头进:arr.unshift(新元素,...);
?? ??? ?结尾出:var last=arr.pop();

?? ??? ?结尾进:arr.push(新元素,...);
?? ??? ?开头出:var first=arr.shift();

8.二维数组:数组的元素,又引用着另一个数组


?? ? ?何时:在一个数组内,再次细分每个分类
?? ? ?创建:
?? ??? ?var arr=[
?? ??? ??? ?["张三",18,1500],
?? ??? ??? ?["李四",18,2000],
?? ??? ??? ?["王麻子",35,12000]
?? ??? ?];
?? ?
?? ? ?访问:arr[行下标][列下表];
?? ? 特殊:列下标越界,返回undefined
?? ??? ?行下标越界,报错!因为undefined没有资格使用[]

?? ? ?遍历二维数组:必然两层循环,外层循环控制行,内存循环控制列
?? ??? ??? ?for(var r=0;r<arr.length;r++){
?? ??? ??? ??? ?for(var c=0;c<arr[r].length;c++){
?? ??? ??? ??? ??? ?console.log(arr[r][c]);
?? ??? ??? ??? ?}
?? ??? ??? ?}
?

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-08-23 16:34:41  更:2021-08-23 16:36:00 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 13:01:48-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码