fezaoduke / fe-practice-hard Goto Github PK

function format(type) {
  let text = str.innerText || str.textContent;
  let result;

  switch(type) {
    case 1:
      result = text.bold();
      break;
    case 2:
      result = text.italics();
      break;
    case 3:
      result = text.sup();
      break;
    case 4:
      result = text.sub();
      break;      
    default:
      result = text;  
  }

  str.innerHTML = result;
}

!(window.JSON && window.JSON.parse) && !function(win) {
  win.JSON = {
    parse: function(str) {
      return new Function('return ' + str)()
    }
  }
}(window);

/**
 * @param {array} arr - 按升序排列的普通数组
 * @param {number} target - 需要在 arr 中搜索的目标值
 * @return {number} 返回 target 在 arr 中的索引值，如不存在，则返回 -1
 */
function binarySearch(arr, target) {
  // 你的代码
}

const test = [1, 3, 8, 9, 27, 34, 128, 275];

binarySearch(test, 128);  // 6
binarySearch(test, 30);  // -1

function binarySearch(arr, target) {
  let startIdx = 0;
  let endIdx = arr.length - 1;
  let midIdx = Math.floor((startIdx + endIdx) / 2);

  while(endIdx - startIdx > 1) {
    switch(target) {
      case arr[startIdx]: return startIdx;
      case arr[endIdx]: return endIdx;
      case arr[midIdx]: return midIdx;
    }

    if (target > arr[midIdx]) {  // 右边找
      startIdx = midIdx;
    } else if (target < arr[midIdx]) {  // 左边找
      endIdx = midIdx;
    }

    midIdx = Math.floor((startIdx + endIdx) / 2);
  }

  return -1;
}

document.querySelector('#list > li:last-child').scrollIntoView();

function deepCopy(obj) {
  // hash表，记录所有的对象的引用关系
  let map = new WeakMap();

  function dp(obj) {
    let result = null;
    let keys = Object.keys(obj);
    let key = null,
      temp = null,
      existobj = null;
 
    existobj = map.get(obj);

    // 如果这个对象已经被记录则直接返回
    if (existobj) {
      return existobj;
    }
 
    result = {}
    map.set(obj, result);
 
    for (let i = 0; i < keys.length; i++) {
      key = keys[i];
      temp = obj[key];

      if (temp && typeof temp === 'object') {
        result[key] = dp(temp);
      }else {
        result[key] = temp;
      }
    }

    return result;
  }

  return dp(obj);
}

var data = [1, 2, 3, 4];

var result = data.mapArr(function(it, idx, arr) {
  console.log('当前项', it);
  console.log('当前索引', idx);
  console.log('数组', arr);

  return it * 2;
});

console.log(result);  // [2, 4, 6, 8]

Array.prototype.mapArr = function(fn, context) {
  var arr = Array.prototype.slice.call(this);
  var mappedArr = [];

  for (var i = 0; i < arr.length; i++) {
    mappedArr.push(fn.call(context, arr[i], i, this));
  }

  return mappedArr;
}

/**
 * @param {number} n - 整数
 */
function fibonacci(n) {
  // 你的代码
}

function fibonacci(n) {
  var a = 0;
  var b = 1;
  var c = a + b;
  var arr = [c];

  for (var i = arr.length; i < n; i++) {
    arr.push(c);
    a = b;
    b = c;
    c = a + b;
  }

  return arr;
}

// 再来个使用递归+ES6实现的（原创）
function fibonacci(n) {
  let fn = i => i < 3 ? 1 : fn(i - 1) + fn(i - 2);
  return [...Array(n).keys()].map(it => fn(it + 1));
}

function multiSort(arr, rules, reversal) {
  return [...arr].sort((o, p) => {
    let a, b;

    for (let rule of rules) {
      a = o[rule];
      b = p[rule];

      if (a !== b) {
        return (a - b) * (reversal ? -1 : 1);
      }
    }
  });
}

// 或者挂载到 Array 构造函数的原型上
Array.prototype.multiSort = function(rules, reversal) {
  return [...this].sort((o, p) => {
    // 逻辑代码同上，此处略
  });
}

入门级
 难度★
请分别写出在浏览器控制台执行以下代码的结果
        function b(x,y,a){
            arguments[2]=10;
            console.log(a);
        };
        b(1,2,3);
        function b(x,y,a){
            'use strict'
            arguments[2]=10;
            console.log(a);
        };
        b(1,2,3);

/**
 * @param {number} n - 随机数最大范围
 */
function getRandomNum(n) {
  // 你的代码
}

// 方法1
function getRandomNum(n) {
  return Math.floor(Math.random() * n);
}

// 方法2
function getRandomNum(n) {
  return ~~(Math.random() * n);
}

// 方法3
function getRandomNum(n) {
  return (Math.random() * n) >>> 0;
}

// 方法4
function getRandomNum(n) {
  return Math.random() * n | 0;
}

function formatMoney(num) {
  // 你的代码
}

formatMoney(100);  // 100.00
formatMoney(1000);  // 1,000.00
formatMoney(1000.56);  // 1,000.56
formatMoney(1000000000.25);  // 1,000,000,000.25

function formatMoney(num) {
  // 字符串捕获（零宽度正预测先行断言）
  let regex = /\d{1,3}(?=(\d{3})+$)/g;

  // 将字符串拆分成“符号”（如有）、“整数位”和“小数位”三部分
  return String(num).replace(/^(-|\+?)(\d+)((\.\d+)?)$/, (s, s1, s2, s3) => (
    // $&表示 replace() 函数第一个正则表达式参数所匹配的内容
    s1 + s2.replace(regex, '$&,') + s3
  ));
}

const box = document.getElementById('box');

window.addEventListener('click', e => {
  let elm = e.target;

  if (elm === box || box.contains(elm)) {  // 自身或内部元素
    console.log('inner');
  } else {
    console.log('outter');
  }
});

class Promise {
  constructor (fn) {
    // 三个状态
    this.state = 'pending'
    this.value = undefined
    this.reason = undefined
    let resolve = value => {
      if (this.state === 'pending') {
        this.state = 'fulfilled'
        this.value = value
      }
    }
    let reject = value => {
      if (this.state === 'pending') {
        this.state = 'rejected'
        this.reason = value
      }
    }
    // 自动执行函数
    try {
      fn(resolve, reject)
    } catch (e) {
      reject(e)
    }
  }
  // then
  then(onFulfilled, onRejected) {
    switch (this.state) {
      case 'fulfilled':
        onFulfilled()
        break
      case 'rejected':
        onRejected()
        break
      default:
    }
  }
}

/**
 * 作者：陈煜仑
 * 链接：https://juejin.im/post/5d2ee123e51d4577614761f8
 * 来源：掘金
 * 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
 */

isObject([1, 2]);  // false
isString(123);  // false
isArray({a: 1});  // false

isObject({a: 1});  // true
isString('123');  // true
isArray([1, 2]);  // true

function isType(type) {
  return function(obj) {
    return Object.prototype.toString.call(obj) === '[object ' + type + ']'
  }
}

var isObject = isType('Object');
var isString = isType('String');
var isArray = Array.isArray || isType('Array');

async function display() {
  for (let i = 5; i > 0; i--) {
    let num = await new Promise(resolve => {
      setTimeout(() => {
        resolve(i)
      }, 1e3)
    });

    console.log(num)
  }
}

display();

/**
 * @param {string} [prop] - 需要验证的 CSS 属性名。
 * @return:
      1. 当 `prop` 为字符串时，返回当前浏览器是否支持该 CSS 属性的布尔值
      2. 当 `prop` 为空时，返回一个由当前浏览器支持的所有 CSS 属性名组成的数组
 */
function supported(prop) {
  // 你的代码
}

supported('animation');  // true
supported('background-clip');  // true
supported('mix-blend-mode');  // true
supported('-webkit-user-drag');  // true
supported('-moz-force-broken-image-icon');  // false
supported('-ms-block-progression');  // false
supported('abcd');  // false
supported();  // ["align-content", "align-items", "align-self" ... ]

function supported(prop) {
  var result = [];
  var format = function(p) {
    // 浏览器前缀处理
    var prefix = /^([webkit|moz|ms|o]+)[A-Z]+.*/.test(p) ? '-' : '';
    return prefix + p.replace(/[A-Z]/g, '-$&').toLowerCase();
  };

  if (Object.hasOwnProperty('keys') && Object.keys(document.body.style).length) {
    result = Object.keys(document.body.style).map(format);        
  } else {
    for (var key in document.body.style) {
      result.push(format(key));
    }
  }

  // 兼容 IE8
  if (!('indexOf' in Array.prototype)) {
    result = String(result);
  }

  if (typeof prop === 'undefined') {
    return typeof result === 'string' ? result.split(',') : result;
  }

  return result.indexOf(prop) === -1 ? false : true;
}

function generator(array) {
  // 你的代码
}

const arr = [
  {
    name: '张三',
    age: 18
  }, {
    name: '李四',
    age: 22
  }, {
    name: '王五',
    age: 30
  }
];

const it = generator(arr);

console.log(it.next());  // {value: {age: 18, name: "张三"}, done: false}
console.log(it.next());  // {value: {age: 22, name: "李四"}, done: false}
console.log(it.next());  // {value: {age: 30, name: "王五"}, done: false}
console.log(it.next());  // {value: undefined, done: true}

function generator(array) {
  let nextIndex = 0;

  return {
    next: function() {
      return nextIndex < array.length ?
      {value: array[nextIndex++], done: false} :
      {value: undefined, done: true};
    }
  }
}

var demo = document.getElementById('demo');

getAttributes(demo);
/**
 * 返回数据：
    {
      class: "btn btn-link",
      id: "demo",
      href: "page.html",
      title: "页面",
      role: "link"
    }
  */

function getAttributes(el) {
  // 你的代码
}

function getAttributes(el) {
  var result = {};

  [].slice.call(el.attributes).forEach(function(attr) {
    result[attr.name] = attr.value;
  });

  return result;
}

/**
 * @param {number} n - 天数
 * @return {array} 日期数组，格式：[yyyy-MM-dd, yyyy-MM-dd]
 */
function getPastDays(n) {
  // 你的代码
}

getPastDays(7);  // 获取前 7 天的日期（今天是：2019年5月13日）

// 运行返回数据：
["2019-05-06", "2019-05-07", "2019-05-08", "2019-05-09", "2019-05-10", "2019-05-11", "2019-05-12"]

function getPastDays(n) {
  // 非整数或负数，返回空数组
  if (!Number.isInteger(n) || n < 0) {
    return [];
  }

  const oneDay = 24 * 3600 * 1e3;  // 将1天时间换算成UTC毫秒数
  const preZero = num => num < 10 ? `0${num}` : num;  // 1位数前置补零

  return (
    [...Array(n).keys()]
      .map(days => new Date(Date.now() - oneDay * (days + 1)))
      .map(day => `${day.getFullYear()}-${preZero(day.getMonth() + 1)}-${preZero(day.getDate())}`)
      .reverse()  // 反转数组，按从远到近的日期顺序
  );
}

var btn = document.createElement('button');
btn.innerText = '按钮';
btn.addEventListener('click', function() {
  btn.innerText = '我被点击了-' + (+new Date());
});
document.body.appendChild(btn);

window.HTMLElement && !function() {
  HTMLElement.prototype.addListener = function(type, fn, capture) {
    var el = this;
    fn = typeof fn === 'function' ? fn : function(){};

    var bind = function() {
      el.addEventListener(type, fn, capture);
      return {
        removeListener: function() {
          el.removeEventListener(type, fn);
        }
      }
    };

    return bind();
  }
}();

var btn = document.createElement('button');
btn.innerText = '按钮';
var evt = btn.addListener('click', function() {
  btn.innerText = '我被点击了-' + (+new Date());
  evt.removeListener();
});
document.body.appendChild(btn);

/**
 * @param {array} arr - 给定的数组，数组每项为整数
 * @return {array} 返回最大数最小数组成的数组，格式：[max, min]
 */
function findMaxMin(arr) {
  // 你的代码
}

var data = [1, 2, 3, 4];

var result1 = data.reduceArr(function(total, cur, idx, arr) {
  return total + cur;
});

var result2 = data.reduceArr(function(total, cur, idx, arr) {
  return total + cur;
}, 100);

console.log(result1);  // 10
console.log(result2);  // 110

Array.prototype.reduceArr = function(fn, initialVal) {
  var arr = this;
  var result = arr[0];
  var startIdx = 1;
  
  if (typeof initialVal !== 'undefined') {
    result = initialVal;
    startIdx = 0;
  }

  for (var i = startIdx; i < arr.length; i++) {
    result = fn(result, arr[i], i, arr);
  }

  return result;
};

/**
 * @param {number} n - 圆盘数量
 * @param {string} A - 源柱子名称
 * @param {string} B - 辅助柱子名称
 * @param {string} C - 目标柱子名称
 */
function hanoi(n, A, B, C) {
  // 你的代码
}

hanoi(3, 'A', 'B', 'C');

// 控制台输出：
/*
  Move disc 1 from A to C
  Move disc 2 from A to B
  Move disc 1 from C to B
  Move disc 3 from A to C
  Move disc 1 from B to A
  Move disc 2 from B to C
  Move disc 1 from A to C
*/

function hanoi(n, A, B, C) {
  if (n > 0) {
    hanoi(n - 1, A, C, B);
    console.log(`Move disc ${n} from ${A} to ${C}`);
    hanoi(n - 1, B, A, C);
  }
}

const awards = [
  {name: '智能平衡车', chance: 0.12},
  {name: '华为 P30 Pro手机', chance: 0.06},
  {name: '蓝牙手环', chance: 0.3},
  {name: '100元购物卡', chance: 0.5},
  {name: 'Mac Book Pro', chance: 0.02}
];

let arr = awards.map(it => ({ name: it.name, chance: it.chance * 100}))
  .map((it, idx, array) => {
    if (idx > 0) {
      it.chance = it.chance + array[idx - 1].chance;  // 累加上一个临界参考点
    }
    return it;
  });

// 生成 1-99 随机数
let rdmNum = Math.floor(Math.random() * 99) + 1;

for (let award of arr) {
  if (award.chance > rdmNum) {
    console.log(`你抽中了 ${award.name}`);
    break;
  }
}  

        基础
        ★


        1 请写出四种无返回值的四种语句
        2 判断在浏览器控制台执行以下代码的结果，同时写出原因
        eval('1+2;var x=5;;;;;;function fn(){};');
        eval('1+2;var x=5;;;;;;function fn(){};void 0');

// 正常情况：
{
  "status": 200,
  "msg": "ok",
  "response": {
    "data": {
      "total": 2,
      "pageSize": 10,
      "lists": [
        { "id": 1, "name": "hello" },
        { "id": 2, "name": "world" }
      ]
    },
    "keyword": "hello world"
  }
}

// 请求异常：
{
  "status": 400,
  "msg": "bad request",
  "response": null
}

// 空数据：
{
  "status": 200,
  "msg": "ok",
  "response": {
    "data": {
      "total": 0,
      "pageSize": 10,
      "lists": null
    },
    "keyword": "hack"
  }
}

axios.get('/list?keyword=xxx')
  .then(function(res) {
    // 为了防止报错，而不得不逐级判断属性值的有效性
    if (res.response && res.response.data && res.response.data.lists) {
      render(res.response.data.lists);
    }
  });

/**
 * @param {object | array} data - 源数据
 * @param {string} fieldRoute - 字段名路径，如 a.b.c 
 */
function getDataBy(data, fieldRoute) {
  // 你的代码
}

// 正常情况：
getDataBy(res, 'response.data.lists');  // [{"id": 1, "name": "hello"}, {"id": 2, "name": "world"}]

// 请求异常：
getDataBy(res, 'response.data.lists');  // null

// 空数据：
getDataBy(res, 'response.data.lists');  // null

getDataBy(null, 'response.data.lists');  // null
getDataBy([{id: 1}, {id: 2}, {id: 3}, {id: 4}], 1);  // {id: 2}

function getDataBy(data, fieldRoute) {
  if (fieldRoute == undefined) {  // undefined | null
    return data
  }

  var fields = String(fieldRoute).split('.');
  
  return fields.reduce(function(obj, field) {
    if (obj) {
      return obj[field]
    } else {
      return null
    }
  }, data);
}

const imgUrls = [
  'https://cdn.pixabay.com/photo/2019/04/29/14/50/camogli-4166255__340.jpg',
  'https://cdn.pixabay.com/photo/2019/06/24/15/31/forest-4296305__340.jpg',
  'https://cdn.pixabay.com/photo/2019/06/27/03/42/beach-4301479__340.jpg',
  'https://cdn.pixabay.com/photo/2019/06/19/23/13/plum-blossoms-4285819__340.jpg',
  'https://cdn.pixabay.com/photo/2019/05/19/23/47/clouds-4215608__340.jpg',
  'https://cdn.pixabay.com/photo/2018/10/18/11/29/waterfowl-3756126__340.jpg'
];
const loader = new ImageLoader(imgUrls);
loader.onReady = () => {
  console.log('图片全部加载完毕');
}

class ImageLoader {
  constructor(urls) {
    this.cache = {};

    if (Array.isArray(urls)) {
      urls.forEach(url => this.load(url));
    } else {
      this.load(urls);
    }
  }

  load(url) {
    if (this.cache[url]) {
      return this.cache[url];
    }

    let img = new Image();

    img.addEventListener('load', _ => {
      this.cache[url] = img;

      if (this.isReady()) {
        this.onReady();
      }
    });

    this.cache[url] = false;
    img.src = url;
  }

  isReady() {
    for (let k in this.cache) {
      if (!this.cache[k]) {
        return false;
      }
    }

    return true;
  }

  onReady(fn) {
    typeof fn === 'function' && fn();
  }
}

        基础篇
        难度 ★
        
        //浅拷贝
        请写出下列代码的输出结果,为什么？

        //1.
        var a = 2 ;
        var a_copy = a ;
        a_copy  = 3;
        console.log(a);//？

        //2.数组1
        var arr = [1,2,3,4];
        var arr_copy = arr ;
        arr_copy.push(5);
        console.log(arr);//？
        //3.数组2
        var arr = [1,2,3,4];
        var arr_copy = arr ;
        arr_copy = [1,2,3,4,5];
        console.log(arr);//？
        console.log(arr_copy);//？

        //4.对象1
        var obj = {
            name:'sunshine',
            age:18
        };
        var obj_copy = obj ;
        obj_copy.name = '过客';
        console.log(obj.name);//？

        //5.对象2
        var obj = {
            name:'sunshine',
            age:18
        };
        var obj_copy = obj ;
        obj_copy = {
            name:'过客',
            age:18
        };
        console.log(obj.name);//？
        console.log(obj_copy.name);//？

// 方法1
function getAlphabet() {
  return [...Array(26).keys()].map((_, idx) => String.fromCharCode(97 + idx));
}

// 方法2
function getAlphabet() {
  return new Array(26).fill().map((_, idx) => String.fromCharCode(97 + idx));
}

// 方法3
function getAlphabet() {
  return Array.from({length: 26)).map((_, idx) => String.fromCharCode(97 + idx));
}

// 方法4
function getAlphabet() {
  var len = 26;
  var result = [];

  while(len) {
    result.push(String.fromCharCode(97 + (26 - len)));
    len--;
  }

  return result;
}

console.log(Object.getPrototypeOf(Object.prototype));

null

function removeRepeat(arr) {
  // 你的代码
}

// 对象属性法
// 注意：[1, '1'] 形式的数组会产生误差，因为 hash[1] === hash['1']
function removeRepeat(arr) {
  var result = [],
      hash = {};

  for (var i = 0, elem; i < arr.length; i++) {
      elem = arr[i];

      if (!hash[elem]) {
          result.push(elem);
          hash[elem] = true;
      }
  }

  return result;
}

// 指针查询法
function removeRepeat(arr) {
  var result = [];

  arr.map(function(item, idx, array) {
    if (array.indexOf(item) === idx) {
      result.push(item);
    }
  });

  return result;
}

// 数组反查法
function removeRepeat(arr) {
  var result = [];

  for (var i = 0; i < arr.length; i++) {
    if (!~result.indexOf(arr[i])) {
      result.push(arr[i]);
    }
  }

  return result;
}

// 过滤法
function removeRepeat(arr) {
  return arr.filter(function(item, idx, array) {
    return array.indexOf(item) === idx;
  });
}

// ES6 Set 去重法
function removeRepeat(arr) {
  return [...new Set(arr)];
}

// 执行效率排行（从高到低）：
// 对象属性法 > ES6 Set 去重法 > 数组反查法 > 过滤法 > 指针查询法

let country = {
  name: 'China',
  language: 'Chinese',
  population: {
    value: 14,
    unit: '亿'
  }
};

JSON.stringify(country, (k, v) => {
  if (k === 'population') {
    return `${v.value} ${v.unit}`;
  }

  return v;
}, '--').replace(/\{|\}/g, '');