rem与em的区别
- rem是相对于根元素的字体大小
- em是相对父元素的字体大小
说明box-sizing属性
- box-sizing:content-box是正常盒子，不含内边距和边框
- box-sizing:border-box是怪异盒子，含内边距和边框
判断obj是否为空对象
javascript
let obj = {}
let obj2 = {a:1}
function isEmpty(obj){
if( obj == null || typeof obj !== 'object' || Array.isArray(obj)){
return false
}
return Object.keys(obj).length === 0
}
console.log(isEmpty(obj)) // true
console.log(isEmpty(obj2)) // false判断3==true
- false
false -> 0
true -> 1
反转字符串
将 i am developer 转换为 developer am i
javascript
const str = 'i am developer';
function reverseWord(str){
var restr = str.split(' ').reverse().join(' ')
return restr
}
console.log(reverseWord(str))闭包程序输出
javascript
var a = 8;
function output() {
(function () {
return function inner(){
var a = 10;
a++;
console.log(a);
}
})()();
}
output();
output();- 11
- 11
每次执行都重新进行初始化，所以每次执行结果不变
文字截断样式
css
/* 单行省略 */
p{
width:200px;
overflow:hidden;
white-space:nowarp; /* 禁止文本换行 */
text-overflow:ellipsis; /* 省略号 */
}
/* 多行省略 */
p{
width:200px;
display:-webkit-box; /* 弹性盒子 */
-webkit-line-clamp:2; /* 显示两行 */
-webkit-box-orient:vertical; /* 垂直排布 */
overflow:hidden;
text-overflow:ellipsis; /* 省略号 */
}三列响应式布局
html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>三列布局</title>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<style>
.container {
display: flex;
gap: 30px;
width: 100%;
}
.box {
flex: 1;
height: 200px;
border: 1px solid black;
}
</style>
</body>
</html>防抖
javascript
function debounce(fn,delay){
return funrcion(...args){
let timer = null;
clearTimeout(timer);
timer = setTimeout(()=>{
fn.apply(this,args)
},delay)
}
}数组方法
给出一个数组包含10个对象，每个对象包含名称字符串和分数数组，要求先去掉分数数组中的最大小值，然后取平均值，最后格式化输出名称和平均分
javascript
const array = [
{pic:'p1',score:[99,84,78,56,98,80,91,88,86,82]},
{pic:'p2',score:[89,84,78,86,98,80,91,88,86,82]},
{pic:'p3',score:[76,84,78,96,98,80,91,88,86,82]},
{pic:'p4',score:[85,84,78,86,98,80,91,88,86,82]},
{pic:'p5',score:[92,84,78,76,98,80,91,88,86,82]},
]
function getResult(arr){
const newarr = arr.map(item=>{
const scores = [...item.score]
const sort = scores.sort((a,b)=>a-b)
const leave = sort.slice(1,-1)
const average = leave.reduce((acc,curr)=>acc+curr)/leave.length
console.log('名称为'+item.pic + "的平均分是" + average)
})
return newarr
}
getResult(array)