本周学习总结

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{
  width: 100%;
  height: 500px;
  .left,.right{
    width: 200px;
    height: 500px;
    background-color: magenta;
    float:left;
  }
  .center{
    width: 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{
  width: 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 框架

https://github.com/MithrilJS/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出现1

const 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,]));