前端笔记整理（编程）

Posted 2021-06-04 Leatitia

基础编程

• 在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*/
}

其它

1. 红绿灯程序

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)

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

同态：两个字符串，如果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

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

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]
}

4. 如何让大小不同的图片等比缩放不变形显示在固定大小的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>
  前端笔记整理（编程）

 前端片段整理
 一名深漂程序员：我所整理和收集的前端面试题（笔记）
 一名深漂程序员：我所整理和收集的前端面试题（笔记）
 译文：18个实用的JavaScript代码片段，助你快速处理日常编程任务
 前端BootStrap框架笔记总结