初级前端面试题总结
CSS
-
link标签是同时加载的 ，script标签才会加载完一个再加载另一个。link标签除了可以加载css外，还可以做很多其他的事情，比如定义RSS，定义rel连接属性等，@import只能加载CSS
-
你使用过的单位都有哪些？
-
px：相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 -
rpx：微信小程序中有的，宽度分成750块。 -
em：相对于父元素的font-size -
rem：相对于html的font-size -
vh：相对于视口的高度。视口被均分为100单位<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>vh_CSS参考手册_web前端开发参考手册系列</title> <style> p{font-size:5vh;} </style> </head> <body> <p>相对于viewport高度大小的文字</p> </body> </html> -
fr：倍数关系，在网格中会用到，fr讲解，是一个自适应单位，fr单位被用于在一系列长度值中分配剩余空间，如果多个已指定了多个部分，则剩下的空间根据各自的数字按比例分配。
-
-
布局方案都有哪些：
-
table
-
弹性盒子(CSS 3.0)
-
网格：
- 列宽：
grid-template-columns: repeat(3,100px); - 行高：
grid-template-rows: repeat(3,100px); - 间距：
gap: 10px 10px; - 划分区域：
grid-template-areas: "a b c" "d e f" "g h i";
- 列宽：
-
圣杯布局：要想左右两栏不遮盖中间栏，就需要中间栏给左右两栏腾些位置处理，可以想到用padding属性或者margin属性来腾位置。圣杯布局是用padding属性来腾位置，而双飞翼布局则是用margin属性，同时要修改下html的布局结构。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圣杯布局</title> <style type="text/css"> body { margin: 0; padding: 0; } header, footer { height: 100px; width: 100%; background-color: #BBBBBB; } .container { height: 300px; padding-left: 200px; padding-right: 300px; } .container div { float: left; position: relative; } .left { width: 200px; height: 300px; background-color: #DC698A; margin-left:-100%; left:-200px; } .middle { width: 100%; height: 300px; background-color: #3EACDD; } .right { width: 300px; height: 300px; background-color: #8CB08B; margin-left:-300px; right:-300px; } </style> </head> <body> <!--圣杯布局的思想： 1. 先实现三栏布局 2. 然后让中间container持有padding：为了给left，right腾出位置 3. 接着让left right 相对于 container 定位，左面的块像左移动，left:-left宽度 --> <header>头部</header> <div class="container"> <div class="middle"> 123333333333333333333333333333333333 </div> <div class="left">左栏</div> <div class="right">右栏</div> </div> <footer>底部</footer> </body> </html> -
双飞翼：双飞翼就简单多了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>双飞翼布局</title> <style type="text/css"> body { margin: 0; padding: 0; } header, footer { height: 100px; width: 100%; background-color: #bbbbbb; } .container { height: 300px; } .container div { float: left; } .left { width: 200px; height: 300px; background-color: #DC698A; margin-left: -100%; } .middle { width: 100%; height: 300px; background-color: #3EACDD; } .right { width: 300px; height: 300px; background-color: #8CB08B; margin-left: -300px; } /* 双飞翼布局 */ .main{ margin-left:200px; margin-right:300px; } </style> </head> <body> <header>头部</header> <div class="container"> <div class="middle"> <!--双飞翼的思想：在中间内容区新建一个展示区main，给main以左右的距离--> <div class="main">中间栏</div> </div> <div class="left">左栏</div> <div class="right">右边栏</div> </div> <footer>footer</footer> </body> </html>
-
-
动画
keyframe -
CSS3新增有哪些：
- 变框的属性：圆角
border-radius，阴影box-shadow opacity(不透明度)box-sizing(控制盒模型的组成模式)- 文本属性：文本阴影，溢出省略
text-overflow:ellipse - 背景
- 文字效果
- 2d转换
- 动画
- 十六进制颜色表示法，及透明度
- 盒子模型
- 线性渐变：
linear-gradient() - 字体图标
- css过渡：
ease,ease-in,east-out,east-in-out
- 变框的属性：圆角
-
实现一个三角形：不需要加其他的属性，比方说宽度
border-width: 20px; border-style: solid; border-color: transparent transparent transparent pink; -
实现一个矩形，旁边有个半圆的缺口：
-
主要点：伪类
.box{ width: 300px; height: 100px; background-color: pink; /*父亲相对*/ display: flex; position: relative; align-items: center; } .box::after{ /*内容content是关键，不能没有他*/ content: ''; width: 50px; height: 50px; border-radius: 25px; background-color: white; /*孩子绝对定位*/ position: absolute; top: 25px; right: -25px; }
-
-
实现矩形中文字一行，超出部分省略号代替
.container{ width: 50px; height: 50px; background-color: skyblue; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } -
什么是BFC：块格式化上下文，块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域
-
浮动是什么：脱离原来的文档流。
-
如何清除浮动带来的影响
clear:bothoverflow:hidden
-
什么是父元素塌陷：
- 在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当子元素设置浮动之后，子元素会脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。
-
position都有什么？
- 绝对定位：
absolute - 相对定位：
relative - 粘性定位
sticky - 相对父元素定位
inherit - 固定定位
fixed
- 绝对定位：
-
相对定位是相对谁在定位？
- 相对于原来的位置定位，原来的位置依然占着空间
-
选择器都有哪些？
- id选择器
- 类选择器
- 标签选择器
- 通配符选择器
- 子后代选择器
- 属性选择器
- 伪类
- 交集，并集选择器
- 同级选择器
-
选择器的优先级如何计算？
!important最高- 行内其次
- id>类>标签>*>继承
-
如何取消
li的默认样式：list-style：none -
如何制作一个最大的正方形？
- 重点：
padding-bottom: 100%;，用padding撑开，padding-top也可以。
<head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .box{ width: 100%; background-color: pink; padding-bottom: 100%; } </style> </head> <body> <div class="box"></div> </body> - 重点：
-
响应式：媒体查询
/*制作一个1.小屏幕下蓝色，2. 中屏幕下绿色，3. 大屏幕下橙色*/ @media screen and (min-width:1000px){ html{ background-color: orange; } } @media screen and (min-width:700px) and (max-width: 1000px){ html{ background-color: green; } } @media screen and (max-width:700px){ html{ background-color: blue; } } -
雪碧图，也叫css图像精灵
- 主要点：每个元素都有
background-image，background-position
<style> .icon{ width: 23px; height: 23px; /*border: 1px red solid;*/ background-image: url("../../Img/icon.gif"); } .icon1{ background-position: -4px -2px; } .icon2{ background-position: -31px -2px; } .icon3{ background-position: -58px -2px; } .icon4{ background-position: -84px -2px; } /*扣雪碧图，用浏览器和手去调试*/ /*块级标签和行内块标签可以，因为他们都有宽高*/ </style> <body> <div class="icon icon1"></div> <div class="icon icon2"></div> <div class="icon icon3"></div> <div class="icon icon4"></div> </body> - 主要点：每个元素都有
-
盒子模型：
- W3C：开发者定义的
width就是内容区的宽度 - 怪异盒子模型：定义的
width是content + padding + border的宽度 - 转换用
box-sizing: border-box;默认W3C的 content-box
- W3C：开发者定义的
-
导入css的方法
<link href="001.css" rel="stylesheet" type="text/css" />@import url("001.css");
-
Less，Sass
-
预编译语言：将css变成函数一样，能声明变量
-
CSS3中引入了：
calc()，它也可以计算width:calc(10 * 10px); -
宏定义 用关键字
@mixin 函数名(形参){函数体} -
宏调用 用关键字
@include 函数名(实参)
-
-
水平、垂直居中的实现方法：
-
弹性盒子
display:flex; justfly-concent:center; align-item:center; -
定位 + 位移
.fa{ width: 100px; height: 100px; background-color: pink; position: relative; } .son{ width: 50px; height: 50px; background-color: skyblue; /*这个absolute要写的*/ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
-
-
bs3和bs4栅格有区别吗
- bs3：浮动
- bs4：弹性盒子
-
左面固定宽，右边自适应
.left,.right{ height: 500px; } .left{ width: 200px; background-color: aqua; float: left; } .right{ width: 100%; background-color: pink; /* padding-left: 200px; */ } -
要在IE上做一个圆角：
- 把句号，字体放的特别大
- 导入
ie-css3.htc - 用图片，这个办法可老好了。
Html
-
行级标签：同行显示，不可设置宽高，不可设置margin-top
i,strong,span,a,br
-
块级标签：隔行显示，可设置宽高，可设置margin-top
div,p,h1,ul,li,ol
-
行内块都有哪些：
img，textarea,button,input,select -
标签之间的相互转化：
display:bolck,inline-block,inline -
语义化标签：
header，nav，footer -
html5新增的有哪些：
- 语义化，结构标签
- audio，video
- canvas
- 表单标签
input- url
- number
- range
- date
- 媒体标签
- video
- audio
- embed：嵌入内容（包括各种媒体midi），wav，mp3
-
input的类型都有什么
- text
- password
- button
- checkbox
- radio
- submit
- files
- html5 新增的一些：
- url
- number
- range
- date
- month
- color
-
Lable是干什么的？-
label 尽量与 input 组合使用，点击 label ，就会取 input 框中的焦点。不过 label 中的 for 属性要写成 input 的 id 名字
<label for="name">用户名</label> <input type="text" id="name">
-
-
如何禁止input的输入
readonly：提交的时候还可以读取到数据disable：提交的时候都拿不到数据
-
如何禁止页面的复制（考试系统）
-webkit-user-select: none;
-
a标签的target都有什么值，都是什么作用？
<!--_blank新建一个窗口并打开--> <a href="http://www.baidu.com" target="_blank">百度_blank</a> <a href="http://www.baidu.com" target="_self">百度_self</a> <a href="http://www.baidu.com" target="_parent">百度_parent</a> <a href="http://www.baidu.com" target="_top">百度_top</a> -
页面标题栏图片icon
<link rel="icon" href="" type="image/x-icon" />
JS
-
变量声明
var，有变量提升。 -
函数也有变量提升，但是匿名函数就没有。
-
基本数据类型：
undefinednumberboolranstringSymbol（ES6）
复杂数据类型：
object -
typeof能够返回的值：- undefined
- string
- number
- boolean
- symbol
- function
- object，（typeof null == objcet）
-
JavaScript 内置对象都有哪些：
- Array
常用方法 作用 返回值 是否改变原数组 追加和删除 arr.push()尾部追加 追加后的数组长度 改变 arr.pop()尾部删除 删除的元素 改变 arr.shift()头部删除 删除的元素 改变 arr.unshift()头部追加 追加后的数组长度 改变 拼接及切割 arr.join()数组内元素拼接 String不 arr1.concat(arr2)数组之间拼接 拼接后的新数组 不 arr.slice()切割 切割的数组（左开右闭） 不 arr.splice()切割 切割的数组（左闭右闭） 改变 排序 arr.sort()排序 排序后的数组 改变 arr.sort((x,y) => x-y)从小到大排序 排序后的数组 改变 arr.sort((x,y) => y-x)从大到小排序 排序后的数组 改变 其他 arr.reverse()翻转 翻转后的数组 改变 arr.flat(层数|Infinity)拍平数组 拍平后的数组 不 arr.forEach((each, index, array)=>{})遍历 - -
let arr = ['一','二','三','四']; console.log(arr.splice(2,3)); // (2) ["三", "四"] console.log(arr); // (2) ["一", "二"] let arr = ['一','二','三','四']; console.log(arr.slice(2,3)); // ["三"] console.log(arr); // (4) ["一", "二", "三", "四"]-
string
常用方法 作用 返回值 其他说明 分割 str.split()字符串分割成数组 数组 - str.substring(startPos,endPos|)字符串截取 字符串 第二个参数规定截取结束的位置，默认是字符串尾部。 查找 str.charAt()根据下标找元素，如果越界的话返回空字符串 寻找的元素 str.indexOf()根据元素，找下表，如果查找不到返回 -1下标 第一个’要查找的元素’,起始位置 str.search('b')根据元素找下表 下标 - str.match(/\d+/g)参数可以是字符串或者正则表达式 数组 str.startsWith('ab')从字符串开头寻找 布尔值 注意：不是包含关系，一定是要在头部开始的， ends同理str.endsWith()从字符串尾部寻找 布尔值 - str.includes('ab')str中是否包含'ab'布尔值 去空格 str.trim()去掉字符串前后的空格 新字符串 str.replace(/^\s*|\s*$/g,'')str.trimStart()去前空格 新字符串 str.replace(/^\s*/g, '')str.trimEnd()去尾空格 新字符串 str.replace(/\s*$/g, '')str.replace(/\s/g, '')去除所有空格 新字符串 转换 str.toLowerCase()转小写 小写字符串 str.toUpperCase()转大写 大写字符串 补全 str.padStart(8,"xy")把 str字符串，从头开始，用xy补足长度尾8。返回补足后的新字符串 str.padEnd(8,"xy")把 str字符串，从尾开始，用xy补足长度尾8。返回补足后的新字符串 其他 str.repeat(4)重复 重复后的新字符串 不会改变原字符串 -
number
Number.parseInt();取整Number.parseFloat();保证是小数Number.isInteger();判断是否为整数
-
boolean -
RegExp：字符串匹配-
判断是否是电话号码 ：
var CheckIsPhoneNumber = /^1[34578]{1}[1-9]{1}[0-9]{8}$/; // 解释：第一位手机号都应该是 1，第二位手机号应该是在 3、4、5、7、8 中选一位，第三位手机号不会是 0(自己规定的条件，实际不考虑?) ，后八位可以是 0~9 的任意数。
-
-
Math：数学
- 没有 new 方法
var PI = Math.PI;不希望改的值一定要大写—ES5 的行规，但是值能改var VERSION = "1.0";说明版本- 随机数的产生：语法为
Math.random()，这个值是(0,1)，左开又开的，也就是说永远都不会取到 0 和 1
-
Date：日期
date.getFullYear();年份date.getMonth();月份date.getDate();日date.getHours();时getMinutes();分getSeconds();秒
- Array
-
this的指向：最终调用者
-
箭头函数this的指向：和上一层作用域的this的指向一样
-
延时定时器，周期定时器
-
promise().then().catch()，解决回调地狱的问题 -
rest参数，在参数里(…
arr)，接收不知道个数的参数。 -
拓展运算符：…[1,2,3,4]，拆开数组
-
解构赋值：
var {log:l} = consolelet [a,b,c] = [1,2,3]; console.log(a); console.log(b); console.log(c); //1 //2 //3 -
结构解析
let {c,a} = {b:"6666",a:"555"}; console.log(a); console.log(c); //555 //undefined -
原生节点操作
- 创建游离元素：
var div = document.createElement("div"); - 插入节点：
document.body.appendChild(div);，ul.insertBefore(creat_li,li2);，在li2前面插入creat_li，注意ul和cerat_li是 父子关系
- 克隆节点：
li1.cloneNode(true)，克隆有参数，true的话标签内容也会克隆，克隆的元素是游离的。 - 删除节点：
ul.removeChild(li1) - 节点查找
- 查找父亲节点：
ul.parentNode - 查找子节点中的第一个：
ul.firstElementChild - 查找子结点中的最后一个：
ul.lastElementChild - 查找兄弟节点中的上一个：
ul.previousElementSibling（如果不加Element的话会输出#text，也就是找到空格，看你格式怎么写了） - 查找兄弟节点中的下一个：
ul.nextElementSibling()
- 查找父亲节点：
- 创建游离元素：
-
JQuery的优点- 轻量
- 强大的选择器
- 完善的Ajax
- 链式操作方法
- 隐式迭代
-
Jquery可以绑定多个事件嘛？：可以$("table.planning_grid").on({ mouseenter: function() { // Handle mouseenter... }, mouseleave: function() { // Handle mouseleave... }, click: function() { // Handle click... } }, "td"); -
JQuery绑定点击事件$().click()
-
JQuery节点操作-
创建节点：创建一个游离对象
$("<p>nihao</p>")，然后插入 -
插入节点：
-
append()，appendTo()/*append 是在 box 里面的最后一位插入*/ $("#box").append("<div>append方法</div>"); $("<p>append to 方法</p>").appendTo("#box"); -
$("#box").prepend("<div>prepend方法</div>");
-
-
-
JQuery动画-
show() -
hide() -
动画执行速度 speed：有三个初始的，分别是 fast、normal、slow ，时常分别是 200、400、600 毫秒，默认是 normal
-
过度效果 easing：一种是 swing，这个是有加速度的变化，先加速，在减速
另一种是 linear，就是线性变化，匀速变化 -
成功回调函数 callback：当动画执行 完毕 之后才执行这个函数
多的知识点：还有一种函数叫做 handler 处理函数，这个只要发生了，就开始执行，比方说点击事件 -
$("#div1").hide(5000,"linear",function () { console.log(1); });
-
-
JQuery取消$符号的控制权：$.noConflict()var otherName = $.noConflict()，之后可直接使用otherName来代替$.
-
隐式迭代：在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用
-
JQuery对象和Dom对象之间的互相转化？- 转化成
dom：数组下标，$("div")[0] dom转化成 jQuery：$(dom对象)
- 转化成
-
在高版本的jquery引入prop方法后，什么时候该用prop？什么时候用attr？它们两个之间有什么区别？
关于它们两个的区别，网上的答案很多。这里谈谈我的心得，我的心得很简单：
-
对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
-
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
<input id="chk1" type="checkbox" />是否可见 <input id="chk2" type="checkbox" checked="checked" />是否可见 <script> // 像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此需要使用prop方法去操作才能获得正确的结果。 $("#chk1").prop("checked") == false $("#chk2").prop("checked") == true // 如果上面使用attr方法，则会出现： $("#chk1").attr("checked") == undefined $("#chk2").attr("checked") == "checked" </script>
-
-
Jquery给节点加类：jq.addClass()$("#div1").addClass("colorSkyblue");删除类：关键字：
removeClass()$("#div1").removeClass("colorSkyblue");切换类：关键字：
toggleClass()$("button").click(function () { $("#div1").toggleClass("colorRed"); }) -
JQuery请求ajax，如何实现同步？$.ajax({ url: "/greet", data: {name: 'jenny'}, type: "POST", async: false, // async：是否异步处理，bool表示，默认为true；设置该值为false后，JS不会向下执行，而是原地等待服务器返回数据，并完成相应的回调函数后，再向下执行 dataType: "json", success: function(data) { // data = jQuery.parseJSON(data); //dataType指明了返回数据为json类型，故不需要再反序列化 ... } }); -
Jquery手动迭代// 参数一表示当前元素在所有匹配元素中的索引号 // 参数二表示当前元素（DOM对象） $(selector).each(function(index,element){}); -
冒泡与捕获
- 如果有捕获的话，优先捕获
- 如何设置捕获：默认为false，true为捕获
- 取消冒泡/捕获的方法：
e.stopPropagation() - 事件委托
-
算法：
- 排序：冒泡，快速排序
- 查找：二分查找
-
防抖节流的设计：并不希望在事件持续触发的过程中那么频繁地去执行函数
-
防抖：
-
就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } </style> </head> <body> <div id="content" style="height:150px;line-height:150px;text-align:center; color: #fff;background-color:#ccc;font-size:80px;"></div> </body> <script> let num = 1; let content = document.getElementById('content'); function count() { content.innerHTML = num++; }; content.onmousemove = debounce(count,1000); function debounce(func, wait) { let timeout; return function () { let context = this; let args = arguments; if (timeout) clearTimeout(timeout); timeout = setTimeout(() => { func.apply(context, args) }, wait); } } </script> </html>
-
-
节流：
- **所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。**节流会稀释函数的执行频率。
- 对于节流，一般有两种方式可以实现，分别是时间戳版和定时器版。
-
JS有什么组成的
- ECMA JavaScript
- BOM：浏览器模型，window
- history
- navigator
- document
- iframe
- screen
- location
- DOM节点模型
-
兼容
- IE6、7、8：
attachEvent() - 其他：
addEventListener()
- IE6、7、8：
-
隐式转换
123 + '' '123' - 0 + '123' -
惰性求值：走不走默认值
-
如何去除字符串中的空格：
trim -
如何数组中的元素去重：排序之后，一遍过滤
-
如何给数组元素排序，默认按照什么排的序？
- sort方法
- 按照 asc2码
-
模板字符串，魔术字符串：
-
对象冻结：
Object.freezeconst obj = Object.freeze( {name:"张三"} ); -
ES6新增的数据结构：
set：元素不会重复map：键值对，其中键可以不是string了
-
ES6新增的数据类型：symbol：独一无二的，可以添加描述
-
es5中类的都有哪些
- 构造函数
- 原型
- 工厂模式
-
es6中类介绍一下：
- 语法糖
- 本质还是类
- 其中设计的方法是挂载在原型上
- 默认会创造一个
constructor - 没有提升
-
元编程，proxy，代理
-
建立过滤器
//建立过滤器 var proxy = new Proxy(target,handler); -
修改读操作
var obj = { name :"霍金" }; //建立 Proxy 过滤器 var proxy = new Proxy(obj,{ //当你在这里写了get的时候，就已经开始修改读取的方法了 //所有的读取都走get语句，现在语句里啥都没有，所以 proxy.name 是 undefined get() { } }); //通过代理来访问obj中的name属性 console.log(proxy.name); //undefined
-
-
function*-
这里新出了个关键词
yield，类似一个暂停符，到底有啥用请看下面的例子 -
生成器函数
function* test() { yield "我是第一句"; //yield相当于暂停符号，一步一步的执行，要用 next 手动执行这个玩意儿 yield "我是第二句"; return "yes"; } var t = test(); console.log(t); //test {<suspended>} console.log(t.next()); //{value: "我是第一句", done: false} console.log(t.next()); //{value: "我是第二句", done: false} //跟指针一样一直下移 console.log(t.next()); //{value: "yes", done: true} console.log(t.next()); //{value: undefined, done: true}
-
-
继承都有哪些方法：
-
call
-
apply
//call 和 apply的使用例子 <script> function Person() { this.name = "xiaopang", this.age = 19 } function show(str1,str2) { console.log(this.name + this.age + "hahhaa" + str1 + str2); } var p = new Person(); /*show继承了p*/ /*call方法直接用逗号隔开*/ show.call(p,"政府","你妹妹"); /*apply方法是用数组*/ show.apply(p,["string1","string2"]); //输出 //xiaopang19hahhaa政府你妹妹 //xiaopang19hahhaastring1string2 </script> -
bind()
-
-
伪数组想要使用数组的方法，如何实现？
-
Array.from() -
;[].forEach.call(li,function (x) { console.log(x); })
-
-
原型和原型链解释一下：我的解释。
-
this的指向：我的this讲解
-
window.onload和$(document).ready()有什么区别？window.onload是等到所有元素，包括图片等资源都加载完之后才会执行$(document).ready()是等到dom树渲染完毕就可以执行了
-
dom选择器
-
什么叫字面量
- 字面量（literal）是用于表达源代码中一个固定值的表示法。
const int b = 10; //b为常量，10为字面量
- 字面量（literal）是用于表达源代码中一个固定值的表示法。
-
严格模式是什么
-
use strictfunction f(){ "use strict"; this.a = 1; }; f();// 报错，this未定义
-
-
promise是什么- 时序：
then中的函数被放到了微任务队列，而不是立即执行，等事件队列被清空之后再继续执行 - 链式操作
- 好处
promise.all([]).then()
let promise = new Promise((resolve, reject) => { if (1) { resolve('操作成功'); } else { reject('操作异常'); } }); function requestA() { console.log('请求A成功'); return 'A请求的结果'; } function requestB(res) { // 通过res来获得上一个返回来的结果 console.log('上一步的结果：' + res); console.log('请求B成功'); return 'B请求的结果'; } function requestC(res) { console.log('上一步的结果：' + res); console.log('请求C成功'); } function requestError() { console.log('请求失败'); } //then处理操作成功，catch处理操作异常 promise.then(requestA) .then(requestB) .then(requestC) .catch(requestError); // 请求A成功 // 上一步的结果：A请求的结果 // 请求B成功 // 上一步的结果：B请求的结果 // 请求C成功 - 时序：
-
深拷贝和浅拷贝
-
深拷贝：深拷贝会开辟新的栈内存，原对象和新对象不共享同一块内存，修改新对象不会影响到原对象。
-
JSON.parse(JSON.stringify())var iniArr = [1,2,{name:"peter"},function(){}]; var newArr = JSON.parse(JSON.stringify(iniArr)); newArr[1] = 8; newArr[2].name = "lily"; console.log('JSON.parse(Json.stringfiy()):iniArr,newArr',iniArr,newArr);- 用
JSON.stringify将对象转成JSON字符串，再用JSON.parse()把字符串解析成对象。一去一来，新的对象产生了，而且对象会开辟新的栈，实现深拷贝。 - 这种方法虽然可以实现
数组或对象的深拷贝，但不能处理函数。因为JSON.stringify()方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串，不能接受函数
- 用
-
递归
-
JQuery
-
extend()
-
-
浅拷贝
- object.assign()
- slice
- concat
-
-
oxFF ^ 33的结果-
关于进制转化和亦或计算的题
-
FF是十六进制，转成10进制为15*16 + 15 = 255，转成十进制111111111
-
不同的为1，相同的为0
// tostring() 是用来把十进制 => 其他进制 // parseInt(x,2) 把 二进制 x => 十进制 33 // 100001 255 // 11111111 // 11011110 异或之后的结果 var x = 255; // console.log(x.toString(2)); console.log(parseInt(11011110,2));
-
-
表单提交，get请求获取传递的数据
<body>
<!-- a页面 -->
<form action="b.html" method="get">
<input type="text" name="wangxiaoming"/>
<input type="submit" value="提交">
</form>
</body>
// b页面
<script>
console.log(window.location.href.split('?')[1]);
</script>
-
找到页面中所有的CheckBox
- 考点：属性选择器
var checkBox = document.querySelectorAll('input[type=checkbox]') console.log(checkBox); -
循环一个对象的方法：
var obj = { "你好1":1, "你好2":2, } for(x in obj){ console.log(x); } -
cookie- 能保存什么样的数据：键值对
- 怎么存中文：
urlEncoder - 默认的声明周期：浏览器关闭时
-
什么是闭包，以及优缺点
- 介绍：闭包就是能够读取其他函数内部变量的函数。
- 优点：一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中，不会在f1调用后被自动清除。
- 缺点：内存消耗大，不能滥用闭包，否则会造成网页的性能问题，内存泄漏
-
前端的优化
-
减少http请求
-
减小资源体积
-
控制 js 代码的体积以及按需加载
-
避免全局查找
-
避免在
document上直接进行频繁的DOM操作 -
使用
classname代替大量的内联样式修改 -
适当使用
canvas -
是尽量少使用css层级关系：因为css的规则是从右往左的。为什么CSS选择器是从右往左解析
/* 尽量不要写成这样 */ #div P.class { color: red; } /* 应该写成这样 */ .class { color: red; }同时，这也是不建议使用*通配符来进行样式匹配的原因：浏览器专门建立了一个反常规思维的从右往左的匹配规则就是为了避免对所有元素进行遍历，你直接一个通配符等于之前的工作都白做了。
-
-
创建的游离元素会在dom上吗？
-
什么是函数柯里化？
-
是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。
-
看一个简单的栗子
// 普通的add函数 function add(x, y) { return x + y } // Currying后 function curryingAdd(x) { return function (y) { return x + y } } add(1, 2) // 3 curryingAdd(1)(2) // 3
-
-
定时器类别
-
延时定时器：只触发一次
-
定时器：周期性的触发
-
如何清除定时器
var set = setTimeout(function () { console.log(1); },1000); clearInterval(set); // 延时定时器和定时器都可以这样清除
-
-
创建的游离元素在哪儿？会在dom上嘛？
- 游离元素是在dom上的，并不在html上，是在html之外的
微信小程序
-
跳转都有哪些方法
wx:navigateTowx:redirectTo
-
点击li变色
-
对外暴露怎么实现，如何引用
//比方说我要暴露这个 testA 的函数，让他在别的 js 中也能调用 let {log:l} = console;
function testA(){
l(“testA()”,1);
}
//对外暴露方法 module.exports.给对外暴露的方法起名字 = 想要调用的方法
module.exports.testA = testA;
```javascript
//这个写在Page外面
let container = require("a.js"); //先写引用的路径，把模块保存到container里
//这个可以写在 onLoad 里测试一下
container.testA(); //调用这样调用，模块.函数名
-
小程序的网络请求
wx.request({ url: 'http://192.168.199.234:8080/mwk/phoneCode', data: { userPhone: this.data.idName }, method: 'get', success: function(res) {}, fail: function(res) {}, complete: function(res) {}, }) -
小程序是如何保存页面的
- 栈
-
微信小程序网络请求默认同步还是异步，可以改变吗
- 异步的，不可改变
混合开发
- 移动应用开发的三种方式
- Native App： 本地应用程序（原生App）
- Web App：网页应用程序（移动web）
- Hybrid App：混合应用程序（混合App）：美团，爱奇艺，微信
- web 应用
- 优点
- 不需要下载，不需要安装，保证最新版本
- 对于开发者相对简单
- 缺点
- 浏览器提供的api，大部分系统级硬件不能用
- 性能不如原生
- 优点
- 混合开发：native app 和 web app 的结合，最外有层壳（原生），里面放的网页系统提供的
Webview（网页渲染控件）- 优点
- 兼容多平台
- 顺利访问手机多种功能
App stroe中可以下载(web应用中套原生应用的外壳)
- 缺点
- 不确定上线时间
- 用户体验不如本地应用
- 性能较慢
- 优点
Vue
-
组件之间的通信
-
父传子：
props-
props对象{}如何设置必填项
props: { items: { // 必须提供字段 required: true, default: 3, type: Array } }
-
-
子传父：自定义事件
this.$emit() -
父子链：
this.$parent.message -
中央事件总线
-
-
组件命名要求
- 首字母大写命名
- 短横线分割命名
-
Vue的声明周期：8个，创建前后，挂载前后，更新前后，销毁前后
-
什么是MVVM
- 模型，视图，视图模型
-
双向绑定的原理：数据劫持+发布者，订阅者模式
-
vue网络请求Axios如何设计// 这里的指针是为了在axios里使用组件里的参数 let _this = this; // 前台发送请求 axios.get('http://localhost:3000/register', { params: { username:this.username, psw:this.psw } }) .then(function (response) { // 提示注册成功 // axios 中的this需要定向 // console.log(response); if (response.data == '200'){ _this.$message({ message: `${_this.username}注册成功`, type: 'success' }) } }) .catch(function (error) { // 抓取错误 console.log(error) }) -
插槽的作用：在于内容的分发
-
路由是什么，如何使用
- 制作路由连接：
<router-link to="/shangcheng">商城</router-link> - 制作路由展示：
<router-view></router-view>
<script src="./node_modules/vue/dist/vue.js"></script> <script src="./node_modules/vue-router/dist/vue-router.js"></script> <body> <div id="app"> <router-link to="/shangcheng">商城</router-link> <router-link to="/shuma">数码</router-link> <router-link to="/jiaju">家具</router-link> <router-view></router-view> </div> </body> <script> var sc = { template:`<h1>商城组件</h1>` } var sm = { template:`<h1>数码组件</h1>` } var jj = { template:`<h1>家具组件</h1>` } var router = new VueRouter({ routes:[ // redirect 重定向 { path: '/',redirect: '/shuma' }, { path: '/shangcheng',component: sc}, { path: '/shuma',component: sm}, { path: '/jiaju',component: jj} ] }) var app = new Vue({ el:"#app", router, }) </script> - 制作路由连接：
-
路由的重定向：
var router = new VueRouter({ routes:[ // redirect 重定向 { path: '/',redirect: '/shuma' }, { path: '/shangcheng',component: sc}, { path: '/shuma',component: sm}, { path: '/jiaju',component: jj} ] }) -
动态组件
-
在
component标签上有个属性is，里面填写组件的名字
-
-
Vue中的
v-key是什么：- 元素复用
- 虚拟DOM的Diff算法，其核心是基于两个简单的假设：1. 两个相同的组件产生类似的DOM结构，不同的组件产生不同的DOM结构。2. 同一层级的一组节点，他们可以通过唯一的id进行区分。
- 总结一句话：为了更好的让Vue更新虚拟Dom，key来给每个节点做一个唯一标识。
- 影响：如果不加上标识的话，在插入的时候会发生错误
-
v-model用于哪些地方
- input
- textarea
-
v-if和v-show的区别v-show就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。display: none;v-if是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
-
data里的数据名和methods里的方法名相同会怎样？换位置也不会改变报错信息。
会报错：Method "message" has already been defined as a data property. -
有没有情况template不可用?
-
v-show -
补充：如果v-show里面的条件不对的话，页面渲染的时候会使用display:none把他隐藏掉
-
-
v-on可以绑定多个事件吗？可以
<div @click="fn1(),fn2()">点我</div> -
Vue-x：状态管理
-
服务器渲染
-
想请求一个插件或者
api在哪个什么周期加最合适：- 看项目需求：如果希望在
data加载完之前就要加载完API的话…
- 看项目需求：如果希望在
网络知识
-
什么是跨域
-
同源：协议，域名，端口号都相同。
-
同源策略是浏览器的一个安全限制，从一个源加载的文档或者脚本默认不能访问另一个源的资源。例如
a.com/111/html页面不能访问b.com/person这种接口，因为他们是不用的源。 -
注意：下面几个不受同源策略限制
1、页面中链接（例如页面的W3School）、重定向和表单提交不受同源策略限制
2、跨域资源的引入是不受同源策略的限制，但是js读不到其中的内容。<script src="..."></script>，<img>，<link>，<iframe>等。
-
-
如何解决跨域问题：
-
前端使用
JSONP -
后端设置响应头
res.header('Access-Control-Allow-Origin', '*')
-
-
HTTP状态码：
-
1**：服务器收到请求，需要请求者继续执行操作 -
2**：成功，操作被成功接收并处理 -
3**：重定向，需要进一步的操作以完成请求301：永久重定向302：临时移动
-
4**：客户端错误，请求包含语法错误或无法完成请求401：请求要求用户的身份认证403：服务器拒绝404：找不到资源
-
5**：服务器错误，服务器在处理请求的过程中发生了错误500：服务器内部错误，无法完成请求
-
什么是HTTP，跟HTTPS有什么区别
-
什么是证书：
- 对称加密
- 非对称加密
- 哈希（客户端数字摘要算法，本地数字签名）
- 证书
-
get 和 post 的区别
-
GET - 从指定的资源请求数据，携带的数据在url里，以？分割。
-
POST - 向指定的资源提交要被处理的数据，携带的数据在响应body里。
-
GET POST 后退按钮/刷新 无害 数据会被重新提交（浏览器应该告知用户数据会被重新提交）。 书签 可收藏为书签 不可收藏为书签 缓存 能被缓存 不能缓存 编码类型 application/x-www-form-urlencoded application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。 历史 参数保留在浏览器历史中。 参数不会保存在浏览器历史中。 对数据长度的限制 是的。当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。 无限制。 对数据类型的限制 只允许 ASCII 字符。 没有限制。也允许二进制数据。 安全性 与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分。在发送密码或其他敏感信息时绝不要使用 GET ！ POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中。 可见性 数据在 URL 中对所有人都是可见的。 数据不会显示在 URL 中。
-
-
当在地址栏里输入url之后，敲回车会发生什么？
- DNS域名解析
- 建立TCP连接
- 发起HTTP请求
- 接收响应结果
- 浏览器解析HTML
- 浏览器布局渲染
Webpack
-
webpack是做什么的：静态模块打包器 -
如何打包处理页面中的图片资源
-
url-loader
-
还需要一个file-loader
// webpack.config.js const { resolve } = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { entry: './src/index.js', output:{ filename: 'bulit.js', path: resolve(__dirname, 'build') }, module:{ rules:[ { test: /\.less$/, use:[ 'style-loader', 'css-loader', 'less-loader' ] }, { // 问题：处理不了 html中的图片 test: /\.(jpg|png|gif)$/, // 需要下载两个包 url-loader file-loader // cnpm i url-loader file-loader // 如果用到一个loader可以这么写，前面并不是use loader: 'url-loader', options: { // 图片大小小于8kb，就会被base64处理 // 优点： 减少请求数量（减轻服务器压力） // 缺点： 图片体积会更大（文件请求速度更慢） limit: 8 * 1024, esModule: false, // 给图片进行重命名 // 取图片hash值的前十位 // ext取图片的原扩展名 name: '[hash:10].[ext]' } }, { test: /\.html$/, // html-loader是 专门处理html 中的 img的 loader: 'html-loader' } ] }, plugins: [ new HtmlWebpackPlugin({ template:`./src/index.html` }) ], mode: 'development' }
-
-
es6语法转换成es5语法：babel
Node
- 什么是Node
- 基于chrome的v8引擎的JavaScript运行时
vue-cli
-
vue脚手架项目目录结构介绍：
src - componment - assets public node_modules -
简介：
Vue CLI是一个基于 Vue.js 进行快速开发的完整系统 -
路由里重定向：
const router = new VueRouter({ routes: [ { path: '/a', redirect: '/b' } ] })
人事HR面试
- 如何看待跳槽
- 你的前领导怎么样：不错
. 如何打包处理页面中的图片资源
-
url-loader
-
还需要一个file-loader
// webpack.config.js const { resolve } = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { entry: './src/index.js', output:{ filename: 'bulit.js', path: resolve(__dirname, 'build') }, module:{ rules:[ { test: /\.less$/, use:[ 'style-loader', 'css-loader', 'less-loader' ] }, { // 问题：处理不了 html中的图片 test: /\.(jpg|png|gif)$/, // 需要下载两个包 url-loader file-loader // cnpm i url-loader file-loader // 如果用到一个loader可以这么写，前面并不是use loader: 'url-loader', options: { // 图片大小小于8kb，就会被base64处理 // 优点： 减少请求数量（减轻服务器压力） // 缺点： 图片体积会更大（文件请求速度更慢） limit: 8 * 1024, esModule: false, // 给图片进行重命名 // 取图片hash值的前十位 // ext取图片的原扩展名 name: '[hash:10].[ext]' } }, { test: /\.html$/, // html-loader是 专门处理html 中的 img的 loader: 'html-loader' } ] }, plugins: [ new HtmlWebpackPlugin({ template:`./src/index.html` }) ], mode: 'development' }
- es6语法转换成es5语法：babel
Node
- 什么是Node
- 基于chrome的v8引擎的JavaScript运行时
vue-cli
-
vue脚手架项目目录结构介绍：
src - componment - assets public node_modules -
简介：
Vue CLI是一个基于 Vue.js 进行快速开发的完整系统 -
路由里重定向：
const router = new VueRouter({ routes: [ { path: '/a', redirect: '/b' } ] })
人事HR面试
- 如何看待跳槽
- 你的前领导怎么样：不错
扫一扫
8414
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
