每日一题
只是单纯的想长期的坚持做一件事。
博客每天上午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
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 的 渲染结果
参考
2020-08-20
// ios 屏幕安全距离
2020-08-19
// 文件切片上传
参考
通过Blob slice 分割 每一块生成一个唯一的标示、然后分块上传最后服务端将包合并
2020-08-16
// 实现图片懒加载
2020-08-12
// 前端可以获取哪些东西作为客户端唯一标识(浏览器指纹)
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
// 重排和重绘
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
怎么获取用户位置
参考
- 授权定位 后 转换 （兼容性问题）
- 通过IP
- 。。。
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]);
2020-07-11
/**
* 数组随机排序
* @param arr 数组
*/
function shuffle (arr) {
// your code
}
shuffle([1,2,3,4]); // [2,3,1,4]
2020-07-09
/**
* 0置1，1置0
* @param str 字符串
*/
function conversion(str){
// your code
}
console.log(conversion('01234566543210')) // 10234566543201
2020-07-08 (9号补)
/**
* 数组是否全部相同
* @param arr 等待验证的数组
*/
function isSameArra(arr){
// your code
}
console.log(isSameArra([1,2,3,4,5])) // true
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]]
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);
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]
2020-06-21
console.log([,,].length)
参考
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
Set、Map、WeakSet、WeakMap 区别
参考
Set
成员唯一、无序且不重复
[value, value]，键值与键名是一致的（或者说只有键值，没有键名）
可以遍历，方法有：add、delete、has
WeakSet
成员都是对象
成员都是弱引用，可以被垃圾回收机制回收，可以用来保存DOM节点，不容易造成内存泄漏
不能遍历，方法有add、delete、has
Map
本质上是键值对的集合，类似集合
可以遍历，方法很多可以跟各种数据格式转换
WeakMap
只接受对象作为键名（null除外），不接受其他类型的值作为键名
键名是弱引用，键值可以是任意的，键名所指向的对象可以被垃圾回收，此时键名是无效的
不能遍历，方法有get、set、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
2020-06-13
function O () {
}
O.prototype.print = () => {
console.log(1);
}
O.print = () => {
console.log(2);
}
const o = new O();
o.print(); // 输出什么
参考
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