深入理解ES6 010【學習筆記】

改進的陣列功能

new Array()的怪異行為,當建構函式傳入一個數值型的值,那麼陣列的 length 屬性會被設定為該值;如果傳入多個值,此時無論這些值是不是數值型的,都會變成陣列的元素。這個特性令人困惑,你不可能總是注意傳入資料的型別,所以存在一定的風險。

Array.of()

無論傳入多少個參數,不存在單一數值的特例(一個參數且數值型),總是回傳包含所有參數的陣列。

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

Array.from()

將類陣列物件轉換成陣列物件來使用,Array.from()呼叫基於 arguments 物件中的元素來建立一個新陣列,args 是 Array 的一個實例,包含 arguments 物件中相同位置的相同值。如下所示:

function doSomthing(){
  var args = Array.from(arguments);
  // 使用args
}
// 可以提供一個映射函數作為Array.from()的第二個參數,這個函數用來將類陣列物件中的每一個值轉換成其他形式
// 還有第三個參數,是為了綁定上下文的
function translage(){
  return Array.from(arguments,(value)=>value+1)
}
let numbers = translage(1,2,3)
console.log(numbers) // 2,3,4
// 可以轉換可迭代物件

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

所有物件的新方法

  • find() 和 findIndex() 方法
  • fill()
  • copyWithin

型別化陣列 (Typed Array)

一種用於處理數值型別(正如其名,不是所有型別)資料的專用陣列。

型別化陣列的使用要先建立資料緩衝區

let buffer = new ArrayBuffer(10) // 分配10個位元組
console.log(buffer.byteLength) // 10

也可以使用slice方法分割已有的陣列緩衝區來建立一個新的,這個 slice() 方法與陣列上的 slice() 方法很像,傳入開始索引和結束索引作為參數,然後回傳一個新的 ArrayBuffer 實例,新實例由原始陣列緩衝區的切片組成。

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

透過視圖操作陣列緩衝區

先建立 ArrayBuffer 實例,然後再用這個實例來建立新的 DataView

let buffer = new ArrayBuffer(10),
view = new DataView(buffer);
// view物件可以存取緩衝區中所有10個位元組,如果提供一個表示位元偏移的數值,那麼這個緩衝區的其中一部分來建立視圖
view = new DataView(buffer,5,2); // 包含位於索引5和6的字元
  • 透過以下幾個屬性可以獲取視圖資訊
  • buffer 綁定的陣列緩衝區
  • byteOffset 預設是 0
  • byteLength

讀取寫入資料

JavaScript 有 8 種數值型資料型別,對於其中的每一種,都能在 DataView 的原型上找到相對應的陣列緩衝區中寫入資料和讀取資料的方法。這些方法名稱都以 set 或 get 開頭,緊接著是每種資料型別的縮寫,如下所示:

  • getInt8(byteOffset,litteEndian)
  • setInt8(byteOffset,litteEndian)
  • getUnit8(byteOffset,litteEndian)
  • setUnit8(byteOffset,litteEndian)
  • ...
let buffer = new ArrayBuffer(10),
view = new DataView(buffer);
view.setInt8(0,5);
view.setInt8(1,-1);
console.log(view.getInt16(0)); //1535
console.log(view.getInt8(0)); //5
console.log(view.getInt8(1)); //-1

型別化陣列是視圖

  • 型別化陣列與普通陣列的相似之處
  • 差異

主題測試文章,只做測試使用。發佈者:Walker,轉轉請注明出處:https://www.walker-learn.xyz/archives/4336

(0)
Walker的頭像Walker
上一篇 2025年3月8日 12:52
下一篇 2025年3月8日 12:52

相關推薦

  • 深入理解ES6 005【學習筆記】

    解構:使用資料存取更便捷 如果使用 var、let 或 const 解構宣告變數,則必須要提供初始化程式(也就是等號右側的值)如下會導致錯誤 // 語法錯誤 var {tyep,name} // 語法錯誤 let {type,name} // 語法錯誤 const {type,name} 使用解構給已經宣告的變數賦值,如下 let node = { type:&qu…

    個人 2025年3月8日
    1.3K00
  • Go工程師體系課 018【學習筆記】

    API 閘道與持續部署入門(Kong & Jenkins) 對應資料目錄《第 2 章 Jenkins 入門》《第 3 章 透過 Jenkins 部署服務》,整理 Kong 與 Jenkins 在企業級持續交付中的實戰路徑。即使零基礎,也能順著步驟建立出自己的閘道 + 持續部署管線。 課前導覽:什麼是 API 閘道 API 閘道位於用戶端與後端微服務…

    個人 2025年11月25日
    26400
  • Go工程師體系課 protoc-gen-validate【學習筆記】

    protoc-gen-validate 簡介與使用指南 ✅ 什麼是 protoc-gen-validate protoc-gen-validate(簡稱 PGV)是一個 Protocol Buffers 外掛程式,用於在生成的 Go 程式碼中加入結構體欄位的驗證邏輯。 它透過在 .proto 檔案中加入 validate 規則,自動為每個欄位生成驗證程式碼,避免你手…

    個人 2025年11月25日
    1.4K00
  • 深入理解ES6 009【學習筆記】

    JavaScript 中的類別 function PersonType(name){ this.name = name; } PersonType.prototype.sayName = function(){ console.log(this.name) } var person = new PersonType("Nicholas") p…

    個人 2025年3月8日
    1.3K00
  • Go 工程師體系課 012【學習筆記】

    在 Go 中整合 Elasticsearch 1. 客戶端函式庫選擇 1.1 主流 Go ES 客戶端 olivere/elastic:功能最完整,API 設計優雅,支援 ES 7.x/8.x elastic/go-elasticsearch:官方客戶端,輕量級,更接近原生 REST API go-elasticsearch/elasticsearch:社群維護的官…

    個人 2025年11月25日
    29400
簡體中文 繁體中文 English