| javascript学习知识点 |
javascript
背景介绍
了解js发展史
什么是js?
JavaScript 运⾏在客户端(浏览器)的编程语⾔,同时也可以运行在服务端（node.js），弱类型脚本语言
js语法
js能干什么？
js无所不能
js的组成部分
ECMAScript标准
变量/标识符
概念
变量(variable)是一个用于保存值的占位符，可以通过变量名称来获得对值的引用
标识符(Identifier)就是一个名字，用来对变量、函数、属性、参数进行命名，或者用做某些循环语句中的跳转位置的标记
命名规则
可以是：字母、数字、下划线、$且不能以数字开头
如何同时定义多个变量
定义多个变量时中间用空格隔开
要点：
定义未赋值，去调用 ==》 undefined
未定义直接赋值，该变量会变成全局变量
未定义未赋值，去调用，会报错
es5的数据类型，知道他们之间的区别？
基本数据类型（值引用）
String
怎么定义
字面量
String()
注意事项
1、引号不能交叉
2、字符串插入变量
3、转义字符
字符串插入变量的方法
"+变量+"
如果外面有引号，则如下：‘”+变量+“’或\”“+变量+”\”
Number
怎么定义
字面量
Number()
一些特殊的数值
NaN
isNaN()
判断一个数字是不是不是一个数字
NaN 与任何值都不相等，包括 NaN 本身。
NaN和其他数值进行计算，表达式的结果都是NaN
Infinity
值的范围
浮点数的精度问题
控制一下精度
利用toFixed(位数) 位数默认是0
Boolean
true / false
怎么定义
字面量
Boolean()
null
typeof null ===> object
undefined
未赋值
null 和 undefined 的 异同
不同点
1，typeof结果不一样2，null ==> object undefined ==> undefined
相同
1，能否转换成假 如 : console.log（Boolean（a））;
引用数据类型（地址引用），JavaScript 对象是拥有属性和方法的数据。
宿主对象
window
document
内置对象
包装类
String
定义方法？
字面量
new String()
基本数据类型 string 无法绑定属性和方法,即使绑定也会返回underfiend
引用数据类型 String 可以绑定属性和方法
常用方法
slice（）
从字符串中截取指定的内容。不会修改原字符串，而是将及截取到的内容返回
字符串 = str.slice(开始索引, 结束索引)提取字符串的片断，并在新的字符串中返回被提取的部分
(2, 5) 截取时，包左不包右。 (2) 表示从指定的索引位置开始，截取到最后。 (-3) 表示从倒数第几个开始，截取到后。 (1, -1) 表示从第一个截取到倒数第一个。 (5, 2) 表示前面的大，后面的小，返回值为空
concat() 字符串的连接
语法：新字符串 = str1.concat(str2) 推荐使用str = ("str1" + "str2")
字符串分割 split()
将一个字符串拆分成一个数组
语法：数组 = str.split();
replace()
将字符串中的指定内容，替换为新的内容并返回。不会修改原字符串
新的字符串 = str.replace(被替换的内容，新的内容)
indexof()
返回字符串中检索指定字符第一次出现的位置
var ind = str.indexof("a");
substr(start, length) / substring(start,end) 不包含end
substr(start, length) 从起始索引号提取字符串中指定数目的字符
substring(start, end) 提取字符串中两个指定的索引号之间的字符
trim()
去除字符串前后的空白
var str1 = " a b c ";
var str2 = str1.trim()；---> "abc"
toString() 返回字符串对象值
valueOf() 返回某个字符串对象的原始值
charAt() 返回指定索引位置的字符
语法：字符 = str.charAt(index);
charCodeAt：返回字符串指定位置的字符的 Unicode 编码。不会修改原字符串
String.fromCharCode()：根据字符的 Unicode 编码获取字符。
indexOf()/lastIndexOf() ：获取指定字符的索引。
语法：索引值 = str.indexOf(想要查询的字符);
indexOf() 是从前向后索引字符串的位置。同理， lastIndexOf() 是从后向前寻找。用于查找字符串中出现的字符，如果没有找到指定的内容，则返回 -1
注意事项
在底层，字符串以字符数组的形式保存
例如：str = "myname" 打印结果为["m","y","n","a","m","e"]
练习题
判断string是否是回文字符串
在字符串中查找出现次数最多的字符以及次数
字符串去重
Number
方法
parseInt(string, radix)
将一个字符串 string 转换为 radix 进制的整数， radix 为介于2-36之间的数。
parseFloat()
解析一个参数（必要时先转换为字符串）并返回一个浮点数。
Number.isNaN()
确定传递的值是否是 NaN。
toFixed() 返回指定小数位数 toPrecision() 返回指定精度的数字 toExponential() 返回一个数字的指数形式的字符串
定义方法
精度问题==》 0.1+0.2不等于0.3
练习题
获取小数点后指定位数
获取1-100之间的所有质数
Boolean
定义方法
哪些数据可以转换成false
Date
获取指定的时间/ 设置指定时间 new Date ()
修改时间的格式
时间戳 （1970年）
date.getTime() // 精确到毫秒
date.valueOf() // 精确到毫秒
Date.parse(date); // 精确到秒，毫秒为 000
练习：
时间的判断
方法
get** 获取时间
getDate（）：获取日 1-31
getDay（）：获取星期 0-6
getMenth（）：获取月 0-11
注意：在获取月份的时候要加1
getHours() ：获取小时 0-23
getMinutes() ：获取分钟 0-59
getSeconds() ：获取秒 0-59
getYear（）：获取年
getMilliseconds() ：获取毫秒 （1s = 1000ms）
set** 设置时间
setFullYear() 设置年月日
setFullYear(2019,11,6)；
setHours() 设置小时
setHours(16);
setMinutes() 设置分钟
setMinutes(45);
setSeconds() 设置秒
setSeconds(50) ;
以上也可以合写：var date = ("2019/11/6 16:45:50") console.log(date);
Math
方法
Math.floor() 向下取整（向小取）
Math.ceil() 向上取整（向大取）
Math.round() 四舍五入取整（正数四舍五入，负数五舍六入）
Math.random() 生成0-1之间的随机数 （m-n）+ m 生成m-n之间的任意随机数
应用
生成随机颜色,透明度（rgba）
随机字体大小/角度
随机生成下标+ 数组
注意
生成任意指定范围的随机数var a = math.random()*(m-n)+m;
conaole.log(a);
Array
定义方法
字面量
new Array(参数) 参数不同效果不同
伪数组
定义：拥有length属性和数值下标属性。 不具有数组所具有的方法。 伪数组是一个Object，而真实的数组是一个Array
常见的伪数组：参数数组：arguments DOM 元 素节点集合 HTMLCollection , NodeList 节点列表 jquery对象：比如$("div")
HTMLCollection 和 NodeList 区别：HTMLCollection 元素节点的集合,包含length属性和item ,namedItem 方法。老DOM的产物 。 nodeList 所有类型节点的集合,除了length属性外还有其他5个方法（method），分别是entries, forEach, item, keys, values HTMLCollection 和 nodeList 都是类数组对象，都有length属性； 不要使用for... in 对他们进行遍历；
方法
4个基本方法
push（）
向数组的最后面插入一个或多个元素，返回结果为该数组新的长度
pop()
删除数组中的最后一个元素，返回结果为被删除的元素
unshift()
在数组最前面插入一个或多个元素，返回结果为该数组新的长度
shift()
删除数组中的第一个元素，返回结果为被删除的元素
在原数组上修改，知道返回值都是新的数组
检索
lastIndexOf(value) 从后往前索引，获取 value 在数组中的最后一个下标
indexOf(value)从前往后索引，获取 value 在数组中的第一个下标
两者不会改变原数组
slice() ：从数组中提取指定的一个或者多个元素，返回结果为新的数组
新数组 = 原数组.slice(开始位置的索引, 结束位置的索引);
补充： slice()key将伪数组转化为真数组。
array = Array.from(arrayLike)
增删改查
splice() ：从数组中删除指定的一个或多个元素，返回结果为新的数组
新数组 = 原数组.splice(起始索引index, 需要删除的个数, 第三个参数, 第四个参数...);第三个及之后的参数，表示：向原数组中添加新的元素，这些元素将会自动插入到开始 位置索引的前面
数组==>字符串
join(参数)
排序
sort(fn)
对数组的元素,默认按照Unicode编码， 从小到大进行排序
reverse() 反转
join()
将数组转换为字符串，返回结果为转换后的字符串
遍历
for循环
arry.forEach(function(value,index,data){ }) value: 数组 中的每一项， index:下标 data: 数组本身
forEach() 遍历：arr.forEach(function(item, index, obj)
第一个参数，就是当前正在遍历的元素 第二个参数，就是当前正在遍历的元素的索引 第三个参数，就是正在遍历的数组
valueOf()：返回数组本身
数组本身 = 数组.valueOf();
Array.isArray(被检测的值)
布尔值 = Array.isArray(被检测的值) ;
toString()：转换数组
字符串 = 数组.toString();
练习
数组排序
数组去重 （splice()）
Object
对属性的增删改查
获取属性的两种方式之间的区别
遍历对象的属性
for...in
使用 instanceof 可以检查一个对象是否为一个类的实例。
对象 instanceof 构造函数
使用 in 检查对象中是否含有某个属性时，如果对象中没有但是原型中有，也会返回true。
“test” in obj
Function
定义的方法
函数表达式
var sum = function（形参1 ， 形参2 ，形参N）{ 语句：}
函数声明
function (函数名)fun（形参1(aa) , 形参2(ss) ... 形参N(dd) ）{ 语句：}
new Function()
函数的调用
函数名() 如：xx（）
形参和实参问题
尽量保持顺序和数量上的一致
实参可以是任何数据类型
实参列表 arguments 类数组
注意事项：1、函数表达式和函数声明的区别
2、fn和fn()的问题
fn() ：调用函数。相当于获取了函数的返回值
fn ：函数对象。相当于直接获取了函数对象
函数的属性
函数名.length ===> 形参的个数
return 函数返回值
作用域
两个作用域问题
全局作用域
window
函数/局部作用域
变量提升， （提升的只是声明）
函数声明的提升
函数表达式的提升
作用域嵌套/作用域链
内层可以使用外层的数据，反之则不能；同一个变量，局部优先生效
如何获取一个变量的值的流程
this
什么是this ==> 函数执行的上下文
this的指向问题？
以函数的形式调用时，this永远都是window。比如 fun(); 相当于 window.fun();
以方法的形式调用时，this是调用方法的那个对象
以构造函数的形式调用时，this是新创建的那个对象或构造函数返回的那个对象
使用call和apply调用时，this是指定的那个对象
一些特殊的函数
立即执行函数
（function(){语句体}（）
匿名函数
var f = function (){}
回调函数
函数做参数 ==>
var callback = function (){}
function f2 (callback){
callback()
}
function.length 返回形参的个数
闭包函数
函数中定义一个函数
递归函数
函数内部调用自己
构造函数
怎么定义？有什么用？
定义的方式：字面量
通过new的形式，如：var per = new Person("孙悟空", 18, "男");
和普通函数的区别？
new Fun()
使用 instanceof 可以检查一个对象是否为一个类的实例
语法：对象 instanceof 构造函数
如果是，则返回true；否则返回false。
如何准确判断一个变量是数组类型：最准确的方法是利用 instanceof 如：var arr = []; console.log( arr instanceof array); ===> true
描述 new 一个对象的过程
（1）创建一个新对象(实例对象)
（2）将构造函数中的this 指向这个新对象
（3）执行构造函数中的代码（对this 赋值）
（4）返回这个对象(返回this)
原型 prototype
原型的值是一个对象===> 原型对象
作用：将对象中共有的内容，统一设置到原型对象中。所有同一个类的实例都可以访问到这个原型对象，
通过构造函数创建的实例对象，都会有一个隐含的属性__proto__，他指向该构造函数的原型，实例.__proto__ 和 构造函数.prototype都指的是原型对象。
this指向新创建的那个对象
原型链
它会先在对象自身中寻找，如果有则直接使用；
如果没有则会去原型对象中寻找，如果找到则直接使用；
如果没有则去原型对象的原型中寻找，直到找到Object对象的原型。
Object对象的原型为null，如果在Object原型中依然没有找到，则返回 undefined
查找同名的属性，先找到的为准
原型链继承
结合 原型链+借用构造函数方式，实现组合继承。
借用构造函数使每个实例拥有自己的属性；原型链使每个实例可以共用方法，实现方法的复用。
原型继承：借助原型，基于已有的对象创建新对象。
object.Create(参数1，参数2); 参数1用作新对象的原型对象，参数2为新对象定义额外属性的对象。
寄生继承：创建一个用于封装继承过程的函数，在函数内部增强对象。并返回对象。
自定义对象
如何判断数据的类型
typeof运算符 ==> typeof "asd"
typeof null ==> object
数据类型转换
强制转换
其他类型==》string
toString()
String()
Object 和 Array，可以使用String() 进行转换；
其他类型===》number
Number()
1.如果字符串中是纯数字，则直接将其转换为数字。
2.如果字符串中有非数字的内容，则转换为NaN。（此处可以看到Number()函数的局限性）
3.如果字符串是一个空串或者是一个全是空格的字符串，则转换为0。
parseInt()
将字符串中的有效的整数内容转为数字 ; parseInt("a123") ===> NaN
parseFloat()
将字符串中的有效的数字内容转为数值 ; parseFloat("a123.123") ===> NaN
valueOf()
其他类型-==》 boolean
false / 0 -0 / "" / null / undefined / NaN === > false
Boolean()
隐式转换
1+"asd" = "1asd"
-、*、/、% 这几个符号可以方便的实现字符串 ===> 数值的转换；
+ 可以方便的实现 其他类型 ===> 字符串的转化；
== 可以进行类型转换，强调值相等 和 === 不能转换，类型和值都相等， 推荐使用 ===
运算符
单目运算符
！/ . / ()
自增运算符 ++ / 自减运算符 --
a++ ==> 表达式的值等于a , a的值等于新值 ； ++a ===> 表达式的值等于新值 , a的值等于新值 ；
算术运算符
+
加法和连字符的功能；当 + 的两侧出现字符串的时候，+变成了字符串连接
期望操作数是Number类型， 当对非Number类型的值进行运算（包括+、-、*、/）时，会将这些值转换为Number然后再运算。比如： "1" - "2" = -1；
任何值和NaN做运算的结果都是NaN。
关系运算符
操作数期望是数值类型，对于非数值进行比较时，会将其转换为数字然后再比较。
任何值和NaN做任何比较都是false。
逻辑运算符 && 与 || 或 !非
逻辑运算符前后的值期望是布尔类型的，如果不是需要先转换再计算，逻辑表达式最终返回结果是原值。
三元（条件）运算符 表达式?语句一:语句二
var a = 3 >2 ? 1: 2 ; 判断3是否大于2，如果大于2则将1赋值给a，否则将2赋值给a
赋值运算符 = += -= *= /=
a *=1 ===> a = a*1;
运算符的优先级 == 》 一元运算符 > 算数运算符 > 关系运算符 > 逻辑运算符 > 三目运算符 > 赋值运算负 >逗号运算符 !1+2 > 3 && (2>3)
流程控制语句
顺序结构
开始--->语句1--->语句2---> ......---->结束
分支结构(选择语句)
if语句 / else
switch /case / default
使用场景
穿透问题
switch 语句的结束与 default 的顺序无关,而与break有关
执行流程:，计算出表达式的值，和case依次比较，一旦有对应的值，就会执行相应的语句，在执行的 过程中，遇到break就会结束,然后，如果所有的case都和表达式的值不匹配，就会执行default语句体部分
switch(表达式) { case 值1： 语句体1; break； ......default： 语句体 n+1; break;}
循环
for语句
for(i = 0(初始表达式) ；i <str.length(条件表达式) ；i++（更新表达式）){ 众多语句 }
while / do...while 区别
while语句
while（条件表达式）{ 语句 ...... }
do......while语句
do { 语句 ...... } while (条件表达式)
区别：
while语句在执行时，先对条件表达式进行求值判断：循环体执行完毕以后，继续对表达式进行判断 如果为true，则继续执行循环体，以此类推 ，如果值为true，则执行循环体，否则，终止循环
do...while语句在执行时，会先执行循环体：循环体执行完毕以后，在对while后的条件表达式进行判断： 如果结果为true，则继续执行循环体，执行完毕继续判断以此类推 如果结果为false，则终止循环
break 跳出当前循环
break会立即终止离它最近的那个循环语句
return 语句
函数的返回值，函数的结束语句
定时器
setInterval()
setTimeout()
clearInterval()
异步执行
DOM 文档对象模型
操作网页上的元素的API。比如让盒子移动、 变色、轮播图等。
DOM可以做什么
动态创建和删除元素
设置元素的样式
className（针对内嵌样式）
style（针对行内样式）
通过js读取元素的样式：元素.style.样式名 注：我们通过style属性读取的样式都是行内样式。通过 元素.style.className 方式只能获取行内样式。
通过js修改元素的样式：元素.style.样式名 = 样式值;
注意：1.样式少的时候用style属性 2.style是对象，typeof的结果Object。3.值是字符串，没有设置值是 " "。4.命名规则，驼峰命名。5.只能获取行内样式，和内嵌,外链无关。6.box.style.cssText = “字符串形式的样式”。
设置元素的属性值
元素节点.setAttribute(属性名, 新的属性值);
获取元素的属性值
元素节点.getAttribute("属性名称");
DOM对象的属性
value：标签的value属性（用于表单元素）。
nodeType == 1 表示的是元素节点（标签） 。记住：元素就是标签。 nodeType == 2 表示是属性节点。 nodeType == 3 是文本节点。
innerHTML：双闭合标签里面的内容（识别标签）。
innerText：双闭合标签里面的内容（不识别标签）
找对象（元素节点）
元素节点的 nodetype为：1 ； 属性节点的 nodetype为：2 ；文本节点的 nodetype为：3 ；CDATA节点的 nodetype为：4 ；文档节点的 nodetype为：9 ；文档类型节点的 nodetype为：10
如何获取元素节点
getElementById() //通过id getElementsByClassName() //通过class属性的值 getElementsByName() //通过name属性的值 getElementsByTagName() // 通过标签名 querySelector() // 通过选择器，只要第一个目标节点 querySelectorAll() // 通过选择器，返回所有目标节点 ， 带“s”的会返回一个类数组，是一个可迭代对象
DOM节点的操作
创建节点
新的标签(元素节点) = document.createElement("标签名");
document.createElement(node) 创建一个元素节点
document.createTextNode("hello") 创建一个文本节点
插入节点
父节点.appendChild(新的子节点);
ele.insertBefore（newNode ,refNode | null） 方法用于将某个节点插入当前节点ele的指定位 置 newNode :要插入的节点，refNode :当前节点的一个子节点，refNode 为null，则新节点将插在当前节点的后位置
删除节点
父节点.removeChild(子节点);
ele.removeChild(ele) 方法接受一个子节点作为参数，用于从当前节点移除该节点。它返回被 移除的节点。
克隆节点
要复制的节点.cloneNode();
要复制的节点.cloneNode(true);
ele. cloneNode(false | true ) 是否克隆一个节点,默认是false，即不克隆子节点，返回一个节点 副本。
替换节点
ele.replaceChild(newnode, oldnode) 节点替换
是否有目标子节点
ele.hasChildNodes（） 方法返回一个布尔值，表示当前节点是否有子节点。有子节点返回true，没有返回false
DOM节点的遍历
parentElement 返回当前节点的父Element节点 ，如果没有父节点，或者父节点类型 不是Element节点，则返回null
parentNode属性返回当前节点的父节点
调用方法： console.log(document.documentElement.parentElement)
nextSibling：下一个节点
nextElementSibling：下一个元素节点
节点自己.parentNode.children[index]; 获取任意一个兄弟节点
previousSibling：上一个节点
previousElementSibling：上一个元素节点
第一个子元素节点 = 节点.firstElementChild || 节点.firstChild
lastChild ：最后一个子节点
lastElementChild ：最后一个子元素节点
最后一个子元素节点 = 节点.lastElementChild || 节点.lastChild
childNodes：获取所有的子节点
子节点数组 = 父节点.childNodes; //获取所有节点
子节点数组 = 父节点.children; //获取所有节点。用的最多。
DOM元素的尺寸和位置
client* 元素尺寸(包含边框和滚动条)
clientWidth ， clientHeight ， clientLeft ，clientTop
盒子调用时：可获取盒子的宽度 ，高度。 body/html调用时：获取网页可视区域宽度和高度。 event调用：clientX：鼠标距离可视区域左侧距离。 clientY：鼠标距离可视区域上侧距离。作用：鼠标距离浏览器可视区域的距离（左、上）。 clientTop：盒子的上border。 clientLeft：盒子的左border。
包括内容和 padding ，如果有滚动条，还需要减去滚动条的宽度。谷歌默认content 不包含滚动条
offset*元素可视区域(不含边框和滚动条)
offsetWidth ， offsetHeight ， offsetLeft ，offsetTop ，offsetParent 父元素
offsetTop/offsetLeft：调用者：任意元素。(盒子为主) 作用：距离父系盒子中带有定位的距离。
此空间包括内容，padding 和 border（还包括滚动条的宽度）。
scroll*可滚动容器
scrollWidth ，scrollHeight ，scrollLeft ，scrollTop
scrollTop/scrollLeft：调用者：document.body.scrollTop（window调用）(盒子也可以调用，但必须有滚动条) 作用：浏览器无法显示的部分（被卷去的部分）。
获取元素内容的尺寸,最接近内容宽度的是 clientHeight，在没有滚动条的情况下，减去 padding 值就是内容的尺寸
获取元素的位置 getBoundingClientRect
width // 等于 element.offsetWidth的值 height // 等element.offsetHeight 的值 left // 元素左边框外侧到可视窗口的距离 right // 元素右边框外侧到可视窗口的距离 bottom // 元素下边框外侧到可视窗口的距离 top // 元素上边框外侧到可视窗口的距离
BOM 浏览器对象模型
BOM的常见内置方法
Window 对象的五大属性
document 对 Document 对象的只读引用。
history 对 History 对象的只读引用。
location 用于窗口或框架的 Location 对象
navigator 对 Navigator 对象的只读引用。
screen 对 Screen 对象的只读引用
Window 对象方法
alert() 显示带有一段消息和一个确认按钮的警告框。 confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。 prompt() 显示可提示用户输入的对话框。
窗口创建与关闭
open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
window.open(url,target,param)
close() 关闭浏览器窗口。
window.close() 关闭当前窗口 新窗口. close() 关闭指定窗口
窗口位置和宽高的设置
moveBy() 可相对窗口的当前坐标把它移动指定的像素。 moveTo() 把窗口的左上角移动到一个指定的坐标。 resizeBy() 按照指定的像素调整窗口的大小。 resizeTo() 把窗口的大小调整到指定的宽度和高度
页面内容滚动
window.scrollTo(x-coord,y-coord ,behavior) 把内容滚动到指定的坐标。 scrollBy(x-coord, y-coord) 按照指定的像素值来滚动内容。 window.scroll(x-coord, y-coord, behavior) 滚动窗口至文档中的特定位置。
定时器
setInterval(function, milliseconds) 按照指定的周期（以毫秒计）来调用函数或计算表达式。 setTimeout(function, milliseconds) 在指定的毫秒数后调用函数或计算表达式。 clearInterval() 取消由 setInterval() 设置的 timeout。 clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
Window 尺寸
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：window.innerHeight - 浏览器窗口的内部高度(包括滚动条) window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)
对于 Internet Explorer 8、7、6、5：document.documentElement.clientHeight document.documentElement.clientWidth
或者
document.body.clientHeight document.body.clientWidth
BOM的内置对象
location对象和属性
Location 对象包含有关当前 URL 的信息。 window.location 可以简写成location。 属性：hash 返回一个URL的锚部分 host 返回一个URL的主机名和端口 hostname返回URL的主机名 href 返回完整的URL pathname 返回的URL路径名。 port 返回一个URL服务器使用的端口号 protocol 返回一个URL协议
navigator对象
window.navigator 的一些属性可以获取客户端的一些信息。appCodeName 返回浏览器的代码名 appName 返回浏览器的名称 appVersion 返回浏览器的平台和版本信息 cookieEnabled 返回指明浏览器中是否启用cookie 的布尔值 platform 返回运行浏览器的操作系统平台 userAgent 返回由客户机发送服务器的user-agent 头部的值
history对象
History 对象包含用户（在浏览器窗口中）访问过的 URL。 方法： 后退：history.back() history.go(-1)：0是刷新 前进：history.forward() history.go(1)
Screen 对象
Screen 对象包含有关客户端显示屏幕的信息。 属性：
availHeight 返回屏幕的高度（不包括Windows任务栏） availWidth 返回屏幕的宽度（不包括Windows任务栏） colorDepth 返回目标设备或缓冲器上的调色板的比特深度 height 返回屏幕的总高度 pixelDepth 返回屏幕的颜色分辨率（每象素的位数） width 返回屏幕的总宽度
事件
事件简介
常用的鼠标事件
onclick 当用户点击某个对象时调用的事件句柄 onmousedown 鼠标按钮被按下。 onmouseup 鼠标按键被松开。 onmouseenter 当鼠标指针移动到元素上时触发。 onmouseleave 当鼠标指针移出元素时触发 onmouseover 鼠标移到某元素之上。 onmouseout 鼠标从某元素移开。 onmousemove 鼠标被移动。 。
键盘事件
onkeydown 某个键盘按键被按下。 onkeypress 某个键盘按键被按下并松开。
onkeyup某个键盘按键被松开
表单事件
onfocus 元素获取焦点时触发 onblur 元素失去焦点时触发 onchange 该事件在表单元素的内容改变时触发
常用的拖动事件
ondragstart 该事件在用户开始拖动元素时触发 ondrag 该事件在元素正在拖动时触发 ondragend 该事件在用户完成元素的拖动时触发
绑定事件的方式
直接绑定匿名函数
例：div1.onclick = function () { alert("我是弹出的内容"); }
先单独定义函数，再绑定
div1.onclick = fn; function fn() { alert("我是弹出的内容"); } 注意：绑定的时候，是写fn，不是写fn()。fn代表的是整个函数，而fn()代表的是返回 值。
onmousedown、onmouseup 以及 onclick 事件
首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事 件，最后，当完成鼠标点击时，会触发 onclick 事件。
事件对象
DOM2的写法
DOM2级事件定义了addEventListener和removeEventListener两个方法，分别用来绑定和解绑事件，IE8以下的版本需要使用atterEvent和detachEvent来实现
addEventListener(事件名,fn ,true|false) removeEventListener(事件名,fn ,true|false)
参数1：事件名（注意没有on） 参数2：事件名（执行函数） 参数3：true表示捕获阶段触发，false表示冒泡阶段触发（默认）。如果不写，则默认为false（重要）
event
常用属性
type 返回当前 Event 对象表示的事件的名称
currentTarget 返回其事件监听器触发该事件的元素。
target 返回触发此事件的元素（事件的目标节点）
timeStamp 返回事件生成的日期和时间。
bubbles 返回布尔值，指示事件是否是起泡事件类型
cancelable 返回布尔值，指示事件是否可拥可取消的默认动作。
eventPhase 返回事件传播的当前阶段。
event 方法
initEvent() 初始化新创建的 Event 对象的属性。
preventDefault() 通知浏览器不要执行与事件关联的默认动作。
event.preventDefault(); 取消事件的默认动作。
应用场景：表单的自动提交 ， a 标签的跳转
stopPropagation() 不再派发事件
DOM事件流
事件传播的三个阶段是：事件捕获、事件冒泡和目标
事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标 target
addEventListener事件监听： box1.addEventListener("click", function () { alert("捕获 box3"); }, true)； 参数为true，代表事件在捕获阶段执行
捕获阶段，事件依次传递的顺序是：window --> document --> html--> body --> 父元素、子元 素、目标元素。
时间目标：找到目标元素之后，执行目标元素该事件相应的处理函数
事件冒泡阶段：事件从事件目标 target 开始，往上冒泡直到页面的最上一级标签 （子元素的事件被触发时，父元素的同样的事件也会被触发）
冒泡顺序：div -> body -> html -> document -> window
这些事件不能冒泡：blur、focus、load、unload、onmouseenter、onmouseleave
检查一个事件是否会冒泡： event.bubbles 如果返回值为true，说明该事件会冒泡；反之则相反。
禁止冒泡：event.stopPropagation(); （火狐、谷歌、IE11） IE10以下则是：
event.cancelBubble = true
事件委托：把一个元素响应事件（click、keydown......）的函数委托到另一个元素 。 为父元素绑定事件通过子代冒泡的形式获取子代的节点
案例：<ul class="list"> <li name="li1">111111111111</li> <li name="li2">222222222222</li> <li name="li3">33333333333333</li> </ul>
// 给父元素绑定事件 var list = document.getElementsByClassName('list')[0]; list.onmouseover = function(event){ console.log(event); var name = event.target.getAttribute('name'); console.log(name); // 根据name的值不同区分事件源，
}
正则表达式
什么是正则表达式
正则表达式用于定义一些字符串的规则。
如何创建一个正则表达式
方式一：使用构造函数创建正则表达式
var 变量 = new regExp("正则表达式") 参数是“字符串”
var 变量 = new regExp("正则表达式"， “匹配模式”) 这里两个参数都是字符串
怎么使用：
步骤一：创建正则表达式的对象reg
步骤二：使用reg的test()方法,判断指定字符串是否符合匹配规则
正则表达式的test()方法: myReg = test(str); 如果符合匹配模式就返回true， 否则返回false。
方式二：使用字面量创建正则表达式
语法一 ：var 变量 = /正则表达式/；
注意：这两种语法中没有引号
语法二 ：var 变量 = /正则表达式/匹配模式；
正则表达式的简单语法：
”|“和”[]“都表示的是”或“的意思
/[]0-9/: 任意数字
[^ ]：表示除了的意思
/[ab]/相当于/[a|b]/ : 检查一个字符串中是否包含a或b
/[a-z]/：检查一个字符串中是否包含任意小写字母， 相反的/[A-Z]/
{ } 元字符的一种，不能单独存在，必须修饰原子
{4} 表示前面的原子可以按照相同的规则重复4遍
{4,9} 表示前面的原子可以按照相同的规则重复4-9遍
{4,} 表示前面的原子可以按照相同的规则最少重复4次
+ 相当于 {1,}
? 相当于 {0,1}
* 相当于 {0,}
()包着的叫子模式，大原子 \w 相当于 [a-zA-Z0-9]
\W 相当于 [^a-zA-Z0-9] \s 匹配任何空白字符， 相当于[\f\n\r\t\v] \S匹配任何非空白字符 相当于[^\f\n\r\t\v] . 匹配除换行符\n之外的任何单字符 \d：表示0-9 \D：相反
修饰符
i 匹配的时候不区分大小写
g 执行全局匹配， 会将符合匹配规则的所有内容都匹配出来
m 匹配的字符中有换行的时候，可以当成多行处理， 影响的是^$
大原子(子模式) （）
其实就是另一个正则表达式。执行后可以单独匹配出某一部分内容
子模式匹配到的值会放到缓冲区，后面可以通过\1 , \2 , ......\n这种方式调用缓冲区里面的内容（有的语言会用到$1, $2, ......$n进行访问缓冲区）
正则表达式的string对象方法
方法一：split（）将字符串拆分成数组
方法二：search() 搜索指定字符串中是否含有指定内容， 返回其索引index
var result = str.search(/a[bef]c/);
方法四：match（）根据正则表达式，从一个字符串中将符合条件的内容提取出来
var result3 = str.match(/[a-z]/gi);
方法三：replace（）将字符串中指定的内容替换为新的内容并返回
console.log(str2.replace(/today/gi,"tomorrow"));
正则表达式举例：
手机号的规则：var phoneReg = /^1[3-9][0-9]{9}$/;
第一位以1开头， 第二位是3-9的任意数字，第三位以后是0-9的任意9为数字
电子邮件的规则：var emailReg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;
ECMAscript6.0
简介
由 ECMA 国际标准化组织，制定的一项脚本语言的标准化规范
简介语法
当属性名和属性值相同时：
属性简写
// 之前的写法
var name='Tom'
var obj={
name:name
};
console.log(obj.name)
// 简洁语法
var name='Tom'
var obj={
// 注意这里可以简写
name
};
console.log(obj.name)
方法简写
// 之前的写法
var obj={
run:function() {
console.log('跑的很快');
}
};
obj.run();
//简洁写法
var obj={
run() {
console.log('跑的也很快');
}
};
obj.run();
let，var，const
let于const声明的变量是块级作用域，在代码块中使用let和const声明的变量会陷入暂时性死区知道该变量的声明被处理，他们都不会变量提升。
let和const的区别：
1. 使用let声明的变量：可以重新赋值，但不能在同一个同一个作用域中被重新声明
2.使用const声明的变量：必须对其赋值 初始化，但是不能在同一个作用域内重新声明也不能被重新赋值
let和var声明变量的区别：
1.使用var声明的变量其作用域是链式的，而使用let声明的变量只会在一个代码块中生效。
2.var声明的变量会被提升，即：可以先使用后声明，而使用let声明的变量不会有变量提升。
3.let声明的变量，被对应的块级作用域绑定，不受外接干扰。
例：
let arr = [];
for (let i = 0; i < 2; i++) {
arr[i] = function () {
console.log(i);
}
}
arr[0]();
arr[1](); //每次循环都会产生一个块级作用域
字符串新增内容
模板字符串
可以使用反引号（` `）来定义来定义一个字符串模板，在其中可以使用${}来存放一个变量或表达式。
字符串新增的一些常用方法：
.include（）：查看字符串中是否包含某些字符
.startsWidth（）：查看字符串是否以某个字符开头
.endsWidth（）：查看字符串是否以某个字符结尾
.repeat（）:字符串重复几遍
padstarts（参数1(如：10)， 参数2(如：a)）字符串不满10位就在其前面补上a。够10位为止
padEnd()，padStart()（参数1(如：10)， 参数2(如：a)）字符串不满10位就在其后面补上a。够10位为止
.trimStarts（）去除字符串前面的空白字符
.trimEnd（）去除字符串后面的空白字符
.trim（）去除字符串中的空白字符
正则匹配 .matchAll() 方法:
将字符串中指定的内容一次性全部匹配出来，返回一个可迭代对象
解构赋值
使用解构从数组和对象快速提取值并赋值给独特的变量
数组结构
例：var a = ['大哥', '二哥', '三弟'];
// 赋值符号右侧的数组被解构
// 如果在js的严格模式下，前面要有var或者let
var [x, y ,z] = a;
console.log(x);
console.log(y);
console.log(z);
`[]`表示被解构的数组, `x`，`y`，`z`表示要将数组中的值存储在其中的变量, 在解构数组时 还可以忽略值, 例如`var [x, , z] = a`,忽略第二个值。
对象结构
例：// 使用变量名字匹配对象的属性
// 如果匹配成功，则将对象属性的值赋值给变量
var a = {
name: '张三',
age : 18,
sex : '男'
};
// 赋值符号右侧的对象被解构
var {name, age ,sex} = a;
console.log(name, age, sex);
函数参数和剩余运算符
默认参数：
例：function xxx(a, b = 100) {
console.log(a); //1
console.log(b); //100
}
xxx(1)
剩余运算符：
例：let a = ['大哥', '二哥', '三弟', '四弟', '五弟'];
let [x, y , ...z] = a;
console.log(z); //['三弟', '四弟', '五弟']
剩余操作符(`...`)，表示将剩下的打包，通常是只可能放在变量名前面。一定**有赋值或者传值操作。
剩余参数：
例：// 使用剩余参数可以接受任意数量的参数
// 剩余参数参数之后不能再有形参
function xxx(a, ...argues) {
console.log(a);
// 剩余参数其实是将剩余的位置参数都接收，然后存放到一个数组中（打包剩余的到一个数组中）
console.log(argues);
}
xxx(22, 'imshusheng.com', 44, 66);
lterator（遍历器/迭代器）
三个作用：
- 一是为各种数据结构，提供一个统一的、简便的访问接口；
- 二是使得数据结构的成员能够按某种次序排列；
- 三是 ES6 创造了一种新的遍历命令`for...of`循环，Iterator 接口主要供`for...of`消费。
遍历过程：
（1）创建一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质上，就是一个指针对象。
（2）第一次调用指针对象的`next`方法，可以将指针指向数据结构的第一个成员。
（3）第二次调用指针对象的`next`方法，指针就指向数据结构的第二个成员。
（4）不断调用指针对象的`next`方法，直到它指向数据结构的结束位置。
for...of遍历结构：
- `entries()` 返回一个遍历器对象，用来遍历`[键名, 键值]`组成的数组。对于数组，键名就是索引值；对于 Set，键名与键值相同。Map 结构的 Iterator 接口，默认就是调用`entries`方法。
- `keys()` 返回一个遍历器对象，用来遍历所有的**键名**。
- `values()` 返回一个遍历器对象，用来遍历所有的**键值**。
例：let e = ['a', 'b', 'c', 'd', 'e'];
for (let i of e){
console.log(i)
}
for (let i of e.keys()){
console.log(i)
}
for (let i of e.values()){
console.log(i)
}
for (let [i, j] of e.entries()){
console.log(i, j)
}
for...in, for, forEach三种遍历于for...of的区别：
for 写法比较麻烦
for... in:它比较适合遍历对象，但对数组遍历，使用起来不是很方便
`forEach`循环无法中途跳出，`break`命令或`return`命令在其中无效
for...of的好处
例：let e = ['a', 'b', 'c', 'd', 'e'];
for (var i of e.values()){
if(i == 'c'){
continue;
}
console.log(i);
}
Set类型
集合类型，类似于数组，但是它的成员的值是唯一的没有没有重复的值，Set本身是一个构造函数，用来生成Set数据结构同时该函数可以接受一个具有 iterable 接口的其他数据结构作为参数，用来初始化。
例：var a = new Set();
console.log(a);
// 使用数组初始化
var b = new Set([1, 2, 3, 2]);
console.log(b);
// 使用字符串初始化
var c = new Set('abcdefgad');
console.log(c);
添加元素：
Set类型对象可以通过`add()`方法向 Set 结构中加入成员，且向 Set 加入值的时候，不会发生类型转换，因此`1`和`'1'`并不是重复的值。
例：var a = new Set();
a.add(1);
a.add('1');
a.add('666');
// 在Set中，它认为两个NaN是相等的
a.add(NaN);
a.add(NaN);
// 在Set中，它认为两个空对象是不相等的
a.add({});
a.add({});
console.log(a);
Set结构的其它常用属性和方法
- `.size`：返回`Set`实例的成员总数。
- `.add(value)`：添加某个值，返回 Set 结构本身。
- `.delete(value)`：删除某个值，返回一个布尔值，表示删除是否成功。
- `.has(value)`：返回一个布尔值，表示该**值**是否为`Set`的成员。
- `.clear()`：清除所有成员，没有返回值。
Set遍历：
可以使用`for……of`结构以及`forEach`进行遍历，不过由于 Set 结构没有键名，只有键值，所以`keys`方法和`values`方法的行为完全一致。
例：var d = new Set(['大哥', '二哥', '三弟', '四弟', '五弟']);
for (let i of d) {
console.log(i)
}
for (let i of d.keys()) {
console.log(i)
}
for (let i of d.values()) {
console.log(i)
}
for (let [i, j] of d.entries()) {
console.log(i)
console.log(j)
} d.forEach(function (x, y, z) {
console.log(x);
console.log(y);
console.log(z);
})
WeakSet可以使用的方法：
- **`.add(value)`**：向 WeakSet 实例添加一个新成员。
- **`.delete(value)`**：清除 WeakSet 实例的指定成员。
- **`has(value)`**：返回一个布尔值，表示某个值是否在
Map类型
例：
var a = new Map();
var b = ['帅哥'];
var c = {name: '张三'};
// set()方法的作用是设置一个键值对，有两个参数：参数1是键，参数2是值
// 使用一个数组作为键
a.set(b, '书生');
// 使用一个对象做为键
a.set(c, '张思睿');
// 使用传统的字符串作为键
a.set('美女', '章子怡');
console.log(a);
// 根据键获取值
console.log(a.get(c));
// 注意这个值是啥
console.log(a.get({name: '张三'}));
// 根据键删除内容
a.delete('美女');
console.log(a);
其它常用的属性和方法
- `.size`：返回` Map` 结构的成员总数
- `.has(value)`：方法返回一个布尔值，表示某个**键**是否在当前 Map 对象之中
- `.clear()`：清除所有成员，没有返回值。
遍历Map
遍历方法同`Set`、`Array`结构类似，可以使用`for……of`
WeakMap
`WeakMap`结构与`Map`结构类似，也是用于生成键值对的集合
例：const a = new WeakMap();
const b = {foo: 1};
a.set(b, 2);
console.log（a.get(b)） // 2
WeakMap`与`Map`的区别有两点。
- `WeakMap`只接受对象作为键名（`null`除外），不接受其他类型的值作为键名。
- `WeakMap`的键名所指向的对象，不计入垃圾回收机制
`WeakMap` 与 `Map` 在 API 上的区别主要是两个
一是没有遍历操作，也没有size属性
无法清空，即不支持clear方法
`WeakMap`只有四个方法可用：`get()`、`set()`、`has()`、`delete()`。
数组新增内容
扩展运算符（...）
将类似数组（array-like）对象或者可迭代对象转成真正的数组
例：var c = document.getElementsByTagName('div');
// 其实这并不是真正的数组
console.log(c);
// 这才是真正的数组
console.log([...c]);
// 像Map、Set等类似数组的数据类型也可以使用扩展运算符打散
// 其实只要是可迭代对象都可以，比如字符串也行
console.log([...'1234567']);
Array.from()
Array.from`方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象
Array.of()
`Array.of`方法用于将一组值，转换为数组。`Array.of`基本上可以用来替代`Array()`或`new Array()`，推荐使用。
例：// 将几个值转成数组
let a = Array.of(1, 3, 5, 7, 9);
console.log(a);
// 如果没有用传值，则得到的事空数组
let b = Array.of();
console.log(b)
数组实例对象新增的方法
`fill()`使用给定值，填充一个数组，数组中原有的元素，会被全部抹去。
例：// 将数组中的值替换成我们设置的值, 抹去原有的，替换成新的
let d = ['a', 'b', 'c', 'd', 'e'];
console.log(d.fill(100));
// 第二个和第三个参数，表示填充的起始位置和结束位置
console.log(d.fill(101, 2));
console.log(d.fill(102, 2, 3));
`findIndex()`方法的用法与`find()`方法非常类似，返回第一个符合条件的数组成员的位置（键），如果所有成员都不符合条件，则返回`-1`
例:let f = [1, 3, 5, 7, 9];
// findIndex 会将数组的每一个元素放入到函数中进行迭代处理
// 将第一个满足条件的值的键取出来
console.log(f.findIndex(function (x) {
return x > 5
}));
`includes()`方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的`includes()`方法类似
例：let f = [1, 3, 5, 7, 9, NaN];
// 检验某个值是否在数组内
console.log(f.includes(5));
console.log(f.includes(NaN));
// 第二个参数表示搜索的起始位置，默认为0。
// 如果第二个参数为负数，则表示倒数的位置，
// 如果这时它大于数组长度（比如第二个参数为-7，但数组长度为6），则会重置为从0开始。
console.log(f.includes(5, 3));
`flat()`用来操作多维数组的，将多维数组降维。该方法返回一个新数组，对原数据没有影响。
例：let f = [1, 3, 5, 7, [555, 666]];
// 将二维数组降维到一维
console.log(f.flat());
let g = [
1,
2,
[
33,
44,
[
555,
666
]
]
]
console.log(g.flat());
// 降2维
console.log(g.flat(2));
// 无论多少维都降为1维
console.log(g.flat(Infinity));
find（）方法用于找出第一个符合条件的数组成员，它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为`true`的成员，然后返回该成员
例：let f = [1, 3, 5, 7, 9];
// find 会将数组的每一个元素放入到函数中进行迭代处理
// 将第一个满足条件的值取出来
console.log(f.find(function (x) {
return x > 5
}));
箭头函数
传统的方法写一个函数：// 定义一个函数
function getSex(num) {
return num === 0 ? '女' : '男';
}
利用匿名函数：var getSex = function (num) {
return num === 0 ? '女' : '男';
}
利用箭头函数：var getSex = num =>num = == 0 ? '女' ：'男'；
基本语法：
// 只有一条return语句的 简单箭头函数
参数 => 返回值的表达式
// 相对复杂的箭头函数
参数 => 函数体
多参数或者无参数语法
// 多参数
(参数1, 参数2, ……) => 返回值的表达式
// 无参数
() => 返回值的表达式
例：// 多个参数的时候，使用括号包着参数
var getSex = (num, say) => `${say} 是 ${num === 0 ? '女' : '男'}的`;
// 调用函数
console.log(getSex(1, '小明'));
console.log(getSex(0, '小红'));
// 无参数的时候使用个空括号占位
var xxx = () => '我好帅啊';
console.log(xxx());
如果函数体内需要有多条语句时，它的结构是这样的 ：参数=>函数体
例：var getSex = (num, say) => {
let sex;
if (num === 0 ){
sex = '女';
}else{
sex = '男'
}
//需要手动返回
return `${say} 是 ${sex}的`;
};
console.log(getSex(1, '小明'));
console.log(getSex(0, '小花'));
箭头函数注意事项：
- 函数体内的`this`对象，就是定义时所在的对象，而不是使用时所在的对象。
- 不可以当作构造函数，也就是说，不可以使用`new`命令，否则会抛出一个错误。
- 不可以使用`arguments`对象，该对象在函数体内不存在。如果要用，可以用Rest参数代替。
- 不可以使用`yield`命令，因此箭头函数不能用作Generator函数。
`this`指向的固定化，并不是因为箭头函数内部有绑定`this`的机制，实际原因是箭头函数根本没有自己的`this`，导致内部的`this`就是外层代码块的`this`。正是因为它没有`this`，所以也就不能用作构造函数。
类语法
ES6中通过`class`关键字创建和使用类以及对象
定义一个Human类：class Human{ constructor(name, sex){
this.name = name;
this.sex = sex;
} }， 类中的构造方法，名字必须叫construtor
中的所有成员对外都是可见的，即没有私有成员，使用该方式创建类的成员方法，前面不能用 function 修饰
console.log(typeof Human); //返回值竟是Function
类的继承
子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。
super关键字的作用：
1.super当函数直接使用的时候表示：调用父类的构造函数
2.super当对象使用的时候可以调用父类中的方法，super().父类的方法()
setter和getter
setter：是一种设置属性值的方法
// 如果通过对象设置xxx属性值的时候，会自动调用这个方法
set xxx(x){
console.log('setter被调用了');
this._xxx = x
}
getter：是获得属性值的方法
// 如果通过对像获取xxx属性值的时候，会自动调用这个方法
get xxx(){
console.log('getter被调用了');
return this._xxx
}
属性明表达式：
使用表达式作为属性名(方法名)，必须使用方括号[ ]
如：// 直接在对象中使用变量作为键名
[name2]: function() {
console.log('找对象啦');
}
}
hh[name2]();
静态方法：
在类中的一个方法前面加上`static`关键字，那么表示该方法是静态方法，静态方法不能被实例对象调用，只能通过类调用。即静态方法属于类，对象不能调用
如：// 静态方法
// 静态方法属于类，对象不能调用
static black(){
console.log('长的有点黑');
}
https://i.csdn.net/#/uc/profile（可前往查看）
Symbol
ES6中的一个的第7种数据类型，前六种是：undefined、null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）
如：var s = Symbol();
console.log(typeof s); // "symbol" 变量s就是一个独一无二的值。typeof运算符的结果，表明变量s是 Symbol 数据类型，而不是字符串之类的其他类型
注意：Symbol函数前不能使用`new`命令，否则会报错
模块化
https://i.csdn.net/#/uc/profile（可前往查看）
Generator生成器
定义：通过一段程序，持续迭代或枚举出符合某个公式或者算法的有序数列中的元素，这段程序实现这个公式或者算法，实现这个算法的函数就是生成器。
语法说明：
1.定义一个生成器的时候function关键字与函数名之间有一个“ * ”号
例：function * firstGenerator(){
// 使用yield记录状态
yield '我是刘备';
yield '我是关羽';
yield '我是张飞';
}
// 获取一个生成器对象
let f1 = firstGenerator();
// 调用生成器对象的状态
console.log(f1.next());
console.log(f1.next());
console.log(f1.next());
yield关键字将程序逻辑划分成几部分，每次.next()执行时执行一部分
yield和return的区别：
1.yield表达式与return语句都能返回紧跟在语句后面的那个表达式的值
2.每次遇到yield，代码会暂停执行，下一次再从该位置继续向后执行，而return语句不具备位置记忆的功能
3.一个函数里面，只能执行一个return语句，但是可以执行多个yield表达式
生成器也可以接收参数：
例：// 可以有形参
function* myOdd(x) {
let num = 1;
let cur = 1;
while (num <= x) {
yield cur;
cur += 2;
num++;
}
// 也可以有return
return '结束了';
}
var o1 = myOdd(10);
// 使用循环
for (let i=0; i<20; i++){
console.log(o1.next());
}
// 使用遍历结构
for (let v of o1) {
console.log(v);
}
同步和异步，阻塞和非阻塞，并发和并行
ES6的一些相关知识点可访问：https://i.csdn.net/#/uc/profile