es6隨手記 陣列篇

2021-09-08 07:00:48 字數 3560 閱讀 3611

1.rest引數    形式為 ...變數名    另外rest引數只能作為引數的最後乙個出現,不然報錯。

function a(a,...b) 

a(1,2,3,4,5,6)

2.擴充套件運算子...   這種情況為rest引數的逆運算,將引數轉成用逗號隔開的引數序列。...後面也可以跟表示式

let a = [1,2,3,4,5]

console.log(...a) // 1,2,3,4,5

使用擴充套件運算子就能代替很多方法。

math.max(...[14,3,77])

//等同於

math.max(14,3,77)

let b = [1,2,3,4]

function a(...b) {}

//等同於

functiong a(1,2,3,4) {}

//還可以用來深拷貝陣列,正常的複製陣列,指向的是同樣的位置,會同時改變兩個陣列

let a= [1,2,3]

let b= [...a]

//等同於

let [...b] = a //這種方法,同時使用了解構語法

//合併陣列

let a=[1,2]

let b=[2,3]

let c=[...a,...b] //c=[1,2,2,3]

//其他用法 和解構語法結合

[a,...b] = list //a=list[0] b就是去掉list[0]之後的陣列

//將字串轉成陣列

a='hello'

b=[...a] // ['h','e','l','l','o']

使用擴充套件運算子可以將很多內建遍歷器(iterator)的物件轉化成陣列。

let a=

//a是個類似陣列的物件,使用擴充套件運算子沒法轉化成真正的陣列,使用array.from()可以轉成真正的陣列。

2.array.from()  可以將很多內建內建遍歷器的物件轉成陣列,類似陣列的獨享也可以。它還可以接受第二個引數,第二個引數類似於陣列的map方法,可以用來對每乙個引數進行處理

let a=

let b = array.from(a) //['a','b']

傳入第二個引數,對每個引數進行操作

let c=array.from(a,(i) => ) //[0,0]

//如果第二個引數處理使用了this關鍵字,可以傳入第三個引數,用來繫結this

//還可以用來把字串轉成陣列,然後返回正確字串長隊,避免js把大於\ufff的字元算作兩個字元的bug

3.array.of()將一組值,轉成陣列

array.of(1,2,3)   // [1,2,3]
4.陣列的例項方法copywithin()

[1,2,3,4].copcwithin(0,2,3)   //[3,2,3,4]

//一共三個引數,第乙個為必需,從那個位置開始替換,第二個引數從哪個位置開始,第三個引數到那個位置結

//束,後兩個引數選下來的引數複製到第乙個引數開始的位置,三個引數都可為負數,表示到數。

5.陣列的例項方法find()和findindex()

find()    用來找到第乙個符合條件的陣列成員,並返回,如果找不到返回undefined.

findindex() 和find()方法類似,返回值為第乙個符合條件的陣列位置。

以上兩個方法都可以傳入第二個引數,用來繫結this

[1,0,5,9].find((i) => )   //9

let person =

[1,0,2,10].finde((i) => ,person) //10

6.陣列的例項方法fill()  使用給定值,填充乙個陣列,可以傳入三個引數,第乙個是給定值,填充物件,後兩個引數用來確定填充的位置。如果填充的物件型別是物件,那麼對填充後的陣列操作時每個填充上的物件都會改變,也就是填充的是同乙個位址的物件,為淺拷貝。

[1,2,3].fill(9)   //[9,9,9]

[1,2,3].fill(9,1,2) //[1,9,3]

let arr = [1,2,3]

arr.fill() //此時這個物件被淺拷貝了三次,然後填充到陣列中

arr[0].name = 'b' // arr = [,,]

7. 陣列的例項方法 entries()  keys()  values() 用於遍歷陣列,分別返回鍵值對,鍵,值。

for (let index of ['a', 'b'].keys()) 

// 0

// 1

for (let elem of ['a', 'b'].values())

// 'a'

// 'b'

for (let [index, elem] of ['a', 'b'].entries())

// 0 "a"

// 1 "b"

8.陣列例項方法includes()  用來查詢陣列中是否含有給定的值 ,返回布林值,可以用來判斷nan,比indexof()好用.

[1,2,3].includes(2)  //true
9.陣列例項方法 flat()   可以將多維陣列拉伸成一維陣列,陣列內值位置不變,返回新陣列,另外可以自動去掉空位

[1,[2,3]].flat()   // [1,2,3]   預設展開一層,也可以傳參,展開多層

[1,2,[[3,4],5],6].flat(2) //[1,2,3,4,5,6] //或者傳入infinity,有幾層展開幾層

[1,2,[[3,4],5],6].flat(infinity) //[1,2,3,4,5,6]

[1,,3,4].flat() //[1,3,4] 自動把空位去掉

flatmap()  可以傳入兩個引數,第二個引數可以用來繫結this物件,第乙個引數是乙個函式(可以傳三個值,當前陣列成員,當前陣列成員位置,原陣列),可以用來對每個值操作,然後執行flat()方法,但是只能展開一層,返回值組成乙個新陣列。

[2,3,4].flatmap(i => )  // [2,4,3,6,4,8]
10.陣列空位  指數組某乙個位置沒有任何值,不是undefined,對陣列空位的處理每個方法都不一樣,盡量避免出現,可以使用flat()方法把空位去掉。

es6隨手記 物件篇

1.屬性的簡潔表示法 const b 1 const a a function f x,y f 1,2 a 等同於 a function 2.屬性名可以的是表示式,但是要用括起來,然後屬性名表示式不能和簡潔表示法一起用 3.物件的擴充套件運算子.解構賦值 將物件中尚未讀取的屬性,分配到制定的物件上,...

es6隨手記 Class的基本語法

es6中的類 實際上是建構函式的另一種寫法 class aa var b new aa b.dostuff aaa 實際上類上的所有方法也都定義到了這個類的prototype屬性上 上面等同於 aa.prototype 類上定義的方法是不可列舉的,這個和es5中有所區別。所以可以使用下面方法 obj...

隨手小記(es6)

在學習前輩阮一峰大神寫的 ecmascript入門 一書的過程中,第九章中講到物件擴充套件時,第一條我就有點看不懂 es6允許直接寫入變數和函式,作為物件的屬性和方法。這樣的書寫更加簡潔。var foo bar var baz baz 等同於var baz 當時我就沒想太多,就這樣過去了,結果在學習...