ECMAScript
1ES6基础
1.1ES6简介
1.ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
2.一个完整的JavaScript实现由三部分组成：文档对象模型（DOM）、浏览器对象模型（BOM）、核心（ECMAScript）
3.总的来说，ES就是在设计实现JavaScript脚本语言的语法和基本对象的核心内容时所遵循的标准规范。
1.2let命令
1.ES6新增了let命令，用来声明变量。用法类似于var命令，但是所声明的变量只在let命令所在的代码块内有效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
{
var name = 'lining';
let age = 20;
}
console.log(name);
console.log(age);
</script>
</body>
</html>
2.let命令有效解决了原来使用var变量让人难以理解的地方
①变量提升。var命令会发生“变量提升”现象，即变量可以在声明之前使用，值为undefined。但是按照一般的逻辑，变量应该在声明语句之后才可以使用，所以let命令改变了语法行为，所声明的变量一定要在声明后使用，否则报错。
②变量不允许重复声明。
1.3const命令
①用constant命令声明的是一个只读的常量，其值一旦声明就不能改变，这也意味着constant命令一旦声明常量就必须将其初始化。
const PI = 3.1415926;
②const命令的作用域与let命令相同，只在声明所在的块级作用域内有效，且不可以重复声明。
③const命令实际上保证的并不是变量的值不能改动，而是变量指向的那个内存地址不能改动。
2.变量的结构赋值
解构数据与构造数据截然相反，不是构造一个新的对象或数组，而是逐个拆分现有的对象或数组来提取所需要的数据。ES6允许按照一定模式从数组和对象中提取值再对变量赋值，这被称为解构。这种模式会映射正在解构的数据结构，只有那些与模式匹配的数据才会被提取出来。
2.1数组的解构赋值
数组结构赋值基本上是按照等号左边与等号右边的匹配进行的。
①模式匹配
let [var1,var2,var3] = array;
②嵌套方式
let [l1,[[l2],[l3]]] = [1,[[2],[3]]];
③不完全解构
let [x,,y] = [1,2,3]; //解构后x=1，y=3
④使用省略号解构
let [head,...tail] = [1,2,3,4];//解构后head=1，tail=[2,3,4]
⑤含有默认值的解构
let [a=0,b=1,c=10] = [1,undefined];//解构后a=1，b=1，c=10，b和c使用默认值
⑥字符串解构的处理
var [a,b,c] = 'hello'; //解构后a='h',b='e',c=''
2.2对象的解构赋值
对象的解构赋值与数组的解构赋值的区别是：数组是按照位置次序进行匹配的，而对象是按照属性的名称进行匹配的，不一定按照属性出现的先后次序。
①基本形式
let {a,b} = {a:'li',b:'ning'};
②左边变量是key：value的形式
let {a:b} = {a:'li',b:'ning'};
let obj = {first:'hello',last:'world'};
let {first:f,last:l} = obj;
③解构的正常情况
let {a:a,b:b} = {a:'li',b:'ning'};
//可以简化为以下形式
let {a,b} = {a:'li',b:'ning'};
2.3解构赋值的主要用途
①从函数返回多个值
函数只能返回一个值，如果需要返回多个值时，只能将返回的多个值放在数组或对象中返回，然后通过数组或对象的解构赋值，可以非常方便地取出这些值。
function ex() {
return [1,2,3]; //返回一个数组
}
let [a,b,c] = ex(); //对函数的返回值进行解构
function ex2() {
return { //返回一个对象
a:1,
b:2
};
}
let [foo,bar] = ex2();
②函数参数的定义
function arraySum([x,y,z]) {
return x+y+z;
}
③提取JSON数据
let jsonData = {
name:'lining',
age:20,
like:['羽毛球','足球']
};
//对JSON数据进行解构
let {name,age,like} = jsonData;
④遍历Map结构
window.onload=function(){
const map = new Map();
map.set('name','lining');
map.set('age',20);
const myDisplay = document.getElementById("display");
for (let [key,value] of map) {
myDisplay.innerHTML += "键名："+key+",";
myDisplay.innerHTML += "键值："+value+"<br>";
}
}
3.箭头函数
3.1箭头函数的定义
①
通常函数的定义：
function fn1(a,b){
return a+b;
}
//或者
var fn2 = function(a,b){
return a+b;
};
使用ES6箭头函数语法定义函数，将原函数的function关键字和函数名都删掉，并使用箭头“=>”连接参数列表和函数体。
(a,b) => {
return a+b;
}
//或者
var fn3 = (a,b) => {
return a+b;
};
②箭头函数的简化
⑴当函数参数只有一个时，括号可以省略，但是当没有参数时，括号不可以省略。
var fn1 = () => {} //无参数
var fn2 = a => {} //单个参数
var fn3 = (a,b) => {} //多个参数a、b
var fn4 = (a,b,...args) => {} //可变参数
⑵如果函数体只有一条return语句时，可以省略掉{}和return关键字，但当函数体包含多条语句时，不能省略{}和return关键字。
() => 'hello';
(a,b) => a+b;
(a) => {
a= a+1;
return a;
}
3.2箭头函数与解构赋值
arrowRemainder = ([i,j]) => i%j; //求余数
4.数组方法
4.1map（）方法
map（）方法用于遍历数组中的每个元素，让其作为参数执行一个指定的函数，然后将每个返回值形成一个新数组，然后将每个返回值形成一个新数组，map（）方法不改变原数组的值。
let arr = [1,2,3];
let newArr = arr.map(item=>item*2);
4.2forEach（）方法
forEach()方法是从头至尾遍历数组，为每个元素调用指定函数。该方法将改变原数组本身，并且指定调用函数的参数依次是：数组元素、元素索引、数组本身。
let arra = [1,2,3,4];
console.log('原数组：'+arra);
arra.forEach(function(element,index,arr){
arra[index] = element +1;
})
console.log('新数组：'+arra);
4.3filter（）方法
该方法对数组元素执行特定函数后返回一个子集，也称为过滤方法。该方法的入口参数是执行逻辑判断的函数，该函数的返回值是true或false，filter（）方法的结果是所执行逻辑判断函数返回为true的元素，换句话说，就是用filter（）方法过滤掉数组中不满足条件的值，返回一个新数组，不改变原数组的值。
let arr1 = [1,2,3,4];
let newArr1 = arr1.filter(item=>item%3==0);
console.log('原：'+arr1);
console.log('新：'+newArr1);
4.4every（）方法和some（）方法
every()方法和some（）方法都是对数组元素进行指定函数的逻辑判断，入口参数都是一个指定函数，方法的返回值是true和false。
①exery是将数组中的每个元素作为入口指定函数的参数，如果该函数对每个元素运行的结果都返回true，则every（）方法最后返回true，也就是说一假即假；
②some（）方法是将数组中的每个元素作为入口指定函数的参数，如果该函数只要有一个元素运行的结果返回true，则some（）方法最后返回true，也就是说一真即真。
let arr2 = [1,2,3,4];
var result = arr2.every(item=>item>0);
var result2 = arr2.some(item=>item<2);
console.log(result);
console.log(result2);
4.5reduce()方法
reduce方法接收一个函数作为累加器，使用数组中的每个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，回调函数接受四个参数。
格式：
arr.reduce((prev,cur,index,arr)=>{
//操作语句
},init);
prev表示上一次调用回调函数时的返回值或初始值init；cur表示当前正在处理的数组元素；index表示当前正在处理的数组元素的索引，若提供init，则索引为0，否则索引为1；init表示初始值。
const arr3 = [1,2,3,4,5];
const sum = arr.reduce((pre,item)=>{
return pre + item;
},0)
5.字符串的扩展
5.1模板字符串
①定义：
通常在使用字符串输出时，如果其中有变量，则需要使用字符串拼接方法进行。
myDisplay.innerHTML = "姓名：" +name+"<br>";
模板字符串是增强版的字符串，用反引号（`）标识，既可以当作普通字符使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。当引入变量时使用“${变量}”。
myDisplay.innerHTML =`姓名：${name} <br>`;
由于反引号是模板字符串的标识，如果需要在字符串中使用反引号，就需要在字符串中使用反引号，就需要对其进行转义。
var str = `\`you\`lining!`;
②模板字符串的使用：
⑴如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保存在输出中。
console.log(`I
am 20`)
⑵在“${}”中的大括号里可以放入任意的JavaScript表达式，还可以进行运算及引用对象属性等。
⑶模板字符串还可以调用函数，如果函数的结果不是字符串，则将按照一般的规则转化为字符串。
5.2ES6字符串的新增方法
①查找方法
传统的JS只有indexof和lastindexof方法，可以返回一个字符串是否包含在另一个字符串中，ES6又提供以下三个方法。
⑴includes(String,index):返回布尔值。String表示需要查找的字符串，index表示从原字符串的什么位置开始查找。该方法表示从index位置往后查找是否包含String字符串，如果找到，则返回true；否则返回false。如果没有index参数，则表示查找整个源字符串。
⑵startsWith（String，index）：返回布尔值。表示参数字符串String是否在源字符串头部，index表示从源字符串的什么位置开始查找。
⑶endsWith（String，index）：返回布尔值。表示参数字符串String是否在源字符串尾部，index表示从源字符串后面的什么位置开始查找。
let str=`http://www.fhdif.edu.cn`;
if (str.startsWith('http://')){
console.log(`${str}是普通网址`);
}
else if (str.startsWith('https://')){
console.log(`${str}是加密网址`);
}
②
③
6.Module语法
6.1Module概述
①在ES6之前，JS一直没有（Module）体系，无法将一个大型程序分解为相互依赖的小文件，再用简单的方法进行拼接起来，这对于开发大型、复杂的项目而言是巨大的障碍。
②ES6模块的设计思想是尽量静态化，静态化就是在静态分析阶段（词法分析、语法分析和语义分析等）时就能确定模块的依赖关系，以及输入和输出的变量。
③ES6模块不是对象，而是通过export命令显示指定输出的代码，再通过import命令输入。
6.2export命令
模块功能主要由两个命令构成：export和import。其中，export命令用于规定模块的对外接口；import命令用于输入其他模块提供的功能。
一个模块就是一个独立的文件，该文件内部的所有变量从外部无法获取。如果希望外部能够读取模块内部的某个变量，就必须使用export命令输出该变量。
export var m = 1;
使用大括号指定要输出的一组变量，与直接放置在var语句前是等价的，但是应该优先考虑使用大括号指定这种写法。因为这样就可以在脚本尾部看清楚输出了哪些变量。
var m = 1;
export {m};
用export输出的变量可以使用as 关键字重命名，也就是通常说的别名。
var n = 100;
export {n as l};
上面几种写法都是正确的，规定了对外的接口l。其他脚本可以通过这个接口，获取的m值为1.其实质就是在接口名与模块内部变量之间建立了一一对应的关系。
export命令可以出现在模块顶层的任何位置。如果处于块级作用域内，就会报错，这是因为处于条件代码块中就没法做静态优化，违背了ES6设计的初衷。
6.3import命令
使用export命令定义了模块的对外接口之后，其他js文件可以通过import命令加载这个模块。
import {firstName,lastName} from "./profile";
①import命令用于加载profile.js文件并从中导入变量。import命令接受一个对象（用大括号表示），其中指定要从其他模块导入的变量名，大括号中的变量名必须与被导入模块对外接口的名称相同。
②import后面的from指定模块文件的位置，可以是相对路径，也可以是绝对路径；如果只是模块名不带有路径，那么必须有配置文件。
③由于import是静态执行，所以不能使用表达式和变量，这些是只有在运行时才能得到结果的语法结构。import命令会执行所加载的模块，但不会输入任何值，并且即使多次重复执行同一import语句，也仅会执行一次。
6.4export default 命令
为了给用户提供方便，不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出。
//export-default.js
export default function(){
console.log('lining');
}
其他模块加载该模块时，import命令可以为该匿名函数指定任意名字，例如：
import cName from './export-default';
cName();
上面代码中的import命令可以用任意名称指向export-default.js输出的方法，这时就不需要知道原模块输出的函数名。需要说明的是，此时import命令后面不使用大括号。
export default命令用于指定模块的默认输出，一个模块只能有一个默认输出，因此export default命令只能使用一次。
7.JSON&Map
7.1JSON概述
JSON是一种轻量级的数据交换格式，是基于ECMAScript的一个子集，采用完全独立于编程语言的文本格式存储和表示数据。简介和清晰的层次结构使JSON称为理想的数据交换语言，易于阅读和编写，同时也易于机器解析和生成，可以有效地提升网络传输效率。
JSON就是一个字符串，只不过元素会使用特定的符号标注。主要符号有：
①{}：表示对象
②[]表示数组
③“”其中的值是属性或值
④：冒号表示后者是前者的值
JSON语法的规则中把数据放在“键/值”对中，并且多个数据之间用逗号隔开。其中，对象用大括号括起来，并且由逗号分割的成员构成；成员由冒号分隔的键值对组成。
JSON有对象和数组两种组织方式。
①数组方式
[1,2,3,4,5,6,7,8,9]
②对象方式
定义一个学生对象
{
"name":"lining",
"age":18
"address":{
"country":"China",
"zip-code":"123456789000"
}
}
注意事项：
①数组或对象中的字符串必须使用双引号，不能使用单引号。
②对象的成员名称必须使用双引号
③数组或对象最后一个成员的后面不能加逗号。
④数组或对象的每个成员的值可以是简单值，也可以是复合值。简单值分为：字符串，数值，布尔值和null。复合值分为：符合JSON格式的对象和和符合JSON格式的数组。
7.2JSON使用
JSON可以将JS对象中表示的一组数据转换为字符串，然后就可以在网络或程序之间轻松地传递这个字符串，并在需要时将其还原为各编程语言所支持的数据格式。
js可以直接处理JSON数据，例如：
student.name;
student.address.country;
也可以直接修改数据：
student.name = "li hua";
①从JSON字符串转换为JS对象使用JSON.parse（）
var obj = JSON.parse('{"a":"hello","b":"world"}');//结果是：{"a":"hello","b":"world"}
②从JS对象转换为JSON字符串可以使用JSON.stringfy()
var json = JSON.stringify({"a":"hello","b":"world"});//结果是：'{"a":"hello","b":"world"}'
7.3Map数据结构
①Map数据结构的特点
JS中的Object本质上是键值对的集合，只能用字符串来做键，这给使用带来了极大地限制。为此，ES6提供了Map数据结构。其类似于Object，也是键值对的集合，但其“键”的范围不仅限于字符串，而是各种类型的键都可以做键。Object提供了“字符串-值”的结构，Map则提供的是“值-值”的对应。是一种更加完善的Hash结构实现。如果需要使用“键值对”的数据结构，Map比Object更合适。
Map是ES6提供的一种字典数据结构。字典就是用来存储不重复键的Hash结构。不同于集合的是字典使用键值对的形式存储数据。
const map = new Map(); //定义map
map.set('age',20); //通过set方法设置map属性值
console.log(map.get('age')); //通过get方法获取map属性值，此处返回20
②Map的常用属性和方法
⑴size属性。size用于返回Map结构的成员总数。
const myMap = new Map();
myMap.set('foo',true);
myMap.set('bar',false);
myMap.size //返回值是2
⑵set(key,value)方法。set()方法用于设置键名key对应的键值为value，然后返回整个Map结构。如果key已经有值，则键值会被更新，否则就新生成该键。
const m = new Map();
m.set('age',90); //键是字符串
m.set('255','lining');//键是数值
m.set('undefined','hh')//键是undefined
set方法返回的是当前的Map对象，因此可以采用链式写法
let mp = new Map().set(1,'a').set(2,'b').set(3,'c');
⑶get(key)方法。get方法用于读取key对应的键值，如果找不到key，则返回undefined
let mp = new Map().set(1,'a').set(2,'b').set(3,'c');
mp.get(1) //返回'a'
⑷has（key）方法。返回一个布尔值，表示某个键是否在当前Map对象中
⑸delete（key）方法用于删除某个键。如果删除成功，则返回true，否则返回false
const ma = new Map();
ma.set('age',20);
ma.delete(age); //返回true
⑹clear方法用于清楚数据，没有返回值
const myMap = new Map();
myMap.set('foo',true);
myMap.set('bar',false);
myMap.size //返回值是2
myMap.clear();
myMap.size //返回值是0
⑺Map循环遍历。Map结构原生提供以下三个遍历器生成函数和一个遍历方法。
keys():返回键名的遍历器。
values();返回键值的遍历器。
entires():返回所有成员的遍历器。
forEach():遍历Map的所有成员。
let map1 = new Map([[1,'one'],[2,'two'],[3,'three']]);
console.log([...map1.keys()]);
console.log([...map1.values()]);
console.log([...map1.entries()]);
map1.forEach((key,value) => console.log(key+":"+value));
③Map与JSON相互转换
⑴Map转换为JSON
map => {
return JSON.stringify([...map]);
}
⑵Json转换为Map
jsonStr => {
return new Map(JSON.parse(jsonStr))
}
8.Promise对象
8.1Promise对象的含义
Promise是异步编程的一种解决方案，从语法上说，Promise是一个对象，可以获取异步操作的消息。Promise对象用于一个异步操作的最终完成（或失败）及其结果值的表示。简单点说就是用于处理异步操作的，如果异步成功了，就执行成功的操作；如果异步失败了，就捕获错误或停止后续操作。
Promise的一般表示形式为：
new Promise(
//executor
(resolve,reject) => {
if(tiaojian){ //条件为真
//执行代码
resolve();
}else{ //条件为假
//执行代码
reject();
}
}
)
参数executor是一个用于实现异步操作的执行器函数，其有两个参数：resolve函数和reject函数。如果异步成功，则调用resolve函数将该实例的状态设置为fulfilled，即已经完成的状态；如果失败，则调用reject函数将该实例状态设置为rejected，即失败的状态。
⑴pending：初始状态，也称为未定状态，就是初始化Promise时，调用executor执行器函数后的状态。
⑵fulfilled：完成状态，意味着异步操作成功。
⑶rejected：失败状态，意味着异步操作失败。
Promise对象只有两种状态可以转化：
⑴操作成功：将pending状态转化为fulfilled状态。
⑵操作失败：将pending状态转化为rejected状态
并且这个状态转化是单向的且不可逆的，已经确定的状态无法转回初始状态。
8.1Promise对象的方法
①Promise.prototype.then()
Promise对象含有then（）方法，调用then方法后返回一个Promise对象，意味着实例化后的Promise对象可以进行链式调用，而且这个then（）方法可以接收两个函数：一个是处理成功后的函数；另一个是处理失败后的函数。
var promise1 = new Promise((resolve,reject)=>{
//2秒后置为接收完成状态
setTimeout(()=>{
resolve('success'); //转为完成状态，并传入数据success
},2000);
});
promise1.then(function(data){
console.log(data); //异步操作成功，调用第一个回调函数
},function(err){
console.log(err); //异步操作失败，调用第二个回调函数
}).then(function(data){
console.log('链式调用：'+data);
});
②Promise.protype.catch()
catch方法和then()方法一样，都会返回一个新的Promise对象，主要用于捕获异步操作时出现的异常。因此通常省略then（）方法的第二个参数，把错误处理控制权转交给其后面的catch（）方法。
var promise2 = new Promise((resolve,reject)=>{
//2秒后置为拒绝状态
setTimeout(()=>{
reject('reject');
},2000);
});
Promise2.then(function(data){
console.log('这里是fulfilled状态'); //已转为拒绝状态，接收状态函数不会触发
//...
}).catch(function(err){
//使用最后的catch()方法可以捕获在这一条Promise链上的异常
console.log('出错:'+err); //err中的数据是reject，输出结果为出错：reject
});
829
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
