呕心沥血！！总结2021前端必备面试题

2023-10-26

面试题

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">header</div>
<div id="bd">
  <div id="middle">middle</div>
  <div id="left">left</div>
  <div id="right">right</div>
</div>
<div id="footer">footer</div>
</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">header</div> 
  <div id="middle">
    <div id="inside">middle</div>
  </div>
  <div id="left">left</div>
  <div id="right">right</div>
  <div id="footer">footer</div>
</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

<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,i<arr1.length,i++){
	if(arr2.indexOf(arr1[i])<0){
	arr2.push(arr1[i])
	}
}
document.write(arr2);//1,2,3,4,5,6

17.写一个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 之前，字符串的拼接是这样的：

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 以前，这样获取属性的值：

obj.a
obj.b
arr[i]

在 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 中：

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 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)

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元素事件属性中使用，如：

<input type="button" onclick="showInfo(this)" value="点击一下" />

2.构造函数

function Animal(name，color){
this.name=name;
this.color=color;
}

3.input点击，获取值

<input type="button" id="text" value='点击以下'/>
<script type="text/javascript">

var btn = document.getElementById("text");

btn.onclick = function() {

alert(this.value); //此处的this是按钮元素

}

</script>

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 = "<li>12</li>"
  $('ul').append(event)


</script>

给后来添加的动态的元素添加委托事件

-------------------微信小程序

45.简单描述一下微信小程序的相关文件类型

wxml模板文件，是框架设计的一套标签语言，构建小程序页面的
wxss是一套样式语言，用于描述wxml的组件样式
js脚本逻辑文件，逻辑处理网络请求
json配置文件，小程序设置，如页面主页，页面标题，及tabBar的配置
app.json：微信小程序的全局配置：|
1. pages：[所有页面路径]
2. 网络设置
3. 界面表现
4. 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到其他页面时

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)