PIXNET Logo登入

空境界

跳到主文

無限生命的流轉！！需要社工、前端相關資料的人，可以到右邊找找。

部落格全站分類：生活綜合

  • 相簿
  • 部落格
  • 留言
  • 名片
  • 11月 26 週二 202411:28

  • [regex]


'aaasdofjaopfjopaiiisjssfopiasdfffff'.match(/(.)\1+/g) -----> ["aaa", "iii", "ss", "fffff"]
(繼續閱讀...)
文章標籤

bingzhichen 發表在 痞客邦 留言(0) 人氣(4)

  • 個人分類：JavaScript
▲top
  • 11月 19 週二 202416:45

  • [Javascript][Typescript] Flat Object


        let entry: object = {
            a: {
                b: {
                    c: {
                        dd: 'abcdd',
                    },
                },
                d: {
                    xx: 'adxx',
                },
                e: 'ae',
            },
        };
 
        let output: object = {
            'a.b.c.dd': 'abcdd',
            'a.d.xx': 'adxx',
            'a.e': 'ae',
        };
(繼續閱讀...)
文章標籤

bingzhichen 發表在 痞客邦 留言(0) 人氣(5)

  • 個人分類：JavaScript
▲top
  • 11月 29 週二 202216:56

  • [Javascript][Typescript] multiple filter 多條件過濾、篩選


let data: Model.IFilterData[] = JSON.parse(JSON.stringify(this.originalFilterData));
        let filterKeys: { key: string, value: string }[] = {
            { key: 'name', value: "Name" },
            { key: 'age', value: "Age" },
            { key: 'id', value: "Id" },
            { key: 'email', value: "Email" },
        };

        // filter
        if (!!filterKeys && filterKeys.length > 0) {
            // 整理為物件
            let filterKeyDirectory = {};
            filterKeys.forEach((element) => {
                let key: string = element.key;
 
                if (!filterKeyDirectory[key]) {
                    filterKeyDirectory[key] = [];
                }
 
                filterKeyDirectory[key].push(element.selectedKey);
            });
            // 篩選資料
            data = data.filter((item) => {
                for (let key in filterKeyDirectory) {
                    if (item[key] === undefined || filterKeyDirectory[key].indexOf(item[key]) === -1) {
                        return false;
                    }
                }
                return true;
            });
        }
(繼續閱讀...)
文章標籤

bingzhichen 發表在 痞客邦 留言(0) 人氣(39)

  • 個人分類：JavaScript
▲top
  • 2月 15 週二 202217:01

  • [Javascript][Typescript] Convert js / ts string dot notation object to nested object / 將 js / ts 點符號字串物件轉換為巢狀物件


// way 1
setTimeout(() => {
    let convertData = resolveDataString(DataString);
    console.log(`convertData  => `, convertData);
}, 0);

/**
 * use while
 *
 * @param {object} obj
 * @return {*}
 */
function resolveData(obj: object): object {
    let result: object = {};
 
    let keyValue = Object.entries(obj);
    for (const [key, value] of keyValue) {
        // Split key keys array
        const keys: string[] = key.split('.');
 
        // Create sub-objects along key as needed
        let target: object = result;
        while (keys.length > 1) {
            const shiftKey = keys.shift();
            let targetValue = (target[shiftKey] = target[shiftKey] || {});
            target = targetValue;
            // target = target[shiftKey] = target[shiftKey] || {};
        }
 
        // Set value at end of path
        target[keys[0]] = value;
    }
 
    return result;
}
 
function resolveDataString(data: string): any {
    let result: object = {};
 
    let dataObj = data.split('\n');
 
    dataObj.forEach((data) => {
        let splitData: string[] = data.split('=');
        result[splitData[0]] = splitData[1];
    });
 
    return resolveData(result);
}
 
// way 2
setTimeout(async () => {
    let strs: string[][] = DataString .split(/(\r)?\n/)
        .filter((n) => !!n)
        .map((n) => n.split(/\.|=/).filter((n) => !!n));
 
    let obj: object = {};
    for (let i: number = 0; i < strs.length; i++) {
        Cut(obj, strs[i]);
    }
 
    console.log(JSON.stringify(obj, null, 4));
}, 0);
 
/**
 * use recursive
 *
 * @param {object} obj
 * @param {string[]} keys
 */
function Cut(obj: object, keys: string[]) {
    if (keys.length > 2) {
        if (!obj[keys[0]]) {
            obj[keys[0]] = {};
        }
        Cut(obj[keys[0]], keys.splice(1, keys.length - 1));
    } else {
        console.log(keys);
        if (/[0-9]/.test(keys[1])) obj[keys[0]] = parseInt(keys[1]);
        else if (/true|false/.test(keys[1])) obj[keys[0]] = keys[1] === 'true';
        else obj[keys[0]] = keys[1];
    }
}
 
const DataString = `scheduleView.today.en-US=Today
scheduleView.today.zh-CN=true
scheduleView.today.zh-TW=当天
scheduleView.today.ko-KR=123
scheduleView.today.ja-JP=오늘
scheduleView.tues.en-US=Tues.
scheduleView.tues.zh-CN=false
scheduleView.tues.zh-TW=周二
scheduleView.tues.ko-KR=456
scheduleView.tues.ja-JP=화요일
scheduleView.week.fri.en-US=fri.
scheduleView.week.fri.zh-CN=true
scheduleView.week.fri.zh-TW=五
scheduleView.week.fri.ko-KR=789
scheduleView.week.fri.ja-JP=ブランド`;
(繼續閱讀...)
文章標籤

bingzhichen 發表在 痞客邦 留言(3) 人氣(149)

  • 個人分類：JavaScript
▲top
  • 2月 15 週二 202216:40

  • [Javascript][Typescript] Convert js / ts dot notation object to nested object / 將 js / ts 點符號物件轉換為巢狀物件

 
setTimeout(() => {
    let convertData = resolveData(Data);
    console.log(`convertData => `, convertData);
}, 0);
 

/**
 * use while
 * https://stackoverflow.com/questions/7793811/convert-javascript-dot-notation-object-to-nested-object
 *
 * @param {object} obj
 * @return {*}
 */
function resolveData(obj: object): object {
    let result: object = {};
 
    let keyValue = Object.entries(obj);
    for (const [key, value] of keyValue) {
        // Split key keys array
        const keys: string[] = key.split('.');
 
        // Create sub-objects along key as needed
        let target: object = result;
        while (keys.length > 1) {
            const shiftKey = keys.shift();
            let targetValue = (target[shiftKey] = target[shiftKey] || {});
            target = targetValue;
            // target = target[shiftKey] = target[shiftKey] || {};
        }
 
        // Set value at end of path
        target[keys[0]] = value;
    }
 
    return result;
}
 
const Data = {
    'scheduleView.today.en-US': 'Today',
    'scheduleView.today.zh-CN': '當天',
    'scheduleView.today.zh-TW': '当天',
    'scheduleView.today.ko-KR': '今日',
    'scheduleView.today.ja-JP': '오늘',
 
    'scheduleView.tues.en-US': 'Tues.',
    'scheduleView.tues.zh-CN': '週二',
    'scheduleView.tues.zh-TW': '周二',
    'scheduleView.tues.ko-KR': '水曜日',
    'scheduleView.tues.ja-JP': '화요일',
 
    'scheduleView.week.fri.en-US': 'fri.',
    'scheduleView.week.fri.zh-CN': '五',
    'scheduleView.week.fri.zh-TW': '五',
    'scheduleView.week.fri.ko-KR': '브랜드',
    'scheduleView.week.fri.ja-JP': 'ブランド',
};
(繼續閱讀...)
文章標籤

bingzhichen 發表在 痞客邦 留言(0) 人氣(12)

  • 個人分類：JavaScript
▲top
  • 5月 05 週三 202123:27

  • [Javascript][Typescript] nested object recursive / 巢狀 物件 遞迴 反轉物件的 key value


       
        /**
         * Please use TypeScript/JS to answer question
         * Welcome to answer with unit testing code if you can
         *
         * After you finish coding, please push to your GitHub account and share the link with us.
         */
        // Please write a function to reverse the following nested input value into output value
 
        // Input:
        const inputValue: Object = {
            aa: {
                bb: {
                    cc: {
                        dd: {
                            ee: {
                                ff: {
                                    gg: {
                                        hh: 'final',
                                    },
                                },
                            },
                        },
                    },
                },
            },
        };
 
        // Output:
        const outputValue: Object = {
            final: {
                hh: {
                    ff: {
                        ee: {
                            dd: {
                                cc: {
                                    bb: {
                                        aa: 'final',
                                    },
                                },
                            },
                        },
                    },
                },
            },
        };
 
      // way 1  
        let keys: string[] = []
 
        function getKeys(obj): void {
            Object.keys(obj).forEach(key => {
                keys.push(key)
                if (typeof obj[key] === 'object') {
                    getKeys(obj[key])
                } else {
                    keys.push(obj[key])
                }
            })
        }
 
        function getOutputValue(): void {
 
            let res = keys[0]
            for (let i = 1; i < keys.length; i++) {
                let key = keys[i];
                res = {
                    [key]: res,
                };
            }
            return res;
        }
 
        console.log('getOutputValue => ', getOutputValue());
 
        // way 2 遞迴: first output can be next input
        /*
         * originalObj: original obj
         * result: new result
         * count: check if first time
         */
        function _getKeys(originalObj, result, count): Object {
            // console.log('_getKeys', obj, result, count);
            return Object.keys(originalObj).map((key) => {
                // console.log('map => ', key, obj[key]);
                if (typeof originalObj[key] === 'object') {
                    // first time
                    if (count === 0) {
                        return _getKeys(originalObj[key], key, count += 1);
                    }
 
                    let _result = {
                        [key]: result
                    }
                    return _getKeys(originalObj[key], _result, count += 1);
                } else {
                    // last key value
                    return {
                        [originalObj[key]]: {
                            key: result,
                        },
                    };
                }
            })[0];
        }
 
        let result = _getKeys(inputValue, undefined, 0);
 
        console.log('result => ', result);
 
(繼續閱讀...)
文章標籤

bingzhichen 發表在 痞客邦 留言(0) 人氣(91)

  • 個人分類：JavaScript
▲top
  • 2月 19 週五 202121:38

  • [JavaScript][HTML] textarea auto height 高度隨內容增加


    private formTextareaAuto(): void {
        var textarea = document.getElementsByTagName('textarea');
        setTimeout(() => {
            for (var i = 0; i < textarea.length; i++) {
                textarea[i].style.height = 'auto';
                textarea[i].scrollTop = 0; //防抖動
                //有可能這個初始化高度賦值沒有賦上去
                textarea[i].style.height = textarea[i].scrollHeight + 'px';
                textarea[i].addEventListener('input', (e: any) => {
                    e.target.style.height = 'auto';
                    e.target.scrollTop = 0; //防抖動
                    e.target.style.height = e.target.scrollHeight + 'px';
                });
            }
        }, 200);
    }
(繼續閱讀...)
文章標籤

bingzhichen 發表在 痞客邦 留言(0) 人氣(301)

  • 個人分類：JavaScript
▲top
  • 4月 27 週一 202022:57

  • [JavaScript] [Vue] 套件 vue2-datepicker封裝應用 做出 date range + 快速選擇 元件

<template>
<div class="animated fadeIn">
<div class="flex-right">
<date-picker
 :format="datetime.FormatDate"
 :title-format="datetime.FormatDate"
 :placeholder="_('w_DateSelectDates')"
 :range="true"
 :clearable="false"
 type="date"
 class="col-md-3"
 v-model="inputDatum.dateRange"
 @input="updateDateRange"

>
<template v-slot:sidebar="{ emit }">
<div style="text-align: left">
<button class="mx-btn mx-btn-text col-md-12" @click="selectToday(emit)">Today</button>
<button class="mx-btn mx-btn-text col-md-12" @click="selectYesterday(emit)">Yesterday</button>
<button class="mx-btn mx-btn-text col-md-12" @click="selectLast7days(emit)">Last 7 days</button>
<button class="mx-btn mx-btn-text col-md-12" @click="selectThisWeek(emit)">This Week</button>
<button class="mx-btn mx-btn-text col-md-12" @click="selectLastWeek(emit)">Last Week'</button>
<button class="mx-btn mx-btn-text col-md-12" @click="selectThisMonth(emit)">This Month</button>
<button class="mx-btn mx-btn-text col-md-12" @click="selectLastMonth(emit)">Last Month</button>
<button class="mx-btn mx-btn-text col-md-12" @click="selectQ1(emit)">Q1</button>
<button class="mx-btn mx-btn-text col-md-12" @click="selectQ2(emit)">Q2</button>
<button class="mx-btn mx-btn-text col-md-12" @click="selectQ3(emit)">Q3</button>
<button class="mx-btn mx-btn-text col-md-12" @click="selectQ4(emit)">Q4</button>
<button class="mx-btn mx-btn-text col-md-12" @click="selectThisYear(emit)">This Year</button>
</div>
</template>
</date-picker>
</div>
</div>
</template>
(繼續閱讀...)
文章標籤

bingzhichen 發表在 痞客邦 留言(0) 人氣(1,216)

  • 個人分類：JavaScript
▲top
  • 3月 23 週一 202023:20

  • [JavaScript] [Vue] 使用 html2Canvas + JsPDF 下載 pdf

<template>
<div>
<b-col cols="6">
<b-button
 variant="primary"
 @click="pdfExport"
 >
<i class="fa fa-file-pdf-o"></i>
&nbsp;
 Export PDF
</b-button>
</b-col>
</div>
</template>
(繼續閱讀...)
文章標籤

bingzhichen 發表在 痞客邦 留言(0) 人氣(1,334)

  • 個人分類：JavaScript
▲top
  • 1月 10 週五 202000:21

  • [JavaScript] [Vue] 套件 vue-ctk-date-time-picker 封裝應用 做出 date range + 快速選擇 元件

<template>
<div>
<p class="title-date" v-if="isTitle">Select Dates</p>
<vue-ctk-date-time-picker
 :no-label="true"
 :range="true"
 :custom-shortcuts="shortcuts"
 formatted="YYYY/MM/DD"
 format="YYYy/MM/DD"
 disabled-dates="disabledDates"
 v-model="date"
 @is-hidden="validateDate"
 @validate="validateDate"
 id="range"
 >
</vue-ctk-date-time-picker>
</div>
</template>
(繼續閱讀...)
文章標籤

bingzhichen 發表在 痞客邦 留言(0) 人氣(550)

  • 個人分類：JavaScript
▲top
12...4»

近期文章

  • [regex]
  • [Javascript][Typescript] Flat Object
  • [scss] scss 選擇器 ＞ + ~
  • [git] 2.35.2 安全修正 設定
  • [setting] 安裝/解除安裝node.js出現Invalid drive錯誤
  • [Javascript][Typescript] multiple filter 多條件過濾、篩選
  • [鑽石王牌][晉江] 同人整理 御澤 無CP
  • [Javascript][Typescript] Convert js / ts string dot notation object to nested object / 將 js / ts 點符號字串物件轉換為巢狀物件
  • [Javascript][Typescript] Convert js / ts dot notation object to nested object / 將 js / ts 點符號物件轉換為巢狀物件
  • [cmd] 清除被佔的 port

最新迴響

  • [24/03/27] 訪客 於文章「職業性皮膚疾病（整理自 郭育良等的職業病...」留言：
    過敏纏身真的很難受，所以要從免疫力下手 我們家兩個寶貝從小...
  • [22/10/12] I am winnie 於文章「精神分裂症（持續6個月出現2個以上的正性...」留言：
    謝謝分享~...
  • [22/09/14] 江江江 於文章「[Javascript][Typescr...」發表了一則私密留言
  • [22/09/14] 江江江 於文章「[Javascript][Typescr...」發表了一則私密留言
  • [22/05/31] 太妃糖 於文章「信度、效度（講義）...」留言：
    清楚明瞭看課本都看不懂呢!...
  • [22/04/12] 訪客 於文章「家族治療 Ch.9結構取向的理論與實務（...」留言：
    回饋您這方面資訊，我是從 PTT搜尋引擎的排名，看...
  • [21/10/11] Kelvin Chan 於文章「[Vue] Vue CLI 3 中 使用...」留言：
    BOOTSTRAP教學課程 (入門篇) 7個章節 - 由淺入...
  • [20/08/12] kenyds 於文章「[HTML] [Vue] 蒙板元件...」發表了一則私密留言
  • [20/04/01] Kawaii RFB 於文章「[筆試][面試] 政府委辦 巨匠 職訓 ...」留言：
    課程很熱門就很難錄取了~~...
  • [20/04/01] Kawaii RFB 於文章「[筆試][面試] 政府委辦 巨匠 職訓 ...」發表了一則私密留言

文章搜尋

個人頭像

bingzhichen
暱稱：
bingzhichen
分類：
生活綜合
好友：
累積中
地區：

文章彙整

文章分類

toggle Web前端 (5)
  • CSS (2)
  • React (3)
  • 環境配置設定相關 (13)
  • Vue (9)
  • JavaScript (33)
toggle Java程式設計 (1)
  • Java程式設計基礎 (1)
toggle 輔大社工 (17)
  • 基本醫學常識 (4)
  • 社工研究法 (14)
  • 團體工作 (4)
  • 半集體主義 (5)
  • 法學緒論 (4)
  • 社會個案工作 (12)
  • 心理衛生 (10)
  • 團體動力學 (6)
  • 少犯觀護 (6)
  • 勞工實務問題 (8)
  • 醫務社工 (9)
  • 會談技巧 (3)
  • 精神醫療社工 (3)
  • 社會心理學 (4)
  • 社會保險 (3)
  • 社會福利行政 (4)
  • 家族治療 (7)
toggle 輔大公衛 (2)
  • 職業病概論 (9)
  • 醫療社會學 (1)
  • 電視劇推薦 (3)
  • 課程推薦 (2)
  • 音樂推薦 (2)
  • 城市尋寶 (1)
  • 面試紀錄 (4)
  • 未分類文章 (1)

參觀人氣

  • 本日人氣：
  • 累積人氣：