JavaScript(三)集合引用类型
本文最后更新于:8 个月前
集合引用类型(数组Array、Map、Set)。引用类型是把数据和功能组织到一起的结构,引用值(或者对象)是某个特定引用类型的实例。基本类型不存在引用一说
JavaScript(三)集合引用类型
一、数组Array
1.1、创建Array
new操作符 + Array构造函数,其中new操作符可选
数组字面量
Array.from(),返回一个新数组,浅拷贝的方式。可以将两类对象转换为数组:类数组对象、可遍历对象。任何有
length
属性的对象,都可以通过Array.from()
方法转为数组1
2
3
4Array.from(object, mapFunction, thisValue)
object:必需。需转换为数组的对象。
mapFn: 可选。对数组的每个项目调用的 map 函数。
thisValue:可选。执行 mapFunction 时用作 this 的值Array.of(),把一组参数转换为数组。**
Array(7)
** 创建一个长度为 7 的空数组,Array.of(7)
创建一个具有单个元素 7 的数组
1 |
|
1.2、Array长度
- arr.length 获取数组长度,也可以通过
arr.length=xx
来改变数组长度,多删少补undefined
1.3、实例方法
1.3.1 改变原数组的方法
方法 | 描述 | 返回值 |
---|---|---|
sort() | 排序,默认按照字符编码排序,(更多细节见下面代码示例) | 原数组的引用 |
reverse() | 颠倒数组顺序 | 原数组的引用 |
splice(start,num,[item1,…]) | 从start位开始,删除num个元素,并在start位置插入item(s),item1外的方括号表示该参数可选 | |
push(item) | 向数组末尾添加指定元素,可以一次插入多个item | 插入位置的索引值(或者说是数组长度) |
pop() | 从数组末尾删除一个元素 | 删除的元素 |
shift() | 从数组头删除一个元素 | 删除的元素 |
unshift() | 向数组头添加指定元素,可以一次添加多个 | 数组长度 |
fill(value,start,end) | 在[start,end)之间填充(替换)value | 原数组的引用 |
1 |
|
1.3.2 不改变原数组的方法
方法 | 描述 | 返回值 |
---|---|---|
forEach(fn) | 遍历数组,将函数fn作用到每个元素上 fn的参数依次为:item,index,array,元素、下标,数组引用,后两者可选 |
无 |
map(fn) | 接受函数作为参数,为每个元素应用函数,并将结果返回为一个新数组 (更多细节另外进行探究) |
新数组 |
reduce(fn,initalVal) | 参数一,函数fn,将函数fn累加作用到所有元素上 参数二,初始值,可选。(更多细节另外进行探究) |
一个结果(值) |
filter(fn) | 接受函数作为参数,筛选出所有符合条件的元素组成新的数组 | 新数组 |
slice(start,end) | 数组切片,如果不给参数返回整个数组,如果只给一个参数表示起始索引。可以用来浅拷贝 | 指定范围的新数组 |
concat(item1,…) | 接受不定数量的参数,将所有参数拼接到调用concat的数组组成一个新数组(如果参数是数组,会拆开一层,示例如下) 如果不指定参数,可以用来浅拷贝数组 |
拼接后的新数组 |
join(char) | 接受一个字符串参数,缺省默认为, |
拼接后的字符串 |
every(fn) | 检测Array中是否每个元素都符合指定条件(在fn中设置) | 布尔值 |
some(fn) | 检测Array中是否有元素符合指定条件(在fn中设置) | 布尔值 |
includes(item) | 判断是否在Array中找到一个与指定item匹配的元素 | 布尔值 |
find(fn) | 返回数组中满足提供的测试函数的第一个元素的值,否则返回undefined | 值或undefined |
findIndex(fn) | 返回数组中满足提供的测试函数的第一个元素的索引,否则返回undefined | 索引值或undefined |
indexOf(item, start) | 参数一:要查找的元素,查找该元素在Array中的第一个下标,如果不存在返回-1。 参数二:查找起点,不设置默认从0开始查找 |
索引值 |
lastIndexOf() | 接受一个参数,由后向前寻找,返回第一个匹配的元素下标,如果不存在返回-1 | 索引值 |
1 |
|
1 |
|
1 |
|
1 |
|
1 |
|
1 |
|
1.3.3 forEach和map比较
使用场景:
- forEach,需要遍历获取数组元素的操作
- map,需要对原数组的所有元素做出一些修改的操作
定义:
- forEach,对数组的每个元素执行一次给定的函数
- map,创建一个新数组,这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成(因此map的回调函数必须返回值)
参数:两者参数一致
1 |
|
对原数组的影响:
直接调用时都不改变原数组,但是可以通过函数参数的 数组引用 修改原数组
1 |
|
遍历时的特殊情况:
- forEach遍历的范围在第一次调用
callback
前就会确定,调用forEach后添加的元素不会被访问。如果已访问的元素在迭代时被删除了(例如使用pop()),之后的一个元素将被跳过。 - 调用forEach之后、访问到该元素之前,该元素被删除,它将不会被访问到。并且不访问未初始化的值。
1 |
|
- map在
callback
方法第一次调用之前就已经确定了,调用map后才追加的元素不会被访问。如果现存的数组元素被改变,callback访问的是当前实际的值。 - 调用map之后、访问到该元素之前,该元素被删除,它将不会被访问到,返回的数组和原数组长度一致,如果有需要用undefined填充
1 |
|
1.4、判断是否Array类型
- arr instanceof Array
- Array.isArray(arr)
- arr.constructor === Array
- Array.prototype.isPrototypeOf(arr), isPrototypeOf() 用于测试一个对象是否存在于另一个对象的原型链上
- Object.getPrototypeOf(arr) === Array.prototype,getPrototypeOf方法返回指定对象的原型
二、Map
对象Object的属性值只能为字符串。为了突破这个限制,ES6新增了Map对象,Map 结构提供了“值—值”的对应,并且能够记住键的原始插入顺序,任何值(对象或者原始值) 都可以作为一个键或一个值
2.1、创建Map实例
1 |
|
创建Map实例,可以不用在构造器函数后面加上()
1 |
|
2.2、实例方法
1 |
|
2.3、遍历Map
- entries()方法,或者Symbol.iterator属性(实际上它也是引用entries())
1 |
|
- values()方法,只遍历值
1 |
|
2.4、WeakMap
- WeakMap和Map的区别在于,Map的键值可以是任意JavaScript类型,但WeakMap的键类型只能是Object或者继承自Object的类型。这些键不属于正式的引用,所以不影响垃圾回收,这也是使用WeakMap的意义。
- 因为WeakMap的元素随时可能会被回收,所以它不支持迭代。
1 |
|
三、Set
3.1、创建Set实例
1 |
|
3.2、实例方法
1 |
|
3.3、遍历Set
1 |
|
1 |
|
3.4、合并Set
1 |
|
3.5、WeakSet
- WeakSet中的“weak”(弱),描述的是JavaScript垃圾回收程序对待“弱集合”中值的方式
- 弱集合中的值只能是Object类型或者继承自Object的类型,尝试使用非对象设置值会抛出TypeError
- 不可迭代值
JavaScript(三)集合引用类型
http://timegogo.top/2023/01/31/JavaScript/JavaScript(三)集合引用类型/