JavaScript 数组一些鲜为人知的tips

121 阅读4分钟

Array.prototype

属性表示Array构造函数的原型,并允许向所有Array对象添加新的属性和方法

Array实例继承自Array.prototype

Array.prototype本身也是一个Array

Array.isArray(Array.prototype); 
// true

所有的数组实力都继承了Array.prototype.constructor这个属性,他的值就是Array,表明了所有的数组都是有Array构造出来的

因为Array.prototype也是个数组,所以他也有length,这个值为0,因为他是一个空数组

Array.prototype.length === 0

indexOf(与其对应的是lastIndexOf)

获取元素下标

两个参数:要查找的参数、开始查找的位置

这两个方法配合可以实现查找数组中不重复的元素

function IT(arr) {
    for (let i = 0; i < arr.length; i++) {
            if (arr.indexOf(arr[i]) === arr.lastIndexOf(arr[i])) {
            console.log(arr[i])
        }
    }
}

Array.form()

从一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例。

三个参数:想要转换成数组的伪数组对象或可迭代对象(拥有一个 length 属性和若干索引属性的任意对象)、新数组中的每个元素会执行该回调函数(如 Map和 Set ,可选)、执行回调函数时的 this 对象

Array.from('foo');
// ["f", "o", "o"]
let s = new Set(['foo', window]);
Array.from(s);
// ["foo", window]

通过Array.from()和set结合,可以实现数组去重

Array.from(new Set([1,2,3,4,4,5,5,4,3,2,2]))
[...new Set([1,2,3,4,4,5,5,4,3,2,2])]
// [1, 2, 3, 4, 5]

还有我们常用的arguments转数组

Array.from(arguments)

也可以实现数组值得遍历,或者生成一个连续的数组

Array.from([1, 2, 3], x => x + x)
// [2, 4, 6]
Array.from({length: 5}, (v, i) => i)
// [0, 1, 2, 3, 4]
// 这里用了一个{ length: 5 }迭代对象,length指定了迭代次数
// (v, i),由于迭代的时候数组在每一个位置上都是以undefined初始化的,所以v一直都是undefined。

Array.fill()

用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

三个参数: 用来填充数组元素的值、起始索引,默认值为0、终止索引,默认值为 this.length。

我们知道如何生成连续数组,那如何生成同一值数组

new Array(11).fill(1)
// [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]

Array.of也是生成数组的,他和Array有什么区别: Array.of(2)生成只有一个2元素的数组,Array(2)生成有两个长度的空数组

 Array.of(2)       // [2]
 Array.of(1, 2, 3) // [1, 2, 3]
 
 Array(2)          // [ , ]
 Array(1, 2, 3)    // [1, 2, 3]

Array.flat()

按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

一个参数:指定要提取嵌套数组的结构深度,默认值为 1。

var arr1 = ['a', 'b', ['c', 'd']];
arr1.flat();
// ['a', 'b', 'c', 'd']
 
var arr2 = ['a', 'b', ['c', 'd', ['e', 'f']]];
arr2.flat();
// ['a', 'b', 'c', 'd', ['e', 'f']]
 
var arr3 = ['a', 'b', ['c', 'd', ['e', 'f']]];
arr3.flat(2);
// ['a', 'b', 'c', 'd', 'e', 'f']
 
//使用 Infinity 作为深度,展开任意深度的嵌套数组
arr3.flat(Infinity);
// ['a', 'b', 'c', 'd', 'e', 'f']

还有还是什么办法??存在什么问题?

arr3.join().split(',')
arr3.toString().split(',')
(arr3+'').split(',')
// 转成字符串,切割成数组,数组元素就都变成字符串类型的了

下面是一些会改变数组本身的一些方法

Array.prototype.copyWithin() 
// 在数组内部,将一段元素序列拷贝到另一段元素序列上,覆盖原有的值。
Array.prototype.fill() 
// 将数组中指定区间的所有元素的值,都替换成某个固定的值。
Array.prototype.reverse()
// 颠倒数组中元素的排列顺序,即原先的第一个变为最后一个,原先的最后一个变为第一个。
Array.prototype.sort()
// 对数组元素进行排序,并返回当前数组。
Array.prototype.splice()
// 在任意的位置给数组添加或删除任意个元素。

注意下面四个的返回值

Array.prototype.pop()
// 删除数组的最后一个元素,并返回这个元素。
Array.prototype.push()
// 在数组的末尾增加一个或多个元素,并返回数组的新长度。
Array.prototype.shift()
// 删除数组的第一个元素,并返回这个元素。
Array.prototype.unshift()
// 在数组的开头增加一个或多个元素,并返回数组的新长度。

内容来源 MDN web docs