關於 Map.getOrInsertComputed()

前言

  在上次的 關於 Map.getOrInsert()  介紹 Map.getOrInsert()， Map 還提供另一個類似的函式 Map.getOrInsertComputed() ，在此把學習的過程做個紀錄。

內容

  範例如下

let map = new Map();
map.set( 'A' , 1234 );
map.set( 'B' , 5678 );
//
console.log( map.getOrInsertComputed( 'C' ,  (value) => `New key ${value} is inserted.` ) );//New key C is inserted.
//
let insertCon = 0 ;
let callDefaultValue = (value) => {
  console.log(`New key ${value} is inserted.insertCon:${insertCon}`);
  return insertCon++;
};
map.getOrInsertComputed( 'D' , callDefaultValue);//New key D is inserted.insertCon:0
map.getOrInsertComputed( 'E' , callDefaultValue);//New key E is inserted.insertCon:1

Map.getOrInsert() 和 Map.getOrInsertComputed() 最大的差異是第二的引數，Map.getOrInsert() 插入的是固定值，但 Map.getOrInsertComputed() 是輸入一個函式來插入值，範例的 'C' 值直接示範如何插入，但直接使用不方便插入變數，所以範例的 'D' 與 'E' 先把函式存在變數，這樣就可以每次插入都用同一個函式，接著可以看到函式會在每次喚起後增加 indertCon，所以每次插入後顯示的 insertCon 會不一樣。

參考資料

[ developer.mozilla.org ] Map.prototype.getOrInsertComputed()

相關文章與資料

關於 Map.getOrInsert()

 關於 Map.getOrInsert()

前言

  最近發現 Map 本身有提供取得內容如果沒有的話就自動插入的功能，也就是 Map.getOrInsert() ，在此把學習的過程做個紀錄。

內容

  範例如下

let map = new Map();
map.set( 'A' , 1234 );
map.set( 'B' , 5678 );
//
console.log( map.get( 'A') );//1234
console.log( map.get( 'a') );//undefined
//
console.log( map.getOrInsert( 'A' , 9999) );//1234
console.log( map.getOrInsert( 'C' , 9999) );//9999
console.log( map.get( 'C') );//9999

Map.getOrInsert()  的用法只比 Map.get() 多一個引數，也就是當見直不存在要插入的的內容，範例開頭分別示範用  Map.get() 取得存在與不存在的鍵值狀況，接著就是 Map.getOrInsert() 取得已存在鍵值，結果跟 Map.get()  ，第二次就取得不存在的鍵值，由於不存在所以會被插入成一個新鍵值，內容就是第二個引數的內容，最後 Map.get() 確認新的鍵值是否有被確實的插入。

 

參考資料

[ developer.mozilla.org ] Map.prototype.getOrInsert()

 關於 Array.unshift()

前言

  最近需要在陣列的開頭插入元素，發現有 Array.unshift() 可以完成，在此把學習的過程做個紀錄。

內容

  範例如下

let ar = [ 1 , 2 , 3 ];
ar.unshift( 0 );
console.log( ar );//[0, 1, 2, 3]
//
ar.unshift( -1 );
console.log( ar );//[-1, 0, 1, 2, 3]
//
ar.unshift( -4 , -3 , -2);
console.log( ar );//[-4, -3, -2, -1, 0, 1, 2, 3]

Array.unshift() 的使用很簡單，只需將要插入到開頭的元素放到引數就行，而且還支援輸入多個引數，如範例最後所示。

參考資料

[ developer.mozilla.org ] Array.prototype.unshift()

 關於 Array.from()

前言

  Array.from() 是一個複製陣列的函式，它有著 Array 建構式是沒有的特性，在此把學習的過程做個紀錄。

內容

  範例如下

console.log( Array.from( [1 , 2 , 3 ] ) );//[1, 2, 3]
console.log( Array.from( [1 , 2 , 3 ] , (ele) => ele + 1 ) );//[2, 3, 4]
//
console.log( Array.from( 'Hello') );//["H", "e", "l", "l", "o"]

Array.from() 直接輸入一個陣列就可以複製出一個一樣陣列，Array 建構式也可以做出類似的事，但 Array.from()  可以多輸入一個函式來對複製的內容加工，範例對每個內容作加一。 Array.from() 還支援一個特別的用法就是如果輸入一個字串，它會複製出一個把字串的每個字拆成元素的陣列，如範例最後一例所示。

參考資料

[ developer.mozilla.org ] Array.from()

 關於 Array.filter()

前言

  在 Array 提取符合某個條件的元素是很常見的功能，可以透過 Array.filter() 來完成，在此把學習的過程做個紀錄。

內容

  範例如下

let ar = [2, 5, 8, 1, 4];
let strAr = [ 'A123' , 'ABCDEF' , 'xyz'];
//
console.log( ar.filter( (ele) => ele>=5) );//[5, 8]
console.log( strAr.filter( (ele) => ele.length>=5) );//["ABCDEF"]
console.log( strAr.filter( (ele) => ele.length>=10) );//[]

Array.filter() 輸入篩選條件的函式後，就可以在回傳值得到符合條件的結果，如果沒有符合的結果會回傳空陣列而不是 undefined。

參考資料

[ developer.mozilla.org ] Array.prototype.filter()

 關於 Array.reduceRight() 

前言

  在之前的 關於 Array.reduce() 學習了 Array.reduce() ，這次來學習 Array.reduceRight()  ，在此把學習的過程做個紀錄。

內容

  範例如下

let ar = [ 1, 2, 3, 4 ];
let sum = ar.reduceRight( 
  ( previousValue , currentValue) =>{
    console.log(currentValue);
    return previousValue+currentValue ;
  }, 
  0
);
// 4
// 3
// 2
// 1

console.log( `sum:${sum}`);//10

Array.reduceRight() 的用法和 Array.reduce()  是一樣的，差別是陣列瀏覽的順序是倒過來的!範例會在每次瀏覽時列印數值，可以知道是反著瀏覽陣列。

參考資料

[ developer.mozilla.org ] Array.prototype.reduceRight()

相關文章與資料

關於 Array.reduce()

 關於 Array.join()

前言

  要列印陣列的內容要怎麼做呢?直接列印是個方法，不過還可以透過 Array.join() ，它的作用非常適合拿來列印，最近才發現，在此把學習的過程做個紀錄。

內容

  範例如下

const ar = [2, 'abc', 3, 'def', 9, 'ghi' ];
console.log( ar.join() );//2,abc,3,def,9,ghi
console.log( ar.join( '_' ) );//2_abc_3_def_9_ghi
console.log( `[${ar.join() }]`);//[2,abc,3,def,9,ghi]
console.log(ar);//[2, "abc", 3, "def", 9, "ghi"]

Array.join() 的功能是輸出每個內容用"分隔符號"隔開的字串，如不輸入引數，"分隔符號"就是 , ，如果輸入引數就是按照輸入的內容當"分隔符號"，範例的前兩例可以看到有輸入跟沒輸入引數的差異，剩下就示範直接輸入與透過 `` 來產生內容的差異，差異是預設輸出的字串一定會有 "" ，如果是透過`` 來產生內容就可以不產生。

參考資料

[ developer.mozilla.org ] Array.prototype.join()