ES6 语法学习总结

2018-07-09 13:47:34来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

第一节:什么是ES6

 

ES6是什么?跟JavaScript有什么关系?

 

JavaScrip由三部分组成:分别是ECMAScript,BOMDOM.

 

1)由此看出,ECMAScriptJavaScript的组成部分,是JS的核心,描述了语言的基本语法(varforifarray等)和数据类型(数字、字符串、布尔、函数、对象(obj[]{}null、未定义),ECMAScript是一套标准,定义了一种语言是什么样子。ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是European Computer ManufacturersAssociation)通过ECMA-262标准化的脚本程序设计语言。

 2)文档对象模型(DOM):是HTMLXML的应用程序接口(API)。DOM把整个页面规划成由节点层级构成的文档。HTMLXML页面的每个部分都是一个节点的衍生物。

 

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、通过实例化的对象调用类的方法或者属性。

 

注意:面向对象是一种编程思想,并不是具体的工具。

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:深入理解js的变量提升和函数提升

下一篇:Javascript装饰器的妙用