8 個有用的 JS 技巧

2022-08-10 16:45:15 字數 3409 閱讀 6752

使用 grid ,需要重新建立原始資料,並且每行的列長度可能不匹配, 為了確保不匹配行之間的長度相等,可以使用array.fill方法。

let array = array(5).fill('');

console.log(array);

//outputs (5) ["", "", "", "", ""]

es6 提供了從陣列中提取惟一值的兩種非常簡潔的方法。不幸的是,它們不能很好地處理非基本型別的陣列。在本文中,主要關注基本資料型別。

1 const cars =[

2 'mazda',

3 'ford',

4 'renault',

5 'opel',

6 'mazda'7]

8 const uniquewitharrayfrom = array.from(new

set(cars));

9 console.log(uniquewitharrayfrom); //

outputs ["mazda", "ford", "renault", "opel"]

1011 const uniquewithspreadoperator = [...new

set(cars)];

12 console.log(uniquewithspreadoperator);//

outputs ["mazda", "ford", "renault", "opel"]

物件合併是很常見的事情,我們可以使用新的es6特性來更好,更簡潔的處理合併的過程。

1

//merging objects

2 const product =

3 const manufacturer =

45 const productmanufacturer =;

6console.log(productmanufacturer); 7//

outputs 89

//merging an array of objects into one

10 const cities =[

11 ,

12 ,

13 ,

14 ,

15 ,

16 ,

17 ,

18 ,

19 ,

20

21];

2223 const result = cities.reduce((accumulator, item) =>

28}, {});

2930

console.log(result);

31/*

outputs

32berlin: "no"

33genoa: "yes"

34hamburg: "yes"

35lyon: "no"

36marseille: "yes"

37milan: "no"

38new york: "yes"

39palermo: "yes"

40paris: "no"

41rome: "yes"

42*/

另一種陣列 map 的實現的方式,不用array.map

array.from 還可以接受第二個引數,作用類似於陣列的map方法,用來對每個元素進行處理,將處理後的值放入返回的陣列。如下:

1 const cities =[

2 ,

3 ,

4 ,

5 ,

6 ,

7 ,

8 ,

9 ,

10 ,

11

12];

1314 const citynames = array.from(cities, () =>name);

15console.log(citynames);

16//

outputs ["paris", "lyon", "marseille", "rome", "milan", "palermo", "genoa", "berlin", "hamburg", "new york"]

不再需要根據乙個條件建立兩個不同的物件,可以使用展開運算符號來處理。

nst getuser = (emailincluded) =>

}}const user = getuser(true

);console.log(user);

//outputs

const userwithoutemail = getuser(false

);console.log(userwithoutemail);

//outputs

有時候乙個物件包含很多屬性,而我們只需要其中的幾個,這裡可以使用解構方式來提取我們需要的屬性。如乙個使用者物件內容如下:

const rawuser =

我們需要提取出兩個部分,分別是使用者及使用者資訊,這時可以這樣做:

1 let user = {}, userdetails ={};

2 ( =rawuser);

34 console.log(user); //

outputs

5 console.log(userdetails); //

outputs

早期,如果屬性名需要是動態的,我們首先必須宣告乙個物件,然後分配乙個屬性。這些日子已經過去了,有了es6特性,我們可以做到這一點。

1 const dynamic = 'email';

2 let user =

6 console.log(user); //

outputs

在用例中,如果正在構建乙個基於模板的helper元件,那麼這一點就會非常突出,它使動態模板連線容易得多。

1 const user =11}

1213 const printuserinfo = (user) => $. email: $. display name: $. $ has $ followers.`

15console.log(text);16}

1718

printuserinfo(user);

19//

outputs 'the user is john doe. email: [email protected]. display name: supercooljohn. john has 45 followers.'

五個有用的jquery小技巧

在回顧以前寫的文章中發現原來發布的jquery的 常用函式與方法 文章重合了,想詳細了解該章節 總結 jquery常用函式與方法 文章 document ready function 當然jquery1.7版本以後bind 函式推薦用on 來代替。fn.flash function color,du...

10個非常有用的CSS技巧

1.將網頁或元素居中 html divclass wrap div css wrap 2.sticky footer 讓頁尾永遠停靠在頁面底部,而不是根據絕對位置 html divid wrap divid main class clearfix div div divid footer div c...

Linux中8個有用的touch命令

在linux中,每個檔案都有時間戳,並且每個檔案都儲存上次訪問時間,上次修改時間,上次改變時間的資訊。因此,無論什麼時候我們建立新的檔案,訪問或者修改乙個存在的檔案,那個檔案的時間戳會自動被更改。在這篇文章中我們將覆蓋一些有用的linux touch命令的例子,touch命令是乙個linux檔案系統...