JavaScript数组之最全学习笔记

一、初识数组

(一)数组的定义

一组变量的集合,连续保存多个数据的引用类型的对象

(二)数组的分类

索引数组、关联数组(hash数组)、二维数组

(三)创建数组的方法:

1、创建一个空数组
JavaScript数组之最全学习笔记
2、创建数组的同时,直接初始化数据:
JavaScript数组之最全学习笔记
3、创建指定个数的数组
JavaScript数组之最全学习笔记
4、创建数组的同时初始化数组内容
JavaScript数组之最全学习笔记
注意:第三,四种不常用,因为有歧义!
例如:JavaScript数组之最全学习笔记有两种解释

(四)关于数组的操作

1、如何取数组的元素值:变量 = 数组名[下标]
JavaScript数组之最全学习笔记
2、如何赋值:数组名[下标] = 新值
3、如何获取数组的长度:arr.length属性
4、获得数组中最后一个元素值的固定写法:arr[arr.length-1]
JavaScript数组之最全学习笔记
JavaScript数组之最全学习笔记
5、如何向索引数组中追加新元素固定写法:
arr[arr.length] = 追加的新值
JavaScript数组之最全学习笔记
JavaScript数组之最全学习笔记
易错点:
JavaScript数组之最全学习笔记
JavaScript数组之最全学习笔记
说明:把arr的引用地址复制了一份给arr2,arr2[2]赋值为3,所以改变了arr中的值,因为他们指向同一个地址,所以输出3.

二、数组遍历

(一)基本概念

从第0个元素开始,一次取出每个元素,对每个元素执行 相同的操作

(二)索引数组下标

索引数组都是有下标的:下标从0 开始,每次递增1,下 标天生就是一个循环变量。

(三)练习题—找数组中的最大值

练习:定义一个函数,找出数组中的最大值!
JavaScript数组之最全学习笔记
JavaScript数组之最全学习笔记

(四)冒泡排序

给定一个数组,使数组里的元素按照从大(小) 到小(大)的书序排列。(面试当中很可能会被问到,需要敲代码)
案例代码(以降序排序为例):
JavaScript数组之最全学习笔记
JavaScript数组之最全学习笔记
JavaScript数组之最全学习笔记
注意:升序排列,只需要改变判断条件,将arr[i]<arr[i+1]改为arr[i]>arr[i+1]即可;

三、关联数组

(一)概念

也称为哈希(hash)数组,可以自定义元素下标名的数组;

(二)如何创建关联数组

1、先创建空数组,再追加自定义下标的元素。
JavaScript数组之最全学习笔记
JavaScript数组之最全学习笔记
需要注意的地方:
关联数组的length属性失效
关联数组中的key不能重复
关联数组中保存的数据都是键值对(key:value)的形式进行保存;查找起来非常快,和元素个数无关;
2、创建数组的同时初始化元素内容
JavaScript数组之最全学习笔记
注意:关联数组和对象
JavaScript数组之最全学习笔记
JavaScript数组之最全学习笔记
PS:两者输出完全相同,都是对象,基本上没什么不同,但是如果要细分的话,前者是纯对象,后者是关联数组

(三)如何遍历关联数组

JavaScript数组之最全学习笔记
JavaScript数组之最全学习笔记

(四)数组去重(重难点)

JavaScript数组之最全学习笔记
JavaScript数组之最全学习笔记
特别注意的一点是,去重的数组是经过自动排序的,因为当前值作为hash数组中的key保存时会自动排序,所以压入到arr数组中也会排序,并不是和源数组的顺序一致!!!

四、数组API

(一)API的概念

应用程序的编程接口,浏览器厂商提供的已经实现的方法(指令),开发人员直接调用,不需要了解人如何实现的!

(二)数组API有哪些

1、数组的字符串拼接:arr.join(“连接符”)
(1)将数组的字符,无缝连接成单词。
JavaScript数组之最全学习笔记
JavaScript数组之最全学习笔记
(2)将数组的单词,无缝连接程句子。
JavaScript数组之最全学习笔记
JavaScript数组之最全学习笔记
(3)将数组中的内容,转换为页面中的列表元素
JavaScript数组之最全学习笔记
JavaScript数组之最全学习笔记
2、连接数组:arr.concat(值1,值2,[值3,值4]…)
JavaScript数组之最全学习笔记
JavaScript数组之最全学习笔记
3、获取子数组(截取操作):arr.slice()
var subArr = arr.slice(starti[,endi+1]);
其中:starti --截取的起始下标
endi --截取的结束下标
[]中的内容可有可无,如果省略endi,表示从起始下标开始截取一直到数组末尾。
注意:slice的截取操作参数下标使用规则:含头不含尾
JavaScript数组之最全学习笔记
JavaScript数组之最全学习笔记
另外,slice还支持倒数下标:
JavaScript数组之最全学习笔记
JavaScript数组之最全学习笔记
重点注意:join(),concat(),slice()三个API都不会修改原数组对象
4、删除、插入、替换:arr.splice()
该API可以删除、插入、替换任意位置的任意个数的元素,会直接修改原数组
(1)删除操作:2个参数 splice(starti,n)
starti --要删除的第一项的起始位置下标
n --要删除的个数
JavaScript数组之最全学习笔记
JavaScript数组之最全学习笔记
(2)插入操作:
起始位置、0(需要删除的个数)、要插入的项
splice(starti,0,新值1,新值2)
JavaScript数组之最全学习笔记
JavaScript数组之最全学习笔记
(3)替换操作
起始位置、替换的项数(要删除的个数)、要插入的项
splice(starti,n,新值1,新值2…)
JavaScript数组之最全学习笔记
特别注意:splice()始终返回一个数组,该数组中包含了从原数组中删除的项
5、反转数组:arr.reverse()
颠倒了数组的所有元素顺序 -直接修改原数组
JavaScript数组之最全学习笔记
JavaScript数组之最全学习笔记
6、数组排序:arr.sort()—直接修改原数组对象
问题:默认sort方法,只能将所有的元素转为字符串之后再进行排序(按照unicode号来排)
解决办法:自定义比较规则—2步
(1)声明一个比较器函数:专门封装任意两数比较逻辑
参数必须是2个:a,b
数字比较器:
升序:function(a,b){return a-b}
降序:function(a,b){return b-a}
其中,a始终表示当前值,b表示下一个,所以a,b的顺序不能变.
(2)把定义好的比较器函数(比较规则),作为参数给到sort方法即可.
JavaScript数组之最全学习笔记
JavaScript数组之最全学习笔记

五、栈和队列

(一)栈

概念:一端封闭,只能从另一端进出的数组。
FIFO — first in first out 后进的先出
1、从数组的末尾入栈和出栈:
数组末尾入栈:arr.push()
数组的末尾出栈:varn last = arr.pop
JavaScript数组之最全学习笔记
JavaScript数组之最全学习笔记
2、数组的开头出入栈:
每次都会影响,数组中后续元素的下标。
数组开头入栈:arr.unshift(新值)
数组开头出栈:var first = arr.shift()
JavaScript数组之最全学习笔记
JavaScript数组之最全学习笔记

(二)队列

概念:从一端进入,从另一端出的数组
FIFO —先进的先出
1、从数组一端进队列:arr.push()
2、从数组的另一头出队列:arr.shift();
JavaScript数组之最全学习笔记
JavaScript数组之最全学习笔记