第一节:什么是ES6?
ES6是什么?跟JavaScript有什么关系?
JavaScrip由三部分组成:分别是ECMAScript,BOM和DOM.
1)由此看出,ECMAScript是JavaScript的组成部分,是JS的核心,描述了语言的基本语法(var、for、if、array等)和数据类型(数字、字符串、布尔、函数、对象(obj、[]、{}、null、未定义),ECMAScript是一套标准,定义了一种语言是什么样子。ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是European Computer ManufacturersAssociation)通过ECMA-262标准化的脚本程序设计语言。
2)文档对象模型(DOM):是HTML和XML的应用程序接口(API)。DOM把整个页面规划成由节点层级构成的文档。HTML和XML页面的每个部分都是一个节点的衍生物。
DOM通过创建树来表示文档,从而使开发者对文档的内容和结构具有空前的控制力。用DOM API可以轻松地删除、添加、和替换节点(getElementById、childNodes、appendChild、innerHTML)
3)浏览器对象模型(BOM)对浏览器窗口进行访问和操作。例如弹出新的浏览器窗口,移动、改变和关闭浏览器窗口,提供详细的网络浏览器信息(navigator object),详细的页面信息(location object),详细的用户屏幕分辨率信息(screen object),对cookie的支持等。BOM作为JS的一部分没有相关标准的支持,每一个浏览器都有自己的实现。
ECMAScript的作用:
它定义了很重要的东西,包括:
语法(解析规则,关键字,语句,声明,操作等),
类型 (布尔型,数字,字符串,对象等)
原型和继承
内置对象和函数的标准库(JSON,数字,数组方法,对象内省的方法等)
2015年6月,ECMAScript6正式通过,成为国际标准。
2016年发布ES7。
2017年Ecma 国际公布了第八版的 ES8 (ECMAScript 2017)
ES8主要特点:
1、异步函数:
用Promise处理Async函数的普遍流程
Function fetchData(url){
return fetch(url)
.then(request=>request.text())
.then(text=>){
return JSON.parse(text);
})
.catch(err => {
Console.log(‘Error:${err.stack}’);
});
使用ES8中新增的async和await关键字,我们可以利用全新的、与Co高度相似的语法来实现完全同步读取。我们可以使用try / catch blocks和新的关键字来为特定功能分配异步行为。在内部,Async功能与生成器的功能相同,但是却不能转换为Generator Functions。就像这样:
可以使用以下的方式编写ES2017中的Async函数:Async function fetchData(url){
try{
let request = await fetch(url);
let text =await request.text();
return JSON.parse(text);
}
catch (err) {
console.log(`Error: ${err.stack}`);
}
}
异步函数声明:
Asyncfunction fooBar(){};
异步函数表达式:
ConstfooBar = async function(){};
异步方法定义:
Letobj = { async fooBar(){}};
异步箭头函数:
ConstfooBar = async () =>{};
2:共享内存和Atomics.
第二节:ES6新增了let关键字,干嘛用的?
let 用来声明变量。
不足一:
let 声明的变量仅仅在自己的块级作用域起作用 。
任何一对花括号(这玩意:{ })中的语句都属于一个块,在花括号里面用let定义的所有变量在花括号外都是不可见的,我们称之为块级作用域。
不足二
用var 声明变量的时候会出现“变量提升”的现象。
变量提升———》 ---》
对比一下两段简短的代码:var a = 2; 这句代码被拆分成两部分:声明var a ; 和 定义a = 2;而声明部分被提升(看到了吗?提升两个字出现了)到了代码块的前面,运行的时候自己挪到前面了,这就是“变量提升“,结果就是:先执行声明,接着就执行alert(a);变量a只是声明还没定义,就弹出了undefined了。
如果你用let这样重写刚刚那段代码:
用let关键字来定义a;这样a在代码块内就不会提升了。那为什么又报错了呢,因为用let声明的变量,在其块级作用域内是封闭的,是不会受到外面的全局变量a影响的,并且要先声明再使用,所以a的值即不是1(因为不受外面的影响),也不是undefined(因为先声明后使用),更不是2,未声明定义就使用,只有报错啦。
用let关键字也算是提醒我们,平时记得先声明定义再使用的好习惯。
用let 需要注意的地方:
1、在同一个作用域内,不允许重复声明同一个变量
2、函数内不能用let重新声明函数的参数
总结:用let声明变量只在块级作用域内起作用,适合在for循环使用
第三节:ES6 关键字const
const是constant(常量)的缩写。
常量的特点:
1、不可修改;
2、只在块级作用域起作用
3、不存在变量提升,必须先声明后使用,这点跟let关键字一样
4、不可重复声明同一个变量
5、声明后必须赋值
第四节:浏览器兼容ES 6特性使用
我们可以用Bable来兼容它。
用npm 来安装bable。npm是随同Node.js一起安装的包管理工具,因此只需安装node.js即可。
启动命令提示符窗口并且输入:npm install bable-core@5
第五节:ES 6新特性: 解构赋值
什么是解构赋值:ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。
传统的变量赋值:
变量的解构赋值:
数组的的解构赋值有一下四种情况:
1、结构赋值可以嵌套的
2、不完全解构
3、赋值不成功时,变量的值为underfined
4、允许设定默认值
这个时候默认值3会被新的值4覆盖,c的值为4;注意:当新的值为undefined的时候,是不会覆盖默认值的。
对象的解构赋值跟数组的解构赋值很类似。
如果变量找不到与其名字相同的属性,就会赋值不成功,如下图:
字符串的解构赋值
解构赋值的用途
一.交换变量的值
传统做法最常用的是引入第三个变量来临时存放,如下:
但有了解构赋值,交换两个变量的值就简单的多了。如下图:
二:提取函数返回的多个值
函数只能返回一个值,我们可以将多个值装在一个数组或者对象中,再用解构赋值快速提取其中的值。
三: 定义函数参数:
四:函数参数的默认值:
传统的参数默认值的实现方式是,先判断该参数是否为undefined,如果是代表没传,需要手动给它赋一个值,如:
但是有了解构赋值,一切变得简单很多!看下面的代码:
本节总结:
总结:解构赋值给我们一种新的变量赋值方式,主要可以利用数组解构赋值和对象解构赋值。它的用途包括:交换变量值,提取函数返回值,函数参数定义,默认值设定等都给我们编程带来便利,在未来会有越来越多的人们使用这个新特性。
第六节:ES 6为字符串String带来哪些好玩的特性?
字符串的扩展
ES6对字符串新增了一些函数和操作规范,使得开发者对字符串的操作更加方便,以往需借助Javascript代码才能实现的效果,现在利用这些函数即可快速实现。
新特性:模板字符串
对比两段拼接的代码,模板字符串使得我们不再需要反复使用双引号(或者单引号)了;而是改用反引号标识符(`),插入变量的时候也不需要再使用加号(+)了,而是把变量放入${ }即可。
使用模板字符串,需要注意以下地方:
1、可以定义多行字符串:
2、${}中可以放任意的Javascript表达式
①${}可以是运算表达式
②${}可以是对象的属性
③${}可以是函数的调用
新特性:标签模板
这里的模板指的是上面讲的字符串的模板,用反引号定义的字符串;而标签,则指的是一个函数,专门处理模板字符串的函数。
在函数名后面直接加一个模板字符串,如图 ,这样就是标签模板,可以理解为标签函数+模板字符串,这是一种新的语法规范。它常用来过滤用户的非法输入和多语言转换。
新特性:repeat函数
repeat()函数:将目标字符串重复N次,返回一个新的字符串,不影响目标字符串。
var name1 =”前端君”; //目标字符串
var name2 =name1.repeat(3); //变量name1被重复三次;
Console.log(name1); // 结果:前端君
Console.log(name2); //结果:前端君前端君前端君
新特性:includes函数
Includes()函数:判断字符串是否含有指定的子字符串,返回true表示含有,false表示未含有。第二个参数选填,表示开始搜索的位置。
注意,左面最后一句代码,第二个参数为1,表示从第2个字符“端“开始搜索,第一个字符”前“的位置是0;
传统的做法我们可以借助indexOf( )函数来实现,如果含有指定的字符串,indexOf( )函数就会子字符串首次出现的位置,不含有,则返回-1。我们通过返回值是否为-1来判断字符串中是否含有指定的子字符串,但是,我们现在可以用includes( )函数代替indexOf( )函数,因为它的返回值更直观(true或false),况且我们并不关心子字符串出现的位置。
新特性:startsWith函数
startWith()函数:判断指定的字符串是否出现在目标字符串的开头位置,第二个参数选填,表示开始搜索的位置。
我们如果判断字符串是否以某个子字符串开头,就可以直接使用startsWith( )函数即可,同样,第二个参数为1表示从第2个字符开始搜索。若要从第一个字符开始搜索,参数应该为0或者为空(默认从第一个字符开始搜索)。
新特性:endWith函数
ensWith()函数:判断子字符串是否出现在目标字符串的尾部位置,第二个参数选填,表示针对前N个字符。
var name = "我就是前端君"; //目标字符串
name.endsWith('我'); //false,不在尾部位置 name.endsWith('君'); //true,在尾部位置 name.endsWith('君',5); //false,只针对前5个字符 name.endsWith('君',6); //true,针对前6个字符
新特性:codePointAt函数
Javascript中,一个字符串固定为2个字节,对于那些需要4个字节存储的字符,javascript会认为它是两个字符,此时它的字符长度length为2。如字符:“吉”,就是一个需要四个字节存储,length为2的字符。对于4字节的字符, javascript无法正确读取字符。
可以看到,str1和str2的长度length都是2,因为字符:"(charAt() 方法可返回指定位置的字符)能正确读取字符串str1的字符,但无法正确读取4个字节的字符,此时返回结果出现了乱码。
如果我们使用ES6给我们提供的codePointAt( )函数,就可以处理这种4个字节的字符了,我们来看看怎么使用:
对于这个长度length为2字符:“吉”,codePointAt( )方法可以正确地识别出它是个4个字节的字符,并且能正确地返回它的码点的十进制数:134071,这个数字抓换成16进制就是20bb7,对应的Unicode编码则是\u20bb7。
新特性:String.fromCodePoint函数
String.fromCodePoint( )函数:函数的参数是一个字符对应的码点,返回的结果就是对应的字符,哪怕这个字符是一个4字节的字符,也能正确实现。
新特性:String.raw函数
最后讲解的一个函数是String.raw( );看函数名raw是未加工的的意思,正如这个函数的作用一样:返回字符串最原始的样貌,即使字符串中含有转义符,它都视而不见,直接输出。
Unicode编码
Unicode(中文:万国码、国际码、统一码、单一码)是计算机科学领域里的一项业界标准。它对世界上大部分的文字系统进行了整理、编码,使得电脑可以用更为简单的方式来呈现和处理文字。
第七节:ES 6为为数值做了哪些扩展?
在ES6标准中,isNaN方法被移植到Number对象上,也就是原本属于全局对象window下的函数,现在属于Number对象上了,同样被处理的函数还有isFinite函数,parseint函数,parseFloat函数。
ES6的写法是:
新特性:Number.isNaN函数
Number.isNaN函数:用于判断传入的是否是非数值,注意:是判断非数值,而不是判断数值,IsNaN的全称是: is not a number.
传统的isNaN函数会把非数值的参数转化成数值再进行判断,而Number. isNaN只对数值类型有效,非数值类型的参数一律返回false。看文字解释不过瘾,咱们看案例。
正如上面我写的注释一样,Number下面的isNaN都懒得给字符串’abc’做类型转换,直接返回false。而ES5中的isNaN函数会对字符串’abc’进行类型转换后,发现它是一个NaN(非数值),才返回true。
所以我们在使用这个函数到时候还要小心,当返回false的时候,不一定就是一个数值,有可能是一个非数值类型的参数。
新特性:Number.isFinite 函数
Number.isFinite函数:用来检查一个数值是否非无穷。注意是判断非无穷,不是判断无穷,这里跟isNaN函数一样,有点绕。isFinite函数跟isNaN函数一样,也只是对数值类型有效,对非数值类型的参数一律返回false
新特性:Number.paeseint函数&Number.parseFloat 函数
parseint函数:解析一个字符串,返回一个整数。parseint函数同样从window对象下移植到Number对象下,作用没变。
parseFloat函数:解析一个字符串,并返回一个浮点数。
以上四个是由全局对象window下移植到Number对象下的,目的是减少全局性的函数,把全局函数合理的规划到其他对象下,渐渐实现语言的模块化。
新特性:Number.isinteger函数
Number.isinteger函数:用来判断是否是整数。
极小常量
Number.ESPILON常量:定义一个极小的数值。
安全整数
ES6为我们引入了安全整数的概念。什么?整数还有安全和不安全的说法?原来JavaScript能够准确表示的整数范围在-2^53到2^53之间,超过这个范围,无法精确表示这个值。故称之为不安全。
ES6给数值带来的扩展,除了对Number对象进行了扩展,还对Math对象进行了扩展。我们平时用的求随机数的方法random就是属于Math对象下的方法。
此外,ES6给Math对象新增了17个函数。
第八节:ES 6为数组的扩展?
1、Array.of()函数
作用:将一组值,转换成数组。
2、Array.from()函数
函数作用:可以将类似数组的对象或者可遍历的对象转换成真正的数组。什么是类似数组的对象?最常用的是调
‘用getElementByTagName方法得到的结果。
Array.from函数其中一个用处就是字符串转换成数组。
3、find()函数
函数作用:找出数组中符合条件的第一个元素。
看上面的代码,find()函数的参数是一个匿名函数,数组的每个元素都会进入匿名函数执行,直到结果为true,find函数就会返回value的值:3。倘若所有元素都不符合匿名函数的条件,find( )函数就会返回undefind。
4、findindex()函数
函数作用:返回符合条件的第一个数组成员的位置。
上面的代码结果是:2,因为数组元素中大于8的元素是9,而元素9的位置正式2,(数组元素是从0算起)。倘若所有元素都不符合匿名函数的条件,findIndex( )函数就会返回-1。
5、fill()函数
函数作用:用指定的值,填充到数组。
经过fill( )函数处理后的数组arr已经变成了[4,4,4];正如函数名fill(填充)一样。所有元素都被填充为数字4了。fill( )函数提供了一些参数,用于指定填充的起始位置和结束位置。
上面的代码中第2个参数和第3个参数的意思是:从位置1的元素开始填充数字4,截止到位置3之前,所以是位置1和位置2的元素被数字4填充了,得到的结果:[1,4,4]。
6、entries()函数
函数作用:对数组的键值对进行遍历,返回一个遍历器,可以用for...of对其进行遍历。
7、keys()函数
函数作用:对数组的索引键进行遍历,返回一个遍历器。
8、values()函数
作用:对数组的元素进行遍历,返回一个遍历器。
9、数组推导
数组推导:用简洁的写法,直接通过现有的数组生成新数组。
举个例子:加入我们有一个数组,在这个数组的基础上,每个元素乘以2,得到一个新数组。
传统的实现方法:
ES6提供的新方法:数组推导。
在数组推导中,for..of后面还可以加上if语句,我们看来看看代码案例:
在上面代码中,我们不再是对数组的元素乘以2,而是用if做了个判断:数组的元素要大于3。所以运行的结果是:[ 4 ]。
第九节:ES 6为对象的扩展?
对象的传统表示法:
变量person就是一个对象,对象含有name属性和一个say方法。表示法是用键值对的形式来表示,这就是传统的表示法。
ES6的简洁写法:
ES6为对象新增的函数
1、Object.is()函数
作用是比较两个值是否严格相等,或者说全等。
2、Object.assign()函数
作用:将源对象的属性赋值到目标对象上。
利用Object.assign()函数的功能,我们可以给对象添加属性和方法,克隆对象,合并多个对象,为对象的属性制定默认值。
3、Object.getPrototypetypeOf()函数
作用:获取一个对象的prototype属性。
4、Object.setPrototypeOf()函数
作用:设置一个对象的prototype属性。
Javascript的面向对象
Javascript本身不是一种面向对象的编程语言,在ES5中,它的语法中也没有class(类的关键字),可以利用对象的原型prototype属性来模拟面向对象进行编程开发。
模拟面向对象编程有几个关键步骤:1、构造函数2、给prototype对象添加属性和方法,3、实例化,4、通过实例化的对象调用类的方法或者属性。
注意:面向对象是一种编程思想,并不是具体的工具。