当前位置: 首页 > Web前端 > HTML5

深入理解ES6的《改进的数组功能》

时间:2023-04-05 13:44:18 HTML5

Array.of方法是由于Array构造函数在创建数组时的怪异行为,例如如下:letitems=newArray(2)console.log(items.length)//2items=newArray("2")console.log(items.length)//1Array.of方法总是会创建一个包含所有参数的数组letitems=Array.of(1,2)console.log(items.length)//2console.log(items[0])//1Array.of方法并没有通过Symbol.species属性来判断返回值的类型。它使用当前构造函数,即of方法中的this值来确定正确的返回数据类型。Array.from方法之前总是使用Array.prototype。.slice.call(arrayLike)将类数组转换为数组Array.from方法可以接受可迭代对象或类数组对象,最后返回一个数组Array.from也以此来判断返回数组的类型Array.from接受第二个参数表示映射函数,第三个参数表示映射函数中this的值。让我们看几个例子:functiontranslate(){returnArray.from(arguments,(value)=>value+1)}letnumbers=translate(1,2,3)console.log(numbers)//2,3、4lethelper={diff:1,add(value){returnvalue+this.diff}}functiontranslate(){returnArray.from(arguments,helper.add,helper)}letnumbers=translate(1,2)复制代码,3)console.log(numbers)//2,3,4看使用Array.from转换可迭代对象letnumbers={*[Symbol.iterator](){yield1;产量2;产量3;}}让numbers2=Array.from(numbers,value=>value+1)console.log(numbers2)//2,3,4find方法和findIndex方法find方法和findIndex方法都接受两个参数,一个是回调函数,和另一个是可靠的参数,用于在回调函数中指定this的值letnumbers=[25,30,35,40,45]console.log(numbers.find(n=>n>35))//40console.log(numbers.findIndex(n=>n>35))//3如果想在数组中根据一定的条件查找匹配的元素,那么find方法和findIndex方法可以很好的完成任务,但是如果只想查找与某个值匹配的元素,那么indexOf和lastIndexOf应该是更好的选择用这个值重写数组中的所有值fill方法的第二个参数表示起始索引,第三个参数为排除结束索引。如果不传第三个参数,默认使用numbers.length作为排除结束索引。如果开始索引和结束索引都是负值,那么这些值将被添加到数组的长度属性中作为最终位置。copyWithin方法在调用copyWithin方法时需要传入两个参数,一个是方法开始填充值的索引位置,一个是开始复制值的索引位置,第三个参数是可选的参数用于限制要覆盖的元素个数,即指定在何处停止复制值letnumbers=[1,2,3,4]numbers.copyWithin(2,0,1)console.log(numbers)//1,2,1,4和fill方法一样,copyWithin方法的所有参数都接受负值,会自动添加到数组的长度中作为最终的索引使用格式存储和转换按需转换为32位整数数组缓冲区是所有原型数组的基础。数组缓冲区中包含的实际字节数是在创建时确定的。缓冲区中的数据可以修改,但缓冲区不能修改。大小letbuffer=newArrayBuffer(10)letbuffer2=buffer.slice(4,6)console.log(buffer2.byteLength)//2arraybuffer是内存中的一个地址,view是用来操作内存的接口,view可以操作arraybuffer或者buffer字节的子集,并按照数字数据类型中的一种来读写数据letbuffer=newArrayBuffer(10),view1=newDataView(buffer),view2=newDataView(buffer,5,2);console.log(view1.buffer===buffer)//trueconsole.log(view2.byteOffset)//5console.log(view2.byteLength)//2其实可以写两个int8类型的值,然后使用int16类型方法从buffer中读取这些值letbuffer=newArrayBuffer(10),view=newDataView(buffer);view.setInt8(0,5)view.setInt8(1,-1)console.log(view.getInt8(0))//5构造型数组实际上是数组缓冲区的一种特定类型的视图。您可以强制使用特定数据类型而不是使用通用DataView对象来操作数组缓冲区。创建构造型数组的方法1.通过数组Buffer生成构造型数组的实例letbuffer=newArrayBuffer(10),view=newInt8Array(buffer);console.log(view.byteLength)2.通过构造函数传入一个数字,这个数字代表分配给数组的元素个数letints=newInt32Array(10);console.log(ints.byteLength)//20console.log(ints.length)//10如果调用构造型数组的构造函数时不传参,会传入0这样,由于buffer不是分配了任何位,创建的构造型数组不能用于存储数据。您可以将构造型数组、可迭代对象、数组和类数组对象作为构造函数参数传递。让ints1=newInt16Array([25,50]),ints2=newInt32Array(ints1);console.log(ints1.buffer===ints2.buffer)//falseconsole.log(ints1.length)//2console.log(ints2.byteLength)//8console.log(ints2.length)//2console.log(ints2[0])//25console.log(ints2[1])//50每个构造型数组中的元素大小是指每个元素所代表的字节数,存储在每个结构函数中和console.log(Uint32Array.BYTES_PER_ELEMENT)在每个实例的BYTES_PER_ELEMENT属性中,常规数组和普通数组的相同点和不同点:1.可以修改length属性来改变普通数组的大小,但是原型数组的length属性是一个不可用的Write属性,所以原型数组的大小是不可修改的。如果你试图修改这个值,在非严格模式下该操作将被忽略,而在严格模式下会抛出错误。2.原型数组还包括许多功能上不同于普通数组的方法。等效方法,但是构造型数组中的方法会额外检查数字类型是否安全。例如:copyWithin,findIndex,lastIndexOf,slice,entries,forEach,map,some,fill,indexOf,reduce,sort,filter,join,reduceRight,values,find,keys,reverse3,相同的迭代器(即keys,values,entries),这意味着固定数组可以作为普通数组来使用展开运算符,forofloopletints=newInt16Array([25,50]),intsArray=[...ints];console.log(intsArrayinstanceofArray)//trueconsole.log(intsArray[0])//254、所有构造型数组都包含staticof方法和from方法(即Array.of和Array.from)的区别:1、千篇一律的数组不是普通的数组。它不继承自Array。Array.isArray方法检测构造型数组返回falseletints=newInt16Array([25,50])console.log(intsinstanceofArray)//falseconsole.log(Array.isArray(ints))//false2.操作普通数组时,它可以变大或变小,但最终数组始终保持相同大小。给定数组中不存在的数值索引赋值将被忽略,但在普通数组中让ints=newInt16Array([25,50]);console.log(ints.length);//2console.log(ints[0])//25console.log(ints[1])//50ints[2]=5;console.log(ints.length)//2console.log(ints[2])//未定义的构造型数组也会检查数据类型的合法性,0用于替换所有非法值;所有对构造型数组值的修改在执行时都会受到相同的限制letints=newInt16Array(['hi'])console.log(ints.length)//1console.log(ints[0])//03.构造型数组中不能使用以下方法,concat、shift、pop、splice、push、unshift,因为上面列表中除了concat之外的所有方法都可以改变数组的大小,因为构造型数组的大小是不能改变的,这些方法不适合构造型数组,concat之所以不起作用是因为合并两个构造型数组的结果会变得不确定4、构造型数组新增的方法set和subarrayset方法将其他数组复制到已有的构造型数组子数组中提取已有的原型数组的一部分作为新的原型数组set方法接受两个参数:一个是数组(原型数组和普通数组都支持),另一个是可选的偏置Offset,表示开始插入数据的位置,如果什么都不传,默认偏移量是0letints=newInt16Array(4);ints.set([25,50])ints.set([75,100],2)console.log(ints)//[25,50,75,100]subarray方法接受两个参数:一个是可选的开始位置,一个是可选的结束位置(不包括当前结束位置的值),最后返回一个新的构造型数组,可以也省略这两个参数来克隆一个新的构造型数组letints=newInt16Array([25,50,75,100]),subInts=ints.subarray(1,3);console.log(subInts)//[50,75]