ES6 语法学习总结

第一节：什么是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、通过实例化的对象调用类的方法或者属性。

 

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

标签：

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