关于arraymdn的信息

JS Array(数组)所有操作方法，改变数组方法、不改变数组方法

定义：返回由所有参数值组成的数组，如果没有参数，就返回一个空数组。

目的：Array.of() 出现的目的是为了解决上述构造器因参数个数不同，导致的行为有差异的问题。

参数：

第一个参数(必需):要转化为真正数组的对象。

第二个参数(可选): 类似数组的map方法，对每个元素进行处理，将处理后的值放入返回的数组。

第三个参数(可选): 用来绑定this。

ps：splice方法从数组中添加/删除项目，然后返回被删除的项目

语法： array.splice(index,howmany,item1,.....,itemX)

参数:

index：必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。

howmany：必需。要删除的项目数量。如果设置为 0，则不会删除项目。

item1, …, itemX： 可选。向数组添加的新项目。

返回值: 如果有元素被删除,返回包含被删除项目的新数组。

删除元素

删除并添加

不删除只添加

ps：方法接受两个参数，一个从哪里开始，一个是到哪里结束（但是不包括这个结束的元素本身）。如果是负数，就从倒数第几个。

参数可选: 规定排序顺序的比较 函数 。

默认情况下sort()方法没有传比较函数的话，默认按字母升序，如果不是元素不是字符串的话，会调用toString()方法将元素转化为字符串的Unicode(万国码)位点，然后再比较字符。

比较函数的两个参数

sort的比较函数有两个默认参数，要在函数中接收这两个参数，这两个参数是数组中两个要比较的元素，通常我们用 a 和 b 接收两个将要比较的元素：

sort排序常见用法

数组元素为数字的升序、降序:

数组多条件排序

自定义比较函数

定义: 在当前数组内部，将指定位置的成员复制到其他位置,并返回这个数组。

语法: array.copyWithin(target, start = 0, end = this.length)

参数:

三个参数都是数值，如果不是，会自动转为数值.

target（必需）：从该位置开始替换数据。如果为负值，表示倒数。

start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示倒数。

end（可选）：到该位置前停止读取数据，默认等于数组长度。使用负数可从数组结尾处规定位置。

浏览器兼容(MDN): chrome 45,Edge 12,Firefox32,Opera 32,Safari 9, IE 不支持

从上述例子:

第一个参数是开始被替换的元素位置

要替换数据的位置范围:从第二个参数是开始读取的元素，在第三个参数前面一个元素停止读取

数组的长度不会改变

读了几个元素就从开始被替换的地方替换几个元素

参数:

第一个元素(必须): 要填充数组的值

第二个元素(可选): 填充的开始位置,默认值为0

第三个元素(可选)：填充的结束位置，默认是为this.length

使用join方法或者下文说到的toString方法时，当数组中的元素也是数组或者是对象时会出现什么情况？

join()/toString()方法在数组元素是数组的时候，会将里面的数组也调用join()/toString(),如果是对象的话，对象会被转为[object Object]字符串。

如上述栗子：调用数组的toLocaleString方法，数组中的每个元素都会调用自身的toLocaleString方法，对象调用对象的toLocaleString,Date调用Date的toLocaleString。

该方法的效果和join方法一样，都是用于数组转字符串的，但是与join方法相比没有优势，也不能自定义字符串的分隔符，因此不推荐使用。

ps：当数组和字符串操作的时候，js 会调用这个方法将数组自动转换成字符串

ps：字符串也有一个slice() 方法是用来提取字符串的，不要弄混了。

参数:

begin(可选): 索引数值,接受负值，从该索引处开始提取原数组中的元素,默认值为0。

end(可选):索引数值(不包括),接受负值，在该索引处前结束提取原数组元素，默认值为数组末尾(包括最后一个元素)。

如上：新数组是浅拷贝的，元素是简单数据类型，改变之后不会互相干扰。

如果是复杂数据类型(对象,数组)的话，改变其中一个，另外一个也会改变

原因在定义上面说过了的：slice()是浅拷贝，对于复杂的数据类型浅拷贝，拷贝的只是指向原数组的指针，所以无论改变原数组，还是浅拷贝的数组，都是改变原数组的数据。

ES6扩展运算符...合并数组：

因为ES6的语法更简洁易懂，所以现在合并数组我大部分采用...来处理，...运算符可以实现cancat的每个栗子，且更简洁和具有高度自定义数组元素位置的效果。

参数:

searchElement(必须):被查找的元素

fromIndex(可选):开始查找的位置(不能大于等于数组的长度，返回-1)，接受负值，默认值为0。

严格相等的搜索:

数组的indexOf搜索跟字符串的indexOf不一样,数组的indexOf使用严格相等===搜索元素，即数组元素要完全匹配才能搜索成功。

注意：indexOf()不能识别NaN

参数:

searchElement(必须): 被查找的元素

fromIndex(可选): 逆向查找开始位置，默认值数组的长度-1，即查找整个数组。

关于fromIndex有三个规则:

正值。如果该值大于或等于数组的长度，则整个数组会被查找。

负值。将其视为从数组末尾向前的偏移。(比如-2，从数组最后第二个元素开始往前查找)

负值。其绝对值大于数组长度，则方法返回 -1，即数组不会被查找。

参数：

searchElement(必须):被查找的元素

fromIndex(可选):默认值为0，参数表示搜索的起始位置，接受负值。正值超过数组长度，数组不会被搜索，返回false。负值绝对值超过长数组度，重置从0开始搜索。

includes方法是为了弥补indexOf方法的缺陷而出现的:

indexOf方法不能识别NaN

indexOf方法检查是否包含某个值不够语义化，需要判断是否不等于-1，表达不够直观

将伪数组转化为真数组的几种方法

1.具有length属性，可以获取长度。

2.具有索引，可以通过遍历获取所有元素。

3.不可以使用数组的内置方法和属性。

我们可以看到伪数组的__proto__指向的是一个Object对象，当然不能使用数组的内置方法和属性了。

可以看到，真数组的__proto__指向的是一个Array数组。

1.函数的内置对象arguments，它是所有实参组成的伪数组。

2.DOM对象组成的伪数组，通过document.querySelectorAll等获得的dom对象列表。

3.jQuery对象组成的伪数组，通过$('选择器')获取到的包含dom对象列表和jQuery方法的jQuery对象。

方法一：最简单的，先准备一个新的空数组，然后遍历伪数组，将伪数组中的值通过索引逐个添加到新数组当中。

方法二：利用扩展运算符(...)将伪数组转化为真数组 - ES6语法

方法三：利用Array的原型对象的slice方法，配合call()方法修改slice中this指向

方法四：利用Array.from方法 - ES6

注意：Array.from方法是从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。(MDN)

这里简单的说一下浅拷贝和深拷贝：

浅拷贝只会复制对象的第一层数据，如果是其他层，复制的是地址。

深拷贝会将整个对象的数据复制给新对象。

也就是说，用Array.from方法返回的新数组是一个浅拷贝数组，如果改变了新数组当中深层次对象的数据，那么原来的对象当中的数据也会跟着被修改。

举个例子：

可见当我们修改了ary数组的第一层数据时，arrayLike没有改变，但是当我们修改ary数组深层数据的时候，arrayLike里深层的数据也相应的改变了，这是因为浅拷贝时深层数据是拷贝的地址，所以新数组和原来的伪数组深层的数据，在内存当中的地址是一样的，修改新数组的深层数据，当然也会修改原伪数组的深层数据。

伪数组转化为新数组的方法，暂时就想到这么多了，文章中的错误之处欢迎大家指正。

当然，有关深拷贝与浅拷贝，后续会继续总结更新。。。

Array的flatMap()和flat()

flat() 和 flatMap() 都是比较新的特性， flat() 对应的都是数组扁平化方面的功能， flatMap() 就是和 map() 对比，添加扁平化的功能，放在一起记录，方便理解记忆

很明显就是用来做数组扁平化的，之前会用到递归来扁平化数组，这里用flat就可以了。

flat(扁平化层数) ，内部可以接收一个参数，表示扁平化的层数，如果不传就是扁平化1层

flatMap() 可以理解为 flat 和 map 的结合体

flat 对应的是扁平化功能

map 对应的是对数组每个元素的操作功能

这里看MDN上的例子很好理解

参考资料：

js 自己创建的数组 为什么没有get set?

没有说为什么没有，而是 Array 这一种 JavaScript 标准内置对象没有 get 和 set 方法。MDN JavaScript 标准内置对象 Array

你截图的 get set 方法也不是属于数组的，而是数组元素中的对象的。对于数组来说，添加 get set 方法没什么意义，因为对于数组元素的确定，是用下标的。如:

const a = [];

a[1] = 3;

console.log(a[1]);

要添加 get set 也很容易：

a = {

_value: 1,

get value() {

return this._value;

},

set value(value) {

this._value = value;

}

}

这样 a 对象就有 get set 了。注意 get set 方法对应的方法名，和你用这个方法名要存储的字段不能用相同，不然会内存溢出。(不要问我为什么特意提出来。)

Object.defineProperty不能监听数组长度变化，而Proxy可以监听？

MDN-Configurable 中提到：

当且仅当该属性的 configurable 为 true 时，该属性描述符才能够被改变，同时该属性也能从对应的对象上被删除。默认为 false。

首先对于数组，本身是因为不可监听length，造成了一系列push，pop等这种改变数组长度，无法监听到。

这里可以明确的看到length 属性的configurable是false，然后各大浏览器厂商包括JS本身，也不允许将length的configurable修改为true，修改后会抛出 VM305:1 Uncaught TypeError: Cannot redefine property: length 的错误，所以造成了pop,push这种会修改原数组长度的值都无法被监听到

而对于下面这种是可以的

因为这种是将一个新数组赋给obj.list, 而不是修改原数组

MDN-Proxy 中提到：

target

??代理虚拟化的对象。它通常用作代理的存储后端。根据目标验证关于 对象不可扩展性或不可配置 属性的不变量（保持不变的语义）。

Array.length 就是不可配置的属性，故Proxy可以监听原数组中长度的变化。

通过reactive函数, 将[1,2,3]包装成响应式对象，即Proxy对象，所以你可以通过push，pop等改变原数组长度的方法去实现监听