Legra.js
一个 JS 库，可以生成乐高积木的图案。
Echarts 纵坐标刻度不为小数
保证数据的最大值不能小于4
判断然后设置max的刻度
定位 sticky的新属性
堆叠效果
div {
position: sticky;
top: 0;
}
表格的表头锁定
大型表格滚动的时候,表头始终固定
th {
position: sticky;
top: 0;
}
一种没用过的水平垂直居中
注意,可以不知道自己的宽高,但是必须有宽高
.box{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
双飞翼布局
.aaa{
100%;
height: 500px;
.left,.right{
200px;
height: 500px;
background-color: magenta;
float:left;
}
.center{
calc(100% - 400px);
height: 500px;
float:left;
background-color: maroon;
}
flex 布局
order 属性定义项目的排列顺序,数值越小,排列越靠前,默认为0
flex-grow 放大比例,默认为0
当属性都为1,则它们将等分剩余空间
如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
flex-shrink
默认为1
如果为0,其他项目都为1,空间不足时,前者不缩小,负值无效
flex
默认
flex:0 1 auto; 放大,缩小,空间大小
双飞翼布局
.aaa{
100%;
height: 500px;
display: flex;
.left,.right{
flex:0 0 200px;
height: 500px;
background-color: magenta;
float:left;
}
.center{
flex:1;
height: 500px;
float:left;
background-color: maroon;
}
}
alert
alert() 返回的结果是字符串的
比如
alert({})弹出的是[object Object]
一道有趣的面试题
let a = 0;
let b = 0;
function A(a) {
A = function (b) { b=2
console.log(a + b++); // 和为4
};
console.log(a++); a=2
}
A(1); // 1
A(2); // 4
闭包的特性
深度克隆
function klona(x) { if (typeof x !== 'object') return x; var k, tmp, str=Object.prototype.toString.call(x); if (str === '[object Object]') { tmp = {}; for (k in x) { tmp[k] = klona(x[k]); } return tmp; } if (str === '[object Array]') { k = x.length; // 利用递归的进出栈 for (tmp=new Array(k); k--;) { tmp[k] = klona(x[k]); } return tmp; } if (str === '[object Set]') return new Set(x); if (str === '[object Date]') return new Date(+x); if (str === '[object Map]') return new Map(x); if (str === '[object RegExp]') { tmp = new RegExp(x.source, x.flags); tmp.lastIndex = x.lastIndex; return tmp; } if (str.slice(-6) === 'Array]') { return new x.constructor(x); } return x; }
createDocumentFragment
创建一个新的空白的文档片段
因为文档片段存在于内存中，并不在DOM树中，所以将子元素插入到文档片段时不会引起页面
<ul> <li>1</li> <li>2</li> <li>3</li> </ul> <script> let a = document.querySelector('ul') let b=document.createDocumentFragment(); while (a.firstChild) { b.appendChild(a.firstChild) } </script>
new 执行顺序
搜索 **运算符的优先级 MDN**
成员访问 19
new 18
所以 有参数的new new Foo.getName()
就是先执行 Foo.getName 在执行new
无参数的new new Foo().getName()
new Foo() 在执行 xxx.getName()
剑指offer
在一个二维数组中(每一个以为数组的长度相同),每一行都按照从左到右递增的顺序,每一列都是从上到下递增的,请输入这个一个二维数组和一个整数,判断数组汇总是否含有该整数
const Finds = (array, target) => {
let found = false;
let rows = array.length;
let cols = array[0].length;
if (rows > 0 && cols > 0) {
let row = 0;
let col = cols - 1;
while (row < rows && col >= 0) {
if (array[row][col] == target) {
found = true;
break;
} else if (array[row][col] > target) {
--col
} else {
++row;
}
}
}
return found
};
console.log(Finds([
[1, 3, 6, 7],
[2, 6, 9, 13],
[3, 9, 10, 16],
[5, 7, 14, 19],
], 15));
Mithril 是一个前端 JS 框架
Array(100).map(x => 1) 结果是多少
创建一个稀疏数组,因为没有元素,也不会有map操作,所以保持不变
那如何生成100个元素唯一的数组
Array.from(Array(100), x => 1) Array.apply(null, Array(100)).map(x => 1) Array(100).fill(1)
vue Echarts的使用
全局导入
import echarts from 'echarts'
Vue.prototype.$echarts=echarts;
如何确保Echarts在页面中正常显示并可随窗口变化
const thisChart = this.$echarts.init(`DOM`); //利用原型调取Echarts的初始化方法
window.addEventListener("resize", function() {
thisChart.resize(); //页面大小变化后Echarts也更改大小
});
5205 独一无二的出现次数
如果每个数的出现次数是独一无二的,就返回true,否则返回false
输入 arr=[1,2,2,1,1,3] 返回: true 解释: 1出现3次,2出现2次,3出现1const count = arr => { let a = Object.values(arr.reduce((acc, val) => (acc[val] = (acc[val] || 0) + 1, acc), {})); return a.length === new Set(a).size }; console.log(count([1, 1, 1, 2, 2, 22, 3, 3, 3, 3]));const solution = arr => { let max = Math.max(...arr); let cnt = Array.from({length: max + 1}, v => 0); let ccnt = Array.from({length: max + 1}, v => 0); //把出现的次数统计下 for (let item of arr) ++cnt[item]; //统计出现的次数的次数 let i = -1, j = 0; while (++i < max + 1) { ++ccnt[cnt[i]] } console.log(ccnt); for (let k = 1; k < max + 1; k++) { // 0是初始化的,大于1说明相同的个数 if (ccnt[k] != 0 && ccnt[k] > 1) { return false } } return true }; console.log(solution([1, 1, 3, 3, 3, 3, 4, 4, 4,]));