1. 用css手写一个三角形（等腰三角形&红色）
<div class="triangle"></div>
css
.triangle {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
2. 手写reduce
原生的reduce是在Array的原型对象上的一个方法，其接收两个参数：
- 一个回调函数。这个回调函数的前两个参数，分别表示累积值和当前值。
- 初始值。
实现原生reduce的思路
- 通过slice原型方法获取到调用reduce的数组。
- 定义一个临时结果变量和开始的索引。
- 如果传入了初始值，res就等于这个初始值，没有传入res就等于数组的第一项。
- 如果传入了初始值，起始索引就是0，没有传入起始所以就是1，这里的1代表的是数组的第二项。
- 从起始下标开始遍历，res = fn.call(null,res,arr[i])
方法1
Array.prototype.myReduce = function (fn, initialValue) {
var arr = Array.prototype.slice.call(this);
var res, startIndex;
res = initialValue ? initialValue : arr[0]; // 不传默认取数组第一项
startIndex = initialValue ? 0 : 1;
for (var i = startIndex; i < arr.length; i++) {
// 把初始值、当前值、索引、当前数组返回去。调用的时候传到函数参数中 [1,2,3,4].reduce((initVal,curr,index,arr))
res = fn.call(null, res, arr[i]);
}
return res;
}
const test = [1,2,3];
console.log(test.myReduce((pre,cur) => pre + cur));
方法2
arr = [1, 3, 4, 5];
Array.prototype.reduceArr = function (fn, initValue) {
if (Object.prototype.toString.call(fn) !== '[object Function]') {
throw new Error("the current params is wrong");
}
// this 表示调用的数组
let arr = this;
console.log(arr, 'this表示啥')
let initIndex; // 表示数组是从第一项遍历还是从第二项开始遍历
let acc; // 累加器的值
// arguments 表示参数列表 arguments.length 表示没有传入参数数组将从第一项循环，如果传入了则从第0项开始循环
initIndex = arguments.length === 1 ? 1 : 0;
acc = arguments.length === 1 ? arr[0] : initValue;
for (let i = initIndex; i < arr.length; i++) {
acc = fn(acc, arr[i], i, arr);
};
return acc;
}
let res = arr.reduceArr((pre, cur) => pre * cur);
console.log(res, 'res');
总结&思考
手写原生的reduce这个题目，需要用到原生的slice方法，需要用到call，需要知道this指向的是谁，同时我们要对是否传入初始者进行判断，如果传入初始值，起始索引和初始值都是从第一项开始的，如果没有传入res则表示数组的第一项，起始索引则从第二项开始。
3. var let const (变量提升)
区别1：
- let & var 用来声明变量，const用来声明常量
- 变量就是赋值后可以改变它的值，常量就是赋值后就不能改变它的值
区别2
const 不允许只声明不赋值，一旦声明就必须赋值
错误写法
const num;
正确写法:
const num = 4;
区别3
var 是函数作用域， let & const 是块级作用域
花括号{} 就是块级作用域， 函数作用域就是函数里面的内容
对比这两段代码
{
let num = 4;
}
console.log(num) // num is not defined
{
var num = 4;
}
console.log(num); // 4
区别4
var 有提升的功能，let & const 没有
console.log(a) // undefined
var a = 4;
console.log(a) // a is not defined;
let a = 4;
4. 数组之和
方法1
function sum(arr) {
var s = 0;
for (var i = arr.length - 1; i--) {
s += arr[i];
}
return s;
}
方法2
function sum(arr) {
return arr.reduce(function(prev, curr, idx, arr){
return prev + curr;
});
}
方法3
function sum(arr) {
var s = 0;
arr.forEach(function(val, idx, arr) {
s += val;
}, 0);
return s;
};
5. 数组去重的几种方法 ---> 将转成字符串 并 排序
var arr = [1, 1, 3, 3, 4, 4, 6, 6];
let newArr = [...new Set(arr)].sort(function(a, b) {
return b - a;
}).join(" ")
console.log(newArr, 'newArr~~~');
console.log(typeof newArr, 'newArr~~~');
方法2
var arr = [1, 7, 1, 3, 3, 4, 4, 6, 6];
let newArr = Array.from(new Set(arr)).sort((a, b) => a-b).join("");
console.log(newArr, 'newArr~~~~');
6. flex 有哪些属性
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
flex-start(默认值):与main start对齐
flex-end：与main end对齐
center：居中
space-between：flex items 之间的距离相等，与main start、main end两端对齐
space-evenly: flex items 之间的距离相等,flex items与main start 、main end 之间的距离等于flex items之间的距离
space-around :flex items 之间的距离相等,flex items与main start 、main end 之间的距离等于flex items之间的距离的一半
flex-wrap 折行
nowrap(默认)：单行
wrap：多行
7. rem& em 的区别
rem是相对于根字号，即相对于<html>标签的font-size实现的，浏览器默认字号是font-size:16px
em:是相对于父元素标签的字号，和百分比%类似，%也是相对于父级的，只不过是%相对于父级宽度的，而em相对于父级字号的
8. 强缓存和协商缓存
什么叫缓存
我们把没有必要重新获取的一遍的东西重新获取，没必要
为什么需要缓存?
让页面加载速度更快一些
cache-Control
cache-control的值 max-age: 缓存过期的最大时间 no-cache: 不用本地缓存，服务器自己处理 no-store: 不用本地缓存，不用服务端的缓存
9. css 如何实现10px 字体
谷歌的字体最小限制是12px，当然这是为了保护视力。
不过很多UI是不考虑保护视力的。
我们这样实现
.font-size-10px{
font-size:20px;
zoom:0.5;
}
