标签：程序设计语言 没有 简洁 art class computer 添加 mis 程序设计
第一节：什么是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、通过实例化的对象调用类的方法或者属性。
注意：面向对象是一种编程思想，并不是具体的工具。
标签：程序设计语言 没有 简洁 art class computer 添加 mis 程序设计
原文地址：https://www.cnblogs.com/mz-2015/p/9274585.html
