JavaScrip ES6數組方法

来源:http://www.cnblogs.com/zzzzzwt/archive/2017/07/29/7257161.html
-Advertisement-
Play Games

ES6提供的兩個靜態方法： Array.from Array.of ES6提供操作、填充和過濾數組的方法： Array.prototype.copyWidthin Array.prototype.fill Array.prototype.find Array.prototype.findIndex ...


ES6提供的兩個靜態方法：

  • Array.from
  • Array.of

ES6提供操作、填充和過濾數組的方法：

  • Array.prototype.copyWidthin
  • Array.prototype.fill
  • Array.prototype.find
  • Array.prototype.findIndex

ES6中有關於數組迭代的方法：

  • Array.prototype.keys
  • Array.prototype.values
  • Array.prototype.entries
  • Array.prototype[Symbol.iterator]

接下來主要看看這些方法的使用。

Array.from()

Array.from()方法主要用於將兩類對象(類似數組的對象[array-like object]和可遍歷對象[iterable]）轉為真正的數組。

在ES5中常常使用下麵這樣的方法將一個類似數組的對象轉換成一個數組:

function cast () {
    return Array.prototype.slice.call(arguments);
}

cast('a','b','c','d'); // ["a", "b", "c", "d"]

在ES6中可以使用Array.from將一個類似數組的對象轉換為一個真正的數組。

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
}

console.log(Array.from(arrayLike)); // ["a","b","c"]

在ES6中，擴展運算符(...)也可以將某些數據結構轉為數組。只不過它需要在背後調用遍歷器介面Symbol.iterator。

function cast (){
  return [...arguments]
}

cast('a','b','c'); // ["a","b","c"]

值得註意的是如果一個對象沒有部署遍歷器介面，使用擴展運算符是無法將類似數組對象轉換成數組。

Array.from接受三個參數，但只有input是必須的：

  • input: 你想要轉換的類似數組對象和可遍歷對象
  • map: 類似於數組的map方法，用來對每個元素進行處理，將處理後的值放入返回的數組
  • context: 綁定map中用到的this

只要是部署了iterator介面的數據結構，Array.from都能將其轉為數組:

let arr = Array.from('w3cplus.com')

console.log(arr); // ["w","3","c","p","l","u","s",".","c","o","m"]

let namesSet = new Set(['a', 'b'])
let arr2 = Array.from(namesSet) 

console.log(arr2); //["a","b"]

上面的代碼，因為字元呂和Set結構都具有iterator介面，因此可以被Array.from轉為真正的數組。如果參數是一個真正的數組，Array.from也會返回一個一模一樣的新數組：

let arr =  Array.from([1, 2, 3]);

console.log(arr); // [1,2,3]

前面也說過Array.from還可以接受第二個參數，作用類似於數組的map方法，用來對每個元素進行處理，處理後的值放入返回的數組：

Array.from(arrayLike, x => x * x);
// 等同於
Array.from(arrayLike).map(x => x * x);

Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]

如果map函數裡面用到了this關鍵字，還可以傳入Array.from的第三個參數，用來綁定this。

Array.from()可以將各種值轉為真正的數組，並且還提供map功能。這實際上意味著，只要有一個原始的數據結構，你就可以先對它的值進行處理，然後轉成規範的數組結構，進而就可以使用數量眾多的數組方法。

Array.from({ length: 2 }, () => 'jack')
// ['jack', 'jack']

上面代碼中，Array.from的第一個參數指定了第二個參數運行的次數。這種特性可以讓該方法的用法變得非常靈活。

Array.from()的另一個應用是，將字元串轉為數組，然後返回字元串的長度。因為它能正確處理各種Unicode字元，可以避免JavaScript將大於\uFFFF的Unicode字元，算作兩個字元的bug。

function countSymbols(string) {
    return Array.from(string).length;
}

使用Array.from()還可以返回各種數據類型：

function typesOf () {
    return Array.from(arguments, value => typeof value)
}
typesOf(null, [], NaN)
// <- ['object', 'object', 'number']

 

你也可以使用map方法實現上面代碼的功能：

function typesOf (...all) {
    return all.map(value => typeof value)
}
typesOf(null, [], NaN)
// <- ['object', 'object', 'number']

Array.of

使用Array.of方法可以將一組值轉換為數組。

Array.of = function of () {
    return Array.prototype.slice.call(arguments)
}

但你不能使用Array.of來替代Array.prototype.slice.call，他們的行為不一樣：

Array.prototype.slice.call([1, 2, 3])
// <- [1, 2, 3]
Array.of(1, 2, 3)
// <- [1, 2, 3]
Array.of(3)
// <- [1]

這個方法主要目的主要還是用來彌補數組構造函數Array()的不足，因為參數個數的不同，會導致Array()行為有所差異：

new Array()
// <- []
new Array(undefined)
// <- [undefined]
new Array(1)
// <- [undefined x 1]
new Array(3)
// <- [undefined x 3]
new Array(1, 2)
// <- [1, 2]
new Array(-1)
// <- RangeError: Invalid array length

Array.of基本上可以用來替代Array()或new Array()，並且不存在由於參數不同而導致的重載，而且他們的行為非常統一：

Array.of()
// <- []
Array.of(undefined)
// <- [undefined]
Array.of(1)
// <- [1]
Array.of(3)
// <- [3]
Array.of(1, 2)
// <- [1, 2]
Array.of(-1)
// <- [-1]

Array.of方法可以使用下麵的代碼來模擬實現：

function ArrayOf(){
    return [].slice.call(arguments);
}

copyWidthin

copyWidthin方法可以在當前數組內部，將指定位置的數組項複製到其他位置(會覆蓋原數組項)，然後返回當前數組。使用copyWidthin方法會修改當前數組。

Array.prototype.copyWithin(target, start = 0, end = this.length)

copyWidthin將會接受三個參數：

  • target: 這個參數是必須的，從該位置開始替換數組項
  • start: 這是一個可選參數，從該位置開始讀取數組項，預設為0，如果為負值，表示從數組的右邊向左開始讀取
  • end: 這是一個可選參數，到該位置停止讀取的數組項，預設等於Array.length。如果為負值，表示倒數

我們先來看一個簡單的示例，下麵聲明瞭一個items數組：

var items = [1, 2, 3, ,,,,,,,]; // <- [1, 2, 3, undefined x 7]

下麵的代碼將在數組items的第六個位置開始粘貼數組項。粘貼過去的數組項是從items的第二位開始到第三位置結束。

items.copyWithin(6, 1, 3)
// <- [1, 2, 3, undefined × 3, 2, 3, undefined × 2]

下麵是更多例子：

// 將3號位複製到0號位
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]

// -2相當於3號位，-1相當於4號位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5]

// 將3號位複製到0號位
[].copyWithin.call({length: 5, 3: 1}, 0, 3)
// {0: 1, 3: 1, length: 5}

// 將2號位到數組結束，複製到0號位
var i32a = new Int32Array([1, 2, 3, 4, 5]);
i32a.copyWithin(0, 2);
// Int32Array [3, 4, 5, 4, 5]

// 對於沒有部署TypedArray的copyWithin方法的平臺
// 需要採用下麵的寫法
[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
// Int32Array [4, 2, 3, 4, 5]

Array.prototype.fill

Array.prototype.fill方法使用給定的值填充一個數組：

['a', 'b', 'c'].fill(0)
// <- [0, 0, 0]
new Array(3).fill(0)
// <- [0, 0, 0]

上面這種方法用於空數組的初始化非常方便。數組中已有的元素會全部被抹去。

除此之外，Array.prototype.fill方法還可以接受第二個和第三個參數，用於指定填充的起始位置和結束位置。

['a', 'b', 'c',,,].fill(0, 2)
// <- ['a', 'b', 0, 0, 0]
new Array(5).fill(0, 0, 3)
// <- [0, 0, 0, undefined x 2]

Array.prototype.fill提供的值可以是任意的，不僅可以是一個數值，甚至還可以是一個原始類型：

new Array(3).fill({})
// <- [{}, {}, {}]

不過這個方法不可以接受數組的映射方法，不過可以接受一個索引參數或類似下麵這樣的方式：

new Array(3).fill(function foo () {})
// <- [function foo () {}, function foo () {}, function foo () {}]

Array.prototype.find

Array.prototype.find方法用於找出第一個符合條件的數組成員。它的參數是一個回調函數，所有數組成員依次執行該回調函數，直到找出第一個返回值為true的數組項，然後返回該數組項。如果沒有符合條件的數組項，則返回undefined。

[1, 2, 3, 4, 5].find(item => item > 2)
// <- 3
[1, 2, 3, 4, 5].find((item, i) => i === 3)
// <- 4
[1, 2, 3, 4, 5].find(item => item === Infinity)
// <- undefined

另外這種方法的回調函數可以接受三個參數，依次為當前的值、當前的位置和原始數組。

[1, 5, 10, 15].find(function(value, index, arr) {
    return value > 9;
}) // 10

Array.prototype.findIndex

這個方法類似於.some和.find方法。像.some返回true；像.find返回item。如果array[index] === item則返回其index。

Array.prototype.findIndex方法主要是用來返回數組項在數組中的位置。其和Array.prototype.find方法非常類似，接受一個回調函數，如果符合回調函數的條件，則返回數組項在數組中的位置，如果所有數組項都不符合回調函數條件，則會返回-1。

[1, 2, 3, 4, 5].find(item => item > 2)
// <- 2
[1, 2, 3, 4, 5].find((item, i) => i === 3)
// <- 3
[1, 2, 3, 4, 5].find(item => item === Infinity)
// <- -1

這個方法也可以接受第二個參數，用來綁定回調函數的this對象。

註：Array.prototype.find和Array.prototype.findIndex兩個方法都可以發現NaN，彌補數組的indexOf方法的不足。

[NaN].indexOf(NaN)
// -1

[NaN].findIndex(y => Object.is(NaN, y))
// 0

上面的代碼中，indexOf方法無法識別數組的NaN成員，但是findIndex方法可以藉助Object.is方法做到。

ES6遍曆數組的方法

ES6提供了三個新方法：entries()、keys()和values()，用來遍曆數組。它們都返回一個遍歷器對象，可以用for...of迴圈進行遍歷，唯一的區別是keys()是對數組的鍵名的遍歷、values()是對數組鍵值的遍歷，entries()方法是對數值的鍵值對的遍歷。

for (let index of ['a', 'b'].keys()) {
    console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
    console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
    console.log(index, elem);
}
// 0 "a"
// 1 "b"

如果不使用for...of迴圈，可以手動調用遍歷器對象的next方法，進行遍歷：

let letter = ['a', 'b', 'c'];
let entries = letter.entries();
console.log(entries.next().value); // [0, 'a']
console.log(entries.next().value); // [1, 'b']
console.log(entries.next().value); // [2, 'c']

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 關於隨筆
    一直都想寫點什麼，卻一直停滯……主要是因為有點懶，同時又想對所發的任何一篇博文都有很高的要求。 在學Python包括其擴展庫的過程中記錄過很多筆記，只是按自己的習慣所記，直接貼出來其他人不一定看得懂。在這裡發文畢竟都是要給別人看的，所以覺得發出來至少也得條理清晰，邏輯嚴密，才不至於誤導了閱讀我的博文 ...
  • Spring Data 分頁和排序 PagingAndSortingRepository的使用（九）
    繼承PagingAndSortingRepository 我們可以看到，BlogRepository定義了這樣一個方法：Page<Blog> findByDeletedFalse(Pageable pageable);，我們主要關註它的參數以及返回值。 Pageable 是Spring Data庫中 ...
  • Spring Data CrudRepository增刪改查方法（八）
    CrudRepository 的主要方法 1. 新建一個類 CurdEmployeeRespository 繼承CrudRepository 裡面實現了大量的增刪改查方法 2. 編寫service實現類 編寫測試類 測試結果 因為我測試前把數據全部都刪除了 ...
  • 752. [BJOI2006] 狼抓兔子
    ★★★ 輸入文件：bjrabbit.in 輸出文件：bjrabbit.out 簡單對比時間限制：1 s 記憶體限制：162 MB Description Source: Beijing2006 [BJOI2006] 八中OJ上本題鏈接：http://www.lydsy.com/JudgeOnline/ ...
  • 【Spine】Spine Runtime for Delphi移植筆記（四） - spine.classes
    類定義，I 開頭的抽象類大多數只是為了定義一下，因為需要單元間交叉引用，但是又不想都是定義為TObject，寫介面又沒必要，只能這麼寫了。 ...
  • redis 簡單使用總結
    最近一段時間與redis接觸比較頻繁。發現有些東西還是工作中經常會用到的，自己也花了點時間鞏固下。本篇文章主要是以總結性的方式梳理，因為redis的主題很大，任何一個技術點展開都是幾篇文章的量。也可以說這篇文章是個概覽。 ...
  • 實習第一周總結
    實習了一周，基礎太差，只做了寫頁面一件事，真正做起來才發現要對接後臺，我寫的完全不合格，最後還得麻煩老大幫忙重新改了一遍才能給後臺綁定數據，前路漫漫啊（年紀輕輕為啥這麼想不開，打什麼代碼呢？ ） 1.position：absolute 與定位問題使用了position：absolute之後發現想要居 ...
  • HTML基礎知識（未完待續）
    一、HTML編輯工具：Sublime Text 二、HTML實體字元：1、（ 空格）：&nbsp； 2、（<） &lt； 3、（>）&gt； 4、（&）&amp； 5、（“）&quot；等 三、基本HTML標記： 註釋標記：<!-- 這是註釋內容 --> 換行標記：<br/> 段落標記： <p></ ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類