es6-數(shù)組新增功能與改進(jìn)

數(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
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市掘鄙,隨后出現(xiàn)的幾起案子耘戚,更是在濱河造成了極大的恐慌,老刑警劉巖操漠,帶你破解...
    沈念sama閱讀 211,123評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件收津,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡浊伙,警方通過查閱死者的電腦和手機(jī)撞秋,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,031評(píng)論 2 384
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來嚣鄙,“玉大人吻贿,你說我怎么就攤上這事⊙谱樱” “怎么了舅列?”我有些...
    開封第一講書人閱讀 156,723評(píng)論 0 345
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)卧蜓。 經(jīng)常有香客問我帐要,道長(zhǎng),這世上最難降的妖魔是什么弥奸? 我笑而不...
    開封第一講書人閱讀 56,357評(píng)論 1 283
  • 正文 為了忘掉前任榨惠,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘冒冬。我一直安慰自己伸蚯,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,412評(píng)論 5 384
  • 文/花漫 我一把揭開白布简烤。 她就那樣靜靜地躺著,像睡著了一般摇幻。 火紅的嫁衣襯著肌膚如雪横侦。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,760評(píng)論 1 289
  • 那天绰姻,我揣著相機(jī)與錄音枉侧,去河邊找鬼。 笑死狂芋,一個(gè)胖子當(dāng)著我的面吹牛榨馁,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播帜矾,決...
    沈念sama閱讀 38,904評(píng)論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼翼虫,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了屡萤?” 一聲冷哼從身側(cè)響起珍剑,我...
    開封第一講書人閱讀 37,672評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎死陆,沒想到半個(gè)月后招拙,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,118評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡措译,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,456評(píng)論 2 325
  • 正文 我和宋清朗相戀三年别凤,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片领虹。...
    茶點(diǎn)故事閱讀 38,599評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡规哪,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出掠械,到底是詐尸還是另有隱情由缆,我是刑警寧澤,帶...
    沈念sama閱讀 34,264評(píng)論 4 328
  • 正文 年R本政府宣布猾蒂,位于F島的核電站均唉,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏肚菠。R本人自食惡果不足惜舔箭,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,857評(píng)論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧层扶,春花似錦箫章、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,731評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至戳表,卻和暖如春桶至,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背匾旭。 一陣腳步聲響...
    開封第一講書人閱讀 31,956評(píng)論 1 264
  • 我被黑心中介騙來泰國(guó)打工镣屹, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人价涝。 一個(gè)月前我還...
    沈念sama閱讀 46,286評(píng)論 2 360
  • 正文 我出身青樓女蜈,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親色瘩。 傳聞我的和親對(duì)象是個(gè)殘疾皇子伪窖,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,465評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容