01-常识
1. 行内块元素的默认外边距清除：父元素设置 font-size:0 ；
2. 一个页面内同一个部分切换两个不同DOM，其中一个滚动布局，另外一个不滚动，两者来回切换；为了使滚动布局的DOM显示的时候不影响不滚动DOM的页面显示样式，将不滚动页面内的div设置为float定位。
3. console.log()和console.dir()区别：
1) console.dir()打印当前对象的所有属性、方法等，即使该目标对象的值在当前打印下方发生改变，打印的值也是当前位置时的值；
2) console.log()打印的是该对象的值，一旦在打印下方值发生变化，那么当前打印出来的值也是变化之后的值；
3) log只打印一个toString表示，dir打印的是一个可导航的树。
4. 点击父元素事件不影响子元素的事件，在子元素上添加：onClick = "event.cancleBubble = true"。
5. block元素里面嵌套inline-block元素，可能会出现有空隙不对齐的情况，在block元素里面设置 line-height:0 。
6. for...in循环的是key，for...of循环的是value。
7. 长文本显示不下显示省略号css：
overflow: hidden;
word-break: break-all;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
display: -webkit-box;
8. 图片3像素空白：vertical-align:center 。
9. 容器宽度变化背景图片随之改变：background:url("") no-repeat center/cover;
如果只横向拉伸，纵向不变，设置background-size：100% 容器高度；
背景图片和渐变色两者属性同时出现：background：渐变色属性，图片属性。
10. 超出区域滚动不要滚动条，给设置滚动的盒子加 .className::-webkit-scrollbar{display:none} 。
11. 关于js对象通过 . 和 [] 获取属性值的区别：
1) []运算符可以使用字符串变量的内容作为属性名；
var data = {
water: "woo",
2: "ww",
3: "oop"
}
var ss = "water"
console.log(data["ss"])
console.log(data.sss)
2) []运算符可以用纯数字作为变量名；
var data = {
water: "woo",
2: "ww",
3: "oop"
}
console.log(data["3"])
console.log(data.3)
3) []运算符可以用js关键字和保留字作为属性名；
以上三者，点运算符都不可以；其他情况两者皆可。
12. 将平面图形转化为立体图形：
transform-style: preserve-3d ，
给设置了transform属性的父元素设置perspective:1000px，会有立体的效果。
13. 继承的权重为0。
14. 如何实现一个左侧固定宽度，右侧自适应的效果?
1) 将父元素设置为伸缩盒子，左侧子DOM设置固定宽度，右侧子DOM设flex：1；
2) 左侧DOM设置宽度固定定位，右侧DOM设置100%宽。
15. 一个变量定义未赋值为undefined;
在函数内部定义变量时不使用var为隐式全局变量。(不推荐使用)
16. 循环点击事件后，里面只能用this。
17. 任意数字之间的随机整数公式： Math.floor(Math.random()*(max-min+1)+min)。
18. 函数是一种特殊的数据类型；函数不加()当作属性使用，加()是调用。
19. js事件对象：
1) 阻止默认行为：e.preventDefault() / return false;
2) 阻止事件的冒泡行为：e.stopPropagation() / onClick="event.cancelBubble = true"。
20. 下拉列表的多选效果实现需要添加属性 multiple。
21. 保留两位有效数字：num.toFixed(2)。
22. 关于闭包：
1) 什么是闭包？
当有A、B两个函数嵌套时，B能够访问A局部作用域下声明的变量，这样形成了闭包函数。
2) 闭包函数会带来什么问题？
普通函数执行完毕后，在内存空间就会被销毁掉；闭包函数执行完毕之后不会被销毁。在低版本的IE浏览器中，可能会发生一些问题，需要验证最后的结果，执行完毕之后，手动赋值为null。
3) 出现的场景：
一是函数作为参数使用；二是函数作为返回值使用。
4) 设置定时器，用完直接清除；或者设置立即执行函数。
23. 时间格式化：
---- 标准时间转时间戳
1) api返回"2020-12-23 02:53:22"：new Date("2020-12-23 02:53:22")则转换为时间戳继续转换；
2) Date.now() 是当前时间对应的时间戳；
3) new Date() 是标准时间，即"Thu Feb 04 2021 13:47:29 GMT+0800 (中国标准时间)",然后使用Date().parse(new Date())转变为时间戳。
---- 时间戳转年月日格式的时间
当前年份：时间戳.getFullYear();
当前月份：时间戳.getMonth()+1；
当前日：时间戳.getDate()；
小时：时间戳.getHours()；
分钟：时间戳.getMinutes()；
秒：时间戳.getSeconds()；
毫秒：时间戳.getMilliseconds()；
24. 运算符优先级： () > 一元运算符 > 算数运算符 > 关系运算符 > 相等运算符 > 逻辑运算符 > 赋值运算符
25. template标签是H5标签，不属于vue，其标签上不可用v-show指令的原因是该标签渲染出来的是虚拟DOM，不是真正的DOM元素，故不能使用v-show指令。
26. js有最大安全数值：即过大的数字在计算的时候或者json转换的时候会发生。使用json-bigint处理。(可能会在删除模块时出现)
27. js运行机制：
js是单线程的非阻塞的脚本语言。同步事件放在执行栈中，异步事件被挂起放到事件队列；当执行栈中所有任务执行完毕后，主线程才会处理事件队列中的任务。
28. 文本都有默认行高，有时会导致视觉上下边距不一样大，可设置 line-height:1 即可清除。
29. node.js是js的服务器运行环境。
30. block元素里面有个inline-block，可能会出现不对齐，上面有空隙，可以在block里面设置 line-heigh:0 试试。
31. 关于向复杂数据类型的数据中插入复杂数据类型遇到的问题：
1) 当向数组或者对象中插入数据时，且该数据为数组或者对象时要注意，只有插入的是该数据的值，才会更新原数据；如果插入的是数据的引用，则会变成循环条件的最后一个数值。
2) 举例：
(1. 正确写法示例)
data.metrics.forEach((e) => {
let dataArr = [];
for (let i = 0; i < data.time.length; i++) {
let arr = [];
arr.splice(0, 1, "20:20");
dataArr.push(arr);
}
this.options.series.push({
data: dataArr,
connectNulls: true,
});
});
(2. 错误写法示例)
let arr = [];
data.metrics.forEach((e) => {
let dataArr = [];
for (let i = 0; i < data.time.length; i++) {
arr.splice(0, 1, "20:20");
dataArr.push(arr);
}
this.options.series.push({
data: dataArr,
connectNulls: true,
});
});
32. 取消浏览器默认选中效果：(包括谷歌、火狐和IE)
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
33. 取消img标签图片为空时的默认边框和小logo：
img[src=""],img:not([src]) {opacity: 0;}
34. 实现img图片懒加载：
1) 引入jquery.lazyload.js
2) img标签添加属性：<img data-original="图片url地址" alt="" width="100%" height="100%">
3) $("img").lazyload({ effect: "fadeIn"(效果) });
实现背景图懒加载：
？？？?????????????????????????????????????????????????????????
35. 关于回调函数：
回调函数是作为参数传给另一个函数的函数，然后通过在外部函数内部调用该回调函数以完成某种操作。
36. 关于目录：
./是当前目录；
../是父级目录；
/是根目录。
37. js中Map和Object的区别：
--相同点：都是 键/值 对的对象；
--不同点：
1）Object对象有原型，也就是说它有默认的key值在对象上面，除非我们使用Object.create(null)创建一个没有原型的对象；
2）在Object对象中，只能把String和Symbol作为key值，但是在Map中，key值可以是任何基本类型(String,Number,Boolean,undefined,NaN...)，或者对象(Map,Set,Object,Function,Symbol,null...);
3）Map可以通过size属性获取Map长度，要获取Object的长度，你只能用别的方法了。
4）Map实例对象的key值可以为一个数组或者一个对象，或者一个函数，比较随意 ，而且Map对象实例中数据的排序是根据用户push的顺序进行排序的，而Object实例中key,value的顺序就是有些规律了， (他们会先排数字开头的key值，然后才是字符串开头的key值)；
38. js中关于Map和Set的区别：
1）Map和Set是ES6标准新增的数据类型，请根据浏览器的支持情况决定是否要使用；Set和Map主要的应用场景在于数组去重和数据存储；
2）Set是一种叫做集合的数据结构，Map是一种叫做字典的数据结构；
3）关于集合：集合是由一组无序且唯一(即不能重复)的项组成的，可以想象成集合是一个既没有重复元素，也没有顺序概念的数组。
39. 关于js中使用Class:
1）创建：Class classname {};
2）导出： export { classname };
3）导入使用：import { classname } from "文件路径"；
4）关于如何创建Class
--构造器：初始化属性；
constructor(plateId, plateRows, plateColumns) {
this.plateId = plateId
this.plateSize = plateRows * plateColumns
this.plateRows = plateRows
this.plateColumns = plateColumns
this.eggResults = new Array(this.plateSize).fill('')
this.eggImages = new Array(this.plateSize * 2).fill('')
this.countCategoryN = 0
this.countCategoryM = 0
}
--自定义方法：
exportForShow() {
return [this.plateId, this.eggResults, this.eggImages]
}
40. 关于运算符：
1）=是赋值运算符，==是关系运算符，===是全等运算符。
2）"=="与"==="是不同的,一个是判断值是否相等,一个是判断值及类型是否完全相等；第一个是相等符，在比较的时候会进行类型转换，第二个全等符。
3）a == b || a == c 的相反条件是 (a != b) && (a != c)
41. js优化集锦：
1）带有多个条件的if语句 ----> 把多个值放在数组中，然后调用数组的includes方法；
if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') {
}
---->
if (['abc', 'def', 'ghi', 'jkl'].includes(x)) {
}
2）简化if true...else ----> 三元运算符
let test;
if (x > 100) {
test = true;
} else {
test = false;
}
---->
let test = (x > 10) ? true : false;
3）给多个变量赋值 ----> 数组解构
let a = 1,
let b = 2,
let c = 3;
---->
let [a, b, c] = [1, 2, 3];
42. 数据转换为false的为：0 "" null undefined NaN
02-移动端相关
1. font-weight:
属性 font-weight:600 在移动端不适用不生效，解决办法是设置font-weight：bold(移动端只识别400、500)。
2. ios系统电话num默认是蓝色，解决：
meta标签添加: content="telephone=no，email=no"
3. 设置字与字之间的间距：letter-spacing:2px。
4. 禁止用户缩放且不可在两个手指间放大，在html的meta标签上添加属性：user-scalable=0，maxinum-scale=1.0 。
5. 关于移动端手机像素：
平常手机说的分辨率即为我们用的px，手机尺寸即为对角线的长度。
03-字符串
1. charAt(index)----返回指定位置字符串；
2. charCodeAt(index)----指定位置的unicode编码；
3. concat(str1,str2)----拼接字符串；
4. indexOf() 、lastIndexOf()----某字符项的下标值;
5. replace("原来的值","新的值")----替换某值;
6. slice(开始index，结束index)----开始到结束，不包括结束字符；(与substring用法一样)
7. substr(开始index，length)----截取从indx开始，length个长度的值并且返回新的str；
8. split("分隔符")----将字符串分割成数组，默认是以 ，分割；
9. toloewrCase()----转小写 toUpperCase()----转大写；
10. trim()----去掉字符串两端空格；
11. includes("参数")----是否包含某个字符；
04-数组
1. isArray()----判断是不是数组对象；
2. instanceof----判断是不是对象或者当前这个对象是不是由构造函数创建出来；
3. arr.concat(arr1)----拼接数组，返回一个新数组；
4. push()：添加元素到数组末尾，并返回该数组的新长度。
pop()：删除数组最后一个元素，并返回该元素的值。
unshift()：添加元素到数组开头，并返回该数组的新长度。
shift()：从数组中删除第一个元素，并返回该元素的值。
5. indexOf() lastindexOf()----返回下标值，没有则是-1；
6. join("分隔符")----将数组每一项拼成字符串；
7. includes("")----是否包含某数组元素；
8. 关于数组过滤的方法：
1) find()：用于找出第一个符合条件的成员，返回值为true，并且返回该成员；如果没有符合条件的成员，则返回undefined。其参数是一个回调函数。(且find方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和愿数组)
[1,2,3,-2,0,6,-8].find((n) => n < 0)
2) findIndex()：返回第一个符合条件的数组成员的位置；如果都不符合则返回-1。
[1,2,3,-2,0,6,-8].find((n) => n < 0)
3) filter()：返回一个符合条件的新数组并且不会改变愿数组
var arr = [1,2,3,-2,0,6,-8];
var newArr = arr.filter(item => item > 1);
console.log(newArr)
--------适用于数组去重
var arr = [1, 2, 2, 3, 4, 5, 5, 6, 7, 7, 8, 8, 0, 8, 6, 3, 4, 56, 2];
var arr2 = arr.filter((x, index,self) => self.indexOf(x) === index)
console.log(arr2);
4) forEach()：自动遍历数组全部元素，且无法break中途跳出循环，不可控，不支持return操作输出，return只用于控制循环是否跳出当前循环，没有返回值。
5) some()和every()
every()判断数组中是否每个元素都满足条件，只有都满足条件才返回true，只要有一个不满足就返回false。
some()判断数组中是否至少有一个元素满足条件，只要有一个满足就返回true，只有都不满足才返回false。
var arr1=[1, 2, 3, 4, 5];
var arr2=[1, 4, 6, 8, 10];
console.log(
arr1.every(function(value, index, array){
return value % 2 == 0;
})
);
console.log(
arr2.some(function(value, index, array){
return value % 2 == 0;
})
);
6) map()：返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值；
且不会对空数组进行检测；不会改变原始数组。
var data = [1, 2, 3, 4];
var arrayOfSquares = data.map(function (item) {
return item * item;
});
alert(arrayOfSquares);
05-ajax相关
1. jquery传formData对象时，$.ajax()里面需要添加2个属性：
processData:false
contentType:false
2. 使用formData传参注意事项：
1) 收集信息：var fd = new formData($("#myForm")[0])
2) 额外补充参数(属性)：fd.append("属性"，值)
3) 设置参数值：
fd.set("属性"，值)
fd.get(key)
fd.has(key)
fd.del(key)
4) 使用formData获取参数时，要看network中formData传回的参数与接口中需要的参数是否一致；如果不一致，则需要手动添加。另外获取富文本中的内容需要用特殊插件：
fd.set("content",tinyMCE.activeEditor.getContent())
3.
