some demos

import '../css/detail.css';

// 找到字符串中重複次數最多的字符
function findMax(str) {
  let maxChar = '';
  let maxValue = 1;

  if (!str.length) return;
  let arr = str.replace(/\s/g, '').split('');
  let obj = {};
  for (let i = 0; i < arr.length; i++) {
    if (!obj[arr[i]]) {
      obj[arr[i]] = 1;
    } else {
      obj[arr[i]]++;
    }
  }
  let keys = Object.keys(obj);
  for (let j = 0; j < keys.length; j++) {
    if (obj[keys[j]] > maxValue) {
      maxValue = obj[keys[j]];
      maxChar = keys[j];
    }
  }

  return {
    maxChar, maxValue
  }
}

function findMax1() {
  let maxChar = '';
  let maxValue = 1;
  let h = {};
  if (!str.length) return;
  let arr = str.replace(/\s/g, '').split('');
  for (let i = 0; i < arr.length; i++) {
    let a = arr[i];
    h[a] === undefined ? h[a] = 1 : h[a]++;
    if (h[a] > maxValue) {
      maxChar = a;
      maxValue = h[a];
    }
  }
  return {
    maxChar, maxValue
  }
}

function findMax2() {
  let maxChar = '';
  let maxValue = 1;
  if (!str.length) return;
  let arr = str.replace(/\s/g, '').split('');
  let obj = arr.reduce((acc, curVal) => {
    acc[curVal] ? acc[curVal]++ : acc[curVal] = 1;
    if (acc[curVal] > maxValue) {
      maxChar = curVal;
      maxValue = acc[curVal];
    }
    return acc;
  }, {}) 
  return {
    maxChar, maxValue
  }
}

/* 
  \d 任意一個數字，0~9 中的任意一個
  \w 任意一個字母或數字或下劃線，也就是 A~Z,a~z,0~9,_ 中任意一個
  \s 包括空格、製表符、換頁符等空白字符的其中任意一個
. 小數點能夠匹配除了換行符（\n）之外的任意一個字符 
*/
function findMax3(str) {
  let maxChar = '';
  let maxValue = 1;
  if (!str.length) return;
  let arr = str.replace(/\s/g, '').split('');
  let obj = {};
  str.replace(/\s/g, '').replace(/(\w)/g, (word, p) => {
    obj[p] ? obj[p]++ : obj[p] = 1;
    if (obj[p] > maxValue) {
      maxValue = obj[p];
      maxChar = p;
    }
  });
  return {
    maxChar, maxValue
  }

}

function findMax4(str) {
  let maxChar = '';
  let maxValue = 1;
  if (!str.length) return;
  let arr = str.replace(/\s/g, '').split('');
  Array.prototype.getMost = function() {
    let obj = this.reduce((acc, cur) => {
      acc[cur] ? acc[cur]++ : acc[cur] = 1;
      acc.max = acc[cur] > acc.max ? acc[cur] : acc.max;
      acc.key = acc[cur] > acc.max ? cur : acc.key;
      return acc;
    }, {});
    return obj;
  }
  // return arr.getMost();
}

const str = 'this is a test 222222 ts project. skajdf; 222sldjfwel p'

const reducer = (accumulator, currentValue, b, c) => {
  let obj = {};
  obj[b] = currentValue;
  return obj;
}
const array1 = [1, 2, 3, 4];
// console.log(array1.reduce(reducer));

console.log(findMax(str));
console.log('findMax1', findMax4(str));

/**
 * 輸入一個整形數組，數組裏有正數也有負數。數組中連續的一個或多個整數組成一個子數組，每一個子數組都有一個和。 求全部子數組的和的最大值，要求時間複雜度爲O(n)。
 */
function findMaxSubArr(arr) {
  console.log(arr)
  let max = arr[0];
  let currSum = 0;
  for (let i = 0; i < arr.length; i++) {
    if (currSum < 0) {
      currSum = arr[i];
    } else {
      currSum += arr[i]; 
    }
    if (currSum > max) {
      max = currSum;
    }
  }
  return max;
}

// console.log('maxsubarr', findMaxSubArr([1, -2, 3, 10, -4, 7, 2, -5]));

// 輸出結果
console.log('begin');
setTimeout(() => {
  console.log('settimeout 1')
  Promise.resolve().then( () => {
    console.log('promise 1')
    setTimeout(() => {
      console.log('settimeout 2');
    });
  }).then(() => {
    console.log('promise 2');
  })
}, 0);
console.log('end');

/**
 * 類數組轉成數組
 */
const nodes = document.querySelectorAll('div');
// nodes.map(item => {});

// 1.for直接遍歷

// 2.這種方法是借用了數組原型中的slice方法，返回一個數組
Array.prototype.slice.call(nodes).map(item => {});
[].slice.call(nodes).map(item => {console.log()});

// 3.Array.from() 方法從一個相似數組或可迭代對象中建立一個新的數組實例。
Array.from(nodes).map(item => {})

// 4.一樣是ES6中新增的內容，擴展運算符（…）也能夠將某些數據結構轉爲數組
const nodeList = [...nodes];
function getlist(a,b,c,d) {
  // console.log(arguments);
  // console.log([...arguments][0])
}
getlist(11, 2, 3, 4);

// 使用reduce方法實現forEach、map、filter
const arr1 = [12, 21, 3];
const arr2 = arr1.map(function(item) {
  // console.log(this, item)
  return item*2
}, { msg: 'mapping' })
// console.log(arr1, arr2)

// github上的
Array.prototype.selfMap = function () {
  const ary = this
  const result = []
  const [ fn, thisArg ] = [].slice.call(arguments)
  if (typeof fn !== 'function') {
    throw new TypeError(fn + 'is not a function')  
  }
  for (let i = 0; i < ary.length; i++) {
    result.push(fn.call(thisArg, ary[i], i, ary))
  }
  return result
}

Array.prototype.reduceMap = function (fn, thisArg) {
  // return (list) => {
      // 不怎麼願意寫下面這兩個判斷條件
      const list = this
      if (typeof fn !== 'function') {
          throw new TypeError(fn + 'is not a function')  
      }
      if (!Array.isArray(list)) {
          throw new TypeError('list must be a Array')
      }
      if (list.length === 0) return []
      return list.reduce((acc, value, index) => {
          return acc.concat([ fn.call(thisArg, value, index, list) ])
      }, [])
  // }
}

// mine
Array.prototype.imitateMap = function () {
  const list = this;
  const result = []
  const [fn, thisArg] = [].slice.call(arguments)
  if (typeof fn !== 'function') {
    throw new TypeError(fn + 'is not a function');
  }
  for (let i = 0; i < list.length; i++) {
    result.push(fn.call(thisArg, list[i], i, list));
  }
  return result;
}

Array.prototype.imitateReduceMap = function () {
  const list = this;
  const result = []
  const [fn, thisArg] = [].slice.call(arguments)
  if (typeof fn !== 'function') {
    throw new TypeError(fn + 'is not a function');
  }
  if (!Array.isArray(list)) {
    throw new TypeError(list + 'is not a Array');
  }
  return list.reduce((acc, curValue, index) => {
    return acc.concat([fn.call(thisArg, curValue, index, list)]);
  }, [])
}

const imitateReduceMap1 = function (fn, thisArg) {
  return (list) => {
    const result = []
    if (typeof fn !== 'function') {
      throw new TypeError(fn + 'is not a function');
    }
    if (!Array.isArray(list)) {
      throw new TypeError(list + 'is not a Array');
    }
    return list.reduce((acc, curValue, index) => {
      return acc.concat([fn.call(thisArg, curValue, index, list)]);
    }, [])
  }
}

console.log('imitateMap', arr1, arr1.imitateMap(function(item) {
  console.log('imitateMap this', this)
  return item + 1
}, { msg: 'mapping' }) )
console.log('imitateReduceMap', [ 1, 2, 3 ].imitateReduceMap(x => x + 1));
console.log('imitateReduceMap1', imitateReduceMap1(x => x + 1)([ 1, 2, 3 ]));

/**
 * 實現repeat方法
 */
function repeat(func, times, wait) {
  return (str) => {
    let count = 0;
    const timer = setInterval(() => {
      if (count < times) {
        // func.call(this, str);
        count++;
      } else {
        clearInterval(timer);
      }
      
    }, wait);
  }
}

const repeatFunc = repeat(alert, 3, 2000)

repeatFunc('helloworld');

/**
 * 實現一個簡單的雙向綁定
 * 1.發佈-訂閱模式
 * 2.髒值檢測
 * 3.數據劫持
 * Vue.js 採用的是 數據劫持+發佈/訂閱模式 的方式，經過 Object.defineProperty() 來劫持各個屬性的 setter/getter， 在數據變更時發佈消息給訂閱者（Wacther）, 觸發相應的監聽回調
 */
// 基於Object.defineProperty 實現數據劫持，利用了對Vue.js實現雙向綁定的思想
const obj = {}
Object.defineProperty(obj, 'txt',{
  get:function(){
    return obj
  },
  set:function(newValue){
    document.getElementById('txt').value = newValue
    document.getElementById('show-txt').innerHTML = newValue
  }
})
document.addEventListener('keyup', function(e){
  obj.txt = e.target.value
})