二維陣列扁平化

三種不同的解決方法 將二維陣列合併為單一的陣列

給定一個陣列:

var myArray = [[1, 2],[3, 4, 5], [6, 7, 8, 9]];

我們想得到這個結果:

[1, 2, 3, 4, 5, 6, 7, 8, 9]

方法一:

var myNewArray = [];
for (var i = 0; i < myArray.length; ++i) {
    for (var j = 0; j < myArray[i].length; ++j){
        myNewArray.push(myArray[i][j]);
    }
}
console.log(myNewArray);
// [1, 2, 3, 4, 5, 6, 7, 8, 9]
Add a comment

介紹

SheetJS js-xlsx一款能夠讀寫Excel的.xls、.xlsx格式表格的插件,瀏覽器支持良好,並且能在多個平台上使用,目前在github上有12602個star,在這邊的範例主要使用React,再加上SheetJS js-xlsx及react-input-files,讓你一個按鈕,簡單的實現直接選檔上傳。

Add a comment

react-router 4中NavLink可加入activeClassName='active'屬性,使得選單在切換時class加入active,可對這個active class寫css style樣式,達到選單切換的效果。

設定成以下,to="/"表示index首頁,但是他都會一只處於active狀態,並不會因為像切換其他的選單而改變。

<NavLink activeClassName='active' to="/">
   Home
</NavLink>
Add a comment

添加前導零

sprintf() 函數把格式化的字符串寫入變量中。
str_pad() 函數把字符串填充為新的長度。

$id = 23;
$sn1 = sprintf("%04d",$id); //方法一 0023
$sn2 = str_pad($id,4,"0",STR_PAD_LEFT); //方法二 將數字由左邊補零至四位數 0023

去掉前導零

intval() 獲取變量的整數值。
ltrim() 函數移除字符串左側的空白字符或其他預定義字符。

$sn = 0023;
$id1 = intval($sn); //方法一 23
$id2 = ltrim($sn,"0"); //方法二 23
Add a comment

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

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

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

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

let component_es5 = 
'<header>\n'+
    '<div class="banner">\n'+
        '<img src="/img1.jpg"\n'+
    '</div>\n'+
'</header>'

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

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

通過物件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
Add a comment

獲取包含物件的陣列的索引的最佳方法是什麼?

想像這種情況:

var myArray = [
    //陣列的索引0
    {
        hello: 'leon',
        foo: 'baz'
    },
    //陣列的索引1
    {
        hello: 'stevie',
        foo: 'zoo'
    }
]

在這個例子中,若想使用indexOf方法取得它將是。hello:'stevie' 索引的值為 1要如何做呢?

Add a comment

過去我們可以使用 for, while, do while, for...in 等內在的函式來處理資料,而在 ES6 中我們多了 for...of 這個簡易的用法來處理這些疊代型的資料(iterable objects),包含陣列、字串、map、set、等等...。

陣列中 for...of 的基本用法

for...of 的使用非常簡單,以陣列為例:

let arr = [10, 20, 30]

for(let value of arr){
  console.log(value);  // 10, 20, 30
}

只要用這樣的方式,就可以把陣列的值一個個取出,不用像過去寫一大串像是 for(let i = 0; i < arr.length; i++){...} 是不是方便許多呢

Add a comment