前端笔记整理（编程）

Posted 2022-11-11 Leatitia

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端笔记整理（编程）相关的知识，希望对你有一定的参考价值。

基础编程

在js中怎么捕获异常？写出来看看？应该在哪些场景下采用呢？
说说你对hosts文件的理解，它都有哪些作用？
a标签的href和onclick属性同时存在时，哪个先触发？
数组去重
- 遍历循环 .indexOf()
- 利用Set类型
解决0.1+0.2=0.30000000000000004
数组扁平化
css实现五角星
css 实现提示框
footer位置的自动适配（主内容不足一屏时显示在最底部，超出一屏时跟随主内容显示）
css上中下三栏布局
css 无线翻转
其它

在js中怎么捕获异常？写出来看看？应该在哪些场景下采用呢？

try 
    ...
    throw ...
    ...
 catch (err) 
    ...
 finally 
    ...

通过 throw 语句抛出错误；理论上可以抛一切值，但实际上建议只抛 Error 对象；
try 块内 throw 的错误会导致停止执行，并将抛出的对象传给 catch 块；
从 ES2017 开始，如果不需要获取抛出的对象，则 catch 块可以直接写为 catch …
catch 块一般用于对错误进行处理；
finally 块中的语句不论是否抛出错误，都会执行。
使用场景：
复杂逻辑代码库
发起 ajax、fetch 的时候
判断是否支持默写浏览器特性

window.onerror = function(message, source, lineno, colno, error)  ...  可以在全局顶层监听未捕获的错误
window.addEventListener('unhandledrejection', event => ···);监听未捕捉的promise错误

说说你对hosts文件的理解，它都有哪些作用？

hosts 文件可以将名称映射到 IP 地址。在本机上所有对这个名称的访问相当于对它被映射到的 IP 地址的访问。可以说它起到了简易的本地 DNS 的作用。

a标签的href和onclick属性同时存在时，哪个先触发？

应该是onclick属性先触发，判断依据是在onclik中使用preventDefault方法可以阻止a标签的跳转，说明a标签的跳转行为是一个默认行为

数组去重

遍历循环 .indexOf()

let arr = [1,'1',2,'2',1,2,'x','y','f','x','y','f'];

function unique1(arr)
	let result = [arr[0]];
	for (let i = 1; i < arr.length; i++) 
		let item = arr[i];
		if(result.indexOf(item) === -1)
			result.push(item);
		
	
	return result;


console.log(unique1(arr));

利用Set类型

let arr = [1,'1',2,'2',1,2,'x','y','f','x','y','f'];

function unique4(arr)
    return Array.from(new Set(arr));


console.log(unique4(arr));

解决0.1+0.2=0.30000000000000004

 function add() 
	  const args = [...arguments]
	  const maxLen = Math.max.apply(
	    null,
	    args.map(item => 
	      const str = String(item).split('.')[1]
	      return str ? str.length : 0
	    )
	  )
	  return (
	    args.reduce((sum, cur) => sum + cur * 10 ** maxLen, 0) / 10 ** maxLen
	  )

console.log(add(0.1, 0.2)) // => 0.3
console.log(add(10, 11)) // => 21
console.log(add(0.001, 0.003)) // => 0.004
console.log(add(0.001, 0.003, 0.005)) // => 0.009
console.log(add(0.001)) // => 0.001

数组扁平化

function flatten(arr) 
	let result = [];
	for (let i = 0; i < arr.length; i++) 
	if (Array.isArray(arr[i])) 
	      result = result.concat(flatten(arr[i]));
	     else 
	      result = result.concat(arr[i]);
	    
	  
	return result;

const a = [1, [2, [3, 4]]];console.log(flatten(a));

css实现五角星

  #star-five    
   margin: 50px 0;    
   position: relative;    
   display: block;    
   color: red;    
   width: 0px;   
   height: 0px; 
   border-right:  100px solid transparent;   
   border-bottom: 70px  solid red;
   border-left:   100px solid transparent;    
   -moz-transform:    rotate(35deg);    
   -webkit-transform: rotate(35deg);    
   -ms-transform:     rotate(35deg);    
   -o-transform:      rotate(35deg); 
  
 #star-five:before     
 	border-bottom: 80px solid red;    
 	border-left: 30px solid transparent;    
 	border-right: 30px solid transparent;    
 	position: absolute;    
 	height: 0;    
 	width: 0;   
 	top: -45px;    
 	left: -65px;    
 	display: block;    
 	content: "";    
 	-webkit-transform: rotate(-35deg);    
 	-moz-transform:    rotate(-35deg);    
 	-ms-transform:     rotate(-35deg);    
 	-o-transform:      rotate(-35deg);     
  
 #star-five:after     
	 position: absolute;    
	 display: block;   
 	color: red;    
	 top: 3px;    
 	left: -105px;    
 	width: 0px;    
 	height: 0px;    
 	border-right: 100px solid transparent;    
 	border-bottom: 70px solid red;    
 	border-left: 100px solid transparent;    
 	-webkit-transform: rotate(-70deg);    
 	-moz-transform:    rotate(-70deg);    
 	-ms-transform:     rotate(-70deg);    
 	-o-transform:      rotate(-70deg);    
 	content: "";

css 实现提示框


  #talkbubble     
 	 width: 120px;     
  	height: 80px;     
  	background: red;    
  	position: relative;    
  	-moz-border-radius:    10px;     
  	-webkit-border-radius: 10px;     
  	border-radius:         10px; 
  
  #talkbubble:before     
  	content:"";    
  	position: absolute;    
  	right: 100%;    
  	top: 26px;    
  	width: 0;    
  	height: 0;    
  	border-top: 13px solid transparent;    
  	border-right: 26px solid red;    
  	border-bottom: 13px solid transparent;

footer位置的自动适配（主内容不足一屏时显示在最底部，超出一屏时跟随主内容显示）

html,
body 
	height: 100%;


.mainContent 
	background: #66b1ff;
	min-height: 100%;
	padding-bottom: 50px;
	box-sizing: border-box;

footer 
    height: 50px;
    line-height: 50px;
    text-align: center;
    margin-top: -50px;

css上中下三栏布局

.layout.flexbox
	display: flex;
	width: 100%;
	height: 100%;
	flex-direction:column;

.layout.flexbox .top
	height: 100px;						
	background: red;

.layout.flexbox .center
	flex:1;
	background: yellow;

.layout.flexbox .bottom
	height: 100px;
	background: blue;

css 无线翻转

@keyframes rotate
    0%
        transform: rotate(0);
      
    50%
        transform:rotate(200deg);
    
    100%
         transform: rotate(0);
        
    
.rotate
    transition: 0.5s;
    transform-origin: 30px 30px;  
    animation: rotate 10s linear infinite;  /*开始动画后无限循环，用来控制rotate*/

其它

红绿灯程序

function sleep (t) 
  return new Promise((resolve, reject) => 
    setTimeout(() => 
      resolve()
    , t)
  )


/**
 * 循环显示红绿灯
 * @param number green 绿灯显示毫秒数
 * @param number yellow 黄灯显示毫秒数
 * @param number red 红灯显示毫秒数
 */
async function light (green = 15000, yellow = 3000, red = 10000) 
  let status = 'green'
  while (true) 
    await sleep(green).then(() => 
      status = 'yellow'
      console.log(status)
    )
    await sleep(yellow).then(() => 
      status = 'red'
      console.log(status)
    )
    await sleep(red).then(() => 
      status = 'green'
      console.log(status)
    )
  


light(3000, 1000, 1000)

写一个方法判断两个字符串是否同态

同态：两个字符串，如果A字符串中的每一个字符都可以在B字符串中找到唯一对应，并且顺序一一对应；如果存在这样的函数，那么A和B同态。字符串同态就是字符串拥有同样的字符结构

function isomorphic (a, b) 
  let res = true
  if (a.length === b.length)  // 首先字符串长度肯定要一致
    let ka = 
    let kb = 
    res = b.split('').every((item, idx) => 
      if (!kb[item]) 
        kb[item] = a[idx] // 存放b字符串当前字符对应于a字符串中的哪个字符（映射）
      
      return kb[item] === a[idx] // 判断b字符串当前字符对应于a字符串中的映射是否与a字符串当前索引的字符一致
    ) &&
    a.split('').every((item, idx) => 
      if (!ka[item]) 
        ka[item] = b[idx] // 存放a字符串当前字符对应于b字符串中的哪个字符（映射）
      
      return ka[item] === b[idx] // 判断a字符串当前字符对应于b字符串中的映射是否与b字符串当前索引的字符一致
    )
   else 
    res = false
  

  return res


console.log(isomorphic('add', 'egg')) // true
console.log(isomorphic('paper', 'title')) // true
console.log(isomorphic('xyxx', 'xztt')) // false
console.log(isomorphic('aaaaa', 'abcda')) // false

找出字符串中出现最多的的字符及其长度

function findMaxLetter (str) 
  let maxLetter = ''
  let maxLen = 0
  let key = 
  str.split('').forEach(item => 
    if (key[item] === undefined) 
      key[item] = 1
     else 
      key[item]++
    
    if (key[item] > maxLen) 
      maxLen = key[item]
      maxLetter = item
    
  )

  return [maxLetter, maxLen]

如何让大小不同的图片等比缩放不变形显示在固定大小的div里？写个例子

图片等比缩放 img object-fit: cover/contain;
div宽高比例固定，跟随屏幕变化而变化，利用padding垂直方向的属性来实现

	<!--img标签样式-->
<style>
    div
	    display:flex;
	    justify-content:center;
	    align-items:center;
	    width:100px;
	    height:100px;
    

	img
		max-width:100px;
		max-height:100px;
	
</style>
<div><img></div>

<!--img标签样式-->
<style>
    .dv
      width: 100px;
      height: 100px;
      border: 3px solid #f00;
      float: left;
      margin-right: 20px;
    
    .dv img
      object-fit: contain;
      width: 100%;
      height: 100%;
    
   
  </style>
  
</head>
<body>
  <div class="dv">
    <img src="./imgs/1.png" alt="">
  </div>
  <div class="dv">
    <img src="./imgs/2.png" alt="">
  </div>
  <div class="dv">
    <img src="./imgs/3.png" alt="">
  </div>
</body>

<!--背景图样式-->
<style>
    .dv
      width: 100px;
      height: 100px;
      border: 3px solid #f00;
      float: left;
      margin-right: 20px;
      background-repeat: no-repeat;
      background-size: contain;
    
    .dv:nth-child(1)
      background-image: url('./imgs/1.png');
    
    .dv:nth-child(2)
      background-image: url('./imgs/2.png');
    
    .dv:nth-child(3)
      background-image: url('./imgs/3.png');
    
  </style>
</head>
<body>
  <div class="dv">
  </div>
  <div class="dv">
  </div>
  <div class="dv前端笔记整理（编程）
 同态加密开源框架整理
 谷歌开源首个通用全同态加密转译器
 前端BootStrap框架笔记总结
 ElementUI前端开发技巧整理笔记
 JavaScript DOM编程艺术（第二版）读书笔记 ——