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

算法寻星家
• 阅读 2237

Array.of方法

由于Array构造函数创建数组时的怪异行为,比方说如下:

let items = new Array(2)
console.log(items.length)//2
items = new Array("2")
console.log(items.length)//1

Array.of方法总会创建一个包含所有参数的数组

let items = Array.of(1, 2)
console.log(items.length)//2
console.log(items[0])//1

Array.of方法不通过Symbol.species属性确定返回值的类型,它使用当前构造函数,也就是of方法中的this值来确定正确的返回数据的类型

Array.from方法

以前总是使用Array.prototype.slice.call(arrayLike)将类数组转换成数组
Array.from方法可接受可迭代对象或类数组对象,最终返回一个数组
Array.from也是通过this来确定返回数组的类型
Array.from接受第二个参数,表示映射函数,第三个参数表示映射函数中的this的值
来看几个例子:

function translate() {
    return Array.from(arguments, (value) => value + 1)
}
let numbers = translate(1, 2, 3)
console.log(numbers) //2、3、4
let helper={
    diff:1,
    add(value){
        return value+this.diff
    }
}
function translate(){
    return Array.from(arguments,helper.add,helper)
}
let numbers = translate(1, 2, 3)
console.log(numbers) //2、3、4

看看用Array.from转换可迭代对象

let numbers = {
    *[Symbol.iterator]() {
        yield 1;
        yield 2;
        yield 3;
    }
}
let numbers2 = Array.from(numbers, value => value + 1)
console.log(numbers2) //2、3、4

find方法和findIndex方法

find方法和findIndex方法都接受两个参数,一个是回调函数,另外一个是可靠参数用于指定回调函数中this的值


let numbers = [25, 30, 35, 40, 45]
console.log(numbers.find(n => n > 35))//40
console.log(numbers.findIndex(n => n > 35))//3

如果要在数组中根据某个条件查找匹配的元素,那么find方法和findIndex方法可以很好的完成任务,但是如果只想查找与某个值匹配的元素,则indexOf和lastIndexOf应该是更好的选择

fill方法

fill方法可以用指定的值填充一至多个数组元素,当传入一个值时,fill方法会用这个值重写数组中的所有值
fill方法的第二个参数表示开始索引,第三个参数作为不包含结束索引,如果没有传第三个参数则默认使用numbers.length作为不包含结束索引
如果开始索引和结束索引为负值,那么这些值会与数组的length属性相加为作为最终位置

copyWithin方法

调用copyWithin方法时需要传入两个参数,一个是方法开始填充值的索引位置,另一个是开始复制值的索引位置,第三个参数为可选参数,用来限制被重写元素的数量,也就是指定停止复制值的位置

let numbers = [1, 2, 3, 4]
numbers.copyWithin(2, 0, 1)
console.log(numbers)//1,2,1,4

跟fill方法一样,copyWithin方法的所有参数都接受负数值,并且会自动与数组长度相加来作为最终使用的索引

定型数组

JS中数字是以64位浮点格式存储并按需转换成32位整数
数组缓冲区是所有定型数组的根基,数组缓冲区包含的实际字节数量在创建时就已确定,可以修改缓冲区内的数据,但是不能修改缓冲区的尺寸大小

let buffer = new ArrayBuffer(10)
let buffer2 = buffer.slice(4, 6)
console.log(buffer2.byteLength)//2

数组缓冲区是内存中的一段地址,视图是用来操作内存的接口,视图可以操作数组缓冲区或缓冲区字节的子集,并按照其中一种数值型数据类型来读取和写入数据

let buffer = new ArrayBuffer(10),
    view1 = new DataView(buffer),
    view2 = new DataView(buffer, 5, 2);
console.log(view1.buffer === buffer)//true
console.log(view2.byteOffset)//5
console.log(view2.byteLength)//2

事实上你可以写入两个int8类型的值,然后使用int16类型的方法从缓冲区中读出这些值

let buffer = new ArrayBuffer(10),
    view = new DataView(buffer);
view.setInt8(0, 5)
view.setInt8(1, -1)
console.log(view.getInt8(0))//5

定型数组实际上就是用于数组缓冲区的特定类型的视图,你可以强制使用特定的数据类型,而不是通过使用通用的DataView对象来操作数组缓冲区
创建定型数组的方式

1、 通过数组缓冲区来生成定型数组的实例

let buffer = new ArrayBuffer(10),
    view = new Int8Array(buffer);
console.log(view.byteLength)

2、通过构造函数中传入一个数字,这个数字表示分配给数组的元素数量

let ints = new Int32Array(10);
console.log(ints.byteLength)//20
console.log(ints.length)//10

调用定型数组的构造函数时如果不传参数,会按照传入0来处理,这样由于缓冲区没有分配到任何比特,因为创建的定型数组不能用来保存数据

  1. 可以将定型数组、可迭代对象、数组、类数组对象作为构造函数的参数传入
let ints1 = new Int16Array([25, 50]),
    ints2 = new Int32Array(ints1);
console.log(ints1.buffer === ints2.buffer)//false
console.log(ints1.length)//2
console.log(ints2.byteLength)//8
console.log(ints2.length)//2
console.log(ints2[0])//25
console.log(ints2[1])//50

每个定型数组中元素大小指的是每个元素表示的字节数,该值存储在每个构造函数和每个实例中BYTES_PER_ELEMENT属性中

console.log(Uint32Array.BYTES_PER_ELEMENT)

定型数组和普通数组的异同点

相同点:
1、可以修改length属性来改变普通数组的大小,而定型数组的length属性是一个不可写属性,所以不能修改定型数组的大小,如果尝试修改这个值,在非严格模式下会直接忽略该操作,在严格模式下会抛出错误
2、定型数组也包括许多在功能上与普通数组方法等效的方法,但是定型数组中的方法会额外的检查数值类型是否安全
比方说:copyWithin、findIndex、lastIndexOf、slice、entries、forEach、map、some、fill、indexOf、reduce、sort、filter、join、reduceRight、values、find、keys、reverse
3、相同的迭代器(也就是keys、values、entries),这意味着可以把定型数组当作普通数组一样来使用展开运算符、for of 循环

let ints = new Int16Array([25, 50]),
    intsArray = [...ints];
console.log(intsArray instanceof Array)//true
console.log(intsArray[0])//25

4、所有定型数组都包含有静态of方法和from方法(也就是Array.of和Array.from)
差异点:
1、定型数组不是普通数组,它不继承自Array,通过Array.isArray方法检测定型数组返回的是false


let ints = new Int16Array([25, 50])
console.log(ints instanceof Array)//false
console.log(Array.isArray(ints))//false

2、当操作普通数组时,其可以变大变小,但定型数组却始终保持相同的尺寸。给定型数组中不存在的数值索引赋值会被忽略,而在普通数组中就可以

let ints = new Int16Array([25, 50]);
console.log(ints.length);//2
console.log(ints[0])//25
console.log(ints[1])//50
ints[2]=5;
console.log(ints.length)//2
console.log(ints[2])//undefined

定型数组同样会检查数据类型的合法性,0被用于代替所有非法值;所有修改定型数组值的就去执行时都会受到相同限制

let ints = new Int16Array(['hi'])
console.log(ints.length)//1
console.log(ints[0])//0

3、以下方法在定型数组中不可使用,concat、shift、pop、splice、push、unshift
因为上述列表中除concat外,所有方法都可以改变数组的尺寸,由于定型数组的尺寸不可更改,因而这些方法不适用于定型数组,之所以concat不行是因为两个定型数组合并后的结果会变得不确定
4、定型数组新的附加方法set和subarray
set方法将其它数组复制到已有的定型数组
subarray提取已有定型数组的一部分作为一个新的定型数组

set方法接受两个参数:一个是数组(定型数组或普通数组都支持),一个是可选的偏移量,表示开始插入数据的位置,如果什么都不传,默认的偏移量是0

let ints = new Int16Array(4);
ints.set([25, 50])
ints.set([75, 100], 2)
console.log(ints)//[25, 50, 75, 100]

subarray方法接受两个参数:一个是可选的开始位置,一个是可选的结束位置(不包含当前结束位置的值 ),最后返回一个新的定型数组,也可以省略这两个参数来克隆一个新的定型数组

let ints = new Int16Array([25, 50, 75, 100]),
    subInts = ints.subarray(1, 3);
console.log(subInts)//[50, 75]
点赞
收藏
评论区
推荐文章
blmius blmius
4年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
Wesley13 Wesley13
4年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
1年前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Karen110 Karen110
4年前
一篇文章带你了解JavaScript日期
日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:ThuFeb02201909:59:51GMT0800(中国标准时间)或者是一个数字:1486000791164写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。1\.显示日期使用
Jacquelyn38 Jacquelyn38
4年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Wesley13 Wesley13
4年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Stella981 Stella981
4年前
JS 对象数组Array 根据对象object key的值排序sort,很风骚哦
有个js对象数组varary\{id:1,name:"b"},{id:2,name:"b"}\需求是根据name或者id的值来排序,这里有个风骚的函数函数定义:function keysrt(key,desc) {  return function(a,b){    return desc ? ~~(ak
Wesley13 Wesley13
4年前
PHP创建多级树型结构
<!lang:php<?php$areaarray(array('id'1,'pid'0,'name''中国'),array('id'5,'pid'0,'name''美国'),array('id'2,'pid'1,'name''吉林'),array('id'4,'pid'2,'n
Python进阶者 Python进阶者
2年前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这