呕心沥血！！总结2021前端必备面试题
面试题
1.用递归算法实现，数组长度为5且元素的随机数在2-32间不重复
递归就是函数在内部自己调自己
1.这是一道大题目，把考点拆成了4个小项；需要候选人用递归算法实现
a)生成一个长度为5的空数组arr
b)生成一个(2-32)之间的随机数rand
c)要把随机数rand插入到数组arr内，如果数组arr内已存在与rand相同的数组，则重新生成随机数rand 并插入到arr内[需要使用]不能使用for/while等循环
d) 最终输出一个长度为5，且内容不重复的数组arr。
var arr=new Array(5);
var num=randomNumber();
var i=0;
randomArr(arr,num)
function randomArr(arr,num){
if(arr.indexOf(num)<0){
arr[i]=num;
i++;
}else{
num=randomNumber();
}
if(i>=arr.length){
console.log(arr)
return;
}else{
randomArr(arr,num)
}
}
function randomNumber(){
return Math.floor(Math.random()*32+2)
}
2.圣杯布局和双飞翼布局的理解和区别
作用：圣杯布局和双飞翼布局解决的问题是一样的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。
区别：
圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。
双飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。
圣杯布局
<body>
<div id="hd">headerdiv>
<div id="bd">
<div id="middle">middlediv>
<div id="left">leftdiv>
<div id="right">rightdiv>
div>
<div id="footer">footerdiv>
body>
<style>
#hd{
height:50px;
background: #666;
text-align: center;
}
#bd{
/*左右栏通过添加负的margin放到正确的位置了，此段代码是为了摆正中间栏的位置*/
padding:0 200px 0 180px;
height:100px;
}
#middle{
float:left;
width:100%;/*左栏上去到第一行*/
height:100px;
background:blue;
}
#left{
float:left;
width:180px;
height:100px;
margin-left:-100%;
background:#0c9;
/*中间栏的位置摆正之后，左栏的位置也相应右移，通过相对定位的left恢复到正确位置*/
position:relative;
left:-180px;
}
#right{
float:left;
width:200px;
height:100px;
margin-left:-200px;
background:#0c9;
/*中间栏的位置摆正之后，右栏的位置也相应左移，通过相对定位的right恢复到正确位置*/
position:relative;
right:-200px;
}
#footer{
height:50px;
background: #666;
text-align: center;
}
style>
双飞翼布局
<body>
<div id="hd">headerdiv>
<div id="middle">
<div id="inside">middlediv>
div>
<div id="left">leftdiv>
<div id="right">rightdiv>
<div id="footer">footerdiv>
body>
<style>
#hd{
height:50px;
background: #666;
text-align: center;
}
#middle{
float:left;
width:100%;/*左栏上去到第一行*/
height:100px;
background:blue;
}
#left{
float:left;
width:180px;
height:100px;
margin-left:-100%;
background:#0c9;
}
#right{
float:left;
width:200px;
height:100px;
margin-left:-200px;
background:#0c9;
}
/*给内部div添加margin，把内容放到中间栏，其实整个背景还是100%*/
#inside{
margin:0 200px 0 180px;
height:100px;
}
#footer{
clear:both; /*记得清楚浮动*/
height:50px;
background: #666;
text-align: center;
}
<style>
.box{
width: 1000px;
height: 200px;
background-color: aqua;
margin: 0 auto;
position: relative;
}
.left{
width: 200px;
height: 200px;
background-color: blue;
position: absolute;
top: 0;
left: 0;
}
.right{
width: 200px;
height: 200px;
background-color: blue;
position: absolute;
top: 0;
right: 0;
}
.middle{
height: 200px;
background-color: red;
}
style>
<div class="box">
<div class="left">div>
<div class="middle">div>
<div class="right">div>
div>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lQZZh2D5-1620301392380)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20210120155055085.png)]
3.页面导入样式时，使用link和@import有什么区别？
区别：
1.link是HTML标签 @import是css提供的
2.link引入的样式页面加载时同时加载的 @import引入的样式需等页面加载完成后再加载。
3.link没有兼容性问题，@import不兼容ie5以下。
4.link可以通过js操作DOM动态引入样式表改变样式，而@import不可以
4.css3有哪些新增的特性
边框
- border-radius 圆角
- box-shadow 盒子阴影
- border-image 边框图像
背景
- background-size背景图片的尺寸
- background-origin背景图片的定位区域
- background-clip背景图片的绘制区域
渐变
- linear-gradient线性渐变
- radial-gradient径向渐变
文本效果
- word-break
- word-wrap
- text-overflow
- text-shadow
- text-wrap
- text-outline
- text-justify
转换
- 2D转换属性
- transform
- transform-origin
- 2D转换方法
- translate（x，y）
- translateX（n）
- translateY（n）
- rotate（angle）
- scale（n）
- scaleX（n）
- scaleY（n）
3d转换
- transform
- transform-orgin
- transform-style
- 3D转换方法
- translate3d（x，y，z）
- translateX（x）
- translateY（y）
- translateZ（Z）
- scale3d（x，y，z）
- scaleX（x）
- scaleY（y）
- scale（z）
- rotate3d（x，y，z，angle）
- rotateX（x）
- rotateY（y）
- rotateZ（z）
- perspective（n）
过渡
transition
动画
- @keyframes规则
- animation
弹性盒子（flexbox）
多媒体查询@media
5.H5新增元素
- section
- article
- audio
- video
- header
- footer
- small
6.去除字符串中最后一个指定的字符
var a='abcdef';
console.log( a.replace('f',''))
7.在页面上隐藏元素的方法
占位
- visibility：hidden
- margin-left：-100%；
- opacity：0；
- transform：scale（0）；
不占位
- display：none；
- width：0；height：0；overflow：hidden；
仅对文本元素生效
- text-indent：-999px；
- font-size：0；
8.全局属性有哪些
- accesskey 设置快捷键
- class为元素设置类标识
- contenteditable 指定元素内容是否可编辑
- contextmenu自定义鼠标右键弹出上下文菜单内容（仅firefox支持）
- data-* 为元素添加自定义属性
- dir 设置元素文本方向
- draggable 设置元素是否可拖拽
- dropzone 设置元素拖放类型
- hidden 规定元素仍未或不在相关
- id 元素id 文档内唯一
- lang 元素内容的语言
- spellcheck 是否启动拼写和语法检查
- style 行内css样式
- tabindex 设置元素可以获得焦点，通过tab导航
- title 规定元素有关的额外信息
- translate 元素和子孙节点内容是否需要本地化
Vue面试题
1.vue的特点是什么
1.国人开发的轻量级框架
2.双向数据绑定，在数据操作方面更为简单
3.视图，数据，结构分离，不需要进行逻辑代码的更改，只需要操作数据就能完成相关操作。
4.组件化方便封装和复用
5.虚拟DOM：dom操作是非常消耗性能的，不在使用原生的DOM 操作节点，极大缓解了DOM操作
2.vue中父子组件是如何传值的？
https://www.cnblogs.com/wzfwaf/p/112801523.html
3.v-show和v-if指令的共同点和不同点
共同点：都能控制元素的显示和隐藏。
不同点：实现本质方法的不同。
v-show本质是通过display设置为none控制隐藏只会编译一次
v-if 是动态的向DOM树内添加或删除DOM元素，若初始值为false 就不会编译了，而且v-if不停的销毁创建比较消耗性能
如果频繁的切换某节点，使用v-show 切换开销比较小 初始开销较大
如果不需要频繁切换节点使用v-if 使用v-if 初始开销较小 切换开销较大
4.说出几种vue当中的指令和它的用法
v-model 双向数据绑定
v-once 只能绑定一次
v-for 循环
v-if 和v-show控制显示和隐藏 (具体区别看上方)
v-on 事件绑定
v-bind 属性绑定
5.vue-loader
vue的一个文件加载器，将template/js/style转换为js模块
用途：js可以ES6、style样式可以将sass、less、css解析出来
6.axios 是什么？怎样使用
axios 是读取后台资源的模块
首先使用 npm install axios --save 安装模块，js中使用import引入
然后请求方法具体看文档 是post 还是get 、put等等
如果成功侯在.then函数中返回否则在.catch中返回
axios.get('地址')
.then(res=>{
console.log(res)
})
.catch(err=>{
console.log(err)
})
如果在VUE中使用
首先引入axios
import Axios from 'axios'
将axios 赋予vue原型中
Vue.prototype.$http = axios
也可以加上默认地址
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
再书写的话 可以这样写
axios.post('users',{数据})
等同于
axios.post('http://127.0.0.1:8888/api/private/v1/users',{数据})
7.单页面应用和多页面应用的区别及优缺点
单页面应用(SPA)，通俗一点说就是指只有一个主页面的应用，浏览器一开始要记载所有的html，js，css。所有的页面内容都包含在这个主页面中。但是写的时候还是回分开写的，然后再交互的时候通过路由程序载入
多页面(MPA),就是指一个应用中有多个页面，页面跳转时是整页刷新。
单页面的有点：用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点SPA对服务器压力比较小；前后端页面分离；页面效果会比较炫酷（比如切换页面内容是的专场动画）。
单页面缺点 不利于seo；导航不可用如果一定要导航需自行实现前进后退
8.简述一下vue常用的修饰符和作用
.stop相当于js中的event.stopPropagaiton()防止事件冒泡
.prevent 等同于js中的event.preventDefault()防止执行预设的行为(如果事件可取消，而不停止事件的进一步传播)
.captrue 与冒泡事件相反，事件捕获由外到内
.self只会触发自己范围内的事件，不包括子元素
.once 只会触发一次
9.谈谈你对MVVM开发模式的理解
MVVM分为model、view、viewmodel三个
- Model 为数据模型、数据和业务逻辑都在model中定义
- view 代表UI视图和数据展示
- ViewModel负责监听数据的改变并控制视图的更新与用户交互操作
10.前端如何优化网站性能
1.减少HTTP的请求数量
可以通过精灵图 合并css文件和js文件懒加载方式来请求http求情
CSS Sprites
css精灵
合并css文件和js文件
使用打包工具 webpack 和grunt、gulp等 减少http请求将多个文件打包成一个文件
lazyLoad
俗称懒加载可以控制网页上的内容在一开始无需加载不需要发请求，在用户真正需要的时候立刻加载出内容，这样就控制了网页一次性请求的http数量
2.控制资源文件加载优先级
浏览器在加载HTML内容时，是将HTML内容从上到下解析，解析到link或者script标签时就会加载href或者src对应链接内容，为了第一时间展示页面给用户，就需要将css提前加载不要受js加载影响
3.利用浏览器的缓存
4.减少DOM操作
5.图标使用iconfont 字体图标替换image标签
11.vue中样式绑定语法
1.对象方法v-bind:class="{'orange':isRipe,'green':isNotRipe}"
2.数组方法:v-bind:class="[class1,class2]"
3.行内样式v-bind:style="{color:color,fontSize:fontSize+'px'}"
12.简述vue中每个生命周期具体适合哪些场景(*重要)
beforeCreate：在new一个vue实例后，只有一些默认的声明周期钩子和默认事件，其他的东西都还没创建，在beforeCreate生命周期执行的时候，data和methods中的数据都还没初始化。不能在这个阶段使用data中的数据和methods中的方法
create:data和methods都已经被初始化好了，如果要调用methods中的方法，或者操作data中的数据最早可以在这个阶段中操作。
beforMount：执行到这个钩子的时候，在内存中已经编译好了模板，但是还没有挂载到页面中，此时页面还是旧的
mounted：执行到这个钩子的时候，就标识Vue实例已经初始化完成了。此时组件脱离了创建阶段，进去了运行阶段。如果问哦们想要通过插件操作页面上的DOM节点最早可以在这个阶段中运行
beforeUpdate：当执行这个钩子时，页面中显示的数据还是旧的，data中的数据时更新后的，页面还没有和最新的数据保持同步
updated：页面显示的数据和data中的数据已经保持同步了，都是最新的
beforeDestory：vue实例从运行阶段到了销毁阶段，这个时候所有的data和methods，指令，过滤器都是处于可用状态还没有真正被销毁
destoryed：这个时候所有的data和methods。指令，过滤器都是处于不可用状态。组件已经被销毁
13、vue.cli中怎样使用自定义的组件？有遇到过哪些问题吗？
- 第一步：在components目录新建你的组件文件（indexPage.vue），script一定要export default {}
- 第二步：在需要用的页面（组件）中导入：import indexPage from ‘@/components/indexPage.vue’
- 第三步：注入到vue的子组件的components属性上面,components:{indexPage}
- 第四步：在template视图view中使用，
例如有indexPage命名，使用的时候则index-page
14.如何避免回调地狱
- 模块化将回调函数转换为独立函数
- 使用流程控制库 如async
- 使用promise
- 使用async/await
15.使用NPM有哪些好处
1.通过NPM可以安装和管理项目的依赖，并且能够指明依赖的具体版本号
2.对于Node应用开发而言，你可以通过package.json文件来管理项目信息，配置脚本，以及指明依赖的具体版本
3.npm install xx
不会配置到package.json，你需要自己require，之后运行npm install命令时，不会自动安装xx
npm install xx -D
即写入devDependencies对象（里面的插件只用于开发环境，不用于生产环境）
dev开头——开发环境，记住这个就行
npm install xx -S
即写入dependencies对象（生产环境）
4.npm uninstall xx卸载
项目转换时不会把node_modules包发过去 当我们拿到项目是运行
npm install 会自动安装依赖
16.如何消除一个数组里边重复的元素
var arr1=[1,2,2,2,3,3,3,4,5,6];
var arr2=[];
for(var i=0,i17.写一个function，清除字符串前后的空格(兼容所有浏览器)
function trim(str){
if(str &typeof str==='string'){
return str.replace(/(^s*)|(s*)$/g,'');
}
}
18.说一下自己常用的ES6功能
- let / const
es6 以前，都是用 var 关键字来标识，这样有个变量提升的坑。在 es6 中，添加了 let 和 const 两个关键字，let 定义变量，const 定义常量，并且添加了块级作用域。看下用法：
let：
let a = 1
a = 100
编译结果：
编译结果：
var a = 1;
a = 100;
const：
const b = 2
编译结果：
var b = 2;
再看一个：
const b = 2
b = 200
出错：
SyntaxError: es6-demo.js: "b" is read-only
说 b 是只读，说明 const 定义的是常量。在实际项目中，如有不希望别人改的变量，就可以用 const 定义，也是很方便了。
顺便看一下var的变量提升：
console.log(a); // undefined
var a = 100
在定义之前输出变量 a ，是 undefined，他其实相当于这样子写：
var a
console.log(a);
a = 100
es6 以前，js 引擎将所有的变量都提到最前面，初始化为 undefined。
es6 以前，js 引擎将所有的变量都提到最前面，初始化为 undefined。
- 多行字符串 / 模板变量
在 es6 之前，字符串的拼接是这样的：
var name = "李四"
var age = 18
var myIntro = ''
myIntro += 'my name is ' + name + ', '
myIntro += 'my age is ' + age
在 es6 中，可以使用模板字符串 `` 和模板变量 ${ } ：
const name = "李四"
const age = 18
const myIntro = `my name is ${name},
my age is ${age}
`
这样使用起来很方便，避免字符串拼接中出现的不必要的错误，而且更简单简洁，最重要的是人易懂！需要注意的是 ${ } 要和 `` 一起使用不然不会被解析。
- 解构赋值
顾名思义，就是先解构，再赋值！
比如先定义一个对象和数组：
var obj = {
a: 1,
b: 2,
c: 3
}
var arr = [1,2,3]
在 es6 以前，这样获取属性的值：
在 es6 以前，这样获取属性的值：
obj.a
obj.b
arr[i]
在 es6 中：
在 es6 中：
const {a,c} = obj
const [x,y,z] = arr
很简单就可以获取对象的属性和数组的值，看下编译得结果：
var obj = {
a: 1,
b: 2,
c: 3
};
var a = obj.a,
c = obj.c;
var arr = [1, 2, 3];
var x = arr[0],
y = arr[1],
z = arr[2];
看明白了吗？
就是使用 const {a,c} = obj 这种方式获取对象的属性的方法时，大括号中的变量对象对象的属性，使用 const [x,y,z] = arr 这种方式获取数组的元素，中括号中的变量的索引对应真正数组的索引，即：x 是第一个，对应 arr 数组中的第一个，z 是数组的第三个，对应 arr 数组的第三个。
- 块级作用域
在 es6 以前：
var obj = {
a: 1,
b: 2,
c: 3
}
for (var item in obj) {
console.log(item);
}
console.log(item);
变量 item 其实是在循环外部，咱们预想是访问不到的，但是实际是可以访问到的，以上写法相当于将 var item 提到最前面，就好理解了，这样子的话变量 item 相当于是在全局都可以访问的，这与我们的预期是相违背的。
再来看看 es6 中：
变量 item 其实是在循环外部，咱们预想是访问不到的，但是实际是可以访问到的，以上写法相当于将 var item 提到最前面，就好理解了，这样子的话变量 item 相当于是在全局都可以访问的，这与我们的预期是相违背的。
再来看看 es6 中：
const obj = {
a: 1,
b: 2,
c: 3
}
for (let key in obj) {
console.log(key);
}
console.log(key);
因为有块级作用域的概念，所以循环中的 key 变量只在循环中能使用，咱们编译一下：
var obj = {
a: 1,
b: 2,
c: 3
};
for (var _key in obj) {
console.log(_key);
}
console.log(key);
很明显，循环里面的 key 和 外面的 key 不是同一个东西！
- 函数默认参数
首先来设定一个场景：有一个函数 test ，可能给它传一个参数，也可能传两个，传一个参数时，第二个参数给个默认值，在 es6 以前这样判断：
function test (a, b) {
if (b == null) {
b = 0
}
}
但是在 es6 中写法非常简单：
function test (a, b = 0) {
// ...
}
咱们编译一下，康康他到底是个啥：
咱们编译一下，康康他到底是个啥：
function test(a) {
// ...
var b = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
}
原来如此！es6的写法也就是在内部做了一个判断：如果参数的个数大于1，并且第二个参数不是undefined，那么就将第二个参数赋值给 b，否则b = 0。这个跟上面的 es6 之前的判断是一致的，这种写法特别简单、易读！
- 箭头函数
用 map 遍历数组
es6 以前：
var arr = [100, 200, 300]
arr.map(function (item) {
return item + 1
})
es6 写法：
const arr = [100, 200, 300]
arr.map(item => item + 1)
当函数只有一个参数，并且函数体中只有一行代码时，可以简写成上面的形式，参数有多个，函数体中超过一行这样写：
arr.map((item,index) => {
console.log(index, item);
return item + 1
})
编译看一下：
var arr = [100, 200, 300];
arr.map(function (item) {
return item + 1;
});
arr.map(function (item, index) {
console.log(index, item);
return item + 1;
});
好吧，，其实就是把箭头函数转换成普通函数。。
你以为箭头函数到这儿就完了？？？
this 指向：
运行下面脚本：
function test () {
console.log('test', this);
}
test.call({a: 100})
结果：
test {a: 100}
在其中加一个map：
function test () {
console.log('test', this);
var arr = [1,2,3]
arr.map(function (item) {
console.log(item, this);
})
}
test.call({a: 100})
结果：
很明显，map 中的 this 是 window 对象。这是 js 的一个大坑，在这个情况下，通过 call 绑定了一个 this 是 { a: 100 } 这个对象，但是 map 中的 this 却是 window 。这是因为 this 的取值是在其调用时决定的，而 map 中的函数相当于调用一个普通函数，而普通函数的作用域在全局，其 this 就指向了 window 。而箭头函数韩浩的解决了这个问题，箭头函数中的 this 与其上一个作用域的 this ，在此处中，map 中的 上一级作用域是 test 函数，而 test 函数的 this 是 { a: 100 } 对象。
function test () {
console.log('test', this);
var arr = [1,2,3]
arr.map( item => {
console.log(item, this);
})
}
test.call({a: 100})
结果：
-
模块化
在现在多个人开发同一个项目很常见，每个人负责不同的模块，还有可能会几个人使用同一个模块，在这种情况下，模块化就很重要！其实使用起来也很简单，比如说有模块A、B、C三个 js 文件，各自在其中定义好自己的代码，使用 export 关键字导出自己的东西，别人使用时用 import 关键字引用即可，模块化的处理工具有 webpack、rollup 等。如果你有兴趣，详情可以看看我的上一篇博客ES6 模块化如何使用，开发环境如何打包，欢迎指正。 -
class
标题是 class， 但是实际上应该说是构造函数：
es6以前，js 构造函数：
function MathPlus (x, y) {
this.x = x
this.y = y
}
MathPlus.prototype.getAddResult = function () {
return this.x + this.y
}
var testAdd = new MathPlus(1,2)
console.log(testAdd.getAddResult()); // 3
es6 中 class 写法：
class MathPlus {
constructor(x, y) {
this.x = x
this.y = y
}
getAddResult() {
return this.x + this.y
}
}
const testAddEs6 = new MathPlus(3,4)
console.log(testAddEs6.getAddResult()); // 7
js 定义构造函数和 es6 中的 class 的所实现目的一样的，但是 class 就看起来更加清晰、易懂！在 js 的构造函数中，在其原型上定义方法从而实现，而 class 中直接在 { } 中写函数就可以直接实现这个类中有这个函数了。
本质：
其实 class 的本质其实是一个语法糖：
理解起来就是，二者实现的东西是一样的，只是有个的写法更简洁、易读、易懂。对应一下，其实 class 所实现的东西和 js 的构造函数是一样的，class 的实现原理和 js 构造函数是一样的，都是通过原型实现的。
console.log(typeof MathPlus); // function
console.log( MathPlus.prototype === testAddEs6.__proto__ ); // true
console.log( MathPlus === MathPlus.prototype.constructor ); // true
以上的结果和 js 的构造函数是一致的，MathPlus 这个 class 的本质是一个function ，其实例 testAddEs6 有一个隐式原型 proto ，并且和 MathPlus 的 prototype 三等。
关于继承：
js 实现继承：
function Math (x, y) {
this.x = x
this.y = y
}
Math.prototype.getSubResult = function () {
return this.x - this.y
}
// 通过绑定原型，实现继承
MathPlus.prototype = new Math()
var testAdd = new MathPlus(1,2)
// console.log(testAdd.getAddResult());
console.log(testAdd.getSubResult()); // -1
class 继承：
class 继承：
class Math {
constructor(x, y) {
this.x = x
this.y = y
}
getSubResult() {
return this.x - this.y
}
}
class MathPlus extends Math {
constructor(x, y) {
super(x, y) // 重点！！！自动实现父类的 constructor
this.x = x
this.y = y
}
getAddResult() {
return this.x + this.y
}
}
const testAddEs6 = new MathPlus(3,4)
console.log(testAddEs6.getAddResult()); // 7
console.log(testAddEs6.getSubResult()); // -1
console.log(testAddEs6.__proto__ === MathPlus.prototype); // true
console.log(MathPlus.prototype.__proto__ === Math.prototype); // true
看到结果其实就更能体现 class 实际上是通过原型实现的！
- promise
在项目中涉及到网络请求资源时，就要调用后端提供的接口，常用的jQuery、axios、fetch等，我用的最多的就是 axios ，jQuery 也用过，不过很少。。，说正题！调用接口之后就有回调函数，成功与否都有相应的回调函数，这个是异步的，但是当请求比较复杂时，会出现回调地狱（callback hell），比如说：根据接口1 获取 data1 ，在其中调用接口2 获取data 3…，用 promise 就很简单，至少看起来不会那么复杂。
首先我们先封装一个根据接口 URL 获取数据的通用方法 getData ：
function getData(url) {
return new Promise((resolve, reject) => {
$.ajax({
url,
success: (data) => {
resolve(data)
},
error: (data) => {
reject(data)
}
})
})
}
getData 函数中，返回了一个 promise 实例，resolve 表示成功时调用的回调函数，reject 表示失败时调用的回调函数。那么，对于上面比较复杂的情况就可以写成：
getData(url1).then(data1 => {
console.log(data1);
return getData(url2)
}).then(data2 => {
console.log(data2);
return getData(url3)
}).catch(err => {
console.log(err);
})
每一次回调 then 中的 data 来自上一层的数据返回。
19.link和@import的区别
两者都是外部引用的CSS的方式，但是存在一定的区别：
1.link是XHTML标签除了能够加载CSS，还可以定义RSS等其他事务；而@import属于CSS范畴，只可以加载CSS
2.link引用css时，在页面载入时同时加载;@import需要页面完全载入以后再加载。
3.link是XHTML标签，无兼容问题；@import则是再CSS2.1提出的，低版本的浏览器不支持
4.link支持使用javascript控制DOM样式改变而@import不支持
20、一次完整的HTTP事务是怎样的一个过程?
基本流程：
a. 域名解析
b. 发起TCP的3次握手
c. 建立TCP连接后发起http请求
d. 服务器端响应http请求，浏览器得到html代码
e. 浏览器解析html代码，并请求html代码中的资源
f. 浏览器对页面进行渲染呈现给用户
-----------css
21.介绍一下标准的css的盒子模型？与低版本IE的盒子模型有什么不同?
标准盒子模型：宽度=内容的宽度（content）+border+padding+margin
低版本IE盒子模型：宽度=内容宽度（content+border+padding）+margin
用来控制元素的盒子模型的解析模式，默认为content-box
content-box：W3C的标准盒子模型，设置元素的height/width 属性指的是content部分的高/宽
border-box：IE传统盒子模型。设置元素的height/width属性指的是border+padding+content部分的高/宽
22.CSS选择器有哪些？哪些可以继承
CSS选择器：id选择器（#id）、类选择器（.class）、标签选择器（div，h1，p）、相邻选择器（h1+p）、子选择器（ul>li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel=“external”]）、伪类选择器（a:hover,li:nth-child)
可继承的属性：font-size，font-family，color
不可继承的样式：border，padding，margin，width，height
优先级 ：！important》id选择器》类选择器》标签选择器
23.css有哪些新特性？
background-image
background-origin :background-origin 属性规定 background-position 属性相对于什么位置来定位。
属性如下：
| 值 | 描述 |
|---|---|
| padding-box | 背景图像相对于内边距框来定位。 |
| border-box | 背景图像相对于边框盒来定位。 |
| content-box | 背景图像相对于内容框来定位。 |
background-size background-repeat
word-wrap （对长的不可分割单词换行）
| 值 | 描述 |
|---|---|
| normal | 只在允许的断字点换行（浏览器保持默认处理）。 |
| break-word | 在长单词或 URL 地址内部进行换行。 |
文字阴影 text-shadow ：5px 5px 5px #000 （水平阴影，垂直阴影，模糊距离，阴影颜色）
font-face属性：定义自己的字体
圆角（边框半径）：border-radius 属性用于创建圆角
边框图片：border-image：url（）30 30 round
盒阴影：box-shadow：10px 10px 5px #444
媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性
24.px和em的区别
px和em都是长度单位，区别是px的值时固定的 指定多少就是多少，计算比较容易。em的值不是固定的，并且em会继承父级元素的字体大小
浏览器的默认字体是16px 所以未经调整的浏览器都符合：1em=16px。那么12px=0.75em
10px=0.625em
--------------------JS
25.javascript的typeof 返回哪些数据类型
alert(typeof null) //object
alert(typeof undefined) //undefined
alert(typeof NaN) //number
alert(NaN == undefined) false
alert(NaN==NaN) //false
var str='123abc'
alert(typeof str++) // number
alert(str) NaN
26.例举至少三种强制类型转换和2种隐式类型转换？
1.强制类型转换：明确调用内置函数，强制把一种类型的值转换为另一种类型。强制类型转换主要有：boolean、number、string、parseint、parseFloat
2.隐式类型转换：在使用算数运算符时，运算两边的数据类型是可以人一的，如如，一个字符串可以和数字象加。之所以不同的数据类型可以与运算，是因为javascript银钱在运算之前会悄悄的把他们进行了隐式类型转换。隐式类型转换主要有+、-、==、！
27.javascript的事件流模型有什么？
事件流描述的是从页面中接收事件的顺序。DOM结构是树形结构，当页面中的某一个元素触发了某个一个事件，事件会从最顶层的window对象开始，向下传播到目标元素，途径的祖先节点都会触发对应的事件，如果当前节点的该事件绑定了事件处理函数的花，则会执行该函数当事件达到目标元素并执行绑定函数（如果有绑定的话）事件又会向上传播到window元素，途径的祖先节点都会触发对应的事件
事件流包含三个阶段：
- 事件捕捉阶段
- 处于目标阶段
- 事件冒泡阶段
- 事件捕捉阶段：事件开始由顶层对象触发，然后逐级向下传播，直到目标的元素；
- 处于目标阶段：处在绑定事件的元素上；
- 事件冒泡阶段：事件由具体的元素先接受，然后逐级向上传播，知道不具体的元素
28.BOM对象有哪些，列举window对象？
1.window对象，是JS的最顶层对象，其他的BOM对象都是window对象的属性；
2.document对象，文档对象；
3.location对象，浏览器当前URL信息；
4.navigator对象，浏览器本身信息；
5.screen对象，客户端屏幕信息
6.history对象，浏览器访问历史信息
29.请简述AJAX及基本步骤
简述AJAX：AJAX即Asynchronous javascript And XML（异步javascript和XML）是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换，AJAX可以是网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
AJAX基本步骤
- 初始化AJax对象
- 连接地址准备数据
- 发送数据
- C
- 接收数据完成
//初始化ajax对象
var xhr =new XMLHttpRequest()
xhr.open('地址',请求方式)
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.state==200){
res=xhr.responseText
}
}
xhr.send()
如果是post请求的话需要请求头！！！
30、HTTP状态消息 200 302 304 403 404 500 分别表示什么？
- 200：请求成功，请求所希望的响应头或数据将随此响应返回
- 302：请求的资源临时从不同的URL响应请求。由于这样的重定向是临时的，客户端应当继续向原有地址发送以后的请求。只有在Cache-Control或Expires中进行了指定的情况下，这个响应才可缓存的
- 304：如果客户端发送了一个待条件的GET请求且该请求已被允许，而文档的内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个状态码。304响应禁止包含消息体，因此始终以消息头后的第一个空行结尾。
- 403：服务器已经理解请求，但拒绝执行它
- 404：请求失败，在服务器未找到该资源
- 500：服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。一般来说，这个问题都会在服务器端的源代码出现错误时出现。
31.GET和POST的区别，何时使用POST
GET和POST的区别：
GET：一般用于查询数据，使用URL传递参数，由于浏览器对地址栏长度有限制，所以对使用get方式所发送信息的数量有限制，同时浏览器会记录（历史记录，缓存）中会保留请求地址的信息，包括地址后边的数据。get只能发送普通格式（URL编码格式）的数据
POST：一般用于向服务器发送数据，对所发送的数据的大小理论上没有限制，浏览器会缓存记录地址，但是不会记录post提交的数据。post可以发送纯文本、URL编码格式、二进制格式的字符串、形式多样
在以下情况中，请使用POST请求：
- 以提交为目的的请求（类似语义化，get表示请求，post表示提交）
- 发送私密类数据（用户名、密码）（因为浏览器缓存记录特性）
- 向服务器发送大量数据（数据大小限制区别）
- 上传文件图片时（数据类型区别）；
32.js字符串操作函数？
concat（）-将两个或多个字符的文本组合起来，返回一个新的字符串
indexOf（）-返回字符串中一个字符串第一处出现的索引。如果没有匹配项，返回-1
charAt（）返回指定位置的字符
lastindexOf（）返回字符串中一个字符串最后一处出现的索引，如果没有匹配项，返回-1
substr（）函数–返回从string的startPos位置，长度为length的字符串
slice（）-提取字符串的一部分，并返回一个新字符串
replace（）用来查找匹配一个正则表达式的字符串，然后使用新字符串代替匹配的字符串
split()– 通过将字符串划分成子串，将一个字符串做成一个字符串数组。
length– 返回字符串的长度，所谓字符串的长度是指其包含的字符的个数。
toLowerCase()– 将整个字符串转成小写字母。
toUpperCase()– 将整个字符串转成大写字母。
33.数组中常用方法
1.push() 后增
push()方法可以向数组后添加一个新的元素，并返回新数组的长度。
末尾添加，返回长度，改变原数组
var a = [1,2,3]
var b = a.push(4)
console.log(a) // [1,2,3,4]
console.log(b) // 4
2.unshift() 前增
unshift()可以向数组前添加一个或多个元素，并返回新的长度
首部添加，返回长度，改变原数组
var a = [2,3,4]
var b = a.unshift(0,1)
console.log(a) // [0,1,2,3,4]
console.log(b) // 5
3.pop() 后删
pop() 用于删除并返回最后一个元素。
尾部删除，返回被删除的元素，改变原数组
var a = [1,2,3]
var b = a.pop()
console.log(a) // [1,2]
console.log(b) // 3
4.shift() 前删
shift() 用于删除并返回首个元素
删除首部元素，返回被删元素，改变原数组
var a = [1,2,3]
var b = a.shift()
console.log(a) // [2,3]
console.log(b) // 1
- splice() 修该删除
splice(index,length,增加的元素1,增加的元素2…,增加的元素N) 表示从index开始删除length个元素，并从index开始新增元素1~N，放回被删除的元素组成的数组
对数组进行删除修改，返回被删除的元素组成的数组，改变原数组
var a = [1,2,3]
var b = a.splice(1,1,3,[2,3,4],5)
console.log(a) // [1,3,[2,3,4],5,3]
console.log(b) // [2]
6.concat() 拼接
concat() 方法用来合并两个或多个数组
合并两个或多个数组，返回新数组，不会改变原数组
var a = [1,2,3]
var b = [4,5]
var c = a.concat(b)
console.log(a) // [1,2,3]
console.log(b) // [4,5]
console.log(c) // [1,2,3,4,5]
7.slice() 剪切
slice(startIndex,endIndex) 返回从startIndex开始(包括)，到endIndex(不包括)之间的原属组成的数组
返回新数组，不改变原数组
var a = [1,2,3]
var b = a.slice(0,1)
// 不填参数则表示剪切整个数组
var c = a.slice()
console.log(a) // [1,2,3]
console.log(b) // [1]
console.log© // [1,2,3]
console.log(a=c) // false // 注意 a ! c
// 负数表示从后往前数
var d = a.slice(-1,-2)
console.log(d) // [] 从左向右截取，所以说为[]
var e = a.slice(-1)
console.log(e) // [3]
8.join()
join() 方法用来将数组转换为字符串
不改变原数组，返回转换后的字符串
var a = [1,2,3,4,5]
console.log(a.join(’,’)) // 1,2,3,4,5
console.log(a) // [1,2,3,4,5]
9.sort() 排序
按ascii码排序
改变原数组，返回排序后的数组
var a = [‘a’,‘b’,‘d’,‘c’]
console.log(a.sort()) // [‘a’,‘b’,‘c’,‘d’]
console.log(a) // [‘a’,‘b’,‘c’,‘d’]
10.reverse() 颠倒顺序
reverse() 方法用于颠倒数组中元素的顺序。
返回的是颠倒后的数组，会改变原数组。
var a = [1,3,2,7,6]
console.log(a.reverse()) // [6,7,2,3,1]
console.log(a) // [6,7,2,3,1]
11.indexOf()和lastIndexOf()
indexOf(某元素,startIndex) 从startIndex开始，查找某元素在数组中的位置，若存在，则返回第一个位置的下标,否则返回-1
lastIndexOf(某元素，startIndex) 和indexOf()相同，区别在于从尾部向首部查询
不会改变原数组，返回找到的index,否则返回-1
若不使用下标，则一般通过includes()方法代替indexOf()
var a = [1,2,4,3,4,5]
console.log(a.indexOf(4)) // 2
console.log(a.indexOf(4,3)) // 4
12.filter() 过滤
filter() 方法返回数组中满足条件的元素组成的新数组，原数组不变
filter()的参数是一个方法
var a = [1,2,3,4,11]
// 第一个参数为一个方法，有三个参数，current:当前值 index:当前值下标 array:这个数组对象
var b = a.filter(function(current,index,array){
return current < 10
})
console.log(b) // [1,2,3,4]
console.log(a) // [1,2,3,4,11]
13.map() 格式化数组
map() 方法来根据需求格式化原数组，返回格式化后的数组。原数组不变
var a = [1,2,3,4,5]
// 参数同filter方法
var b = a.map(function(current,index,array){
return current + 1
})
console.log(b) // [2,3,4,5,6]
console.log(a) // [1,2,3,4,5]
14.every()
对数组的每一项都运行给定的函数，若每一项都返回 ture,则返回 true
var a = [1,2,3,4,5]
var b = a.every(function(current,index,array){
return current < 6
})
var c = a.every(function(current,index,array){
return current < 3
})
console.log(b) // true
console.log© // false
15.some()
对数组的每一项都运行给定的函数，若存在一项或多项返回 ture,则返回 true
var a = [1,2,3,4,5]
var b = a.some(function(current,index,array){
return current > 4
})
var c = a.some(function(current,index,array){
return current > 5
})
console.log(b) // true
console.log© // false
16.forEach() 数组遍历
遍历整个数组，中途不能中断
var arr = [‘a’,‘b’,‘c’]
var copy = []
arr.forEach(function(item){
copy.push(item)
})
console.log(copy)
ES6新增的方法
- find()
找到数组中第一次满足条件的元素，并返回，若找不到则返回undefined。不改变原数组。
和filter()方法的区别在于：filter返回值是所有满足条件的元素组成的数组，
一般在需要使用找到的元素时，用find()方法
var a = [1,2,3,4]
// b在下面需要使用，则一般用find
var b = a.find(function(ele,index,array){
return ele == 1
})
var c = 3
var d = b + c
console.log(a) // [1,2,3,4]
console.log(b) // 1
console.log(d) // 4
// 若只需判断元素是否存在
// 若果是简单数组(非对象数组)，则一般使用Array.includes(value)方法
// 如果为对象数组，则可以使用Array.some()方法
var a = [1,2,3]
console.log(a.includes(1)) // true
var a = [{“name”: “xiaoming” },{“name”: “xiaohong”}]
console.log(a.some(function(ele){
return ele.name == ‘xiaoming’
})) // true
2.findIndex()方法
findIndex()的作用同indexOf()，返回第一个满足条件的下标，并停止寻找。
区别是findIndex() 的参数为一个回调函数,且一般用于对象数组
var a = [1,2,3,4]
var b = a.findIndex(function(ele,index,array){
return ele === 2
})
var c = a.indexOf(2)
console.log(a) // [1,2,3,4]
console.log(b) // 1
console.log© // 1
3.includes()
includes()方法,返回一个布尔值。 参数是一个value,一般用于简单数组。
对于复杂数组，则可以使用some()方法替代includes()方法
var a = [1,2,3]
console.log(a.includes(1)) // true
4.Array.isArray()方法
用来判断一个元素是否为数组
Array.isArray([]) // true
Array.isArray({}) // false
34.怎样添加、移除、移动、复制、创建、查找节点？
1.创建新节点
createElment()创建于i个具体的元素
2.添加、移除
appendChild（）添加
removeChild（）移除
3.查找
document.getElementsByTagName（）通过标签名称获取的是数组
document.getElementsByName()通过元素的Name属性的值
document.getElementById()通过元素ID，唯一性
document.querySelector(#id)查找元素 唯一性
document.querySelector(’.aa’)查找元素 获取的是数组
35.写出3个使用this的典型应用
1.在html元素事件属性中使用，如：
2.构造函数
function Animal(name，color){
this.name=name;
this.color=color;
}
3.input点击，获取值
4.apply()/call()求数组最值
var number=[5,458,120,-215];
var maxInNumbers=Math.max.apply(this.numbers);
console.log(maxInNumbers)//458
var maxInNumbers=Math.max.call(this,5,458,120,-215);
console.log(maxInNumbers);458
5.比较typeof与instanceof？
相同点：Javascript中type和instanceof常用来判断一个便两个是否为空，或者是什么类型的。
typeof的定义和用法：返回值是一个字符串，用来说明变量的数据类型
细节：
1）type of 一般只能返回如下几个结果：
number，boolean，string，function，object，undefined。
2)、typeof来获取一个变量是否存在，如if(typeof a!=“undefined”){alert(“ok”)}，而不要去使用if(a)因为如果a不存在(未声明)则会出错。
3）对于Array，Null等特殊对象使用typeof一律返回object，这正是typeof的局限性。
instanceof定义和用法：instanceof用于判断一个变量是否属于对象的实例。
实例演示：
a instanceof b? alert(“true”):alert(“false”);a是b的实例？真：假
var a=new Array();
alert (a instanceof Array);//true
alert(a instanceof Object)//true
如上，会返回true，同时alert(a instanceof Object) 也会返回true，
这是因为Array 是object 的子类、
function test(){};
var a=new rest();
alert (a instanceof test)//true
细节：
1.如下得到的结果为N这里的instanceof测试的object是指js语法中的object，不是指dom模型对象。
if(window instanceof Object){alert(‘Y’)}else{alert(‘N’)}//N
7.如何理解闭包？
- 定义和用法：当一个函数的返回值是另外一个函数，而返回的哪个函数如果调用了其父函数内部的其他变量，如果返回的这个函数在外部被执行，就产生了闭包
- 表现形式：使函数外部能够调用函数内部定义的变量
- 实例如下
1）根据作用域链的规则，底层作用域没有声明的变量，会向上一级找，找到就返回，没找到就一直找，直到window的变量，没有就返回undefined。这里明显count是函数内部的flag2的那个count。
var count=10；//全局作用域 标记为flag1
function add(){
var count=0;//函数全局作用域 标记为flag2
return function(){
count+=1;//函数的内部作用域
alert(count);
}
}
var s=add()
s();//输出1
s()//输出2
4.变量的作用域
要理解闭包，首先必须理解javascript特殊的变量作用域。
变量的作用域分类：全局和局部变量
特点：
- 函数内部 可以读取函数外的全局变量，在函数 外部无法读取函数内的局部变量。
5.使用闭包的注意点
1）滥用闭包，会造成内存泄漏；由于闭包会似的函数中的变量和都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄漏。解决方法是，在退出函数之前，将不适用的局部变量全部删除 。
2）会改变父函数内部变量的值，所以，如果你把父函数当作i对象（object）使用，把闭包当作他的公用方法，把内部变量当作它的私有属性，这时一定要小心，不要随便改变父函数内部变量的值。
6.谈谈垃圾回收机制方式及内存管理
回收机制方式
1.定义和用法：垃圾回收机制，执行环境负责管理代码执行过程中使用的内存。
2.原理：垃圾收集器会定期找出哪些不在继续使用的变量，然后释放其内存。但是这个过程不是实时的，因为其开销比较大，所以垃圾回收期会按照固定的时间间隔周期性的执行。
3.实例如下：
function fn1(){
var obj={name:'hanzichi',age};
}
function fn2(){
var obj={name:'hanzichi',age:10}
return obj;
}
var a=fn1()
var b=fn2()
fn1中定义的obj为局部变量，而当调用结束后，除了fn1的环境，那么该快内存会被js引擎中的垃圾回收器自动释放；在fn2被调用的过程中，返回的对象被全局变量b所指向，所以该块内存并不会被释放。
4、垃圾回收策略：标记清除(较为常用)和引用计数。
标记清除：
定义和用法：当变量进入环境时，将变量标记"进入环境"，当变量离开环境时，标记为：“离开环境”。某一个时刻，垃圾回收器会过滤掉环境中的变量，以及被环境变量引用的变量，剩下的就是被视为准备回收的变量。
到目前为止，IE、Firefox、Opera、Chrome、Safari的js实现使用的都是标记清除的垃圾回收策略或类似的策略，只不过垃圾收集的时间间隔互不相同。
引用计数：
定义和用法：引用计数是跟踪记录每个值被引用的次数。
基本原理：就是变量的引用次数，被引用一次则加1，当这个引用计数为0时，被视为准备回收的对象。
内存管理
1、什么时候触发垃圾回收?
垃圾回收器周期性运行，如果分配的内存非常多，那么回收工作也会很艰巨，确定垃圾回收时间间隔就变成了一个值得思考的问题。
IE6的垃圾回收是根据内存分配量运行的，当环境中的变量，对象，字符串达到一定数量时触发垃圾回收。垃圾回收器一直处于工作状态，严重影响浏览器性能。
IE7中，垃圾回收器会根据内存分配量与程序占用内存的比例进行动态调整，开始回收工作。
2、合理的GC方案：(1)、遍历所有可访问的对象;(2)、回收已不可访问的对象。
3、GC缺陷：(1)、停止响应其他操作。
4、GC优化策略：(1)、分代回收(Generation GC);(2)、增量GC。
9、开发过程中遇到的内存泄露情况，如何解决的?
1、定义和用法：
内存泄露是指一块被分配的内存既不能使用，又不能回收，直到浏览器进程结束。C#和Java等语言采用了自动垃圾回收方法管理内存，几乎不会发生内存泄露。我们知道，浏览器中也是采用自动垃圾回收方法管理内存，但由于浏览器垃圾回收方法有bug，会产生内存泄露。
2、内存泄露的几种情况：
(1)、当页面中元素被移除或替换时，若元素绑定的事件仍没被移除，在IE中不会作出恰当处理，此时要先手工移除事件，不然会存在内存泄露。
实例如下：
<div id="myDiv">
<input type="button" value="Click me" id="myBtn">
</div>
<script type="text/javascript">
var btn = document.getElementById("myBtn");
btn.onclick = function(){
document.getElementById("myDiv").innerHTML = "Processing...";
}
</script>
解决方法如下：
<div id="myDiv">
<input type="button" value="Click me" id="myBtn">
</div>
<script type="text/javascript">
var btn = document.getElementById("myBtn");
btn.onclick = function(){
btn.onclick = null;
document.getElementById("myDiv").innerHTML = "Processing...";
}
</script>
(2)、由于是函数内定义函数，并且内部函数–事件回调的引用外暴了，形成了闭包。闭包可以维持函数内局部变量，使其得不到释放。
实例如下：
function bindEvent(){
var obj=document.createElement("XXX");
obj.onclick=function(){
//Even if it's a empty function
}
}
解决方法如下：
function bindEvent(){
var obj=document.createElement("XXX");
obj.onclick=function(){
//Even if it's a empty function
}
obj=null;
}
36、js中call和apply的区别？
https://blog.csdn.net/weixin_42321292/article/details/82352997
37、闭包是什么，有什么特性，对页面有什么影响？
闭包就是能够读取其他函数内部变量的函数，似的函数不呗GC回收，如果过多使用闭包容易导致内存泄漏
https://blog.csdn.net/dovlie/article/details/76339244
------------------JQuery面试题
38、jQuery库中的$()是什么？
( ) 函 数 是 J q u e r y ( ) 函 数 的 别 称 。 ()函数是Jquery()函数的别称。 ()函数是Jquery()函数的别称。()函数用于将任何对象包裹成Jquery对象、接着你就被允许调用定义在jquery对象上的多个不同方法。你可以将一个选择器字符串传入$()函数，它会返回一个包含所有匹配的DOM元素数组的jquery对象
39、如何找到所有的HTMLselect标签选中项
$(’[‘name=nselect’]:selected’).text() .val()
$('select[name=qqq]').change(function(){
console.log($('select[name=qqq] option:selected').val())
})
40.jquery中的$(this)和this有什么不同?
41.jquery怎么移除标签属性
添加标签属性:使用attr(name,value)
演示：
<body>
<button>点我</button>
</body>
<script src="./node_modules/jquery/dist/jquery.js"></script>
<script>
$('button').attr('onclick','active()')
function active(){
console.log(1)
}
</script>
移除标签属性:removeAttr(name)
演示:
<body>
<button onclick="active()">点我</button>
</body>
<script src="./node_modules/jquery/dist/jquery.js"></script>
<script>
$('button').removeAttr('onclick')
function active() {
console.log(1)
}
// 不会触发，该属性已被移除
</script>
42.jquery操作样式
1.class操作样式，控制添加或删除或切换类名
- addClass添加类名
- removeClass删除类名
- toggleClass切换类名
2.操作style样式
css()
添加多个css样式时参数为对象，css属性和属性值以对象的形式写入。
css({color:red,font-size:20px})
添加单个css样式，第一个参数为css属性名，第二个参数为属性值
css(color,red)
43.jquey选择器
-
基本选择器：#id,class,element.*
-
层次选择器：parent>child,parent>next,prev~siblings
-
基本过滤选择器：:first,:last,:even,:odd,:eq,:gt,:lt
-
内容过滤器：:contains,:empty,:has,:parent
-
可见性过滤器：：hidden，：visible
-
属性过滤器选择器：[attribute],[attribute=value],[attribute^=value],[attribute$=value] , [attribute*=value],[attribute!=value]
例子：$(“input[name=accept]”).attr(“checked”, “true”); //将name为accept的复选框选中
-
子元素过滤器选择器：:nth-child，：first-child，：last-child，：only-child
-
表单选择器：:input，:text,:password,:radio,:checkbox,:submit
-
表单过滤选择器：:enabled,:disabled,:checked,:selected
44.jquery中的Delegate()函数有什么作用？
他是一个jquery用来事件委托的一个方法，如果一个元素是动态生成的或者是绑定事件的时候他还没有生成，就可以使用事件委托，Delegate()函数进行事件委托
<body>
<div style="background-color: red;">
<ul>
<li>1</li>
</ul>
</div>
</body>
<script src="./node_modules/jquery/dist/jquery.js"></script>
<script>
$('div').delegate('li', 'click', function (event) {
console.log($(this).text())
})
$('li').click(function () {
console.log(1) // 后面的li标签是新添加的，在此时的事件中是没有绑定上的，所以执行delegate事件委托绑定的事件
})
var event = "12 "
$('ul').append(event)
</script>
给后来添加的动态的元素添加委托事件
-------------------微信小程序
45.简单描述一下微信小程序的相关文件类型
-
wxml模板文件，是框架设计的一套标签语言，构建小程序页面的
-
wxss是一套样式语言，用于描述wxml的组件样式
-
js脚本逻辑文件，逻辑处理网络请求
-
json配置文件，小程序设置，如页面主页，页面标题，及tabBar的配置
-
app.json：微信小程序的全局配置：|
- pages：[所有页面路径]
- 网络设置
- 界面表现
- window：{导航颜色，标题颜色，背景颜色}
-
app.js监听并处理小程序的生命周期函数，声明全局变量
-
app.wxss：用于配置全局样式
46.wxml与标准的html的异同？
- 都是用来描述页面的结构的
- 都是使用标签属性构成
- 标签名不一样，微信小程序标签更少，单一标签更多
- 多了一些WX：if这样的属性以及{{}}这样的表达式
- WXML仅能在微信小程序开发者工具中预览，而HTML可以在浏览器内预览
47.wxss和css的异同？
- 都是用来描述页面样式的
- WXSS具有CSS大部分的特征，也做了一些扩充和修改
- wxss新增了尺寸单位，wxss在底层支持新的尺寸单位，rpx
- wxss仅支持部分css选择器
- wxss不支持window和dom文档流
48.小程序和VUE写法的区别
- 遍历的时候，小程序使用WX：for=“{{lists}}”，vue使用v-for=“item in lists”
- 循环遍历的每条数据，小程序默认使用item代替，而vue则可以自定义
- 调用data中的值，vue直接使用this指向data中的某个属性就能获取，小程序需要this指向data在指向属性才能获取
- 设置data中的属性时vue直接使用this指向某个属性就能直接进行赋值，小程序需要this.setdata({})才能设置
49.小程序页面之间有哪些传递数据的方法？
- 使用全局变量实现数据传递
- 页面跳转或重定向时，使用URL带参数传递数据
- 使用组件模板template传递参数
- 使用缓存传递数据
50.请谈谈小程序的生命周期？
- onLoad()页面加载时触发，只会调用一次，可获取当前用户路径中的参数
- onShow()页面显示/切入前台时触发，一般用来发送数据请求
- onReady()页面初次渲染完成时触发，只会调用一次，代表页面也可以和视图层进行交互
- onHide()页面隐藏或者切入后台时，如底部tab切换到其他页面或者小程序切入后台等
- onUnload()页面卸载时触发，如redireTo或navigateBack到其他页面时