创建数组
在ES5中创建数组的两种方法分别是数组字面量语法和Array构造函数
Array.of()
如果使用Array构造函数创建数组,会因为传入的值类型不同而产生不一样的数组,但是如果使用Array.of()方法创建数组,只会根据传入的值创建包含不同长度不同值的数组。
console.log(new Array(2))
console.log(Array.of(2))
console.log("-----------")
console.log(new Array("2"))
console.log(Array.of("2"))
console.log("-----------")
console.log(new Array(2,3))
console.log(Array.of(2, 3))
console.log("-----------")
console.log(new Array(2,"3"))
console.log(Array.of(2, "3"))
Array.from()
将对象转化成数组,接受可迭代对象或类数组对象(具有数值型索引和length属性的对象,例如arguments对象和document.getElementsByTagName()返回的对象是类数组对象)作为第一个参数,最后返回一个数组。
转换可迭代对象
let collection = {
items: [11,22,33],
*[Symbol.iterator]() {
for (let item of this.items){
yield item
}
}
}
let collection2=Array.from(collection,(value)=>value+1)
console.log(collection)
console.log(collection2)
转换类数组对象
将映射函数作为第二个参数传入Array.from()方法,它可以将类数组对象中的每一个值转换成其他形式。如果用映射函数处理对象,可以传入第三个参数表示银蛇函数的this值,从而无需调用bind指定this的值。
let helper={
add(value){
return value+1;
}
}
function trans(){
return Array.from(arguments,helper.add,helper)
}
let number=trans(2,4,5);
console.log(number) //[3,5,6]
ES6新增的数组方法
find()和findIndex()
find()和findIndex()的作用是在数组中查找任意的值,它们都接受两个参数:回调函数和可选参数(指定回调函数中this的值)。一旦回调函数返回true,find()和findIndex()则会立刻停止搜索数组中剩下的部分。
两者的区别是find()返回查找到的值,findIndex()返回查找到的值的索引。
fill()
用指定的值填充一至多个数组元素
let numbers=[2,5,7,88,52];
numbers.fill(44) //所有值变成44
console.log(numbers) //[44,44,44,44,44]
numbers.fill(44,2) //开始索引
console.log(numbers) //[2, 5, 44, 44, 44]
numbers.fill(44,2,4) //不包含结束索引
console.log(numbers) //[2,5,44,44,52]
索引值为负数会以length属性值+索引值为最终值
copyWithin()
从数组中复制元素的值
第一个参数:开始填充值的索引
第二个参数:开始复制值的索引
第三个参数:不包含结束索引
let numbers = [2, 5, 7, 88, 52];
numbers.copyWithin(1,3)
console.log(numbers) //[2, 88, 52, 88, 52]
定型数组
fill()方法和copyWithin()方法起源于定型数组
定型数组是用于处理数值类型(不是所有类型)数据的专用数组,想要使用定型数组,必须得用数据缓冲区存储数据。严格讲定型数组不是数组,因为他不继承自Array。
数据缓冲区
数据缓冲区是所有定型数组的根基,可以用ArrayBuffer构造函数创建数据缓冲区,可以通过byteLength属性查看缓冲区的字节数量。
let a=new ArrayBuffer(64);
console.log(a)
console.log(a.byteLength)
通过视图操作数据缓冲区
数据缓冲区是内存中的一段地址,视图是用来操作内存的接口。视图可以操作数组缓冲区字节的子集,并按照其中一种数值型数据类型读取和写入数据。
DataView是一种通用的数组缓冲区视图,使用DataView前必须创建ArrayBuffer的实例。
let a = new ArrayBuffer(64);
let b=new DataView(a);
console.log(b)
选取部分缓冲区的创建视图
let a = new ArrayBuffer(64);
let b=new DataView(a,5,2);
console.log(b)
获取视图信息
buffer:视图绑定的数组缓冲区
byteOffset:DataView构造函数的第二个参数,默认是0
byteLength:DataView构造函数的第三个参数,默认是缓冲区的长度byteLength
读取和写入数据
方法名以set和get打头,以int8为例:
- getInt8(byteOffset,littleEndian) 读取位于byteOffset的int8数据。littleEndian为布尔值,表示是否按照小端序进行读取。
- setInt8(byteOffset,value,littleEndian) 写入位于byteOffset的int8数据。ittleEndian为布尔值,表示是否按照小端序进行写入。
let a = new ArrayBuffer(2);
let b = new DataView(a);
b.setInt8(0,5)
b.setInt8(1,-1)
console.log(b.getInt8(0)) //5
console.log(b.getInt8(1)) //-1
console.log(b.getInt16(0)) //1535 视图是独立的
定型数组是视图
定型数组实际上是用于数组缓冲区的特定类型的视图,可以通过强制使用特定的数据类型,而不是使用DataView对象操作数组缓冲区。
创建特定类型的视图
第一种:传入和DataView构造函数可接受的参数
let buffer=new ArrayBuffer(10);
let view1=new Int16Array(buffer);
let view2=new Int16Array(buffer,4,2);
console.log(view1);
console.log(view2);
第二种:调用构造函数时传入数字(表示分配给数组的元素数量,不是字节数量)
let view1=new Int16Array(5),
view2=new Int16Array(2);
console.log(view1)
console.log(view2)
第三种:将定型数组、迭代对象、数组、类数组对象作为唯一的参数传入构造函数
let view1=new Int16Array([25,50]),
view2=new Int32Array(view1);
console.log(view1)
console.log(view2)
定型数组和普通数组的相似和差别
相似 | 差别 |
---|---|
可用length属性和数值索引 | 定型数组不是普通数组,不继承自Array |
具有通用方法 | 定型数组的长度不可改变,若添加字符串会被转换成0 |
相同的迭代器 | 缺失部分方法 |
of()方法和from()方法相似 | 添加了部分方法 |