每日一题

不才
2020-06-11 01:30:23

只是单纯的想长期的坚持做一件事。

博客每天上午12点之前更新题目、qq群(656726969)每天十点之前发布,每天一个题目。

ps: 如有问题,麻烦指出谢谢


6月25、26两天🐦了,最近身体不好感觉目前只有上班时间才有时间写这个
6月28、29两天也鸽了,返校办理毕业手续没带电脑
7月3、4、5🐦了,专升本偷懒
7月14-19鸽了,为什么会坚持不下去呢!
7月21、22、26鸽了,我是鸽手
8月鸽了好多天了,我是憨批


2020-09-08

实现: 
console.log([...10]);
> (10) [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
参考
Number.prototype[Symbol.iterator] = function * () {
   for(let i = 0; i < this; i++){
        yield i;
    }
}

2020-09-04

// typescript 定义对象型数组
参考
interface ObjectOf<V>{
    [_: string]: V 
}

2020-09-03

// Shadow DOM
参考

https://segmentfault.com/a/1190000017970486

2020-09-02

// 对象深度查找
参考
const elements = {
  "id": "c6174605-fb74-4fcb-884e-1a52926d55f3",
  "element": "layout", // 元素名称 or 类型
  "type": "container", // container or element
  "children": [
    {
      "id": "373d53af-f167-4a35-82b0-ae37bcaae5de",
      "element": "row", // 元素名称 or 类型
      "type": "container", // container or element
      "props": {}, // 参数
      "children": [
        {
          "id": "69c270c5-1141-4eec-b40e-c82c5991df15",
          "element": "col", // 元素名称 or 类型
          "type": "container", // container or element
          "props": {
            "span": 8
          }, // 参数
          "children": [
            {
              "id": "6b49f4c3-8537-4bd4-b666-69d962c1b08c",
              "element": "input", // 元素名称 or 类型
              "type": "element", // container or element
              "props": {}, // 参数
            },
            {
              "id": "6b49f4c3-8537-4bd4-b666-69d962c12081",
              "element": "button", // 元素名称 or 类型
              "type": "element", // container or element
              "props": {}, // 参数
            },
          ]
        },
        {
          "id": "6061a216-4033-404b-95a8-51620e4cf9a3",
          "element": "col", // 元素名称 or 类型
          "type": "container", // container or element
          "props": {
            "offset": 4,
            "span": 12
          }, // 参数
          "children": [
            {
              "id": "82943eee-fd76-45e5-bc19-6869847221bb",
              "element": "button", // 元素名称 or 类型
              "type": "element", // container or element
              "props": {
                "text": '按钮'
              }, // 参数
            }
          ]
        }
      ]
    }
  ]
};

function findByCallback (object, currentKey, callback){
  const current = object[currentKey];
  for (let key in current) {
    if (callback(current, key, current[key])) return [object, currentKey];
    if (typeof current[key] === 'object') {
      const value = findByCallback(current, key, callback);
      if (value) return value;
    }
  }
}

findByCallback({ elements }, 'elements', (current, key, value) => {
  return key == 'id' && value == this.currentId;
});

2020-08-24

// flex: 
// 父盒(display:flex) 宽度100px 两个子盒子 一个100px 一个200px 的 渲染结果
参考

image.png

2020-08-20

// ios 屏幕安全距离
参考

刘海、底部操作条

https://segmentfault.com/a/1190000020887571?utm_source=tag-newest

2020-08-19

// 文件切片上传
参考

通过Blob slice 分割 每一块生成一个唯一的标示、然后分块上传最后服务端将包合并

https://developer.mozilla.org/zh-CN/docs/Web/API/Blob/slice

2020-08-16

// 实现图片懒加载
参考

IntersectionObserver 懒加载

2020-08-12

// 前端可以获取哪些东西作为客户端唯一标识(浏览器指纹)
参考
  1. Canvas
  2. AudioContext

https://paper.seebug.org/229/

2020-08-08

const CODE_TYPES = {
  DEFAULT: 0, // 数字字母
  NUMBER: 1, // 数字
  LETTERS: 2 // 英文字母
};
/**
 * 生成指定长度验证码
 * @param length 验证码长度
 * @param type 验证码类型(数字、字母)
 */
function generateCode (length, type = CODE_TYPES.DEFAULT) {
  // your code
}

generateCode(4); // a7Dc

generateCode(6, CODE_TYPES.NUMBER); // 433312

2020-08-03

// 重排和重绘
参考

https://www.cnblogs.com/soyxiaobi/p/9963019.html

2020-07-28

// 实现jsonp函数
参考

根据该函数改造而来

/**
 * jsonp
 * @param opts options
 * @param callback 回调函数
 */
const jsonp = (opts = {}, callback) => {
  // 手动或动态增加回调函数名称
  opts.callback = opts.callback || ('callback_' + (Math.random() * 1000 | 0));
  // 通过一个callback参数所对应的函数名来把数据进行写入
  opts.url = `${opts.url}?callback=${opts.callback}`;
  // 在你需要传递其他参数时,需要遍历后拼接到url上
  for (let key in opts.data) {
    if (opts.data.hasOwnProperty(key)) {
      opts.url += `&${key}=${opts.data[key]}`;
    }
  }
  // 主要是依靠script的src属性加载内容没有跨域情况
  const script = document.createElement('script');
  script.src = opts.url;
  // 在script脚本执行完毕后,再删除此脚本
  script.onload = () => {
    document.body.removeChild(script);
  }
  // 全局增加一个函数用于接受回调数据
  window[opts.callback] = callback;
  // 把创建好的script脚本添加到body中
  document.body.appendChild(script);
};

2020-07-27

/**
 * 找出两个数组中不同的元素
 * @param {Array} arr1 数组1
 * @param {Array} arr2 数组2
 */
function contrast (arr1, arr2) {
  // your code
}

contrast([1, 2, 3], [2, 1]); // [3]
参考
function contrast (arr1, arr2) {
  const arr = [...new Set(arr1), ...new Set(arr2)];
  const res = arr.reduce((pv, cv) => {
    pv[cv] = pv[cv] || 0;
    pv[cv]++;
    return pv;
  }, {});

  return Object.keys(res).filter(key => res[key] === 1);
}

2020-07-25

/**
 * key value 交换
 * @param {object} input 输入的对象
 */
function swapKeyValue (input) {

}

swapKeyValue({ a: 'a1', b: 'b1' }); // { a1: 'a', 'b1': 'b' }
参考
function swapKeyValue (input) {
  return Object.keys(input).reduce((out,key)=>{
    out[input[key]] = key;
    return out;
  },{});
}

2020-07-24

/*
  给定一个只包括 '(',')','{','}','[',']' 的字符串,判断字符串是否有效
  有效字符串需满⾜:
    1. 左括号必须⽤相同类型的右括号闭合。
    2. 左括号必须以正确的顺序闭合。
  注意空字符串可被认为是有效字符串。
  示例1:
    输⼊: "()"
    输出: true
  示例2:
    输⼊: "()[]{}"
    输出: true
  示例 3:
    输⼊: "(]"
    输出: false
  示例 4:
    输⼊: "([)]"
    输出: false
  示例 5:
    输⼊: "{[]}"
    输出: true
*/
/**
 * '(',')','{','}','[',']' 判断是否正常闭合
 * @param str 
 * @returns boolean
 */
function hasClosed (str) {
  let isClosed = false;

  // your code 

  return isClosed;
}
参考

来源


/**
 * '(',')','{','}','[',']' 判断是否正常闭合
 * @param {string} str 
 * @returns {boolean}
 */

function hasClosed (str) {
  let isClosed = false;
  const stack = [];
  const obj = { '[': ']', '(': ')', '{': '}' };

  const obj1 = Object.keys(obj).reduce((res, key) => {
    res[obj[key]] = key;
    return res;
  }, {});

  for (let i = 0; i < str.length; i++) {
    const char = str[i];
    // 是否是需要匹配的
    if (obj[char]) {
      // 将 [({ 添加到栈
      stack.push(char);
    } else if (obj1[char]) {
      // 如果匹配到 )]} 表示当前一个最小包含已完成
      const key = stack.pop();
      // 严重栈中的最后一个是否和当前匹配 如果不匹配说明是 匹配不上 了 如 {}}  
      if (obj[key] !== char) {
        return false;
      }
    }
  }
  // 验证是否存在 未匹配 的 如 {{} 当这个匹配就会出现未匹配的
  if (stack.length === 0) {
    isClosed = true;
  }

  return isClosed;
}

console.log(hasClosed('{{}}({})[{[]}]'));

2020-07-23

怎么获取用户位置
参考
  1. 授权定位 后 转换 (兼容性问题)
  2. 通过IP
  3. 。。。

2020-07-20

/**
 * 获取对象的keys
 * @param obj 传入的对象
 */
function objectKeys (obj) {
  // your code
}

objectKeys({ a: 1, b: 2, c: 3 }); // ['a','b','c']
参考
for (let key in { a: 1, b: 2, c: 3 }) {
  console.log(key);
}

2020-07-13

/**
 * 深拷贝
 * @param value 需要克隆的值
 */
function cloneDeep(value){
  // your code
}

const objects = [{ 'a': 1 }, { 'b': 2 }];
 
const deep = cloneDeep(objects);
console.log(deep[0] === objects[0]);
参考

https://github.com/lodash/lodash/blob/750067f42d3aa5f927604ece2c6df0ff2b2e9d72/cloneDeep.js

2020-07-11

/**
 * 数组随机排序
 * @param arr 数组
 */
function shuffle (arr) {
  // your code
}

shuffle([1,2,3,4]); // [2,3,1,4] 

参考

https://github.com/lodash/lodash/blob/4ea8c2ec249be046a0f4ae32539d652194caf74f/shuffle.js

2020-07-09

/**
 * 0置1,1置0
 * @param str 字符串
 */
function conversion(str){
  // your code
}

console.log(conversion('01234566543210')) // 10234566543201
参考

http://www.h-camel.com/show/112.html

2020-07-08 (9号补)

/**
 * 数组是否全部相同
 * @param arr 等待验证的数组
 */
function isSameArra(arr){
  // your code
}

console.log(isSameArra([1,2,3,4,5])) // true
参考

http://www.h-camel.com/show/2547.html

2020-07-07


function formatDate (date, format = 'yyyy-MM-dd') {
  // your code
}

const date = formatDate(Date.now());

console.log(date); // 2020-07-07

2020-07-06

function ArrayGroupByNum (arr, len) {
  // your code
}
const group = ArrayGroupByNum([1, 2, 3, 4, 5, 6, 7], 3);

console.log(group); // [[1,2,3],[4,5,6],[7]]

参考

https://blog.csdn.net/dj19983160703/article/details/90516275

2020-07-02

function digitUppercase (price) {
	// your code
}

const out = digitUppercase(1.23);

console.log(out); // 壹元贰角叁分
参考
function digitUppercase(price) {
  const fraction = ['角', '分'];
  const digit = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];
  const unit = [
    ['元', '万', '亿'],
    ['', '拾', '佰', '仟'],
  ];
  let num = Math.abs(price);
  let s = '';
  fraction.forEach((item, index) => {
    s += (digit[Math.floor(num * 10 * (10 ** index)) % 10] + item).replace(/零./, '');
  });
  s = s || '整';
  num = Math.floor(num);
  for (let i = 0; i < unit[0].length && num > 0; i += 1) {
    let p = '';
    for (let j = 0; j < unit[1].length && num > 0; j += 1) {
      p = digit[num % 10] + unit[1][j] + p;
      num = Math.floor(num / 10);
    }
    s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s;
  }

  return s.replace(/(零.)*零元/, '元').replace(/(零.)+/g, '零').replace(/^整$/, '零');

}

https://github.com/haizlin/fe-interview/issues/1130#issuecomment-574003812

2020-07-01

console.log( 3 > 2 > 1 );

console.log( 1 > 2 > 3 );

2020-06-30

/**
 * 获取元素距离顶部的距离
 * @param el 元素名/元素
 */
function getElementToPageTopDistance (el) {
  // your code
}

console.log(getElementToPageTopDistance('.foo'));

2020-06-27

console.log(1);

const p1 = new Promise((resolve,reject)=>{
	console.log(2);
  	resolve(3);
});

p1.then((val)=>{
  	console.log(val);
	return 4;
});

setTimeout(()=>{
  	console.log(5);
	p1.then((val)=>{
      console.log(val);
	});
});

Promise.resolve().then(()=>{
	console.log(6);
});

console.log(7);

参考

1273653

http://www.ruanyifeng.com/blog/2013/10/event_loop.html

2020-06-24

const arr1 = [1,2,3],
      arr2 = [3,2,1];

console.log(arr.sort() == arr);
console.log(arr2.sort() === arr2);
console.log(arr1.sort() == arr2);
参考

sort 是自己修改数组的,不会改变内存指向且返回的是当前的this
===== 麻烦看https://blog.csdn.net/qq_37530031/article/details/78317823

2020-06-23 (24号补)

function isNumber(str){
	
	// your code
	
}

console.log(isNumber("0.1")); // true
console.log(isNumber(".1")); // true
console.log(isNumber("00")); // true
console.log(isNumber("0.00")); // true
console.log(isNumber("-0")); // true
console.log(isNumber("0")); // true

参考

暂无参考,这个题是但是某个大牛群出的。

2020-06-22

const flattenDeep = (arr)=>{
	// your code
}
const inputArr = [1,2,[3,4],[5,6],[[7,[8,[9]]]]];
console.log(flattenDeep(inputArr)) // [1, 2, 3, 4, 5, 6, 7, 8, 9]
参考

https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/flat

2020-06-21

console.log([,,].length)
参考

http://bucai-1252379971.cos.ap-guangzhou.myqcloud.com/upload/upload_77d20bb261767771e0b74750930cf6c8.JPG

2020-06-20

function foo (arg1, arg2) {
  arg1 = 2;
  arg2 = 2;
  arguments[0] = 3;
  arguments[1] = 3;
  
  console.log(arguments.length);
  console.log(arg1);
  console.log(arg2);
}
foo(1)

参考

参考JavaScript高级程序设计(第3版) 65-66页

关于 arguments 的行为,还有一点比较有意思。那就是它的值永远与对应命名参数的值保持同步
例如:

function doAdd(num1, num2) {
 arguments[1] = 10;
 alert(arguments[0] + num2);
}

每次执行这个 doAdd()函数都会重写第二个参数,将第二个参数的值修改为 10。因为 arguments对象中的值会自动反映到对应的命名参数,所以修改 arguments[1],也就修改了 num2,结果它们的值都会变成 10。不过,这并不是说读取这两个值会访问相同的内存空间;它们的内存空间是独立的,但它们的值会同步。另外还要记住,如果只传入了一个参数,那么为 arguments[1]设置的值不会反应到命名参数中。这是因为 arguments对象的长度是由传入的参数个数决定的,不是由定义函数时的命名参数的个数决定的。

2020-06-19

SetMapWeakSetWeakMap 区别
参考

Set
成员唯一、无序且不重复
[value, value],键值与键名是一致的(或者说只有键值,没有键名)
可以遍历,方法有:add、delete、has
WeakSet
成员都是对象
成员都是弱引用,可以被垃圾回收机制回收,可以用来保存DOM节点,不容易造成内存泄漏
不能遍历,方法有add、delete、has
Map
本质上是键值对的集合,类似集合
可以遍历,方法很多可以跟各种数据格式转换
WeakMap
只接受对象作为键名(null除外),不接受其他类型的值作为键名
键名是弱引用,键值可以是任意的,键名所指向的对象可以被垃圾回收,此时键名是无效的
不能遍历,方法有getset、has、delete

2020-06-18

console.log(!!null + true);
参考

1

false + true 

0 + 1

2020-06-17

const arr = [1,2,3,4,5];


// your code


arr.reverse();

console.log(arr.join()); //1,2,3,4,5 

参考

Array.prototype.reverse = function (){return this};

2020-06-16

let a = {x:0};
const b = [a];
a = null;
console.log(b);
参考

b = [{x:0}]

2020-06-15

console.log('1' - - '1')
参考
console.log(1 - (-1));

2

2020-06-14

CSS 中的 BFC
参考

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context

2020-06-13

function O () {

}

O.prototype.print = () => {                              
  console.log(1);
}

O.print = () => {
  console.log(2);
}

const o = new O();

o.print(); // 输出什么

参考

http://bucai-1252379971.cos.ap-guangzhou.myqcloud.com/upload/upload_96f2c6442d07b8f8a349c969ba4959a4.png

2020-06-12

10.toFixed(10)
参考

Uncaught SyntaxError: Invalid or unexpected token

https://github.com/haizlin/fe-interview/issues/130#issuecomment-494198742

2020-06-11

// 不借助中间变量交换两个变量的值
let a = 1, b = 2;

// your code

console.log(a, b) // 2 , 1

参考

[a,b] = [b,a]

2020-06-10

function add (item, list) {
  return list.push(item);
}

console.log(add('2',  ['1']))
参考

2

有才
2020-06-27 07:48:53
0
function getElementToPageTopDistance (el='body') {
  return typeof(el) === 'string' ? document.querySelector(el).getBoundingClientRect().top + window.scrollY : el.getBoundingClientRect().top + window.scrollY
}