最新ES6+中數組的拓展總結,面試必備

来源:https://www.cnblogs.com/chengxuyuanaa/archive/2020/06/16/13139397.html
-Advertisement-
Play Games

目錄: 1.擴展運算符2.Array.form()3.Array.of()4.數組實例的copyWithin()5.數組實例的find()和findIndex()6.數組實例的fill()7.數組實例的entries(),keys(),vlaues()8.數組實例的includes()9.數組的空位 ...


目錄:

1.擴展運算符
2.Array.form()
3.Array.of()
4.數組實例的copyWithin()
5.數組實例的find()和findIndex()
6.數組實例的fill()
7.數組實例的entries(),keys(),vlaues()
8.數組實例的includes()
9.數組的空位

1.擴展運算符

在ES6中新增加了一個...運算符,叫做擴展運算符,在我的ES6+中函數的擴展大總結 說了ES6中函數的參數有了一個rest參數,也是...的操作符,它可以讓函數調用時傳遞的參數保存到一個數組中。如下

function add(...values){
   let sum = 0;
   values.forEach(value=>{
    sum + = value; 
 ])
  return sum
}
let sum = add(1,2,3,4,5,6,7)

除了本文內容。接下來我還會在我的裙里用視頻講解的方式給大家拓展下圖中的內容:有興趣的可以來小編的扣扣裙 519293536  免費交流學習,我都會儘力幫大家哦,

 接下來繼續本文內容:

而在數組中的這個擴展運算符如同rest參數的逆運算,可以將一個數組轉為用逗號分隔的參數序列。

console.log(...[1,2,3,4,5,6,7]);
//1,2,3,4,5,6,7

[...document.querySelectorAll('div')]
//<div> <div> <div>
複製代碼

兩個運算符(rest參數和...運算符)配合起來會非常的方便

function  push(array, ...items){
   array.push(...items)
}
複製代碼

由於有了擴展運算符,所以不需要使用apply將數組轉化為函數的參數

//ES5
function f(x,y,z){
    //...
}
f.apply(null,[1,2,3])

//ES6
function f(x,y,z){
}
f(...[1,2,3])
複製代碼

應用:

1.合併數組

//在ES5中合併數組使用的時Array.concat()API,在ES6中就可以使用擴展運算符
let array = [1,2,3,4,5,...[6,7,8,9]]
let array= [...[1,2,3,4],...[5,6,7],...[8,9,0]]
複製代碼

2.與 解構賦值 配合使用

let a ,array
[a,...array] = [1,2,3,4,5,6,7,8]

a//1
array//[2,3,4,5,6,7,8]
複製代碼

上面的代碼中將等號右邊的數組中的第一個元素通過解構賦值傳遞給a,後面的傳遞給數組array,這裡需要註意的是:如果將擴展運算符用於數組賦值,則只能將其放在參數的最後一位,否則將會報錯。

const [...butlast,last] = [1,2,3,4,5,6]

//報錯!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
複製代碼

3.函數的參數

上面已經舉過例子了,這裡。。。。。。。

4.字元串

擴展運算符可以將字元串轉為真正的數組

5.將DOM節點的對象轉換為數組

請看如下代碼:

let nodeList = document.querySelectorAll("div");
let array = [...nodeList]
複製代碼

其中nodeList是一個對象(類似數組的對象,但是還是對象),而不是一個數組,但是使用擴展運算符可以將該對象轉換為真正的數組,這是因為擴展運算符內部調用的是數據結構的Iterator介面,因此只要具有Iterato介面的對象都可以使用擴展符,上面代碼中的nodeList具有Iterator介面,所以可以使用。

2.Array.from()

Array.form方法用於將兩類對象轉化為真正的數組:類似數組的對象和可遍歷的對象(ES6新增的Map和Set)。

下麵的代碼是類似數組的對象,Array.from將它轉化為真正的數組。

let arrayLike = {
   "0":"a",
   "1":"b",
   "2":"c"
    length:3
}
let array = Arrat.from(arrayLike);//["a","b","c"]
複製代碼

在實際應用中,常見的類似數組的對象是DOM操作返回的NodeList集合,以及函數內部的arguments對象,Array.from都可以將他們轉化為數組。

同樣只有部署了Iterator介面的數據結構才可以被Array.from轉化,如果轉化的對象是數組則會返回一個一模一樣的數組。

Array.from('hello');//['h','e','l','l','o']


let namesSet = new Set(['a','b']);
Array.from(namesSet)//['a','b']
複製代碼

上面我們說過,只有具有Iterator介面的數據結構才可以使用擴展運算符,而類似數組的對象,所謂類似數組的對象實際上就是具有length的屬性的對象,而有的情況下具有length的對象Array.from無法正確的轉化,請看下麵這種情況。

Array.from({length: 3})
//[undefined,undefined,undefined]
複製代碼

對於沒有部署該方法的瀏覽器可以使用Array.prototype.slice 方法代替。

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,那麼參數還可以傳遞第三個值,用來綁定this。

3.Array.of()

Array.of()方法用於將一組值轉換為數組。

let array = Array.of(1,2,3,4,5);
array //[1,2,3,4,5]
複製代碼

代碼看起來是不是似曾相識???是不是像let array = Array(1,2,3,4,5)其實這個方法是對Array()的彌補,因為Array()的參數個數不同會返回不同的結果,會有一些差異。

Array()//[]
Array(3)//[ , , ]
Array(1,2,3)//[1,2,3]
複製代碼

上面的代碼中參數的個數分別為0個,1個,多個時所返回的結果會有不同,而Array.of就不會因為參數的個數不同而導致重載,他的行為非常統一。

Array.of()//[]
Array.of(2)//[2]
Array.of(1,2)//[1,2]
Array.of(undefined)//[undefined]
複製代碼

4. 數組實例的copyWithin()

數組實例的copyWithin方法會在當前內部指定位置的成員複製到其他位置(會覆蓋原有成員),然後返回當前數組,也就是說使用這個方法會改變當前數組。

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

它接受三個參數:
1.(必選) target: 從該位置開始複製
2. (可選)start :從該位置開始讀取數據,預設為0,如果為負值則表示倒數
3.(可選)end:到該位置停止讀取數據,預設為數組的長度,如果為負值則表示倒數

這三個位置應該都是數子,表示對應的下標,如果不是則會自動轉為數值。

5.數組實例的find()和findIndex()

數組實例的find()和findIndex()方法都是用於找出數組中第一個符合條件的數組成員,它的參數是一個回調函數,所有數組成員一次執行該回調函數,直到找出第一個返回值為true的成員,他們的區別就是find()會返回值,而findindex()會返回下標。他們都可以接受三個參數,依次是:當前值,當前的位置和原數組。

[1,2,3,4,5,6].find((n)=>n > 5) //6(值)
[1,2,3,4,5,6].findIndex((n)=>n > 5) //5(下標)
複製代碼

 

需要註意的是這兩個方法里的參數是回調函數,可以在回調函數裡面使用 Object.is()來區分NaN,彌補了indexOf的不足

6.數組實例的fill()

fill方法使用給定值填充一個數組

['a','b','c'].fill(7)
//[7,7,7]
new Array(3).fill(7);
//[7,7,7]
複製代碼

從上面代碼可以看出,fill方法用於空數組的初始化時非常方便,數組中已有的元素會被覆蓋,當然也可以傳遞第二個和第三個參數來表示開始和結束填充的位置

['a','b','c'].fill(7,1,2)
複製代碼

7.數組實例的entries(),keys(),values()

ES6提供了這三個新的方法用於遍曆數組,他們都返回一個遍歷器對象,可以使用for ... of ...迴圈遍歷,他們的區別在於:keys()是對鍵名的遍歷,values是對鍵值對的遍歷,entries是對鍵值對的遍歷。

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

 for(let value of ['a','b'].keys()){console.logvalue)}//a  b

 for(let [index,value] of ['a','b'].keys()){console.log(index,value)}//0  'a'   1  'b'
複製代碼

需要註意的是第三行代碼的[index,value]中的是數組

8.數組實例的includes()

Array.prototype.includes方法返回一個布爾值,表示數組是否包含給定的值,與字元串的includes類似。

[1,2,3].includes(2) //true 
複製代碼

該方法還可以傳遞第二個參數表示開始搜索的位置,如果該參數大於數組的長度則會被重置為0,如果為負數則表示倒數。

[1,2,3].includes(2,2) //false
複製代碼

這個方法與indexOf類似,需要區別的是indexOf不夠語義化,無法指定開始搜索的位置,而且indexOf中使用===來進行判斷,會導致NaN誤判,includes使用的是不一樣的演算法,就沒有這個問題。

9.數組的空位

數組的空位表示在聲明一個數組的時候只定義了數組的大小並未賦值時的空位

new Array(3);
//[  ,   ,  ]
複製代碼

空位不是undefined,一個位置的值等於undefined依然是有值的,空位是沒有任何值得,可以使用in操作符證明

 

在ES5中對空位的處理很不一致,大多數情況下會忽略(forEach(),filter(),every(),some()會跳過空位,map()會跳過空位,但會保留這個值,join(),toString()會將空位視為undefined,而undefined和null會被處理成空字元串)。ES6則明確的將空位轉為undefined。(Array.from,擴展運算符會視為undefined,copyWithin會將空位一起複制,fill將空位視為正常的數組位置。。。。。)

總之:由於空位的處理非常不統一,所以要避免出現空位 !!!!!

好了,除了以上內容。接下來我還會在我的裙里用視頻講解的方式給大家拓展下圖中的內容:有興趣的可以來我的扣扣裙 519293536  免費交流學習,我都會儘力幫大家哦,

 

以上內容我會不定期在群里視頻講解。想學習的可以來小編的扣扣裙 519293536 免費交流學習
本文的文字及圖片來源於網路加上自己的想法,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯繫我們以作處理


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

-Advertisement-
Play Games
更多相關文章
  • layui 是什麼? 是一個ui庫 UI設計(或稱界面設計)是指對軟體的人機交互、操作邏輯、界面美觀的整體設計。UI設計分為實體UI和虛擬UI,互聯網常用的UI設計是虛擬UI,UI即User Interface(用戶界面)的簡稱。 大致內容 觀察layui文件內的內部結構 ├─css //css目錄 ...
  • 前端早早聊大會,前端成長的新起點,與掘金聯合舉辦。 本文 是前端早早聊的第 45 位講師 ,也是第六屆 - Serverless 專場,來自閑魚前端團隊的丹俠的分享 - 講稿簡要整理版(完整版含演示請看錄播視頻和 PPT): 概述 今天給大家分享一下閑魚如何在現有產品中落地 FaaS,希望我們的實踐 ...
  • readyState document.readyState 返回當前文檔的狀態 屬性如下: uninitialized 還未開始載入 loading 載入中 interactive 已載入,文檔與用戶可以開始交互 complete 載入完成 DOMContentLoaded 當 DOMConten ...
  • 幾天前一個小伙伴問我 Object.getOwnPropertyNames() 是乾什麼用的 平時還真沒有使用到這個方法,一時不知如何回答 從方法名稱來分析,應該是返回的是對象自身屬性名組成的數組 那和 Object.keys() 方法不就一樣了嗎 感覺事情並不這麼簡單,於是我仔細看了一下這幾種遍歷 ...
  • 在平時的開發過程中,父子 / 兄弟組件間的通信是肯定會遇到的啦,所以這裡總結了 6 種 Vue 組件的通信props / $e$emit / Vuex$attrs / $listeners $parent / $children 與 ref provide / inject 前言 如上圖所示,A/B ...
  • 只要接觸過前端,都會指導web前端的知識主要由三部分組成:分別為靜態html,樣式css,動態javascript(簡稱js)這三大部分組成。其三部分組成的一個體系的複雜程度不亞於其他一門技術的複雜程度。當然對於跟我一樣厲害的那些web前端來說那就是小菜一碟,但是很多人都只學了錶面,基礎部分,很多重 ...
  • 在日常開發中,項目中的菜單欄都是已經實現好了的。如果需要添加新的菜單,只需要在`路由配置`中新增一條路由,就可以實現菜單的添加。 相信大家和我一樣,有時候會躍躍欲試自己去實現一個菜單欄。那今天我就將自己實現的菜單欄的整個思路和代碼分享給大家。 ...
  • 1.let 和 const 命令 在es5時,只有兩種變數聲明,var 和function。在es6中新增了四種let和const,以及另外兩種聲明import和class。 我們先講解let和const,後續會補充import和class (1)let 我們先來看基本語法 { let a = 10 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...