「我如果能夠遙望彼方,那完全是因為我站在巨人肩膀上的緣故。」
 

01 七月 2019 | 文

如何使用Javascript物件key對陣列array進行group分群組

通過物件key對array進行分組,然後根據分組創建一個新的物件陣列?例如以下,有一個car陣列物件,要對make這個key作為分組關鍵:

var cars = [ { 'make': 'audi', 'model': 'r8', 'year': '2012' }, { 'make': 'audi', 'model': 'rs5', 'year': '2013' }, { 'make': 'ford', 'model': 'mustang', 'year': '2012' }, { 'make': 'ford', 'model': 'fusion', 'year': '2015' }, { 'make': 'kia', 'model': 'optima', 'year': '2012' }, ]; //re-usable method Array.prototype.groupBy = function(prop) { return this.reduce(function(groups, item) { const val = item[prop] groups[val] = groups[val] || [] groups[val].push(item) return groups }, {}) }; // initiate your groupBy. Notice the recordset Cars and the field Make.... const groupByMake = cars.groupBy('make'); console.log(groupByMake); //At this point we have objects. You can use Object.keys to return an array
24 六月 2019 | 文

Javascript ES6好用的模版字符串template literal

在 ES6 中,我們多了一個非常好用的模版字符串(template literal),如果你會在 JS 中「放入 HTML 的內容」、或者有「很長的字串包含換行」、又或者會有「字串連結變數」這樣的需求,模版字符串會是非常方便的作法。

另外,在 ES6 中可以將模版字符串和函式結合使用,形成一個標籤模版(tagged template),可以以此過濾 HTML 字串,避免使用者輸入惡意內容。

模版字符串(template literal)的基本應用

模版字符串的使用非常簡單,就是使用反引號" ` "(鍵盤左上角的~),舉例來說,如果我們會在 JS 的字串中放入 HTML 內容,在過去我們可能需要這樣寫:

let component_es5 = '<header>

'+ '

'+ ''

這麼寫相當麻煩,而且不易閱讀。而在 ES6 中我們可以用反引號快速的解決這樣的狀況:

let component_es6 = ` <header> <div class='banner'> <img src="/img1.jpg> </div> </header> `
                            </div>


© UCAMC. All rights reserved.
Powered by CITIAR.