ES6之數組擴展方法【一】(相當好用)

来源:http://www.cnblogs.com/yy-hh/archive/2016/08/26/5810236.html
-Advertisement-
Play Games

form 轉化為真正的數組 先說一下使用場景,在Js中,我們要經常操作DOM,比如獲取全部頁面的input標簽,並且找到類型為button的元素,然後給這個按鈕註冊一個點擊事件,我們可能會這樣操作; 這樣寫肯定是沒有問題的,但是我們知道很多操作數組的方法比for迴圈好用多了,比如es5的forEac ...


form 轉化為真正的數組

 

先說一下使用場景,在Js中,我們要經常操作DOM,比如獲取全部頁面的input標簽,並且找到類型為button的元素,然後給這個按鈕註冊一個點擊事件,我們可能會這樣操作;

var inputObjs=document.getElementsByTagName('input');
  for(var i=0;i<inputObjs.length;i++){
    if(inputObjs[i].type==='button'){
      inputObjs[i].onclick=function(){
        return;
      }
    }
  }

這樣寫肯定是沒有問題的,但是我們知道很多操作數組的方法比for迴圈好用多了,比如es5forEach方法就很好用;但是能直接用嗎?不能!因為dom對象集合不是一個真正得Array數組類型,直接使用會報錯的;

  var inputObjs=document.getElementsByTagName('input');
  inputObjs.forEach();  //inputObjs.forEach is not a function

儘管如此我們還是可以用,不能直接用可以間接用,使用js強大的對象冒充功能即可;

  var inputObjs=document.getElementsByTagName('input');
  console.info(inputObjs);                  //[]length: 0__proto__: HTMLCollection
  console.info([].slice.call(inputObjs));   //[]length: 0__proto__: Array[0]

 這樣轉化為真正的數組之後就可以隨便調用數組的方法啦;這種方法固然可行,但是不太容易理解而且太過於“曲折”,es6給我們提供了一個更為簡單直接的方法,form,使用起來很簡單:

  var inputObjs=document.getElementsByTagName('input');
  console.info(inputObjs);                  //[]length: 0__proto__: HTMLCollection
  console.info(Array.from(inputObjs));      //[]length: 0__proto__: Array[0]

結果是一樣的但是語義上更加貼切也更容易理解,是不是很好用啊!當然這些還不夠,不僅僅是類數組任何數據類型都能使用此方法轉化為數組,但是不同的類型效果是不一樣的,測試如下:

  let str='google';
  console.log(Array.from(str));  //["g", "o", "o", "g", "l", "e"]
  let num=234;
  console.log(Array.from(num)); //[]
  let bol=false;
  console.log(Array.from(bol));
  let obj={foo:'foo',bar:'bar'};
  console.log(Array.from(obj)); //[]
  let superObj={0:'foo',1:'bar',length:2};
  console.log(Array.from(superObj));  //["foo", "bar"]

 這裡列出了不同的數據類型調用該方法後的結果,值得留意的是字元串和一些特殊對象是可以轉化為有內容的數組的,特殊的對象是指內容按照數字鍵值對排列,並且有length屬性的對象;這種對象是可以使用for迴圈的,而字元串也是可以使用for迴圈來得到每一個字元的,所以歸結為一句話,能使用for迴圈輸出內容的使用from方法就不是一個空數組;在這裡提醒一下,使用過jQuery的小伙伴可以留意一下,當你使用選擇器選擇元素返回的jquery對象是什麼結構的?其實就是我們例子中最後一個的結構,具體可以參考我的jQuery源碼分析系列文章

 

of 將值轉化為數組

 

創建數組有兩種方法一種是構造函數式:

 let arr=Array(1,2,3);

另一種是最常用的字面量創建:

  let arr=[1,2,3];

Array.of方法其實是對第一個種方式的補充,用法如下:

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

貌似跟跟構造方法一樣的效果,那這個方法為什麼還有存在的必要呢?看下麵的例子就明白了:

  console.log(Array()); //[]
  console.log(Array(1)); //[undefined]
  console.log(Array(1,2)); //[1,2]

在這個例子中參數數量的不同其代表的意義不一樣,只有一個參數時,參數表示的是長度,大於1一個參數時表示的元素,會引起混淆,但是Array.of方法就不會存在此問題嗎,因為其參數始終表示的元素:

  console.log(Array.of()); //[]
  console.log(Array.of(1)); //[1]
  console.log(Array.of(1,2)); //[1,2]

 

 copyWithin 數組內部數據複製替換

 

copyWithin方法主要作用是數組內部值的替換,該方法接受三個參數,分別表示開始複製位置、結束複製位置和插入位置,示例如下:

[1, 2, 3, 4, 5].copyWithin(0, 3)
// [4, 5, 3, 4, 5]// 將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]

 

例子參考:http://es6.ruanyifeng.com/#docs/array

 


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

-Advertisement-
Play Games
更多相關文章
  • 實際項目中li和裡邊的數值是動態生成的,需要控制它的寬度和顏色,效果如圖: 如果能實現顏色按數值規律變化就好了,目前顏色是固定到數組中的。 實例代碼如下: <!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <styl ...
  • 今天在網上參觀到一個寫法,返回字元串個個字母的個數 得到:Object {a: 5, b: 2, c: 2} reduce我查到是es5新加了array函數,這裡不細說,有興趣自己查; 關鍵是‘=>’,是我第一次在js中見到;在網上查了查沒找到什麼資料,自己理解吧,希望有大神指正。 應該就是匿名函數 ...
  • 我們做項目的時候,經常遇到樣式層疊問題,被其他的樣式覆蓋,或者寫的權重不高沒效果,對權重沒有具體的分析,做了一個總結。 如下圖,css規則由選擇器和聲明塊組成,寫在選擇器後面大括弧里的就叫聲明。 一、樣式類型1、行間 2、內聯 3、外部 例子彙總html: style1.css style2.css ...
  • CSS背景在網頁設計中使用頻率非常高,然而對於這個開發人員很熟悉的CSS屬性,卻隱藏著許多不為初級開發人員熟知的細節,這篇文章嘗試扒開這層不為人知的面紗。 首先列舉一下CSS中關於元素背景的所有屬性並簡要描述了其作用,其中後面幾個屬性是在CSS3中新加入的。 下麵一一“理清”這些屬性 backgro ...
  • [1]contains [2]empty [3]parent [4]has [5]not [6]header [7]lang [8]root ...
  • 模板方法模式 假如我們有一些對象,各個對象之間有一些相同的行為,也有一些不同的行為,這時,我們就可以用模板方法模式來把相同的部分上移到它們的共同原型中(父類),而將不同的部分留給自己各自重新實現。 模板方法:在這些平行對象的共同原型中定義的一個方法,它封裝了子類的演算法框架,它作為一個演算法的模板,指導 ...
  • 原生js使用forEach()與jquery使用each()遍曆數組,return false 的區別: 1、使用each()遍曆數組a,如下: 結果如下: 從運行的效果可以看出,return 相當於迴圈中的break,直接結束整個迴圈。 2、使用forEach()遍曆數組a,如下: 結果如下: 從 ...
  • 《JavaScript權威指南》中指出:JavaScript變數在聲明之前已經可用,JavaScript的這個特性被非正式的稱為聲明提前(hoisting),即JavaScript函數中聲明的所有變數(但不涉及賦值)都被“提前”至函數的頂部。下麵我們從實例中看看: 實例1: 調用函數myFunc() ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 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 ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...