- 詳細內容
- 分類: Javascript
yarn加速安裝的秘密
yarn 在於根目錄下.yarn-cache這個資料夾，會將每次安裝套件先cache一份到這來，往後如果需要相同套件，就會從這邊拉。
大多數的指令用法和原本並無差異，只要將 npm 換成 yarn即可，特別要注意的是 npm install [package] 安裝少數套件在 yarn 是不支援的，yarn 的套件都是必須儲存 (--save)。
Add a comment- Hits: 718
- 詳細內容
- 分類: Javascript
二維陣列扁平化
三種不同的解決方法 將二維陣列合併為單一的陣列
給定一個陣列：
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]- Hits: 1054
- 詳細內容
- 分類: Javascript
介紹
SheetJS js-xlsx 是一款能夠讀寫Excel的.xls、.xlsx格式表格的插件，瀏覽器支持良好，並且能在多個平台上使用，目前在github上有12602個star，在這邊的範例主要使用React，再加上SheetJS js-xlsx及react-input-files，讓你一個按鈕，簡單的實現直接選檔上傳。
Add a comment- Hits: 768
- 詳細內容
- 分類: Javascript
通過物件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- Hits: 3353
- 詳細內容
- 分類: Javascript
獲取包含物件的陣列的索引的最佳方法是什麼？
想像這種情況：
var myArray = [
//陣列的索引0
{
hello: 'leon',
foo: 'baz'
},
//陣列的索引1
{
hello: 'stevie',
foo: 'zoo'
}
]在這個例子中，若想使用indexOf方法取得它將是。hello:'stevie' 索引的值為 1要如何做呢?
Add a comment- Hits: 1943
- 詳細內容
- 分類: Javascript
react-router 4中NavLink可加入activeClassName='active'屬性，使得選單在切換時class加入active，可對這個active class寫css style樣式，達到選單切換的效果。
設定成以下，to="/"表示index首頁，但是他都會一只處於active狀態，並不會因為像切換其他的選單而改變。
<NavLink activeClassName='active' to="/">
Home
</NavLink>- Hits: 161
- 詳細內容
- 分類: PHP
添加前導零
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- Hits: 958
- 詳細內容
- 分類: Javascript
在 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>
`- Hits: 316