新增的动态函数
Array.of
函数类型:
//接管任意数量、任意类型的参数,返回这些参数依照传入程序组成的数组(...args?:any[])=>any[];
Array.of
用于创立一个具备可变数量参数的新的数组实例。它和通过Array
构造函数创立数组的不同之处在于,当应用new Array
的形式创立数组时,如果只传入了一个整数参数a
,则会创立一个长度为a
的数组,每个元素都是空位(指empty
,而不是undefined
),而Array.of
则会创立返回[ a ]
。console.log(Array(3)); //[ <3 empty items> ]console.log(Array.of(3)); // [ 3 ]
当咱们须要依据传入的参数来创立数组时,如果应用的
Array
构造函数,而且没有非凡解决参数只有一个整数的状况,就会呈现意料之外的状况。这种并非逻辑上的、细节性的问题,在修复时,往往咱们也是最难以意识到的一类问题。Array.from
函数类型:
/** * @author: forceddd * @desc: 依据传入的一个伪数组或可迭代对象创立一个新的、浅拷贝的数组实例 * @param {ArrayLike<any>|Iterable<any>} arrayLike 传入的数据源 * @param {MapFn} mapFn 可选的映射函数,与Array.map用处雷同 * @param {any} thisArg 可选的this对象,映射函数mapFn中的this会指向该参数 * @return {any[]} 新创建的数组 */(arrayLike: ArrayLike<any> | Iterable<any>, mapFn?: MapFn, thisArg?: any) => any[];/** * @author: forceddd * @desc: 映射回调 * @param {any} value 数组中的元素 * @param {number} index 元素的在数组中的下标 * @return {any} 映射返回的值 */type MapFn = (value: any, index: number) => any;
Array.from
是依据传入的一个伪数组或可迭代对象创立一个新的、浅拷贝的数组实例。与
Array.of
不同,Array.of
是间接将参数作为返回值数组中的元素,而Array.from
会依据传入的参数来产生返回值数组:当传入伪数组时,伪数组的
length
会作为返回值数组的length
,伪数组的元素会作为返回值数组的元素。//传入了一个伪数组console.log(Array.from({ 0: '第一项元素', length: 2 }));//[ '第一项元素', undefined ]// tag属性不能转换成数组下标,被过滤掉了console.log(Array.from({ 0: '第一项元素', length: 2, tag: '一个字符串key' }));//[ '第一项元素', undefined ]//传入的是一个一般对象,既不是伪数组,也不是一个iterable对象,返回一个空数组console.log(Array.from({ 0: '第一项元素', tag: '一个字符串key' }));//[]
当传入一个
iterable
对象参数时,比方Array
,Set
等,会对参数进行迭代,并将迭代失去的值作为返回值数组中的元素。console.log(Array.from([1, , 3])); //[ 1, undefined, 3 ]console.log(Array.from(new Set([1, , 3]))); //[ 1, undefined, 3 ]//传入了一个映射函数console.log(Array.from([1, 2, 3], (item) => 2 * item)); //[ 2, 4, 6 ]const obj = { value: 0, //自定义 [Symbol.iterator] ,是该对象成为iterable对象,执行失去的迭代器是它本身 [Symbol.iterator]() { return this; }, //value > 3 后,设置迭代状态为true,完结迭代 next() { this.value++; return { value: this.value, done: this.value > 3, }; },};//传入一个自定义的iterableconsole.log(Array.from(obj));//[ 1, 2, 3 ]
须要留神的是,
Array.from
不会产生空位(empty
),如果传入的参数中,该地位的元素是空位(empty
),会应用undefined
作为后果。当咱们须要将一个伪数组转为真正的数组,以便应用数组的
map
等办法时——比方进行dom操作,相较于应用[].slice.call(arrayLike)
来说(这种办法有可能产生空位(empty
)元素),应用Array.from
无疑是一个更优雅也更简洁的形式。为什么要防止数组中的空位元素?
在解决数组的函数中,不同的函数看待空位元素的形式是不同的,有些函数会疏忽空位元素,比方
map
函数,而有些则不会疏忽,比方Array.from
,这就很有可能会产生一些莫名其妙的问题。如果咱们须要通过变量
count
统计一个数组的length
,这能够让咱们很显著的看到空位元素的问题所在。当存在空位元素时:
const empty = [1, , 3];let count1 = 0;let count2 = 0;empty.map(() => count1++);Array.from(empty, () => count2++);//因为map函数疏忽了空位元素,所以传入的回调只执行了两次,count1的值为2console.log({ count1, count2 }); //{ count1: 2, count2: 3 }
当不存在空位元素时:
const normal = [1, undefined, 3];let count1 = 0;let count2 = 0;normal.map(() => count1++);normal.forEach(() => count2++);console.log({ count1, count2 }); //{ count1: 3, count2: 3 }