零.前端的核心工作
- 技术核心：html,css,javascript,jquery,bootstrap,sass,git,Node.js,vue.js,react.js,微信小程序,一堆的插件和框架…
- 工作核心：渲染，用户体验，性能优化
1.渲染：页面布局(数据) - render
DOM渲染
字符串拼接 +=
模板字符串
JSON概念和特点:最好的前后端交互的数据格式是json
JSON.parse()
数组和对象遍历 - for/for…of/for…in
innerHTML
appendChild …
2.用户体验：用户使用网站的时候，非常方便。
表单
特效
...3.性能优化 - 面试
减少http请求 - 雪碧图
懒加载技术-lazyload
CDN - 内容分发网络
减少DOM操作
SEO - 搜索引擎优化- JavaScript二阶段的核心：基础语法，算法，逻辑思维，原生应用。
一.类
- 类：一类事物，虚的，不占内存的。 例如：人类，动物类，植物类。
- 对象: 对象是类下面的具体例子，对象占据内存的，真实的。(一切皆对象)
- 对象的组成：属性+方法
- 属性：描述对象的外观，属性基本都不相同例如:张三(身高，体重，肤色)
- 方法：对象的功能，方法共有的 例如：张三(开车，走，跑...)(被动的方法-事件、主动的方法)- 程序中类和对象
- 类(构造函数)- 面试
-- 系统的类(Array,Function,Date...)
var arr = new Array()
Array:类，构造函数
arr:实例对象(对象)
-- 自定义的类-自定义构造函数或者es6的class
function Person(){
this.name = '张三';
}var p1 = new Person();
Person:类，构造函数
p1:实例对象(对象)
----------------------------------------
class Person{
constructor(){
this.name = '张三';
}
}var p1 = new Person();
Person:类，构造函数
p1:实例对象(对象)
- 对象(自定义的对象object 系统类下面提供的对象)
-- 对象下面属性的访问或者方法的访问(点操作符和中括号)
二.变量和常量
- 常量的概念和特点
- 值不能改变,不能重复声明。
- 常用的应用场景
DOM元素获取
函数的声明
对象的关系(定义对象，属性值可以改变，对象是地址)
- 变量的概念和特点
- var:es6之前声明变量的关键字
- 写入内存(垃圾回收机制),值可改变，松散类型(声明无需确定类型)，同时定义多个(逗号分隔)，前置访问undefined(预解析)
- let:es6新增的定义变量的关键字
- 块({})作用域，声明的变量会绑定在这个区域。
- 不能重复声明
- 不能前置访问
- 变量的类型及其检测 - 面试
基本类型(6) number/string/boolean/undefined/null/symbol(es6)
引用类型(1) object
面试题：最好的检测数据类型的方式
var a = 1;
var b = new Array();
var c = null;
1.typeof
console.log(typeof b);
object
console.log(typeof c);
object
console.log(typeof typeof c === 'string');
true
2.instanceof:从属
console.log(b instanceof Array);
true
console.log(b instanceof Object);
true
3.constructor:实例对象的类(构造函数)
alert(b.constructor);
function Array() { [native code] }
4.toString:转字符串、进制转换、类型判断
系统默认的对象下面都有toString，自定义的对象继承自Object。
function Hehe() {构造函数
}
var h1 = new Hehe();
自定义对象
console.log(h1.toString());
[object Object]
console.log(Object.prototype.toString.call('abc').slice(8, -1));
console.log(Object.prototype.toString.call(123));
console.log(Object.prototype.toString.call([]));
console.log(Object.prototype.toString.call({}));
console.log(Object.prototype.toString.call(undefined));
console.log(Object.prototype.toString.call(null));
console.log(Object.prototype.toString.call(function () { }));
console.log(Object.prototype.toString.call(/\d/));
- 变量的命名规则
变量命名的组成：字母，数字，下划线，数字不能开头，包括$
命名：语义化，见名知意。
命名规则：大小驼峰命名，匈牙利命名法
大驼峰：每一个单词首字母大写ClassName
小驼峰：从第二个单词开始，首页字母大写classNamejs遵循的。
匈牙利命名:第一个字符代表类型 bstop = true(个人习惯)
常量的命名:尽量全部大写。(个人习惯)
三.运算符
- 赋值运算符及复合的赋值运算符(重点关注：+= =)
渲染：+= 和 模板字符串。
- 逻辑运算符-短路操作和应用场景
通过逻辑运算符，添加默认值
条件的叠加(&& ||)
逻辑非的结果一定是布尔值，转换布尔值
判断存在
fn && typeof fn === 'function' && fn();
如果fn存在,同时类型为函数，执行fn这个函数- 比较运算符
比较==和===的区别(隐式转换)- 数学运算符- 一元运算符
var a=5;
alert(a++);
//5
alert(a);
//6
alert(++a);
//7- 三目运算符 - ?:(优先级最低)- 运算符优先级 - 面试题- () [] ! * % / + -><&& || ?: =
四.程序的三大结构
1.顺序结构- 上下 左右 内外(作用域)
2.选择结构- if/switch
- if语句的特点
- if的条件可以是任意值，但结果一定会转换成布尔值(系统自动完成转换Boolean)
- 将最大的可能给if语句。if语句执行了,else就可以跳过。
- else可以省略
- if的嵌套优于多条件
- switch语句的特点
- 恒等关系
- 适用多条件，省略default
- case具有穿透力- 数字非0即真，字符串非空即真，null,undefined,NaN3.循环结构- for循环和while循环的应用
- 循环不执行完，不会出现结果，嵌套时候，外层循环一次，内层全部循环完。
for(var i = 0;
i <= 9;
i++){//循环10次
for(var j = 0;
j <= 9;
j++){//循环100次}
}
- ES6里面有详细的对比-for...of章节 - 面试
- for 性能不是很好。
- forEach 遍历数组
- for...in 遍历对象。(无序的遍历)
- for...of es6新增的，最好的遍历方式。(性能)
五.Javascript的错误类型和如何调式错误。
1.常见的错误类型
- 语法错误 - syntaxError
- 引用错误 - referenceError
- 范围错误 - rangeError
- 类型错误 - typeError
2.错误调试(断点)
- 输出测试
- 断点-查看代码的执行顺序，针对遍历。
六.函数以及函数的意义。
1.函数的意义 - 封装，任意调用。
2.函数的特点 - 封装，重用，可扩展(便于管理)
3.函数的细分 - 各种类别的函数(普通函数，函数表达式，箭头函数，回调函数)
4.函数的参数 - 形参和实参的关系。
5.函数的返回值 - 函数一定有一个返回值，如果没有显示声明return，返回undefined
【学习目标】七.作用域 - 重点都是面试
1.局部变量和全局变量
- 全局变量：作用范围整个文档(script)。
- 局部变量：函数内部通过var声明的变量。
2.作用域链
- 当执行函数时，总是先从函数内部找寻局部变量如果内部找不到（函数的局部作用域没有），则会向创建函数的作用域（声明函数的作用域）寻找，依次向上查找。
- 在函数体内，局部变量的优先级高于同名的全局变量-作用域链
3.预解析
3.1.预编译
- 先找var和function关键字，如果找到var关键字，提前赋值undefined给变量名. 如果找到function，提前将整个函数赋值给函数名称。
- 如果函数和变量出现重名，函数优先。
- 函数的参数类似于变量，函数内部同样做预解析，支持预解析。
- if语句和for语句里面的变量和函数做预解析提前赋值undefined,函数声明不会跳过。
3.2.逐行执行。
六.数组对象和自定义对象
1.数组对象的使用-(创建,特点,方法)
转换方法：toString()/join()
栈方法：push()/pop() - 后进先出
队列方法：unshift()/shift() - 先进先出
重排序方法：reverse()/sort(比较函数)
结构方法：concat()/slice()/splice()-最强大的方法
位置方法：indexOf()/lastIndexOf()
迭代方法：每一次对过程的重复称为一次“迭代”，而每一次迭代得到的结果会作为下一次迭代的初始值。
every()/some()/filter()/map()/forEach()归并方法：reduce()/reduceRight()2.es6es7新增的数组的的方法
includes()存在某个数组项，返回布尔值。
fill()数组项填充
flat()数组的扁平化，参数即要扁平维数，一般设为infinity(无穷)，可以扁平化任意维数的数组。
例如：[1,2,[3,4,[5,6,[7,8]]]].flat(infinity)静态方法：构造函数下面的方法。
类数组：伪数组(不具有数组的方法)，类数组转换成真正的数组。
Array.isArray()
三种方式转真正的数组：Array.from()扩展运算符(...)Array.prototype.slice.call()- 面试
Array.of()2.数组的遍历取值 - for...of/ forEach / for / filter / map 3.数组的排序-冒泡，(选择)，快速排序 - 面试(手写)4.自定义对象的使用-(创建,特点)。
5.自定义对象的遍历取值-点操作符和中括号
- 对象的属性字符串或者变量，但是变量一定加[]
- 对象的结果[object Object],和里面的属性没有关系
6.值传递和引用传递的区别(赋值，解决方式) - 面试(浅拷贝和深拷贝)
7.defineProperty - https:www.jianshu.com/p/8fe1382ba135- 面试的核心(vue)
七.es5的严格模式(目的,标志use strict,行为改变) - 面试
- 严格模式的目的：解决js不合理不严谨的地方。
- 标志：‘use strict’(代码的第一行)
- 行为改变
- 变量一定要显示声明 var let
- 普通函数内部的this指向undefined,window去调用，指向window
- 禁止使用 with 语句
- 禁止使用八进制
- 函数不能有重名的参数
- …
八.Math和Date对象 – 应用场景有限，熟悉即可。
- Math. + round/floor/ceil/max/min/random/pow/abs/sqrt/PI
- 格式化当前日期 - 定时器
- 倒计时- 定时器
核心案例：
排序：冒泡、选择、快速
数组去重：7种
数组的扁平化
统计字符个数
倒计时效果
—————————————————————————————————————基础部分——————————————————————————————————————————
九.BOM和DOM操作 – 应用场景有限，熟悉即可。
1.BOM的概念
2.BOM的子对象-location对象的属性和方法
location.href:读写地址栏
location.search:读取地址栏问号后面的数据，包括问号。
location.hash
reload()
3.BOM的事件
window.onload:浏览器加载事件
window.onscroll:浏览器滚动条事件
window.onresize:浏览器缩放4.定时器-定时器的开启和关闭 + 异步操作。
window.setInterval()
window.setTimeout()
window.clearInterval()
window.clearTimeout()
同步：javascript是单线程，后一个任务等到前一个任务完成才执行
异步：队列，等待主线程完成之后，才通知执行。(定时器，ajax，事件)5.DOM的概念(元素节点，属性节点，文本节点，注释节点...)
6.查询元素,创建元素,追加元素,插入元素,删除元素,克隆元素 - 面试题
7.节点的类别 (1 元素节点2 属性节点3 文本节点)+ 节点的三个常见属性(nodeType,nodeValue,nodeName)
8.innerHTML/innerText/outerHTML
9.childNodes/children的意义和区别
10.读写css属性值(currentStyle/getComputedStyle/offsetLeft/offsetTop/offsetWidth/offsetHeight...)
十.事件对象 – 对比DOM操作，显得更重要一些。
1.事件流:事件捕获+目标事件+事件冒泡
2.事件绑定、事件侦听 - addEventListener removeEventListener
3.事件委托:利用事件冒泡的原理，将子元素的事件委托给父元素。 - 面试
4.触发事件的元素-target/srcElement
十一.正则表达式+表单验证-非常重要的，源码中使用频率很高，配置文件里面(webpack)
1.读懂常见的正则表达式。
2.表单验证。
3.熟悉基本的正则语法。
4.通过正则实现一些复杂的算法(替换实现replace) - 面试笔试
十二.ES6的新语法
1.let const 语法特点
2.变量的解构赋值 - 熟悉 - 加载模块
3.扩展运算符 - 使用一般
4.模板字符串 - 使用较多
5.箭头函数 - 使用较多 - 面试
6.Object.assign() - 面试 - 浅拷贝
7.class(类)面向对象开发写法。 - 使用较多
8.this下面的三个方法-call/apply/bind区别 - 面试
十三.面向对象
1.面向对象和面向过程的区别 - 面试
2.面向对象的特点：封装，继承，多态 (前端：忽略抽象) -面试
3.面向对象的继承的写法：- 使用较多 特别是class的继承
-混合开发：构造函数+原型
-class开发
4.原型链概念和过程(proto) - 面试
十四.本地存储localStorage，cookie，sessionStorage
sessionStorage和localStorage基本特性是一样的，只不过localStorage永久存储，sessionStorage临时的，会话结束就消失了
1.本地存储 - 存取删的操作–浏览器
- localStorage.setItem();
- localStorage.getItem();
- localStorage.removeItem();
2.cookie - 存取删的操作–服务器
- name:自定义的键值
- value:键对应的值
- expires:过期时间
- path:路径 默认cookie只能在同一个目录或子目录下才可以访问
- document.cookie = “name=value; expires=date; path=/” (表示在根目录下,所有的页面都可访问)
- domain:主机(主域名)设置 cookie 的域值，但一定是同域之间的访问，不能把domain的值设置成非主域的其他域名。
- 举例
https:www.baidu.com/
http:news.baidu.com/
document.cookie = “name=value; expires=date; path=/; domain=baidu.com”;
- xss攻击 - 面试
xss（Cross Site Script）攻击全称跨站脚本攻击，XSS攻击通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是JavaScript。
- 解决方案：输入过滤、输出转义
3.对比localStorage，cookie，sessionStorage的区别-面试
————————————————————————————————————————————————————js核心基础部分————————————————————————————————————————————————————————
十五.前后端交互 - 面试
1.了解后端的相关概念。
基础语法(变量，常量，分支语句，循环语句，函数，数组，对象…)
数据库的链接代码
了解sql语句
2.熟悉服务器环境的配置。
3.熟悉http过程,https区别,http状态码 - 面试
十六.AJAX - 框架底层实现+面试 框架中封装新的应用(fetch axios)。
1.AJAX目的：和后端进行交互(获取数据、传输数据).
2.同步和异步的概念–性能问题
3.try…catch…finally 容错处理，兼容处理
3.get和post区别 -面试
4.ajax的四步曲 -面试
5.为什么产生跨域，同源策略的概念 - 面试+JSONP的原理
6.产生跨域-端口不同，协议不同，域名不同，域名和域名对应的ip
7.解决跨域的方式 - jsonp(前端,第三方接口是jsonp格式) 其他的都是后端的。
十七.回调函数和promise - 重点应用
1.回调函数的概念
2.回调函数的特点
3.回调函数的弊端
4.promise概念-面试的重点。
5.promise的三个状态-状态一旦设定，不能改变
6.promise的实例方法 then,catch
7.promise的静态方法 all,race
十八.闭包 - 面试的重点
1.闭包的概念。
2.闭包的特点。
3.闭包的弊端。
十九.面向对象的继承 - 应用重点
1.混合继承
2.class继承 - 重点
二十.完成提供的案例或者应用
二十一. jquery - 为什么使用jquery(特点和优势)
二十二. gulp
1.gulp的意义
2.gulp的初始化 gulp init
3.gulp的常用插件。
4.gulp的基本语法(gulp.task/gulp.src/gulp.dest/pipe)
二十三. git
1.常用的git命令
2.如果解决冲突。
二十四.COMMONJS - Node.js ,AMD - require.js ,CMD - sea.js - 重点面试
二十五.sass(less,compass-sass框架)
1.熟悉sass的编译 - gulp(webpack)
2.熟悉sass的常见语法(变量，注释，嵌套，混合，基础，局部文件…)
二十六.设计模式的概念。
1.单例模式
2.组合模式
3.观察者模式
