]functionadd2(...args){console.log(args);//['a','b','c']console.log(arguments);//Arguments(3)['a','b','c',callee:(...),Symbol(Symbol.iterator):]}add2("a","b","c");letarr=[1,2,3,4,5,6,7,8,9]letmax=Math.max(...arr)//此处如果传入arr将会报错console.log(max)//9//参数接收的arguments为伪数组，而...keys为真正的数组扩展运算符可以用来合并数组(两种方法都是浅拷贝)constarr1=['a','b'];constarr2=['c'];constarr3=['d','e'];//ES5的合并数组arr1.concat(arr2,arr3);//['a','b','c','d','e']//ES6的合并数组[...arr1,...arr2,...arr3]//['a','b','c','d','e']扩展运算符与解构赋值结合const[first,...rest]=[1,2,3,4,5];first//1rest//[2,3,4,5]const[first,...rest]=[];first//undefinedrest//[]const[first,...rest]=["foo"];first//"foo"rest//[]如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错

const[...butLast,last]=[1,2,3,4,5];//报错const[first,...middle,last]=[1,2,3,4,5];//报错将字符串转为数组[...'hello']//["h","e","l","l","o"]

数组的空位指，数组的某一个位置没有任何值。比如，Array构造函数返回的数组都是空位

Array(3)//[,,,]ES5不识别空位ES6将空位转为undefind扩展运算符（...）也会将空位转为undefinedcopyWithin()会连空位一起拷贝for...of循环也会遍历空位。

Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-likeobject）和可遍历（iterable）的对象（包括ES6新增的数据结构Set和Map）。

letarrayLike={'0':'a','1':'b','2':'c',length:3};//ES5的写法vararr1=[].slice.call(arrayLike);//['a','b','c']//ES6的写法letarr2=Array.from(arrayLike);//['a','b','c']//NodeList对象letps=document.querySelectorAll('p');//获取所有的p标签Array.from(ps).filter(p=>{//from转换为数组filter将不符合要求的p元素从数组中去除returnp.textContent.length>100;});//arguments对象functionfoo(){varargs=Array.from(arguments);//将参数存储的伪数组转换为真正的数组}//将字符串转换为数组Array.from('hello')//更建议使用{...str}的方法//['h','e','l','l','o']

Array.copyWithin(target,start=0,end=this.length)//target（必需）：从该位置开始替换数据。如果为负值，表示倒数。//start（可选）：从该位置开始读取数据，默认为0。如果为负值，表示从末尾开始计算。//end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示从末尾开始计算。

数组实例的find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。

[1,4,-5,10].find((n)=>n<0)//-5find方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。

[1,5,10,15].find(function(value,index,arr){returnvalue>9;})//10

数组实例的findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1

fill方法使用给定值，填充一个数组。数组中已有的元素，会被全部抹去。

['a','b','c'].fill(7)//[7,7,7]newArray(3).fill(7)//[7,7,7]fill方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。

['a','b','c'].fill(7,1,2)//['a',7,'c']注意，如果填充的类型为对象，那么被赋值的是同一个内存地址的对象，而不是深拷贝对象。

传入一个值时

[1,2,3].includes(2)//true[1,2,3].includes(4)//false[1,2,NaN].includes(NaN)//true该方法的第二个参数表示搜索的起始位置，默认为0。如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为-4，但数组长度为3），则会重置为从0开始。

[1,2,3].includes(3,3);//false[1,2,3].includes(3,-1);//true从倒数第一位开始找

用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响。

[1,2,[3,4]].flat()//[1,2,3,4]默认只会“拉平”一层，如果想要“拉平”多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层数，默认为1。

[1,2,[3,[4,5]]].flat()//[1,2,3,[4,5]][1,2,[3,[4,5]]].flat(2)//[1,2,3,4,5]如果不管有多少层嵌套，都要转成一维数组，可以用Infinity关键字作为参数。

[1,[2,[3]]].flat(Infinity)//[1,2,3]如果原数组有空位，flat()方法会跳过空位。

[1,2,,4,5].flat()//[1,2,4,5]

entries()，keys()和values()——用于遍历数组。它们都返回一个遍历器对象可以用for...of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。

entries()

for(letindexof['a','b'].keys()){console.log(index);}//0//1for(letelemof['a','b'].values()){console.log(elem);}//'a'//'b'for(let[index,elem]of['a','b'].entries()){console.log(index,elem);}//0"a"//1"b"

在大括号里面，直接写入变量和函数，作为对象的属性和方法。

旧方法定义对象属性：

//方法一obj.foo=true;//方法二obj['a'+'bc']=123;//方法三varobj={foo:true,abc:123};允许字面量定义对象时，用方法二（表达式）作为对象的属性名，即把表达式放在方括号内。

letpropKey='foo';letobj={[propKey]:true,//foo:true['a'+'bc']:123,//abc:123['h'+'ello'](){//hello:function(){}return'hi';}};注意，属性名表达式如果是一个对象，默认情况下会自动将对象转为字符串[objectObject]，这一点要特别小心。

constkeyA={a:1};constkeyB={b:2};constmyObject={[keyA]:'valueA',[keyB]:'valueB'};myObject//Object{[objectObject]:"valueB"}

constperson={sayName(){console.log('hello!');},};person.sayName.name//"sayName"

this关键字总是指向函数所在的当前对象，ES6又新增了另一个类似的关键字super，指向当前对象的原型对象。

对象的扩展运算符（...）用于取出参数对象的所有可遍历属性，拷贝到当前对象之中。

letz={a:3,b:4};letn={...z};n//{a:3,b:4}由于数组是特殊的对象，所以对象的扩展运算符也可以用于数组。

letfoo={...['a','b','c']};foo//{0:"a",1:"b",2:"c"}

解构赋值

let{x,y,...z}={x:1,y:2,a:3,b:4};x//1y//2z//{a:3,b:4}//解构赋值要求等号右边是一个对象，所以如果等号右边是undefined或null，就会报错，因为它们无法转为对象。//解构赋值必须是最后一个参数，否则会报错。//解构赋值为浅拷贝！

它用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致。

+0===-0//trueNaN===NaN//falseObject.is(+0,-0)//falseObject.is(NaN,NaN)//true

将源对象（source）的所有可枚举属性，复制到目标对象（target）。

consttarget={a:1};constsource1={b:2};constsource2={c:3};Object.assign(target,source1,source2);target//{a:1,b:2,c:3}第一个参数是目标对象，后面的参数都是源对象。注意，如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。如果该参数不是对象，则会先转成对象，然后返回。

剩余操作符：...

写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值

let[foo,[[bar],baz]]=[1,[[2],3]];foo//1bar//2baz//3let[,,third]=["foo","bar","baz"];third//"baz"let[x,,y]=[1,2,3];x//1y//3let[head,...tail]=[1,2,3,4];head//1tail//[2,3,4]let[x,y,...z]=['a'];x//"a"y//undefinedz//[]//不完全解构let[x,y]=[1,2,3];x//1y//2let[a,[b],d]=[1,[2,3],4];a//1b//2d//4解构赋值允许默认值

let[foo=true]=[];foo//truelet[x,y='b']=['a'];//x='a',y='b'let[x,y='b']=['a',undefined];//x='a',y='b'//注意，ES6内部使用严格相等运算符（===），判断一个位置是否有值。所以，只有当一个数组成员严格等于undefined，默认值才会生效//上面代码中，如果一个数组成员是null，默认值就不会生效，因为null不严格等于undefined例：let[x=1]=[undefined];x//1let[x=1]=[null];x//null

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值

let{bar,foo}={foo:'aaa',bar:'bbb'};foo//"aaa"bar//"bbb"let{baz}={foo:'aaa',bar:'bbb'};baz//undefined//对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。let{foo:baz}={foo:'aaa',bar:'bbb'};baz//"aaa"//上面代码中，foo是匹配的模式，baz才是变量。真正被赋值的是变量baz，而不是模式foo。//与数组一样，解构也可以用于嵌套结构的对象letobj={p:['Hello',{y:'World'}]};let{p:[x,{y}]}=obj;x//"Hello"y//"World"//默认值var{x=3}={};x//3var{x,y=5}={x:1};x//1y//5var{x:y=3}={};y//3var{x:y=3}={x:5};y//5

//错误的写法letx;{x}={x:1};//SyntaxError:syntaxerror上面代码的写法会报错，因为JavaScript引擎会将{x}理解成一个代码块，从而发生语法错误。只有不将大括号写在行首，避免JavaScript将其解释为代码块，才能解决这个问题

//正确的写法letx;({x}={x:1});

字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。

const[a,b,c,d,e]='hello';a//"h"b//"e"c//"l"d//"l"e//"o"let{length:len}='hello';len//5

JavaScript标准中规定对象的key只能是String或Symbol类型，区别在于String类型的key可以重复而Symbol类型的key是唯一的。Symbol的本质是表示一个唯一标识。每次创建一个Symbol，它所代表的值都不可能重复

constsym=Symbol();constsym=Symbol('cat');//传入一个字符串参数（descriptor）用于描述该Symbol：console.log(sym)//Symbol(cat)最大的用途就是用来定义对象的私有属性

constname=Symbol("name");constname2=Symbol("name");console.log(name===name2);//false//其内存地址不相同Symbol属性无法正常遍历不易操作,因此不常用

获取Symbol属性可以使用特定的方法Object.getOwnPropertySymbols()

varObj={}vara=Symbol("a");Obj[a]='123'varobjectSymbols=Object.getOwnPropertySymbols(Obj);console.log(objectSymbols.length)//1console.log(objectSymbols)//[Symbol(a)]

获取Symbol属性也可以使用反射

constname=Symbol("name");constage=Symbol("age");letperson={[name]:"张三",[age]:"10",sex:"男"};letkk=Reflect.ownKeys(person);//遍历键console.log(kk);//Array(3)["sex",Symbol(name),Symbol(age)]for(leti=0;i

Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果

Promise对象的特点：

1.对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。

2.一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种情况：进行中到已成功、进行中到已失败。只要这两种情况发生，状态就凝固了，不会再改变。

Promise对象的缺点：1.无法取消Promise一旦新建它就会立即执行，无法中途取消。2.如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。3.当处于pending（进行中）状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

ES6规定，Promise对象是一个构造函数，用来生成Promise实例。

//创建promise对象varmyFirstPromise=newPromise(function(resolve,reject){//当异步代码执行成功时，我们才会调用resolve(...),当异步代码失败时就会调用reject(...)//在本例中，我们使用setTimeout(...)来模拟异步代码，实际编码时可能是XHR请求或是HTML5的一些API方法.setTimeout(function(){resolve("成功!");//代码正常执行！},250);});myFirstPromise.then(function(successMessage){//successMessage的值是上面调用resolve(...)方法传入的值.//successMessage参数不一定非要是字符串类型，这里只是举个例子document.write("Yay!"+successMessage);});//创建promise对象letp=newPromise((resolve,reject)=>{setTimeout(()=>{//模拟异步操作reject('失败');resolve('成功')},2000);})p.then((res)=>{console.log(res);//成功})对于已经实例化过的promise对象可以调用promise.then()方法，传递resolve和reject方法作为回调。

then()方法返回一个Promise。它最多需要有两个参数：Promise的成功和失败情况的回调函数。

then方法可以链式操作

constpromise1=newPromise((resolve,reject)=>{resolve('Success!');//成功时返回reject('error!');//失败时返回});promise1.then((value)=>{//接收返回值console.log(value);//expectedoutput:"Success!"});语法：promise.then(onCompleted,onRejected);参数：

resolve（）方法可以把任何对象转化成Promise对象

letp=Promise.resolve("啊哈哈");letp=newPromise(resolve=>resolve("foo"));p.then((res)=>{console.log(res);})Promise.resolve('foo')//等价于newPromise(resolve=>resolve('foo'))如果参数是Promise实例，那么Promise.resolve将不做任何修改、原封不动地返回这个实例。

参数是一个thenable对象,(thenable对象指的是具有then方法的对象),会将这个对象转为Promise对象，然后就立即执行thenable对象的then方法。

参数不是具有then方法的对象，或根本就不是对象,方法返回一个新的Promise对象，状态为resolved。

不带有任何参数,方法允许调用时不带参数，直接返回一个resolved状态的Promise对象。

返回一个新的Promise实例，该实例的状态为rejected。

constp=Promise.reject('出错了');//等同于constp=newPromise((resolve,reject)=>reject('出错了'))p.then(null,function(s){console.log(s)});//出错了注意，Promise.reject()方法的参数，会原封不动地作为reject的理由，变成后续方法的参数。这一点与Promise.resolve方法不一致。

用于将多个Promise实例，包装成一个新的Promise实例。

constp=Promise.all([p1,p2,p3]);//p1p2p3都是promise实例//如果不是，就会先调用下面讲到的Promise.resolve方法，将参数转为Promise实例，再进一步处理。另外，Promise.all()方法的参数可以不是数组，但必须具有Iterator接口，且返回的每个成员都是Promise实例。p的状态由p1、p2、p3决定，分成两种情况:（1）只有p1、p2、p3的状态都变成fulfilled(成功)，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。

（2）只要p1、p2、p3之中有一个被rejected（失败），p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。

注意，如果作为参数的Promise实例，自己定义了catch方法，那么它一旦被rejected，并不会触发Promise.all()的catch方法。（执行自己的catch）

Promise.prototype.catch()方法是.then(null,rejection)或.then(undefined,rejection)的别名，用于指定发生错误时的回调函数。

getJSON('/posts.json').then(function(posts){//...}).catch(function(error){//处理getJSON和前一个回调函数运行时发生的错误console.log('发生错误！',error);});上面代码中，getJSON()方法返回一个Promise对象，如果该对象状态变为resolved，则会调用then()方法指定的回调函数；如果异步操作抛出错误，状态就会变为rejected，就会调用catch()方法指定的回调函数，处理这个错误。另外，then()方法指定的回调函数，如果运行中抛出错误，也会被catch()方法捕获。

Promise.race()方法同样是将多个Promise实例，包装成一个新的Promise实例。

上面代码中，只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的Promise实例的返回值，就传递给p的回调函数。

constp=Promise.race([fetch('/resource-that-may-take-a-while'),newPromise(function(resolve,reject){setTimeout(()=>reject(newError('requesttimeout')),5000)})]);p.then(console.log).catch(console.error);//如果5秒之内fetch方法无法返回结果，变量p的状态就会变为rejected，从而触发catch方法指定的回调函数。

表示无重复数值的有序列表，不是键值对的形式存储

varset=newSet();set.add(666);set.add("哈哈");set.add("张三");set.add("张三");set.add("张三");set.add("张三");console.log(set);//666哈哈张三console.log(set.has(666));//是否有666trueconsole.log(set.delete(222));//删除集合中的222false集合中没有222set集合中键就是值值就是键所以一般不用forEach遍历

set.forEach((v,k)=>{console.log(k,v);})//666666//哈哈哈哈//张三张三可以使用for...of遍历

for(constvofset){console.log(v);}//666//哈哈//张三因为set集合为没有重复数值的有序列表，所以可以用来数组去重

letarr=[1,1,2,2,3,4,5,6,7,7]letset=newSet(arr)//将数组转为set集合console.log(set)//此时打印的set集合已经没有重复vararr1=[...set]//将set集合转为数组console.log(arr1)//打印去重后的新数组

Map集合是键值对的有序列表,键和值是任意类型

lethaha=newMap();//存值haha.set("name","张三");haha.set("age",10);console.log(haha);//Map(2){'name'=>'张三','age'=>10}console.log(haha.get("name"));//张三获取nameconsole.log(haha.has("name"));//true是否有nameconsole.log(haha.delete("name"));//true删除name键值对其他写法

letm=newMap([["a",1],["b",2]]);console.log(m);//Map(2){'a'=>1,'b'=>2}

用于对象，for...of用于所有可迭代对象

for...in语句用于对象的属性进行循环操作。其语法如下：for(vark(变量名)in对象名字){//变量==对象中所有的属性名console.log(对象名[k])//在此执行代码，ls[k]为属性值}varobj={a:1,b:2,c:3};for(varpropinobj){console.log("obj."+prop+"="+obj[prop]);}

constarray1=['a','b','c'];for(constelementofarray1){console.log(element);}//a//b//c

现在有数组、对象、Map、Set、四种数据组合，他们还可以互相嵌套。需要一个统一的接口机制，来处理所有的数据结构遍历器（Iterator）就是这样一种机制

Iterator的作用有三个：一是为各种数据结构，提供一个统一的、简便的访问接口；二是使得数据结构的成员能够按某种次序排列；三是ES6创造了一种新的遍历命令for...of循环，Iterator接口主要供for...of消费

vararr=['a','b','c']letit=arr[Symbol.iterator]();//人为创建迭代器console.log(it.next());//创建迭代器后可以异步迭代console.log(it.next());console.log(it.next());//注意：迭代器要用第三方变量接，不然每一次调用next()都相当于第一次调用注意：有迭代器Iterator才能使用迭代上面的代码人为创建了一个迭代器下面的keys()values()entries()方法使用后自动创建了迭代器。可以直接迭代

1.迭代器是一个接口,能快捷的访问数据,通过Symbol.iterator来创建迭代器,通过迭代器的next()方法来获取迭代之后的结果.2.迭代器是用于遍历数据结构的指针(数据库的游标)

keys()values()entries()方法的使用：

letarr=[666,222,33,55];letit=arr.keys();//使用keys()后数组有可迭代的接口（Interator接口），可以用来迭代console.log(it);console.log(it.next());//迭代letit=arr.values();//使用values()后数组有可迭代的接口，可以用来迭代console.log(it);console.log(it.netx());//迭代letit=arr.entries();//使用entries()后数组有可迭代的接口，可以用来迭代console.log(it);console.log(it.next());//迭代

Object.keys()方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致

generator函数,可以通过yield关键字键函数挂起(让函数停留在当前的位置)为了改变执行流提供了可能,同时为了做异步编程提供了可能

genertor函数没有执行器，需要next()方法来调用。generator函数的返回值是Iterator（迭代器）

1.function后面函数名之前有一个*2.只能在函数内部使用yield表达式，让函数挂起

function*fun(){console.log(111);//执行第一次yield1;//停止1为next()方法返回的valueconsole.log(222);//执行第二次yield2;//再次停止console.log(333);//执行第三次}//调用的时候返回一个类似迭代器对象,可以调用next()方法//generator函数分段执行的，yield是暂停执行，然而next()是恢复执行varit=fun()//要用第三方变量接函数，不然每一次直接调用都为第一次调用console.log(it.next());//111{value:1,done:false}console.log(it.next());//222{value:2,done:false}console.log(it.next());//333{value:undefined,done:true}//value为yield返回的值done为函数是否运行结束调用时利用next()传参

function*fun2(){console.log("start");letx=yield'第一次暂停';console.log("第二个next传递的参数为："+x);lety=yield'第二次暂停';console.log("第三个next传递的参数为：:"+y);}letit=fun2();console.log(it.next());//start{value:'第一次暂停',done:false}console.log(it.next(10));//第二个next传递的参数为：10{value:'第二次暂停',done:false}console.log(it.next(30));//第三个next传递的参数为：:30{value:undefined,done:true}//注意：x不是yield的返回值next将参数传递给yield后赋给x使用场景：为不具备Interator接口的对象提供了遍历操作

当页面未加载时展示UI加载完成后展示另一个UI

async函数实际上就是Generator函数的语法糖（语法的简易写法）

async函数就是将Generator函数的星号（*）替换成async，将yield替换成await，仅此而已。

例：

asyncfunctionfun(){//varerr=newError('出现错误');//throwerr;returnawait"你好async";}varp=fun()p.then(res=>{console.log(res);//若没有错误，在此打印}).catch(err=>{//若出现错误，被catch捕捉console.log(err);//在此打印错误})例：

functiontimeout(ms){returnnewPromise((resolve)=>{//resolve在此处传递的是Promise是否执行成功//varerr=newError('运行出现错误')//throwerr;//当出现错误的时候，停止在下端await不继续执行setTimeout(resolve,ms);});}asyncfunctionasyncPrint(value,ms){awaittimeout(ms);//await在此做了同步化处理。若没有await使其等待，则会先执行打印console.log(value);}asyncPrint('helloworld',2000);async函数内部return语句返回的值，会成为then方法回调函数的参数。

async函数内部抛出错误，会导致返回的Promise对象变为reject状态。抛出的错误对象会被catch方法回调函数接收到。

正常情况下，await命令后面是一个Promise对象，返回该对象的结果。如果不是Promise对象，就直接返回对应的值。上面代码中，await命令的参数是数值"你好async"，这时等同于return"你好async"。

async函数返回的Promise对象，必须等到内部所有await命令后面的Promise对象执行完，才会发生状态改变，除非遇到return语句或者抛出错误。也就是说，只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数。`

async函数对Generator函数的改进，体现在以下四点：

async函数返回一个Promise对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。

functionPerson(name,age){this.name=name;//所有被构造函数创建的对象都会有的属性this.age=age;}Person.prototype.say=function(){//通过原型链，可以给所有被创建的对象添加方法console.log(`你好我是${this.name}`);}letxm=newPerson("小明",10);xm.say()functionPerson(name,age){this.name=name;this.age=age;this.say=function(){console.log(`你好我是${this.name}`);//通过this创建的say方法只是构造函数拥有，构造函数创建的对象不拥有}}letxm=newPerson("小明",10);xm.say()

classStudent{constructor(name,age){this.name=name;this.age=age;}say(){console.log(`你好我是${this.name}`);}skill(){console.log(`${this.name}会打乒乓球`);}}letzs=newStudent("张三",30)//通过类创建的对象，可以直接使用say()skill()方法letls=newStudent("李四",30)zs.say();ls.skill();

使用关键字extends继承

super关键字用于访问和调用一个对象的父对象上的函数。

在构造函数中使用时，super关键字将单独出现，并且必须在使用this关键字之前使用。super关键字也可以用来调用父对象上的函数。

一个模块就是一个独立的JS文件ES6的模块功能主要由两个命令构成：esport暴漏（抛出）、import（）

在需要被暴漏的模块中：

letname="李四";letage=10;letadd=(a,b)=>{returna+b;}constcontent={name:"张三",age:10,add(a=0,b=0){returna+b;}}//暴露（抛出）export{name,age,add}//export{content}在引入模块的文件内：注意：在引入模块的文件内，script标签的type=‘module’不然会报错

//第一种写法import{content,name}from"./modules/Module1.js";console.log(name);//李四//第二种写法import*asffrom'./modules/Module1.js'//任意命名f，暴漏的所有数据都在f对象内//引用可以这样写：console.log(f.name)//李四注意：需要暴露什么写什么，需要接收什么写什么

ES5中请求模块用require

exportdefault命令，为模块指定默认输出。

constname="张三";constage=18;constobj={name:"大豆"}export{name,age,sayName,Person,obj}exportdefaultobj//此为默认输出在引入模块的文件内：

import*asffrom'./modules/Module2.js'//f为自定义命名//console.log(f)//f内为export暴漏的所有数据importafrom'./modules/Module2.js'//a为自定义命名console.log(a)//a内为默认暴漏的数据

INSERTINTOuser(user_name,user_phone,user_psw)VALUES('康新洋','18220550304','123456')插入在user表中插入的键为user_name,user_phone,user_pwd插入的值为...

SELECT*FROM`user`SELECT*FROMuserWHEREuser_name='苏倩文'SELECT*FROM`user`WHEREid=5select*fromuserwherephone=变量oremail=变量select*fromuserwhere(phone=变量oremail=变量）andpassword=变量查询名为user的数据库查询user库中user_name为苏倩文的查询user库中id为5的

DELETEFROMuserWHEREid=6DELETEFROMuserWHEREuser_name='赵阳'更新（更改）UPDATE`user`SET`user_phone`='18220550308'WHEREuser_name='茹小龙'设置新的手机号在user_name为如小龙的数据下

需要安装Node环境。

在浏览器打开输入localhost:端口号或IP地址:端口号

此处为查询操作if(req.url==="favicon.ico"){return};//阻止重复请求（放在服务器下）

//请求mysql模块constmysql=require('mysql')//mysql模块不是内置模块，在git中输入npminstallmysql--save下载模块//创建链接（与sql）constconnection=mysql.createConnection({//地址host:'localhost',//sql的用户名密码user:'root',password:'root',//数据库名database:'web2137',multipleStatements:true//支持执行多条sql语句})//链接connection.connect();//sql查询语句letsql='select*fromuser'//查询connection.query(sql,(error,result)=>{if(error){throwerror;}console.log(result);//process.exit(1);//关闭服务器代码})//运行此文件前先打开阿帕奇与sql数据库//运行此文件在git中输入：//node文件名//运行此文件为nodeselect_node.js//运行服务器后需要关闭服务器JS代码为process.exit(1);//或在git中ctrl+c关闭服务器在git中输入npminstallmysql--save下载模块mysql（npm为外网）在git中输入cnpminstallmysql--save下载模块mysql（cnpm为国内网站）

sql模块中的end()方法为结束数据库操作

varapp={name:'app',version:'1.0.0',sayName:function(name){console.log(this.name);}}module.exports=app;//将app暴漏，可以调用模块//调用方法varapp=require('./app.js');app.sayName('hello');//hello封装的db数据库模块

constmysql=require('mysql');module.exports=(sql,callback)=>{constdb=mysql.createConnection({host:'localhost',user:'root',password:'root',database:'web2137'});db.connect();db.query(sql,callback);db.end();};

get:

尝试后发现，数据库的增删改查只是其中的sql语句发生了改变，所以将其余部分做个封装

封装部分：

constmysql=require('mysql');module.exports=(sql,callback)=>{constdb=mysql.createConnection({host:'localhost',user:'root',password:'root',database:'web2137'});db.connect();db.query(sql,callback);db.end();};引用部分：

首先创建一个基础框架,同时参考菜鸟express安装教程与express官网安装教程安装

路由决定了由谁(指定脚本)去响应客户端请求。在HTTP请求中，我们可以通过路由提取出请求的URL以及GET/POST参数。

Express提供了内置的中间件express.static来设置静态文件如：图片，CSS,JavaScript等。

app.use('/public',express.static('public'));///public为静态文件的访问路径

get接口中res.query为所有传入的数据

constexpress=require('express');constapp=express();app.use('/public',express.static('public'));app.get('/',(req,res)=>{letdata={name:'aaa'}//res.end('123');//res.send(data);res.json(data);})app.get('/list',(req,res)=>{res.end('list');})//接口app.get('/huoqu',(req,res)=>{//接口地址为/huoqu//letdata=req.queryletuser_name=req.query.user_name;letuser_psw=req.query.user_psw;letdata={user_name:user_name,user_psw:user_psw}res.send(data);});app.listen(3000);console.log(666);传输网页为

post接口中res,body为所有传入的数据

constexpress=require('express');constapp=express();//初始化express对象app.use('/public',express.static('public'));//静态文件地址varbodyParser=require('body-parser');//引入编码模块//创建application/x-www-form-urlencoded编码解析varurlencodedParser=bodyParser.urlencoded({extended:false})//post接口app.post('/denglu',urlencodedParser,function(req,res){res.send({code:1,msg:'登陆成功',user_name:req.body.user_name,user_psw:req.body.user_psw});//输出JSON格式//varresponse={//"first_name":req.body.first_name,//"last_name":req.body.last_name//};//console.log(response);//res.end(JSON.stringify(response));})app.listen(3000);console.log(666);html部分

npminstall-gnodemon//安装nodemonindex.js//热启动index.js

//解决跨域问题app.all("/*",function(req,res,next){//跨域处理res.header("Access-Control-Allow-Origin","*");res.header("Access-Control-Allow-Headers","X-Requested-With");res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");res.header("X-Powered-By",'3.2.1');res.header("Content-Type","application/json;charset=utf-8");next();//执行下一个路由})放在app.js文件内所有的路由都不会跨域放在单独的路由文件内，只有该文件内的路由不会跨域

app.use((req,res,next)=>{//设置请求头res.set({'Access-Control-Allow-Credentials':true,'Access-Control-Max-Age':1728000,'Access-Control-Allow-Origin':req.headers.origin||'*','Access-Control-Allow-Headers':'X-Requested-With,Content-Type','Access-Control-Allow-Methods':'PUT,POST,GET,DELETE,OPTIONS','Content-Type':'application/json;charset=utf-8'})req.method==='OPTIONS'res.status(204).end():next()})

新创建的模块(maileConfig.js)内nodemailer模块需要下载

index.js接口部分

Vue2.0安装vue-cli

查看vue.js的版本——vue-V（注意后面的V是大写的，需要安装完cue-cli脚手架之后才能查看的到）安装最新vue.js——npminstallvueg

mode:（类型）默认值："hash"(浏览器环境)|"abstract"(Node.js环境)可选值："hash"|"history"|"abstract"

匹配路由环境：hash:使用URLhash值来作路由。支持所有浏览器，包括不支持HTML5HistoryApi的浏览器。history:依赖HTML5HistoryAPI和服务器配置(下面介绍HTML5History模式)abstract:支持所有JavaScript运行环境，如Node.js服务器端。如果发现没有浏览器的API，路由会自动强制进入这个模式。

HTML5History模式vue-router默认hash模式——使用URL的hash来模拟一个完整的URL，于是当URL改变时，页面不会重新加载。

如果不想要很丑的hash，我们可以用路由的history模式，这种模式充分利用history.pushStateAPI来完成URL跳转而无须重新加载页面。

所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果URL匹配不到任何静态资源，则应该返回同一个index.html页面，这个页面就是你app依赖的页面。

在src的router的index.js中

importVuefrom'vue'importRouterfrom'vue-router'importfatherfrom'@/components/father'Vue.use(Router)exportdefaultnewRouter({mode:'history',//添加此句去除#routes:[{path:'/',name:'father',component:father}]})

可以视为一个载体，显示当前的路由

MVVM表示的是Model-View-ViewModel`

Model:模型层，负责处理业务逻辑以及和服务器端进行交互View:视图层，负责将数据模型转化为UI展示出来，可以简单的理解为HTML页面ViewModel:视图模型层，用来连接Model和View，是Model和View之间的通信桥梁

Vue对象接下来的改动全部在以上指定的le:div内，div外部不受影响。

vue对象内的this指向这个vue对象

varvm=newVue({el:'#vue_det',//此vue对象控制此节点data:{//用于定义属性site:"菜鸟教程",url:"www.runoob.com",alexa:"10000"},methods:{//此内为函数details:function(){returnthis.site+"-学的不仅是技术，更是梦想！";}}})

数据绑定最常见的形式就是使用{{...}}（双大括号）的文本插值：

methods:{myclick(e){console.log(e.target.getAttribute('data-index'))}},

v-text不识别标签{{}}同样不识别标签

v-if是动态向DOM树添加或删除DOM元素v-show是更改标签的css样式display设置为none

编译区别：

v-if切换有一个局部编译/卸载的过程，切换过程中适合销毁和重建内部的事件监听和子组件v-show就是在控制css

编译条件：

v-if初始值为false，就不会编译了v-show都会编译，初始值为false，只是将dispaly设为none，但它也编译了

性能：

因为v-if不断在销毁创建，v-show只编译一次，所以v-show性能更好

用法：

v-if更灵活如果你的页面不想让其他程序员看到就用v-if，它不会在页面中显示。

简写形式：：

v-for遍历时必须添加唯一属性key

遍历数组指令语法：v-for="数组的每一项in数组"v-for="iteminstudents"v-for='(v,index)in数组'v为数组中的每一项index为下标

遍历对象指令语法：v-for="(v,k)inperson"v为对象属性的值k为对象属性的值person为对象名

姓名:{{item.name}}年龄:{{item.age}}性别:{{item.sex}}

{{k}}:{{v}}