1.js
1.js是一种弱类型的脚本语言，页面交互，不需要编译，解析性语言 javascript
2.js站在巨人的肩膀上 网景公司
2.js的组成
ECMAscript 核心规范
DOM 文档对象模型 dom 节点
BOM 浏览器对象模型
3.js放置位置
1.js代码直接放在标签里，在标签内部编写
2.js代码放在script标签里面 script标签尽量放body里面
3.用script标签引入一个外部的js文件
4.js输出语句
alert(); 弹出框 window.alert(); * 组织程序的运行
console.log(); 在浏览器的控制后台打印信息 调试程序
document.write("") 在浏览器打印信息
扩展：
console.warn("") 警告输出
console.error("") 报错输出
prompt("提示信息")
confirm("") 显示当前窗口提示框
5.变量
常量
变量：在程序运行中，有可能改变的量 存储数据，方便对数据操作
！！！！变量一定要先定义，在使用
如何定义变量：
当声明变量没有赋值的情况下 undefined
变量命名规则
1,不能使用关键字，保留字
变量类型的检测
typeof 检测变量的数据类型
console.log(typeof NaN ) // number
console.log(typeof Infinity) //number
6.js的数据类型
基本数据类型：number / string / boolean(布尔值) / null / undefined
布尔值:（true false）
引用数据类型：object function
null 常用来初始化对象 consoe.log(typeof null) //object;
7.运算符
1算术运算符
1.双目运算符 + - * / %(取余，取模)
+：如果两边都为纯数字 做运算
一侧为字符串，则不运算，而是字符串拼接
注：除+以外，其他的算数运算符，都有“隐式类型转换”
如果一个表达式例如 “a" * 3 结构为NaN not a number
2.单目运算符 ++ --
num++ num= num + 1
k++ 和 ++k的区别
K++ 先赋值，后运算
++K 先运算，后赋值
2.关系运算符
eg: > < == >= <= != ===全等于 !==全部等于
3.逻辑运算符
eg: && || ！
4.条件运算符
表达式1 ？ 表达式2 : 表达式3
5.赋值运算符
= += -= *= /= %=
8.arguments 对象
存放函数内部所有的参数
arguments.length 记录着所传递参数的个数
arguments存放参数的形式类似于数组，但是arguments不是数组
arguments取出里面存放的数据，需要通过下标，下标从0开始（索引值）
如果把arguments全部取出，需要循环遍历
9.作用域
`var a =10;`
• `function fn(){`
• `console.log(a); //undefined`
• `var a = 20;`
• `console.log(a); //20`
• `}`
• `fn();
函数作用域：
全局变量
局部变量
变量的关系：
1：写在函数内部的变量叫做局部变量
2：在全局不能访问局部变量
3：在局部能访问全局变量
4：函数在不调用的时候，局部变量是不存在
5：函数运行完毕之后，变量是会被垃圾回收机制回收！
作用域链：根据函数内部能访问函数外边变量的这种关系，逐层向外查找变量的过程 就叫做作用域链
var a = 20;
• function fn1(){
• var a = 10;
• function fn2(){
• console.log(a); //10
• }
• fn2();
• }
• fn1();
词法作用域：（静态作用域） 在函数声明时候产生
动态作用域 在函数调用的时候产生作用域，动态作用域
js里面函数的作用域 ，是在声明时候产生的还是在调用的时候产生的？ ====》声明时候产生
var a = 10;
• function fn1(){
• console.log(a); //10
• }
• function fn2(){
• var a = 20;
• fn1();
• }
• fn2();
变量提升
js的解析过程：
1：预编译（预解析）
a:对语法检测，有语法错误直接报错
b:变量提升
2；执行
变量提升：
1：把声明的变量 var a;提升到当前作用域的最顶端
2：赋值语句和逻辑语句都不提升，原地等待执行
3: function关键字声明的函数也会整体提升到作用域的最顶端
4：变量提升的规则：所有用var声明的变量先提升，然后在提升 function 声明的函数整体 （官方解释：函数执行的权重比较高）
5：匿名函数不会被提升
函数内部的this指向
谁调用函数，this指向谁
事件驱动：给谁绑定事件，this指向谁
递归函数
5的阶乘
function fn(n){
• if( n == 1) return 1;
• return n * fn( n - 1);
• }
• console.log(fn(5)); //120
10 数组
数组：使用单独变量储存一系列的值
声明数组方法：
1.字面量法：
var arr = [ ];
2.构造函数方法
var arr = new Array( );
如果参数为一个数值；代表的是数组长度
如果为多个值，则是数组项
数组的遍历
for 循环
for in 循环
数组的api
1.push :在数组后边添加一个
2.pop：在数组后边取最后一个
3.unshift：从数组第一位添加
4.shift：从数组第一位取
5.reverse 反转
6.sort( ) 排序方法 参数为一个回调函数
1.如果没有参数：则是按照第一位的ASCII码排列
2.有参数 arr.sort(function(){})
arr.sort(function(a,b){
return a - b //正排序（从小到大）
//return b - a 倒排序 (从大到小)
})
7.concat ( ) 数组拼接
8.join() 将数组分割成字符串，按照所填字符
9.arr.toString( ) 将数组转化为字符串
10.arr.slice( start,end) 截取数组 不改变原数组
11.splice(start,deleteCount,arr) 从start开始，删除几个 arr 插入的新的数组元素 改变原数组
数组排序
1.冒泡排序 两两比较
function bubbleSort(arr){
• //确定循环的次数
• for(var i = 0; i < arr.length-1; i++){
• //每一轮的数值比较
• for(var j = 0;j < arr.length - i -1; j++){
• //谁大谁往后排
• if(arr[j] > arr[j+1]) {
• var temp = arr[j];
• arr[j] = arr[j+1];
• arr[j+1] = temp;
• }
• }
• }
• return arr;
• }
2.选择排序
function chooseSort(arr){
• //确定几轮
• for(var i=0;i<arr.length-1;i++){
• //第一轮都和第一个比较
• for(var j = i+1;j<arr.length; j++){
• //谁小放前面
• if(arr[i] > arr[j]){
• var temp = arr[i];
• arr[i] = arr[j];
• arr[j] = temp;
• }
• }
• }
• return arr;
• }
3.快速排序
function quickSort(arr){
• //递归结束条件
• if(arr.length<=1){
• return arr;
• }
• //取中间的值以及中见下标
• var
• midIndex = parseInt(arr.length / 2),
• midVaule = arr[indIndex],
• leftArr = [], //创建左右数组
• rightArr = [];
• //遍历数组，没一个值和中间的值作比较。大的放右侧数组，小的放左侧数组
• for(var i=0;i<arr.length;i++){
• //如果是中间小标的，跳出本次循环（不用中间值和自身比较）
• if(i == midIndex){
• continue;
• }
• if(arr[i]<= midValue){
• leftArr.push(arr[i]);
• }else{
• rightArr.push(arr[i]);
• }
• }
• //利用递归处理左右数组
• var res = quickSort(leftArr).concat(midValue).concat(quickSort(rightArr));
• return res;
• }
数组去重
1.splice 双层for循环
function norepeat(arr){
• //运用选择排序思想
• for(var i=0;i< arr.length-1;i++){
• //用第一个数和其余的数作比较
• for(var j = i+1;j<arr.length;j++){
• //如果两个相等
• if(arr[i] == arr[j]){
• arr.splice(j,1);
• j--;
• }
• }
• }
• return arr;
• }
2.indexOf 用一个临时的数组 和 传递过来的数组里面的每一项 比较，如果临时数组.indexOf(传递过来的数组的数组项)，如果值-1 把传递过来的数组的某一项push到临时数组里面
function norepeat(arr){
• var tempArr = [];
• for(var i = 0,j = arr.length;i < j; i++){
• if(tempArr.indexOf(arr[i]) == -1){
• tempArr.push(arr[i]);
• };
• }
• return tempArr;
• }
11.对象 js里面的一个数据类型 引用类型
对象 =》属性 方法
创建对象的方法 1.构造函数 2.字面量
12.ES5新增的数组常见方法
1.arr.indexOf()
1,第一次出现的下标
2.两个参数，后面的参数代表从哪个下标开始查找
3.如果不存在 返回的为-1
2.arr.lastIndexOf()
从后往前找，返回也是下标
接受两个参数，第二个参数 从哪个下标开始
3.forEach 遍历数组
arr.forEach(function(value,index,arr){
// value数组项
//index 下标
//arr数组本身
})
4.map
把原数组映射到一个新数组里面
不会对原数组造成影响
arr.map(function(value,index,arr){
return 需要返回的
})
// value数组项
//index 下标
//arr数组本身
5.reduce 累计
arr.reduce(function(acc,value,index,arr){
return acc + value; //累加
acc===》累记器
})
6.filter 过滤器
arr.filter(function(value,index,arr){
//return 过滤条件
})
13.new Date() 时间对象
时间对象api
1.getFullYear() 获取年份
setFullYear() 设置年份
2.getMonth() 获取月份 0-11
setMonth() 设置月份
3.getDay() 获取星期
4.getDate() 获取天
setDate() 设置天数 如果把日期设置为0的情况下，保存的是上个月天数
eg:怎么获取当前月的天数
a:先把月份设置成下一个月
b:再把日期设置成0
c:在获取getDate()
var date = new Date();
• //先把月份设置成下一个月
• date.setMonth(date.getMonth() + 1);
• //再把日期设置成为0
• date.setDate(0);
• console.log(date.getDate());
5.getHours() 获取小时
6.getMinutes()获取分钟
7.getSeconds()获取秒
8.getMilliseconds()获取毫秒
定时器
setInterval( 参数1，参数2) //定时器
参数1：回调函数 定时器指向的代码块
参数2：时间 1000ms
清除定时器 clearInterval() 参数： 可以是定时器的编号 可以是定时器的名称
14. DOM和BOM
windows对象介绍
alert() 弹出框 阻止程序运行
confirm()
windows内置对象
history对象
history.go()
参数 -1后退 0刷新 1前进
history.back(); 后退
history.forward();前进
location 对象
location.href 页面的跳转
location.reload() 页面的刷新 如果参数为true 清除缓存
navigator对象
windows事件
window.onload = function(){
等待页面资源加载完成之后 在执行onload里面的代码
}
window.onscroll = function(){
高频触发 滚动条滚动就触发
}
滚动条滚动 获取滚动条的高度
document.documentElement.scrollTop;
document.body.scrollTop;
延时器
setTimeout(function(){
},1000
DOM节点的获取
document.getElementById(id);
document.getElementsByName(name);
document.getElementsByTagName(TagName);
document.getElementsByClassName(className);
ES5新增获取元素
document.querySelector();
15.回流与重绘
回流：当render树中的一部分或者全部因为大小边距等问题发生改变而需要重建的过程叫做回流（改变大小）。
重绘： 当元素的一部分属性发生变化，如外观背景色不会引起布局变化而需要重新渲染的过程叫做重绘（改变样式）。
注意：回流必将引起重绘，而重绘不一定会引起回流。
16.事件
常用的事件
1，鼠标事件
onclick 单击
ondblclick 双击
oncontextmenu 右击
onmouseover onmounseout 鼠标移入移除
onmousedown onmousemove onmouseup 鼠标按下 移动 抬起
2.滚轮事件
onmousewheel
3.键盘事件
onkeyup 键盘抬起
onkeydown 键盘按下（任何键都可以）
onkeypress 键盘按下（字母健数字键）
4.滚动条时间
onscroll
window.onscroll = function(){}
5.表单时间
onfocus 获得焦点
onblur 失去焦点
oninput 文本框输入事件（事实监控文本框）
onchange 文本框失去焦点内容发生改变时触发
onsubmit 表单提交 form 才有
事件对象
事件源.事件 = function(e){
e = e || window.event; 获取事件对象并且处理兼容问题
事件处理程序
}
事件的类型:
e.type 获取事件类型 是没有 on
17.浏览器的默认行为
阻止浏览器默认行为
e.preventDefault();
e.returnValue = false;
18.事件监听
事件监听：dom二级事件
ele.addEventListener(事件类型，回调函数，布尔值) //存在兼容问题
参数： 事件类型： click mouseover
回调函数：事件处理程序
布尔值： 控制事件流 如果为true,事件捕获；false，为事件冒泡
ele.attachEvent(事件,回调函数) //IE
参数： 事件： onclick onmouseover
回调函数: 事件处理程序
事件监听方法
function addEventListener(ele,eventType,fn){
return ele.addEventListener ? ele.addEventListener(eventType,fn) :
ele.attachEvent('on' + eventType,fn)
};
19.事件流（冒泡，捕获）
事件冒泡：从向向外找的过程 绝大数浏览器都是冒泡；
事件捕获：从外向内找的过程
阻止事件冒泡：
e.stopPropagation() //兼容 ie方法
e.cancelBubble = true; //属性
function stopPropagation(e){
return e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
}
20.事件源
事件源：事件真正触发的元素
获取事件源：
e.target || e.srcElement;
21.事件代理
事件代理：把事件绑定到父元素上
对事件源进行判断（className, tagName）,然后执行不同的代码款
优点：1：减少事件的绑定次数
2：实现对未来元素的绑定事件
22.正则表达式
正则表达式：
1，一种高效处理字符串的规则
2，正则表达式：逻辑公式
3，正则表达式由普通字符和元字符组成
4，执行逻辑：正则是一种规则，对字符串进行验证，如果符合规则返回的是true;否则为false;除了验证字符串，还能对字符 替换，查找
5.作用：对字符串：匹配，查找，替换，获取
正则表达式创建
1，var reg = /匹配规则/;
第一个/ 正则表达式的开始
最后一个/ 正则表达式的结束
注：匹配规则不接受变量
2， var reg = new RegExp('表达式','i/g');
表达式可以接受变量
i 忽略大小写
g 全局匹配
正则的匹配：
正则表达式.test(要匹配的字符串)；
返回值为 true 或 false;
元字符
1.判断一个字符串是不是以a开头
2.判断一个字符串是不是以e结尾
// ^ / 全部匹配一遍，限制字符数量必须和正则保持一致
var reg = /^a/ 以a开头 var reg = /e$/ 以e结尾
[ 字符的集合]
[a-z] 小写字母集合
[A-Z] 大写字母集合
[0-9] 数字的集合
\d 数字
{n} 匹配n次
{n,} 至少匹配n次
{n,m} 至少n次，最多m次
// + 等价于 {1,} 至少1次
// * {0,}匹配任意次
? {0,1}
\w 数字字母下划线
任意字符 \。
\b 边界符
\s空格
| 或 模式匹配
23.ES6
1.块级作用域
为什么添加块级作用域
1：防止局部变量污染全局
2：防止变量泄露在全局
块级作用域{} 形成一个暂时性的死区
2.let const
都只能在声明变量的块级作用域内有效
1.let 声明变量特点
1，声明的变量只能在当前块级作用域内使用
2，在同一块级作用域里面不能使用let声明多个相同的变量
3，变量不会泄露在全局
4，let不会变量提升
2.const 特点
1，声明的变量只能在当前块级作用域内使用
2, 不会变量提升
3，const声明一个常量 并且 用const声明的变量 值 不能改变
3.es6 字符串模板
``
拼接变量 ${变量}
4.includes 字符串搜索
返回的为布尔值 true false
5.startsWith endsWith 判断首位
6.repeat 重复复制字符串
7.es6对象
- 消除function 关键字
eat(){ }
2.Object.is(obj1,obj2); 检测对象指向的索引是否一致
3.object.assign(参数1，参数2...)
参数1：要合并的对象 被更改
参数2：被合并的 自身不被修改
24.es6解构赋值
25.es6扩展运算符
...作用：
1，对函数参数的解构
function fn(...num){
• var sum = 0;
• for(let i = 0 ;i< num.length;i++){
• sum += num[i];
• }
• return sum;
• }
• console.log(fn(1,2,3,4,5));
2,对象的合并
3.对象的保存
26.es6箭头函数
箭头函数基本语法： var fn = () => 100;
箭头函数的参数：var fn = (a,b) => a*b; fn(10,20)
箭头函数后面为一个代码块
var fn = (a,b) =>{
return a * b;
}
箭头函数的特点；
1，箭头函数内部是没有this指向。（箭头函数内部this指向，指向的是他最近的作用域）
2，箭头函数没有arguments对象的，如果想获取参数的个数，只需对参数解构
var fn = (...num) =>{
• console.log(num.length);
• }
• fn(1,2,3)
3,箭头函数不能作为构造函数
27.this的指向
this的指向
1，如果没有函数，或者function关键字定义fn()调用 ， this指向window
2,如果开启严格模式 this指向undefined
3,事件调用，this指向绑定事件对象
4，定时器 this 指向window
5,对象
a:如果对象内部的函数中的this 在函数调用的时候，指向的是当前的对象
b;如果对象内部存在对象，内部对象里面函数内的this指向：内部对象 obj.obj.fn() 指 向obj2;
c:对象内部的方法，交给全局变量执行，this指向window
28.改变this 指向的方法
1：对this进行保存
var _this = this;
• document.onclick = function(){
• console.log(_this);
• }
2：bind() 返回一个函数，需要调用！！！
function fn(){
• console.log(this);
• }
• fn.bind(document)();
29.symbol类型 独一无二
常用作为一个对象的key，保存数据不被干扰
如果symbol作为对象的属性，无法通过 for in遍历
如何取symbol的值？？？
var obj = {
• age : 20,
• sex : 'nan',
• [Symbol()] : 2222
• }
• // 取出symbol的值
• var arr = Object.getOwnPropertySymbols(obj);
• console.log(obj[arr[0]]);
30.set map
1.set 对数组的包装
1：数组去重
2:size属性 记录数组的长度
3：add() 添加
4:delete() 删除
5：clear() 清空
6：has() 检查是否存在 返回布尔值
var arr = [1,1,1,2,3,3,3,32,2,2,3,4,4,4,5,5]
• var arrSet = new Set(arr);
• arrSet.add('9');
• console.log(arrSet); // 1,2,3,32,4,5
2.map 字典数据结构 属性值：可以是任何类型
size属性获取长度
set() 设置属性
get() 获取属性
delete()删除属性
clear()清除属性
has()查找
values()获取所有的value值
keys()获取key值
var d = new Map()
• d.set("new","ww");
• d.set(22,33);
• d.set(null,"ww");
• console.log(d); //0: {"new" => "ww"}1: {22 => 33}2: {null => "ww"}
• d.delete(null);
31.js里面向对象 ：封装 继承 抽象
32.构造函数
通过new调用 -》 构造函数
对象是通过构造函数构建出来的，对象用来存储数据
构造函数 -》 对象 -》 存储数据
为了区分构造函数与普通函数： 构造函数的首字母 大写 ！！！
//需求 存100辆车 工厂模式
• function car(name,value,type){
• var obj = new Object();
• obj.name = name;
• obj.value = value;
• obj.type = type;
• return obj;
• }
• var car1 = car('奥迪','4.0','suv');
• var car2 = car('大众','5.0','suv');
• var car3 = car('五菱','5.0','面包');
• console.log(car1,car2,car3);
//new 提取出来 构造函数在new的时候构建对象，会在内部自动返回一个this 指向构造函数
function Car(name,value,type){
this.name = name;
this.value = value;
this.type = type;
}
var car1 = new Car('dazhogn','1.8T','suv');
var car2 = new Car('dazhogn','1.8T','suv');
var car3 = new Car('dazhogn','1.8T','suv');
console.log(car1,car2,car3);
33.构造函数与普通函数的区别
普通函数如果内部没有return的时候 返回的是undefined
构造函数内部没有return返回值的时候，返回的构造出来的是对象
普通函数内部的this指向，指的是window
构造函数内部的this指向，指的是当前对象
总结：构造函数在new的时候构建对象，会在内部自动返回一个this 指向构造函数
34.prototype 指向当前对象 原型对象
每一个函数都会存在一个原型对象 prototype
作用：
1：存放这公共的属性和方法
2：减少内存开销
3：扩展属性和方法
4：实现继承！！！
35.面向对象的实现流程
面向对象实现流程：
1：把全局的变量作为属性
2：把对象的方法放在prototype
3: new实例化对象
4：this指向！！！
function 构造函数名称首字母大写(){
• //属性
• this.属性名称1 = '属性值1';
• this.属性名称2 = '属性值2';
• this.属性名称3 = '属性值3';
• //调用初始化方法
• this.init();
• }
• 构造函数名称首字母大写.prototype = {
• //方法放在prototype对象上
• //方法：实现效果的 多个功能模块
• //初始化方法 : 整合各个功能模块
• init : function(){
•
• },
• //各个功能模块
• fn1 : function(){
• },
• fn2 : function(){
•
• },
• fn3 : function(){
•
• },
• //绑定事件模块
• eventBind : function(){
• }
• }
• new 构造函数名称首字母大写();
36.Cookie
1，大小限制（不能超过4K）
2,每个域下cookie不超过50个
3，有效期和设定时间有关，过了有效期cookie会自动删除
4，cookie读取（只能访问同一个域名下的cookie）
5,没有设置存储时间的cookie是临时cookie,浏览器关闭自动删除、
6，cookie值只能是字符串
37.同步异步
同步：一个代码执行的时候，阻塞其他的代码块的执行
异步：一个代码块执行，不影响其他代码块
js里面那些属于异步？？事件 定时器 ajax
js单线程语言！！！
先执行同步，异步任务挂起！
38.ajax流程
var xhr = new XMlHttpRequest();
• xhr.open('get','http:ww.baidu.com');
• xhr.send();
//监测状态
• xhr.onreadystatechange = function(){
//通过onreadystatechange 监测 ajax 服务端的状态
• if(xhr.status == 200 && xhr.readyState == 4){
• console.log(xhr.responseText);
• }
}
39.同源策略
协议，域名，端口号 必须保持一致
目的：数据安全性
40.解决跨域方法
jsonp跨域 利用浏览器漏洞 src属性 不受同源策略影响
1；动态创建一个script标签
2；更改script标签的src属性值：更改成接口地址
3；在接口地址的后面 拼接参数 callback=
4;callback 的值为一个全局的函数名
5；添加一个全局函数 用来接收数据
6；把script标签放在body里面
7：把script标签移除
cors 服务端 在服务端设置允许访问的域
代理（正向代理，反向代理）
41.promise
1:三个状态：pendding(进行时) resolve(成功的状态) reject(失败的状态)
2：使用promise的时候需要实例化 new Promise()
3:Promise的参数是一个回调函数
4：在这个回调函数里面 有两个参数 resolve reject
5:promise的方法： .then() .catch() .all() .race()
42.闭包
js里面能让全局访问局部的变量的函数
定义在函数内部的函数
改变变量访问的正常机制（延长变量的声明周期）（垃圾回收机制）
