1.普通数据类型
(1)普通数据类型有哪些?
字符串型string： 数值型number,：undefined：null,：布尔型boolean
复杂数据类型有Object Array Date
(2如何检测类型?
console.log(typeof data) instanceof Array.isArry()
(3如何转换数据类型?
转字符串
数据.toString()
String(数据)
隐式转换:数据+’ ’
Join(‘分割符’)
转数值
Number必须是纯数字(数据) '123aaa’转完之后是NaN
parseInt转整数(数据) '123aaa’转完之后是123
parseFloat转浮点数(小数)
隐式转换:数据* / -
转布尔值
Boolean(数据)
布尔值为false的有undefined, null, ’ ', NaN, true, 0
2.this
(1)this指向
全局中, this 指向 window
函数中,严格模式下, this 指向 undefined ;非严格模式下, this 指向 window
定时任务中, this 指向 window ( setTimeOut , Interval )
绑定事件中, this 指向事件源
对象中, this 指向这个对象
构造函数中this指向new出来的实例
对象:无序键值对的集合
(1) 对象字面量
var obj = { name: ‘wkk’, age: 18, skill: function () { console.log(‘敲代码’) }}console.log(obj.name)console.log(obj[‘age’])//遍历对象for (var k in obj ) { console.log(k) console.log(obj[k])}
(2) new Object()
var obj = new Object()obj.name = "wkk"obj.skill = function () {}
(3)构造函数
构造函数中, this 指向 new 出来的实例
//构造函数function Dog (name, color, voice) { this.name = name //this指向 new 出来的实例 this.color = color this.bark = function (voice) { console.log(voice) } } var wkk=new Dog(‘wkk’,‘灰色’) console.log(wkk) wkk.bark(‘haha’)
new关键字执行了哪些过程?
(1) 先创建了一个空对象
(2) 然后让 this 指向这个空对象
(3) 给属性赋值,给方法赋值
(4) 把结果return 出来
o
(2)改变this的方法及区别
call 立即执行,第一个参数修改 this 指向,第二个是依次传入的参数 用, 隔开
apply 立即执行,第一个参数修改 this 指向,第二个参数是数组或对象的用[ ]包裹
bind 不会立即执行,第一个参数修改 this 指向,
3.前端模块化
所谓的前端模块化，就是指将应用分成多个模块，例如魔方，
前端在没有模块话的时候，容易出现 命名冲突、文件依赖问题，这些问题都是因为 JavaScript 天生没有模块化
那么为了解决 命名冲突、文件依赖问题，JavaScript 社区就出现了一些所谓的前端模块化
主要流行的有三个
两个前台的 AMD(require.js)、CMD(sea.js – 玉伯)
一个后台的 commonJS(node.js)
例如： commonJS 规定，一个文件，就是一个模块，模块内部的成员外部访问不到，
如果想被外部访问，需要使用 exports 、module.exports 进行导出
如果想使用外部：需要使用 require 导入
在 ES6 中，已经支持了前端的模块化 ……
import导入 模块
export default 来导出模块
7.数组和字符串的内置方法
数组:
翻转(reverse)
排序(sort)
追加(push后加,unshift前加)
删除(pop后删,shift前删)
获取索引(indexof 首次出现的位置从前往后查 ,lastIndexof 最后一次出现的位置从后往前查 )
截取(slice(开始,结束),splice(开始,个数))
拼接数组(concat)
字符串:
根据元素找索引(indexof)
根据索引找元素(charAt)
截取(slice(开始,结束) ,substr(开始,个数))
拼接(concat)
替换(replace)
分割为数组(split)
8.js执行机制
js是单线程的,分为同步任务和异步任务(定时器,ajax,事件绑定),同步任务在执行栈中执行,异步任务在执行队列中.
先执行执行栈中的,然后把执行队列中的放到主线程中执行.
事件委托
要给子元素绑定事件时,可以将事件统一绑定给它的父元素带代理完成事件.
点透问题
层级较高的定位元素绑定 touchstar 事件,会同时触发层级低的元素,发生堆叠.
解决: fastclick js 库(还可以解决 300ms 延时 浏览器预留时间进行鼠标双击)
11.组成,顶级对象,隐式迭代,链式编程
web标准构成: 结构HTML, 表现css, 行为 js
h5: html5, css3 , js
js: ECMAscript , DOM(document), BOM(window)
顶级对象: jquery ($,jquery)
node.js(global)
js入口函数: window.οnlοad=function () {} 结构和全部资源执行完成后执行 目的是为了先加载页面再进行js；
DOMContentLoaded 结构完成就执行(图片特别多时使用)
jquery入口函数: $(function () { })
隐式迭代: 隐式遍历的过程，执行相应的方法
链式编程: 节省代码量
12.undefined的情况
变量声明未赋值
访问数值中不存在的索引
访问对象中不存在的属性
函数没有返回值,或返回值不明确
函数的形参匹配不到对应的实参
13.移动端布局
流式布局 百分比布局
把盒子的宽度设置成百分比的形式来对屏幕的宽度进行自适应的伸缩
flex布局 弹性布局
给盒装模型提供最大的灵活
flex-direction：设置主轴的方向
justify-content：设置主轴上的子元素排列方式
flex-start 从头开始
flex-end 从尾部开始
Center 在主轴居中对齐
space-around 平分甚于空间
space-between 先贴两边 在平分剩余空间
flex-wrap：设置子元素是否换行 nowrap 不换行
align-content：设置侧轴上的子元素的排列方式（多行）
flex-start 从头开始
flex-end 从尾部开始
Center 在侧轴居中对齐
space-around 平分甚于空间
space-between 先贴上下 在平分剩余空间
Stretch 子项元素高度平分父元素高度
align-items：设置侧轴上的子元素排列方式（单行）
flex-start 从头开始
flex-end 从尾部开始
Center 在侧轴居中对齐
Stretch 拉伸
flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap
rem+less+媒体查询布局 / flexible.js+rem
rem :根据html的字体大小来变化,1rem = html的字体大小
em相对于父元素，rem相对于根元素。
媒体查询: 针对不同的媒体类型定义不同的样式 CSS3新语法
@media screen and ( min-width: 320px ) { }
Less是一门 CSS 预处理语言，它扩展了CSS的动态特性
Less 使用之变量 @变量名:值;
Less 嵌套 #header {
.logo {
width: 300px;
}
}
Less 运算 @witdh: 10px + 5;
flexible.js+rem flexible是默认将屏幕分为10等分
混合布局
响应式 媒体查询+ bootstarp 即 pc和移动端共用一套网站，只不过在不同屏幕下，样式会自动适配
屏幕或视口自动分为最多12列。
栅格系统:
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局.
随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
小于768的为超小屏幕（手机）col-xs-12
768~992之间的为小屏设备（平板）col-sm-6
992~1200的中等屏幕（桌面显示器）col-md-3
大于1200的宽屏设备（大桌面显示器）col-lg-3
.col-md-offset-* 类可以将列向右侧偏移
.col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序
响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。
14.原型链,闭包,递归
原型链:
原型对象也是一个普通的对象,他是对象自带的一个隐性的 proto 属性,原型也有自己的原型对象,当原型对象不为null的时候,就是一个原型链了.
闭包
首先，闭包是一个函数，能访问自己的作用域，还能访问其他函数的作用域。
作用: 延长了变量的作用范围
递归
函数内部自己调用自己,一定要有退出条件,否则会出现死循环.
15.预解析
如果作用域有声明变量和函数的,要提升变量声明(不提升赋值)和★函数声明(不提升函数调用)
16.ES6新语法
const let var
Var 预解析，let const 不存在预解析，没有块级作用域，在同级作用域中可以声明多次，后面会覆盖前面
let: 块级作用域,存在暂时性死区,同级作用域只可以申明一次
const: 常量,块级作用域,值不可以更改, 存在暂时性死区, 声明时必须初始化.
数组的方法
1、构造函数方法：Array.from() – ★★
将类数组或可遍历对象转换为真正的数组
方法还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。
map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
2、实例方法：find() — ★★★★
用于找出第一个符合条件的数组成员，如果没有找到返回undefined
3、实例方法：findIndex() — ★★★★★
用于找出第一个符合条件的数组成员的位置(索引)，如果没有找到返回-1
4、实例方法：includes() — ★★★★★
表示某个数组是否包含给定的值，返回布尔值。
5、forEach 迭代(遍历) 数组 — ★★★★★
6、filter 筛选数组 – 返回一个新的数组 – ★★★★★
7、some 查找数组中是否有满足条件的元素 – 返回结果 true 或者 false – ★★★★★
字符串新增的方法
includes() 判断字符串中是否包含特定的字符串
startsWith() 判断字符串是否以特定的字符串开始
endsWith() 判断字符串是否以特定的字符串结束
padStart()，padEnd() 字符串补全长度功能: 对时间、对价格
模板字符串,
模板字符串使用 ${ 变量 } 解析变量。
可以换行 可以调用函数。
箭头函数
1、函数中的this是声明时的对象，不是调用时的对象
2、箭头函数不可以 new，也就是说它不是构造函数
3、函数内部不可以使用arguments，可以用rest参数替代
4箭头函数内部是没有 this 的，内部的 this 指定他定义的区间的 this 指向
扩展运算符 …
…作用就是把数组转成单个的数据项
类 本质上就是构造函数
动态方法：所谓的动态方法就是能被实例调用的方法
静态方法：使用 static 修饰的方法，静态方法只能被 类 进行调用
继承的关键字是使用 extends
解构
在对象和数组中提取值,对变量进行赋值
17.防抖和节流
防抖
场景:搜索时，监听用户输入，或者用户连续点击提交按钮
在一定时间内, 当一个动作连续触发，则只执行最后一次。
防抖函数分为非立即执行版和立即执行版。
简单方法: 若前一个定时任务未执行完，则 clear 掉定时任务，重新定时。
节流
场景: 滑动区域的scroll事件做监听，判断距离底部还有多远，
限制一个函数在一定时间内只能执行一次。
对于节流，一般有两种方式可以实现，分别是时间戳版和定时器版。
简单方法: 在延时的时间内，方法若被触发，则直接退出方法
18.状态码
400: 客服端语法错误
200: 请求成功
404: 请求资源没有找到
500: 服务器错误
19.get 和 post 的区别
get的参数放在URL中,暴露在外边,不能够传递敏感信息
post的参数放在请求体中
它们都是用来发送请求的
20.ajax的创建
var xhr = new XMLHttpRequest()//创建一个ajax对象xhr.open()//告诉ajax请求地址和请求方式xhr.send()//发送请求xhr.onload = function () { console.log(xhr.responseText)//响应请求}xhr.readState 获取状态码
21.cookie,session,token
cookie存在浏览器，不安全；
session存在服务器，可能影响性能；
token身份认证安全性好，是唯一的。若存在第三方，用token，不用session。
22.W3C盒模型 标准盒模型 box-sizing：content-box
Content 内容/ 边框border/
内边距 padding / 外边距margin
外边距合并（外边距塌陷） 就是指两个块级元素上下摆放，上又margin-bottom下有 margin-top 之间距离不是两者之和，而是取最大值 解决：只给一个盒子margin
嵌套块级元素垂直外边距合并（塌陷）解决：overflow：hidden
浮动：特点 1.脱离标准流，在一行显示，不占据位置，会影响下面元素
2.移动到指定位置，用来布局，早期是用来实现文字环绕图片的效果
3.消除了外边距，压不住padding
清除浮动：1.标签法 《div style=”clear:both”>
2.父级添加overfllow:hidden 移除隐藏 auto 添加滚动条 scroll 自动判断添加滚动条 visible默认
3.使用after伪元素清除
.clearfix:after{ content:""; height:0 ;lin-height:0; display:block; visibility:hidden;clear:both;}
.clearfix:after{*zoom:1; /针对IE6/IE7/}
4.双伪元素清除
.clearfix:before,.clearfix:after{ content:"";display:table; }
.clearfix:after{ clear:both;}
.clearfix:after{ *zoom:1;}
定位：position：static默认值
relative 相对定位 占位置，未脱标
absolute绝对定位 无父级，已浏览器可视区域定位
有父级但父级无定位 已浏览器可视区定位
有父级有定位，以父级来定位（子绝父相）
脱标，不占位置，可压住padding
fixed固定定位 脱标 不占位，与父级无关，以浏览器为父级
盒子堆叠顺序：定位布局，盒子重叠，定位的盒子后来者居上，后面的盒子压住前面的盒子 使用Z-index来解决 取值 整数或者0 越大盒子越上
Display ： none 隐藏后，不在页面保留位置 block显示，转换为块级元素
Visibility ：hidden 隐藏 占据位置，visible显示元素
vertical-align 行内元素盒模型与其行内元素容器垂直对齐，垂直对齐表格单元内容:不能用它垂直对齐块级元素
text-align作为HTML元素属性其主要是用来文本水平居中的
margin:0 auto;可以使盒子居中
23.CSS3 盒模型 移动端
1.box-sizing: border-box 不会因为border padding 撑大盒子
2.视口（viewport）显示页面内容的屏幕区域。 分为布局视口、视觉视口和理想视口
布局视口 layout viewport
视觉视口 visual viewport
理想视口 ideal viewport
/CSS3盒子模型/
box-sizing: border-box;
-webkit-box-sizing: border-box;
/点击高亮我们需要清除清除 设置为transparent 完成透明/
-webkit-tap-highlight-color: transparent;
/在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式/
-webkit-appearance: none;
/禁用长按页面时的弹出菜单/
img,a { -webkit-touch-callout: none; }
24.选择器
1.标签选择器div span
2、类选择器 取class名，以点（.）加class名开头
3、取id名，以#加id名开头，具有唯一性
4、子选择器 以>隔开父子级元素
5、包含选择器 以空格隔开包含关系的元素
6、全局选择器 以开头
7、属性选择器 [attr=” x”] 属性是x 的元素 attr^=x 已x开头 $以x结尾 * 含x
8、伪类选择器 li:first-child()
li:nth-child(数字。odd奇数 even偶数) 不管里面的孩子是否同一种类型
li: nth-of-type 孩子必须是同类型
9、伪元素选择器 ::before 和