jquery介绍
jQuery是目前使用最广泛的javascript函数库
据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库
微软公司甚至把jQuery作为他们的官方库
jQuery的版本分为1.x系列和2.x、3.x系列
1.x系列兼容低版本的浏览器
2.x、3.x系列放弃支持低版本浏览器
目前使用最多的是1.x系列的
jquery是一个函数库，一个js文件，页面用script标签引入这个js文件就可以使用
jquery的口号和愿望 Write Less, Do More（写得少，做得多）
1、http://jquery.com/官方网站
2、https://code.jquery.com/版本下载
jquery加载
将获取元素的语句写到页面头部，会因为元素还没有加载而出错
jquery提供了ready方法解决这个问题，它的速度比原生的 window.onload 更快
//JS写法
window.onload = function(){
var oDiv = document.getElementById('div');
alert(oDiv.innerHTML);//这是一个div元素
}
//jQuery的完整写法
//比上面JS写法先弹出，因为window.onload是把页面元素加载、渲染完才弹出，而ready()是把所有页面的节点加载完之后就弹出了，不用等渲染了
/*$(document).ready(function(){
var $div = $('#div');
alert('jQuery:' + $div.html());//jQuery:这是一个div元素
})*/
//简写方式
$(function(){
var $div = $('#div');//CSS样式怎么写，这里就怎么写
//html()方法相当于原生JS的innerHTML
alert($div.html() + 'jQuery');
})
jquery选择器
jquery用法思想一
选择某个网页元素，然后对它进行某种操作
jquery选择器
jquery选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功。
$(document) //选择整个文档对象
$('li') //选择所有的li元素
$('#myId') //选择id为myId的网页元素
$('.myClass') // 选择class为myClass的元素
$('input[name=first]') // 选择name属性等于first的input元素
$('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素
对选择集进行修饰过滤(类似CSS伪类)
$('#ul1 li:first') //选择id为ul1元素下的第一个li
$('#ul1 li:odd') //选择id为ul1元素下的li的奇数行
$('#ul1 li:eq(2)') //选择id为ul1元素下的第3个li
$('#ul1 li:gt(2)') // 选择id为ul1元素下的前三个之后的li
$('#myForm :input') // 选择表单中的input元素
$('div:visible') //选择可见的div元素
对选择集进行函数过滤
$('div').has('p'); // 选择包含p元素的div元素
$('div').not('.myClass'); //选择class不等于myClass的div元素
$('div').filter('.myClass'); //选择class等于myClass的div元素
$('div').first(); //选择第1个div元素
$('div').eq(5); //选择第6个div元素
选择集转移
$('div').prev('p'); //选择div元素前面的第一个p元素
$('div').prevAll('p'); //选择div元素前面所有的p元素
$('div').next('p'); //选择div元素后面的第一个p元素
$('div').nextAll('p'); //选择div元素后面所有的p元素
$('div').closest('form'); //选择离div最近的那个form父元素
$('div').parent(); //选择div的父元素
$('div').children(); //选择div的所有子元素
$('div').siblings(); //选择div的同级元素
$('div').find('.myClass'); //选择div内的class等于myClass的元素
jQuery选择集转移
页面上定义一个函数，引用一个外部js文件，外部js文件的地址可以是不同域的地址，外部js文件的内容如下：
aa({"name":"tom","age":18});
外部js文件调用页面上定义的函数，通过参数把数据传进去
正则表达式
1、什么是正则表达式：
能让计算机读懂的字符串匹配规则
2、正则表达式的写法：
var re=new RegExp('规则', '可选参数');
var re=/规则/参数;
3、规则中的字符
1）普通字符匹配：
如：/a/ 匹配字符 ‘a’，/a,b/ 匹配字符 ‘a,b’
2）转义字符匹配：
\d 匹配一个数字，即0-9
\D 匹配一个非数字，即除了0-9
\w 匹配一个单词字符（字母、数字、下划线）
\W 匹配任何非单词字符。等价于[^A-Za-z0-9_]
\s 匹配一个空白符
\S 匹配一个非空白符
\b 匹配单词边界
\B 匹配非单词边界
. 匹配一个任意字符，除了换行符‘\n’和回车符‘\r’
\1 重复子项
4、量词：对左边的匹配字符定义个数
? 出现零次或一次（最多出现一次），或指明一个非贪婪限定符
+ 出现一次或多次（至少出现一次）
* 出现零次或多次（任意次）
{n} 出现n次
{n,m} 出现n到m次
{n,} 至少出现n次
5、任意一个或者范围
[abc123] : 匹配‘abc123’中的任意一个字符
[a-z0-9] : 匹配a到z或者0到9中的任意一个字符
6、限制开头结尾
^ 以紧挨的元素开头
$ 以紧挨的元素结尾
7、修饰参数：
g： global，全文搜索，默认搜索到第一个结果接停止
i： ingore case，忽略大小写，默认大小写敏感
m： multiple lines，
多行搜索
(更改^ 和$的含义，使它们分别在任意一行对待行首和行尾匹配，而不仅仅在整个字符串的开头和结尾匹配）
8、常用函数
test
用法：正则.test(字符串) 匹配成功，就返回真，否则就返回假
search
用法：字符串.search(正则) 匹配成功，返回位置，否则返回-1
match
用法： 字符串.match(正则)；匹配成功，就返回匹配成功的数组，否则就返回null
replace
用法：字符串.replace(正则，新的字符串) 匹配成功的字符去替换新的字符
正则默认规则
匹配成功就结束，不会继续匹配，区分大小写
*、+限定符都是贪婪的，因为它们会尽可能多的匹配文字，只有在它们的后面加上一个?就可以实现非贪婪或最小匹配。
例如，您可能搜索 HTML 文档，以查找括在 H1 标记内的章节标题。该文本在您的文档中如下：
Chapter 1 - 介绍正则表达式
贪婪：下面的表达式匹配从开始小于号 (<) 到关闭 H1 标记的大于号 (>) 之间的所有内容
/<.*>/
非贪婪：如果您只需要匹配开始和结束 H1 标签，下面的非贪婪表达式只匹配
/<.*?>/
如果只想匹配开始的 H1 标签，表达式则是：
/<\w+?>/
通过在 *、+ 或 ? 限定符之后放置 ?，该表达式从"贪心"表达式转换为"非贪心"表达式或者最小匹配
本地存储
本地存储分为cookie，以及新增的localStorage和sessionStorage
cookie
存储在本地，容量最大4k，在同源的http请求时携带传递
损耗带宽，可设置访问路径
只有此路径及此路径的子路径才能访问此cookie
在设置的过期时间之前有效
jquery 设置cookie
$.cookie('mycookie','123',{expires:7,path:'/'});
jquery 获取cookie
$.cookie('mycookie');
localStorage
存储在本地，容量为5M或者更大，不会在请求时候携带传递
在所有同源窗口中共享
数据一直有效，除非人为删除，可作为长期数据
//设置：
localStorage.setItem("dat", "456");
localStorage.dat = '456';
//获取：
localStorage.getItem("dat");
localStorage.dat
//删除
localStorage.removeItem("dat");
sessionStorage
存储在本地，容量为5M或者更大
不会在请求时候携带传递，在同源的当前窗口关闭前有效
localStorage 和 sessionStorage
合称为Web Storage
Web Storage支持事件通知机制
可以将数据更新的通知监听者
Web Storage的api接口使用更方便
iPhone的无痕浏览不支持Web Storage，只能用cookie
jqueryUI
jQuery UI是以 jQuery 为基础的代码库
包含底层用户交互、动画、特效和可更换主题的可视控件
我们可以直接用它来构建具有很好交互性的web应用程序
jqueryUI 网址
http://jqueryui.com/
常用jqueryUI插件：
Draggable
1、设置数值的滑动条
2、自定义滚动条
移动端js事件
移动端的操作方式和PC端是不同的，移动端主要用手指操作
所以有特殊的touch事件，touch事件包括如下几个事件：
1、touchstart: //手指放到屏幕上时触发
2、touchmove: //手指在屏幕上滑动式触发
3、touchend: //手指离开屏幕时触发
4、touchcancel: //系统取消touch事件的时候触发，比较少用
移动端一般有三种操作，点击、滑动、拖动
这三种操作一般是组合使用上面的几个事件来完成的
所有上面的4个事件一般很少单独使用
一般是封装使用来实现这三种操作
可以使用封装成熟的js库
zeptojs
Zepto是一个轻量级的针对现代高级浏览器的JavaScript库， 它与jquery有着类似的api
如果你会用jquery，那么你也会用zepto
Zepto的一些可选功能是专门针对移动端浏览器的
它的最初目标是在移动端提供一个精简的类似jquery的js库
zepto官网：http://zeptojs.com/
zepto中文api：http://www.css88.com/doc/zeptojs_api/
zepto包含很多模块
默认下载版本包含的模块有Core, Ajax, Event, Form, IE模块
如果还需要其他的模块，可以自定义构建
zepto自定义构建地址：http://github.e-sites.nl/zeptobuilder/
touch模块封装了针对移动端常用的事件
可使用此模块进行移动端特定效果开发
这些事件有：
tap 元素tap的时候触发，此事件类似click，但是比click快
longTap 当一个元素被按住超过750ms触发
swipe, swipeLeft, swipeRight, swipeUp, swipeDown 当元素被划过时触发
(可选择给定的方向)
swiper
swiper.js是一款成熟稳定的应用于PC端和移动端的滑动效果插件
一般用来触屏焦点图、触屏整屏滚动等效果
swiper分为2.x版本和3.x版本，2.x版本支持低版本浏览器(IE7)
3.x放弃支持低版本浏览器，适合应用在移动端
2.x版本中文网址：http://2.swiper.com.cn/
3.x版本中文网地址：http://www.swiper.com.cn/
swiper使用方法：
......
......
swiper使用参数：
1、initialSlide：初始索引值，从0开始
2、direction：滑动方向 horizontal | vertical
3、speed：滑动速度，单位ms
4、autoplay：设置自动播放及播放时间
5、autoplayDisableOnInteraction：用户操作swipe后是否还自动播放，默认是true，不再自动播放
6、pagination：分页圆点
7、paginationClickable：分页圆点是否点击
8、prevButton：上一页箭头
9、nextButton：下一页箭头
10、loop：是否首尾衔接
11、onSlideChangeEnd：回调函数，滑动结束时执行
swiper制作实例：
1、swiper制作移动端焦点图实例
2、swiper制作整页滚动效果
bootstrap
简单、直观、强悍的前端开发框架，让web开发更迅速、简单
来自Twitter，是目前很受欢迎的前端框架之一
Bootrstrap是基于HTML、CSS、JavaScript的，让书写代码更容易
移动优先，响应式布局开发
bootstrap中文网址：http://www.bootcss.com/
bootstrap 容器
container-fluid 流体
container
1170
970
750
100%
bootstrap 栅格系统
bootstrap将页面横向分为12等分
按照12等分定义了适应不同宽度等分的样式类
这些样式类组成了一套响应式、移动设备优先的流式栅格系统：
1、col-lg-
2、col-md-
3、col-sm-
4、col-xs-
bootstrap响应式查询区间：
1、大于等于768
2、大于等于992
3、大于等于1200
bootstrap 表单
1、form 声明一个表单域
2、form-inline 内联表单域
3、form-horizontal 水平排列表单域
4、form-group 表单组、包括表单文字和表单控件
5、form-control 文本输入框、下拉列表控件样式
6、checkbox checkbox-inline 多选框样式
7、radio radio-inline 单选框样式
8、input-group 表单控件组
9、input-group-addon 表单控件组物件样式10、input-group-btn 表单控件组物件为按钮的样式
10、form-group-lg 大尺寸表单
11、form-group-sm 小尺寸表单
bootstrap 按钮
1、btn 声明按钮
2、btn-default 默认按钮样式
3、btn-primay
4、btn-success
5、btn-info
6、btn-warning
7、btn-danger
8、btn-link
9、btn-lg
10、btn-md
11、btn-xs
12、btn-block 宽度是父级宽100%的按钮
13、active
14、disabled
15、btn-group 定义按钮组
bootstrap 图片
img-responsive 声明响应式图片
bootstrap 隐藏类
1、hidden-xs
2、hidden-sm
3、hidden-md
4、hidden-lg
bootstrap 字体图标
通过字体代替图标，font文件夹需要和css文件夹在同一目录
bootstrap 下拉菜单
1、dropdown-toggle
2、dropdown-menu
bootstrap 选项卡
1、nav
2、nav-tabs
3、nav-pills
4、tab-content
bootstrap 导航条
1、navbar 声明导航条
2、navbar-default 声明默认的导航条样式
3、navbar-inverse 声明反白的导航条样式
4、navbar-static-top 去掉导航条的圆角
5、navbar-fixed-top 固定到顶部的导航条
6、navbar-fixed-bottom 固定到底部的导航条
7、navbar-header 申明logo的容器
8、navbar-brand 针对logo等固定内容的样式
11、nav navbar-nav 定义导航条中的菜单
12、navbar-form 定义导航条中的表单
13、navbar-btn 定义导航条中的按钮
14、navbar-text 定义导航条中的文本
9、navbar-left 菜单靠左
10、navbar-right 菜单靠右
bootstrap 模态框
1、modal 声明一个模态框
2、modal-dialog 定义模态框尺寸
3、modal-lg 定义大尺寸模态框
4、modal-sm 定义小尺寸模态框
5、modal-header
6、modal-body
7、modal-footer
less、sass、stylus
它们是三种类似的样式动态语言，属于css预处理语言
它们有类似css的语法
为css赋予了动态语言的特性、如变量、继承、运算、函数等
这么做是为了css的编写和维护
它们使用的文件分别是：.less、.scss、*.styl
这些文件是不能再网页上直接使用的
最终要编译成css文件来使用
编译的方法有软件编译，或者用nodejs程序
less、sass编译软件：
http://koala-app.com/index-zh.html
less中文网址：http://lesscss.cn/
less语法：
1、注释
// 不会被编译的注释
/* 会被编译的注释 */
2、变量
@w:200px;
.box{
width:@w;
height:@w;
background-color:red;
}
3、混合
.border{
border:1px solid #ddd;
}
.box(@w:100px,@h:50px,@bw:1px){
width:@w;
height:@h;
border:@bw solid #ddd;
}
.box{
.border;
background-color:red;
}
4、匹配模式
.p(r){
postion:relative;
}
.p(a){
postion:absolute;
}
.p(f){
postion:fixed;
}
.box{
.p(f);
}
5、运算
@w:300px;
.box{
width:@w+20;
}
4、嵌套
.list{
li{
...
}
a{
...
&:hover{
...
}
}
span{
...
}
}
5、导入
// 导入common.less,导入a.css文件
@import "common";
@import (less) "a.css";
前端自动化
Node.js
Node.js可以理解为是一门后端脚本语言
使用了和JavaScript相同的语法
会使用JavaScript的程序员能很快上手node.js、nodjs在处理高并发方面性能卓越
目前许多公司都在使用nodejs作为后端数据服务和前端开发的中间层
node.js的中文网站：https://nodejs.org/zh-cn/
前端自动化
前端开发的流程越来越复杂，其中有代码的合并和压缩、图片的压缩
对less、sass的预处理；文件操作等
这些工作是重复乏味的，为了优化开发流程，提高工作效率，前端自动化工具就出现了
自动化工具可以通过配置，自动完成这些工作
grunt、gulp
grunt和gulp是使用node.js编写的
前端首选的自动化工具
gulp在书写配置上比grunt更简洁
运行的性能更高，gulp逐渐成为主流
gulp的使用
gulp使用步骤：
安装nodejs ->全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务gulp网站：
http://gulpjs.com/
常用gulp插件：
压缩js代码（gulp-uglify）
less的编译（gulp-less）
css的压缩 （gulp-minify-css）
自动添加css3前缀（gulp-autoprefixer）
文件改名字 (gulp-rename)
前端性能优化
从用户访问资源到资源完整的展现在用户面前的过程中
通过技术手段和优化策略，缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度
网站的性能直接会影响到用户的数量，所有前端性能优化很重要
前端性能优化分为如下几个方面：
一、代码部署：
1、代码的压缩与合并
2、图片、js、css等静态资源使用和主站不同域名地址存储
从而使得在传输资源时不会带上不必要的cookie信息
3、使用内容分发网络 CDN
4、为文件设置Last-Modified、Expires和Etag
5、使用GZIP压缩传送
6、权衡DNS查找次数(使用不同域名会增加DNS查找)
7、避免不必要的重定向(加"/")
二、编码
html：
1、使用结构清晰，简单，语义化标签
2、避免空的src和href
3、不要在HTML中缩放图片
css：
1、精简css选择器2、把CSS放到顶部
3、避免@import方式引入样式
4、css中使用base64图片数据取代图片文件，减少请求数
在线转base64网站：http://tool.css-js.com/base64.html
5、使用css动画来取代javascript动画
6、使用字体图标,图标库网站：http://fontawesome.io/icons/，在线制作网站：www.iconfont.cn
7、使用css sprite
8、使用svg图形
9、避免使用CSS表达式
a {star : expression(onfocus=this.blur)}
10、避免使用滤镜
javascript：
1、减少引用库的个数
2、使用requirejs或seajs异步加载js
3、JS放到页面底部引入
4、避免全局查找
5、减少属性查找
6、使用原生方法
7、用switch语句代替复杂的if else语句
8、减少语句数，比如说多个变量声明可以写成一句
9、使用字面量表达式来初始化数组或者对象
10、使用DocumentFragments或innerHTML取代复杂的元素注入
11、使用事件代理(事件委托)
12、避免多次访问dom选择集
13、高频触发事件设置使用函数节流，如：onmousemove、onmouseover
14、使用Web Storage缓存数据
15、使用Array的join方法来代替字符串的“+”连接(先将要连接的字符串放进数组)
课程介绍
ECMAScript理解
1. 它是一种由ECMA组织（前身为欧洲计算机制造商协会）制定和发布的脚本语言规范
2. 而我们学的 JavaScript 是ECMA的实现,但术语ECMAScript和JavaScript平时表达同一个意思
3. JS包含三个部分：
1). ECMAScript（核心）
2). 扩展==>浏览器端
* BOM（浏览器对象模型）
* DOM（文档对象模型）
3). 扩展==>服务器端
* Node
4. ES的几个重要版本
* ES5 : 09年发布
* ES6(ES2015) : 15年发布, 也称为ECMA2015
* ES7(ES2016) : 16年发布, 也称为ECMA2016 (变化不大)
ES5
严格模式
1. 理解:
* 除了正常运行模式(混杂模式)，ES5添加了第二种运行模式："严格模式"（strict mode）
* 顾名思义，这种模式使得Javascript在更严格的语法条件下运行
2. 目的/作用
* 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为
* 消除代码运行的一些不安全之处，为代码的安全运行保驾护航
* 为未来新版本的Javascript做好铺垫
3. 使用
* 在全局或函数的第一条语句定义为: 'use strict';
* 如果浏览器不支持, 只解析为一条简单的语句, 没有任何副作用
4. 语法和行为改变
* 必须用var声明变量
* 禁止自定义的函数中的this指向window
* 创建eval作用域
* 对象不能有重名的属性
JSON对象
1. JSON.stringify(obj/arr)
* js对象(数组)转换为json对象(数组)
2. JSON.parse(json)
* json对象(数组)转换为js对象(数组)
Object扩展
ES5给Object扩展了一些静态方法, 常用的2个:
1. Object.create(prototype, [descriptors])
* 作用: 以指定对象为原型创建新的对象
* 为新的对象指定新的属性, 并对属性进行描述
- value : 指定值
- writable : 标识当前属性值是否是可修改的, 默认为false
- configurable: 标识当前属性是否可以被删除 默认为false
- enumerable： 标识当前属性是否能用for in 枚举 默认为false
2. Object.defineProperties(object, descriptors)
* 作用: 为指定对象定义扩展多个属性
- get ：用来获取当前属性值得回调函数
- set ：修改当前属性值得触发的回调函数，并且实参即为修改后的值
* 存取器属性：setter,getter一个用来存值，一个用来取值
Array扩展
1. Array.prototype.indexOf(value) : 得到值在数组中的第一个下标
2. Array.prototype.lastIndexOf(value) : 得到值在数组中的最后一个下标
3. Array.prototype.forEach(function(item, index){}) : 遍历数组
4. Array.prototype.map(function(item, index){}) : 遍历数组返回一个新的数组，返回加工之后的值
5. Array.prototype.filter(function(item, index){}) : 遍历过滤出一个新的子数组， 返回条件为true的值
Function扩展
1. Function.prototype.bind(obj) :
* 作用: 将函数内的this绑定为obj, 并将函数返回
2. 面试题: 区别bind()与call()和apply()?
* 都能指定函数中的this
* call()/apply()是立即调用函数
* bind()是将函数返回
ES6
let关键字
1. 作用:
* 与var类似, 用于声明一个变量
2. 特点
* 在块作用域内有效
* 不能重复声明
* 不会预处理, 不存在变量提升
3. 应用
* 循环遍历加监听
* 使用let取代var是趋势
const关键字
1. 作用:
* 定义一个常量
2. 特点:
* 不能修改
* 其它特点同let
3. 应用
* 保存不用改变的数据
变量的解构赋值
1. 理解:
* 从对象或数组中提取数据, 并赋值给变量(多个)
2. 对象的解构赋值
let {n, a} = {n:'tom', a:12}
3. 数组的解构赋值
let [a,b] = [1, 'hello'];
4. 用途
* 给多个形参赋值
模板字符串
1. 模板字符串 : 简化字符串的拼接
* 模板字符串必须用 `` 包含
* 变化的部分使用${xxx}定义
简化的对象写法
1. 省略同名的属性值
2. 省略方法的function
3. 例如:
let x = 1;
let y = 2;
let point = {
x,
y,
setX (x) {this.x = x}
};
箭头函数
1. 作用: 定义匿名函数
2. 基本语法:
* 没有参数: () => console.log('xxxx')
* 一个参数: i => i+2
* 大于一个参数: (i,j) => i+j
* 函数体不用大括号: 默认返回结果
* 函数体如果有多个语句, 需要用{}包围，若有需要返回的内容，需要手动返回
3. 使用场景: 多用来定义回调函数
4. 箭头函数的特点：
1、简洁
2、箭头函数没有自己的this，箭头函数的this不是调用的时候决定的，而是在定义的时候所处的对象就是它的this
3、扩展理解： 箭头函数的this看外层的是否有函数，如果有，外层函数的this就是内部箭头函数的this，如果没有，则this是window。
扩展运算符
1. rest(可变)参数
* 用来取代arguments 但比 arguments 灵活,只能是最后部分形参参数
function fun(...values) {
console.log(arguments);
arguments.forEach(function (item, index) {
console.log(item, index);
});
console.log(values);
values.forEach(function (item, index) {
console.log(item, index);
})
}
fun(1,2,3);
2. 扩展运算符
let arr1 = [1,3,5];
let arr2 = [2,...arr1,6];
arr2.push(...arr1);
形参默认值
当不传入参数的时候默认使用形参里的默认值
function Point(x = 1,y = 2) {
this.x = x;
this.y = y;
}
Promise对象
1. 理解:
* Promise对象: 代表了未来某个将要发生的事件(通常是一个异步操作)
* 有了promise对象, 可以将异步操作以同步的流程表达出来, 避免了层层嵌套的回调函数(俗称'回调地狱')
* ES6的Promise是一个构造函数, 用来生成promise对象的实例
2. 使用promise基本步骤(2步):
* 创建promise对象
let promise = new Promise((resolve, reject) => {
//初始化promise状态为 pending
//执行异步操作
if(异步操作成功) {
resolve(value);//修改promise的状态为fullfilled
} else {
reject(errMsg);//修改promise的状态为rejected
}
})
* 调用promise的then()
promise.then(function(
result => console.log(result),
errorMsg => alert(errorMsg)
))
3. promise对象的3个状态
* pending: 初始化状态
* fullfilled: 成功状态
* rejected: 失败状态
4. 应用:
* 使用promise实现超时处理
* 使用promise封装处理ajax请求
let request = new XMLHttpRequest();
request.onreadystatechange = function () {
}
request.responseType = 'json';
request.open("GET", url);
request.send();
5. promise过程分析:
Symbol
1. 前言：ES5中对象的属性名都是字符串，容易造成重名，污染环境
2. 概念：ES6中的添加了一种原始数据类型symbol(已有的原始数据类型：String, Number, boolean, null, undefined, 对象)
3. 特点：
1、Symbol属性对应的值是唯一的，解决命名冲突问题
2、Symbol值不能与其他数据进行计算，包括同字符串拼串
3、for in, for of遍历时不会遍历symbol属性
4. 使用：
1、调用Symbol函数得到symbol值
let symbol = Symbol();
let obj = {};
obj[symbol] = 'hello';
2、传参标识
let symbol = Symbol('one');
let symbol2 = Symbol('two');
console.log(symbol);// Symbol('one')
console.log(symbol2);// Symbol('two')
3、内置Symbol值
* 除了定义自己使用的Symbol值以外，ES6还提供了11个内置的Symbol值，指向语言内部使用的方法
- Symbol.iterator
* 对象的Symbol.iterator属性，指向该对象的默认遍历器方法
Iterator遍历器
概念： iterator是一种接口机制，为各种不同的数据结构提供统一的访问机制
作用：
1、为各种数据结构，提供一个统一的、简便的访问接口；
2、使得数据结构的成员能够按某种次序排列
3、ES6创造了一种新的遍历命令for...of循环，Iterator接口主要供for...of消费
工作原理：
- 创建一个指针对象(遍历器对象)，指向数据结构的起始位置
- 第一次调用next方法，指针自动指向数据结构的第一个成员
- 接下来不断调用next方法，指针会一直往后移动，直到指向最后一个成员
- 每调用next方法返回的是一个包含value和done的对象，{value: 当前成员的值,done: 布尔值}
* value表示当前成员的值，done对应的布尔值表示当前的数据的结构是否遍历结束
* 当遍历结束的时候返回的value值是undefined，done值为false
原生具备iterator接口的数据(可用for of遍历)
1、Array
2、arguments
3、set容器
4、map容器
5、String
……
Generator函数
概念：
1、ES6提供的解决异步编程的方案之一
2、Generator函数是一个状态机，内部封装了不同状态的数据
3、用来生成遍历器对象
4、可暂停函数(惰性求值), yield可暂停，next方法可启动。每次返回的是yield后的表达式结果
特点：
1、function 与函数名之间有一个星号
2、内部用yield表达式来定义不同的状态
例如：
function* generatorExample(){
let result = yield 'hello'; // 状态值为hello
yield 'generator'; // 状态值为generator
}
3、generator函数返回的是指针对象(即iterator)，而不会执行函数内部逻辑
4、调用next方法函数内部逻辑开始执行，遇到yield表达式停止，返回{value: yield后的表达式结果/undefined, done: false/true}
5、再次调用next方法会从上一次停止时的yield处开始，直到最后
6、yield语句返回结果通常为undefined，当调用next方法时传参内容会作为启动时yield语句的返回值
async函数
async函数(源自ES2017)
概念： 真正意义上去解决异步回调的问题，同步流程表达异步操作
本质： Generator的语法糖
语法：
async function foo(){
await 异步操作;
await 异步操作；
}
特点：
1、不需要像Generator去调用next方法，遇到await等待，当前的异步操作完成就往下执行
2、返回的总是Promise对象，可以用then方法进行下一步操作
3、async取代Generator函数的星号*，await取代Generator的yield
4、语意上更为明确，使用简单，经临床验证，暂时没有任何副作用
class
1. 通过class定义类/实现类的继承
2. 在类中通过constructor定义构造方法
3. 通过new来创建类的实例
4. 通过extends来实现类的继承
5. 通过super调用父类的构造方法
6. 重写从父类中继承的一般方法
字符串扩展
1. includes(str) : 判断是否包含指定的字符串
2. startsWith(str) : 判断是否以指定字符串开头
3. endsWith(str) : 判断是否以指定字符串结尾
4. repeat(count) : 重复指定次数
数值扩展
1. 二进制与八进制数值表示法: 二进制用0b, 八进制用0o
2. Number.isFinite(i) : 判断是否是有限大的数
3. Number.isNaN(i) : 判断是否是NaN
4. Number.isInteger(i) : 判断是否是整数
5. Number.parseInt(str) : 将字符串转换为对应的数值
6. Math.trunc(i) : 直接去除小数部分
数组扩展
1. Array.from(v) : 将伪数组对象或可遍历对象转换为真数组
2. Array.of(v1, v2, v3) : 将一系列值转换成数组
3. find(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素
4. findIndex(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素下标
对象扩展
1. Object.is(v1, v2)
* 判断2个数据是否完全相等
2. Object.assign(target, source1, source2..)
* 将源对象的属性复制到目标对象上
3. 直接操作 __proto__ 属性
let obj2 = {};
obj2.__proto__ = obj1;
深度克隆
1、数据类型：
* 数据分为基本的数据类型(String, Number, boolean, Null, Undefined)和对象数据类型
- 基本数据类型特点： 存储的是该对象的实际数据
- 对象数据类型特点： 存储的是该对象在栈中引用，真实的数据存放在堆内存里
2、复制数据
- 基本数据类型存放的就是实际的数据，可直接复制
let number2 = 2;
let number1 = number2;
- 克隆数据：对象/数组
1、区别： 浅拷贝/深度拷贝
判断： 拷贝是否产生了新的数据还是拷贝的是数据的引用
知识点：对象数据存放的是对象在栈内存的引用，直接复制的是对象的引用
let obj = {username: 'kobe'}
let obj1 = obj; // obj1 复制了obj在栈内存的引用
2、常用的拷贝技术
1). arr.concat(): 数组浅拷贝
2). arr.slice(): 数组浅拷贝
3). JSON.parse(JSON.stringify(arr/obj)): 数组或对象深拷贝, 但不能处理函数数据
4). 浅拷贝包含函数数据的对象/数组
5). 深拷贝包含函数数据的对象/数组
Set和Map数据结构
1. Set容器 : 无序不可重复的多个value的集合体
* Set()
* Set(array)
* add(value)
* delete(value)
* has(value)
* clear()
* size
2. Map容器 : 无序的 key不重复的多个key-value的集合体
* Map()
* Map(array)
* set(key, value)//添加
* get(key)
* delete(key)
* has(key)
* clear()
* size
for_of循环
for(let value of target){}循环遍历
1. 遍历数组
2. 遍历Set
3. 遍历Map
4. 遍历字符串
5. 遍历伪数组
ES7
1. 指数运算符(幂): **
2. Array.prototype.includes(value) : 判断数组中是否包含指定value
Vue 的基本认识
官网
1）英文官网:https://vuejs.org/
2）中文官网:https://cn.vuejs.org/
介绍描述
1）渐进式 JavaScript 框架
2）作者: 尤雨溪(一位华裔前 Google 工程师)
3）作用: 动态构建用户界面
Vue 的特点
1）遵循 MVVM 模式
2）编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
3）它本身只关注 UI, 可以轻松引入 vue 插件或其它第三方库开发项目
与其它前端 JS 框架的关联
1）借鉴 angular 的模板和数据绑定技术
2）借鉴 react 的组件化和虚拟 DOM 技术
Vue 扩展插件
1）vue-cli: vue 脚手架
2）vue-resource(axios): ajax 请求
3）vue-router: 路由
4）vuex: 状态管理
5）vue-lazyload: 图片懒加载
6）vue-scroller: 页面滑动相关
7）mint-ui: 基于 vue 的 UI 组件库(移动端)
8）element-ui: 基于 vue 的 UI 组件库(PC 端)
9）它本身只关注 UI, 可以轻松引入 vue 插件或其它第三方库开发项目
Vue 的基本使用
编码
Hello, {{username}}