數(shù)組
es6加入了一些數(shù)組的新功能春贸,以及改進(jìn)了舊功能
保證永遠(yuǎn)傳的是數(shù)組的元素
let items = Array.of(20);
console.log(items.length) //1
console.log(items[0]) //20
itmes = Array.of(2);
console.log(itmes.length);//1
console.log(itmes[0]); //2
itmes = Array.of('2');
console.log(itmes.length); //1
console.log(itmes[0]); //'2'
將類對(duì)象轉(zhuǎn)換成數(shù)組的方式
function translate(){
return Array.from(arguments)
}
let number = translate(1,3,4,5);
console.log(number); //[ 1, 3, 4, 5 ]
映射轉(zhuǎn)換(第二個(gè)參數(shù)的轉(zhuǎn)換)
function translate(){
return Array.from(arguments,(value) => value+1)
}
let number = translate(1,3,4,5);
console.log(number); //[ 2, 4, 5, 6 ]
第三個(gè)值是this
let helper = {
diff:1,
add(value){
return value+this.diff;
}
}
function translate(){
return Array.from(arguments,helper.add,helper)
}
let number = translate(1,3,4,5);
console.log(number); // [ 2, 4, 5, 6 ]
Array.from可以用來轉(zhuǎn)換可迭代對(duì)象
let number = {
*[Symbol.iterator](){
yield 1;
yield 2;
yield 3;
yield 4;
}
}
let number2 = Array.from(number,(value) => value+1);
console.log(number2); //[ 2, 3, 4, 5 ]
新增方法find()方法和findIndex()方法
兩個(gè)方法的一個(gè)函數(shù)接受一個(gè)回調(diào)函數(shù),以及一個(gè)this作為參數(shù)
find返回的是return為true的值
let numbers = [1,34,4,44,33,56];
console.log(numbers.find((item,index,arr) => {
if(item>33){
console.log(item,index,arr); //34 1 [ 1, 34, 4, 44, 33, 56 ]
return item
}
})) //34
findIndex()返回的是滿足true的值的位置(第一個(gè))
let numbers = [1,34,4,44,33,56];
console.log(numbers.findIndex((item,index,arr) => {
if(item>33){
console.log(item,index,arr); //34 1 [ 1, 34, 4, 44, 33, 56 ]
return item
}
})) //1
fill() 方法用一個(gè)固定值填充一個(gè)數(shù)組中從起始索引到終止索引內(nèi)的全部元素
接受三個(gè)參數(shù)一個(gè)是要填充的值届搁,一個(gè)是填充的起始位置蝇率,一個(gè)是結(jié)結(jié)束位置
let numbers = [1,34,4,44,33,56];
console.log(numbers.fill(1)) //[ 1, 1, 1, 1, 1, 1 ]
console.log(numbers) //[ 1, 1, 1, 1, 1, 1 ] //改變?cè)瓟?shù)組
let nums = [2,3,4,5,2,4,3]
console.log(nums.fill(1,2)) //[ 2, 3, 1, 1, 1, 1, 1 ]
console.log(nums.fill(6,2,5)); //[ 2, 3, 6, 6, 6, 1, 1 ] //作閉右開
copyWith方法淺復(fù)制數(shù)組的一部分到同一數(shù)組中的另一個(gè)位置著蛙,并返回它泌枪,而不修改其大小
該方法接受3個(gè)值,一個(gè)是開始填充的位置螺戳,一個(gè)是開始復(fù)制的位置位置,改變?cè)瓟?shù)組,一個(gè)是復(fù)制結(jié)束的位置
let numbers = [1,34,4,44,33,56];
console.log(numbers.copyWithin(2,3)); //[ 1, 34, 44, 33, 56, 56 ]
console.log(numbers.copyWithin(2,0,1)); //[ 1, 34, 1, 33, 56, 56 ]
定型數(shù)組
定型數(shù)組是一種用于處理數(shù)值類型(正如其名规揪,不是所有類型)數(shù)據(jù)的專用數(shù)組,最早是在WebGL中使用的温峭,WebGL是OpenGL ES 2.0的移植版,在Web 頁面中通過 <canvas> 元素來呈現(xiàn)它字支。定型數(shù)組也被一同移植而來凤藏,其可為JS提供快速的按位運(yùn)算
在JS中奸忽,數(shù)字是以64位浮點(diǎn)格式存儲(chǔ)的,并按需轉(zhuǎn)換為32位整數(shù)揖庄,所以算術(shù)運(yùn)算非常慢栗菜,無法滿足WebGL的需求。因此在ES6中引入定型數(shù)組來解決這個(gè)問題蹄梢,并提供更高性能的算術(shù)運(yùn)算疙筹。所謂定型數(shù)組,就是將任何數(shù)字轉(zhuǎn)換為一個(gè)包含數(shù)字比特的數(shù)組禁炒,隨后就可以通過我們熟悉的JS數(shù)組方法來進(jìn)一步處理
數(shù)組緩沖區(qū)
ArrayBuffer 對(duì)象用來表示通用的而咆、固定長(zhǎng)度的原始二進(jìn)制數(shù)據(jù)緩沖區(qū)。ArrayBuffer 不能直接操作幕袱,而是要通過類型數(shù)組對(duì)象或 DataView 對(duì)象來操作暴备,它們會(huì)將緩沖區(qū)中的數(shù)據(jù)表示為特定的格式,并通過這些格式來讀寫緩沖區(qū)的內(nèi)容们豌。
let buffer = new ArrayBuffer(10);
console.log(buffer.byteLength); //10
//也可以使用數(shù)組的方法(類似)
let buffer2 = buffer.slice(1,3);
console.log(buffer2.byteLength) //2
不能修改緩存區(qū)的大小涯捻,只能修改數(shù)據(jù)緩沖區(qū)內(nèi)的數(shù)據(jù)
通過視圖操作數(shù)組緩沖區(qū)
數(shù)組緩沖區(qū)是內(nèi)存中的一段地址,視圖是用來操作內(nèi)存的接口望迎。視圖可以操作數(shù)組緩沖區(qū)或緩沖區(qū)字節(jié)的子集障癌,并按照其中一種數(shù)值型數(shù)據(jù)類型來讀取和寫入數(shù)據(jù)。DataView類型是一種通用的數(shù)組緩沖區(qū)視圖辩尊,其支持所有8種數(shù)值型數(shù)據(jù)類型
- 有符號(hào)的8位整數(shù)(int8)
- 無符號(hào)的8位整數(shù)(uint8)
- 有符號(hào)的16位整數(shù)(int16)
- 無符號(hào)的16位整數(shù)(uint16)
- 有符號(hào)的32位整數(shù)(int32)
- 無符號(hào)的32位整數(shù)(uint32)
- 32位浮點(diǎn)數(shù)(float32)
- 64位浮點(diǎn)數(shù)(float64)
可以通過以下幾種只讀屬性來獲取視圖的信息
- buffer 視圖綁定的數(shù)組緩沖區(qū)
- byteOffset DataView構(gòu)造函數(shù)的第二個(gè)參數(shù)涛浙,默認(rèn)是0,只有傳入?yún)?shù)時(shí)才有值
- byteLength DataView構(gòu)造函數(shù)的第三個(gè)參數(shù)对省,默認(rèn)是緩沖區(qū)的長(zhǎng)度byteLength
let buffer = new ArrayBuffer(10),
//使用DataView創(chuàng)建視圖的實(shí)例
view1 = new DataView(buffer),
view2 = new DataView(buffer,5,2); // 第一個(gè)參數(shù)是創(chuàng)建的緩沖區(qū)蝗拿,第二個(gè)是操作緩沖區(qū)的起始位置,第三個(gè)參數(shù)是緩沖區(qū)的長(zhǎng)度
console.log(view1.buffer === buffer); //true
console.log(view2.buffer === buffer); //true
console.log(view1.byteOffset); //0
console.log(view2.byteOffset); //5
console.log(view1.byteLength); //10
console.log(view2.byteLength); //2
讀取和寫入數(shù)據(jù)
js的8中數(shù)值型數(shù)據(jù)類型蒿涎,在DataView的原型上都能找到
- 讀方法
DataView.prototype.getInt8()
從DataView起始位置以byte為計(jì)數(shù)的指定偏移量(byteOffset)處獲取一個(gè)8-bit數(shù)(一個(gè)字節(jié)).
DataView.prototype.getUint8()
從DataView起始位置以byte為計(jì)數(shù)的指定偏移量(byteOffset)處獲取一個(gè)8-bit數(shù)(無符號(hào)字節(jié)).
DataView.prototype.getInt16()
從DataView起始位置以byte為計(jì)數(shù)的指定偏移量(byteOffset)處獲取一個(gè)16-bit數(shù)(短整型).
DataView.prototype.getUint16()
從DataView起始位置以byte為計(jì)數(shù)的指定偏移量(byteOffset)處獲取一個(gè)16-bit數(shù)(無符號(hào)短整型).
DataView.prototype.getInt32()
從DataView起始位置以byte為計(jì)數(shù)的指定偏移量(byteOffset)處獲取一個(gè)32-bit數(shù)(長(zhǎng)整型).
DataView.prototype.getUint32()
從DataView起始位置以byte為計(jì)數(shù)的指定偏移量(byteOffset)處獲取一個(gè)32-bit數(shù)(無符號(hào)長(zhǎng)整型).
DataView.prototype.getFloat32()
從DataView起始位置以byte為計(jì)數(shù)的指定偏移量(byteOffset)處獲取一個(gè)32-bit數(shù)(浮點(diǎn)型).
DataView.prototype.getFloat64()
從DataView起始位置以byte為計(jì)數(shù)的指定偏移量(byteOffset)處獲取一個(gè)64-bit數(shù)(雙精度浮點(diǎn)型). - 寫方法
DataView.prototype.setInt8()
從DataView起始位置以byte為計(jì)數(shù)的指定偏移量(byteOffset)處儲(chǔ)存一個(gè)8-bit數(shù)(一個(gè)字節(jié)).
DataView.prototype.setUint8()
從DataView起始位置以byte為計(jì)數(shù)的指定偏移量(byteOffset)處儲(chǔ)存一個(gè)8-bit數(shù)(無符號(hào)字節(jié)).
DataView.prototype.setInt16()
從DataView起始位置以byte為計(jì)數(shù)的指定偏移量(byteOffset)處儲(chǔ)存一個(gè)16-bit數(shù)(短整型).
DataView.prototype.setUint16()
從DataView起始位置以byte為計(jì)數(shù)的指定偏移量(byteOffset)處儲(chǔ)存一個(gè)16-bit數(shù)(無符號(hào)短整型).
DataView.prototype.setInt32()
從DataView起始位置以byte為計(jì)數(shù)的指定偏移量(byteOffset)處儲(chǔ)存一個(gè)32-bit數(shù)(長(zhǎng)整型).
DataView.prototype.setUint32()
從DataView起始位置以byte為計(jì)數(shù)的指定偏移量(byteOffset)處儲(chǔ)存一個(gè)32-bit數(shù)(無符號(hào)長(zhǎng)整型).
DataView.prototype.setFloat32()
從DataView起始位置以byte為計(jì)數(shù)的指定偏移量(byteOffset)處儲(chǔ)存一個(gè)32-bit數(shù)(浮點(diǎn)型).
DataView.prototype.setFloat64()
從DataView起始位置以byte為計(jì)數(shù)的指定偏移量(byteOffset)處儲(chǔ)存一個(gè)64-bit數(shù)(雙精度浮點(diǎn)型). - 用法
let buffer = new ArrayBuffer(10),
//使用DataView創(chuàng)建視圖的實(shí)例
view = new DataView(buffer);
view.setInt8(0,5);
view.setInt8(1,-1);
console.log(view.getInt8(0)); //5
console.log(view.getInt8(1)); //-1
//也可以用getInt16的字節(jié)調(diào)用哀托,這樣使用的話,兩個(gè)8比特的字符就會(huì)合并成一個(gè)16bit字符,于是得到的值就是這個(gè)了
console.log(view.getInt16()) //1535
定型數(shù)組—特殊的視圖類型
上面的緩沖區(qū)類型視圖是可以隨意更變的劳秋,但是我們只希望處理一種數(shù)據(jù)類型仓手,這讓我們很容易選擇和判斷
let buffer = new ArrayBuffer(10),
//使用DataView創(chuàng)建視圖的實(shí)例
view1 = new Int8Array(buffer),
view2 = new Int8Array(buffer,5,2); // 第一個(gè)參數(shù)是創(chuàng)建的緩沖區(qū),第二個(gè)是操作緩沖區(qū)的起始位置玻淑,第三個(gè)參數(shù)是緩沖區(qū)的長(zhǎng)度
console.log(view1.buffer === buffer); //true
console.log(view2.buffer === buffer); //true
console.log(view1.byteOffset); //0
console.log(view2.byteOffset); //5
console.log(view1.byteLength); //10
console.log(view2.byteLength); //2
不用數(shù)組緩沖區(qū)創(chuàng)建數(shù)組嗽冒,利用定型數(shù)組的創(chuàng)建
let ints = new Int16Array(2),
floats = new Float32Array(5);
console.log(ints.byteLength); //4
console.log(ints.length); //2
console.log(floats.byteLength); //20
console.log(floats.length); //5
不給定型參數(shù)傳值,則不能使用緩存區(qū)补履,因?yàn)樗娜萘磕J(rèn)為0
第三種創(chuàng)建定型數(shù)組的方法是調(diào)用構(gòu)造函數(shù)時(shí)添坊,將以下任一對(duì)象作為唯一的參數(shù)傳入
1、一個(gè)定型數(shù)組
>該數(shù)組中的每個(gè)元素會(huì)作為新的元素被復(fù)制到新的定型數(shù)組中箫锤。例如贬蛙,如果將一個(gè)int8數(shù)組傳入到Int16Array構(gòu)造函數(shù)中雨女,int8的值會(huì)被復(fù)制到一個(gè)新的int16數(shù)組中,新的定型數(shù)組使用新的數(shù)組緩沖區(qū)
2阳准、一個(gè)可迭代對(duì)象
> 對(duì)象的迭代器會(huì)被調(diào)用氛堕,通過檢索所有條目來選取插入到定型數(shù)組的元素,如果所有元素都是不適用于該視圖類型的無效類型野蝇,構(gòu)造函數(shù)將會(huì)拋出一個(gè)錯(cuò)誤
3讼稚、一個(gè)數(shù)組
> 數(shù)組中的元素會(huì)被復(fù)制到一個(gè)新的定型數(shù)組中,如果所有元素都是不適用于該視圖類型的無效類型绕沈,構(gòu)造函數(shù)將會(huì)拋出一個(gè)錯(cuò)誤
4锐想、一個(gè)類數(shù)組對(duì)象
> 與傳入數(shù)組的行為一致
```
let int1 = new Int16Array([15,25]),
int2 = new Int32Array(int1);
console.log(int1.buffer === int2.buffer); //4
console.log(int1.byteLength); //15
console.log(int1[0]) //25
console.log(int1[1]) //8
console.log(int2.byteLength) //2
console.log(int2.length) //15
console.log(int2[0]); //15
console.log(int2[1]); //25
```
元素大小
每種定型數(shù)組由多個(gè)元素組成,元素大小,元素大小指的每個(gè)元素表示的字節(jié)數(shù)七冲,該值存儲(chǔ)在每個(gè)構(gòu)造函數(shù)和每個(gè)實(shí)例的BYTES_PRE_ELEMENT屬性
console.log(UInt8Array.BYTES_PRE_ELEMENT);
console.log(UInt16Array.BYTES_PRE_ELEMENT);
let ints = new Int8Array(5);
console.log(ints.BYTES_PER_ELEMENT);
定型數(shù)組也適用于數(shù)組的通用方法痛倚,但也有區(qū)別
//原型不同
let ints = new Int16Array([20,50]);
console.log(ints instanceof Array); //false
console.log(Array.isArray(ints)); //false
//行為差異,數(shù)組的元素尺寸大小一致,且不能被擴(kuò)展
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[0]); //25
//0被用于代替所有非法值
let ints = new Int16Array(['hi']);
console.log(ints.length); //1
console.log(ints[0]); //0
缺失的方法
- concat()
- shift()
- pop()
- splice()
- push()
- unshift()
附加方法
- set():將其他數(shù)組復(fù)制到已有的定型數(shù)組
- subarray():提取已有定型數(shù)組的一部分作為新的定型數(shù)組
set() 一個(gè)是數(shù)組(定型數(shù)組或普通數(shù)組),一個(gè)是可選的偏移量澜躺,表示開始插入數(shù)據(jù)的位置蝉稳,
let ints = new Int16Array(4);
ints.set([25,50]);
ints.set([125,50],1);
console.log(ints.toString()); //25,50,75,0
subArray()一個(gè)是可選的開始位置,一個(gè)是可選的結(jié)束
let ints = new Int16Array([25,50,75,100]),
subint1 = ints.subarray(),
subint2 = ints.subarray(2),
subint3 = ints.subarray(1,3);
console.log(subint1.toString());//25,50,75,100
console.log(subint2.toString());//75,100
console.log(subint3.toString());//75,100