Es6知识点
-
ES5 变量
var 声明
1.可以重复声明 不报错
var a=12; var a=5; alert(a) //52.没有块级作用域（语法块）
{ 变量=123 } for(...){ var a=12 } alert(a) 12ES6语法 let const 不能重复声明
let 是变量
let a=12; a=5 alert(a) 5const 常量
const a=12 a=5 alert(a) 报错两者皆为块级作用域 更容易合作开发
if(true){ let a=1; const b=1; } alert (a=1)报错 未定义 alert (b=1)报错 未定义 -
函数
箭头函数
1.如果只有一个参数（）可以省
resp=>{ console.log(resp) } let show=(n1,n2)=>{ alert(n1+n2) }2.如果只有一个返回值
(a)=>a*2 等价 (a)=>{ return a*2 }3.this的指向问题(重点)
普通函数：根据调用我的人（谁调用我，我的this就指向谁） 箭头函数：根据所在的环境（我再哪个环境中，this就指向谁）4.Es6的传参问题 …args 必须放最后
let show=(a,b,...args)=>{ alert(a,b,...args) } show(12,23,54,)5.展开数组
let arr=[1,2,3]; ...arr; let show=(a,b,c)=>{ alert(a) alert(b) alert(c) } show(1,2,3) 等价于 show(...arr)6.解构赋值(两边结构一致)语法糖
//原始 let arr=[1,2,3] let a=arr[0]; let b=arr[1]; let c=arr[2] //一一对应，右边的给左边 let [a,b,c]=[1,2,3] let {a,c,d}={a:12,c:13,d:14} //---------------------------------------- let{{a,b},[n1,n2,n3],num,str}= {{a:1,b:2},[1,2,3],12,"str"} let{json,arr,num,str}= {{a:1,b:2},[1,2,3],12,"str"} console.log(a,b,c,n1,n2,n3,num,str) console.log(json,arr,num,str) //----------------------------------------- let {a,b}={12,13} console.log(a,b)报错 因为右边不是个东西 非数组，非对象，非json //将值打印出来 -
数组
数组新方法
map 映射 一个对一个 [12,99,78] ["不及格","优秀","良好"] let score=[12,99,78] //返回一个新数组 let result=score.map(item=>item>=60?"及格":"不及格") alert(result) //------------------------------------------- let arr=[12,5,6] let result=arr.map((item)=>{ return item*2 //数值乘以2 }) alert(result)reduce 汇总 一堆出来一个 [19,59,99] 算总分 平均分 let arr=[19,59,99] tmp 中间值 item 数值 index 下标 总分 let sum=arr.reduce((tmp,item,index)=>{ return tmp+item )} alert(sum) 平均分 let average=arr.reduce(function(tmp,item,index){ if(index!=arr.length-1){ return tmp+item }else{ return (tmp+item)/index } }) alert(average)filter 过滤器 选择过滤 let arr=[19,59,99] let result=arr.filter(item=>{ //return true;//全部保留 //return false //全部不保留 /* 本身就是boolen值 if(item>20){ return true; }else{ return false; } */ 等价于 return item>20 }) //------------------------------------------ let objs=[ {name:"杨乐乐",age:18}, {name:"谷咕咕",age:22}, {name:"阿姜",age:21}, {name:"周某人",age:22}, ] let result=objs.filter(json=>json.age=22) console.log(result) 返回/* {name:"周某人",age:22}, {name:"谷咕咕",age:22}, */forEach 迭代 循环遍历 let arr=[1,2,3] let result=arr.forEach((item,index)=>{ alert(item +index) }) -
字符串
字符串操作
（1）多了两个新方法
startsWith
let str="http://baidu.com" if(str.startsWith("http://")){ alert("普通网址") } //是一个网址 返回值时boolen类型endsWith 进行邮箱的验证，文件类型的扩展名都可以
（2）字符串模板 不需要换行符，可以折行
字符串拼接 反单引号
let str=`abc`; let str2=`a${str}bc` alert(str2)//aabcbc -
面向对象
-
promise-承诺
异步 同步 操作之间没关系，同时进行多个操作。回调地狱,一直使用ajax请求 同时能做一件事。一个再走下一个 代码复杂 代码简单 promise==消除异步操作
用同步的方式书写异步代码
let p=new Promise(function(resolve,reject){ /* resolve 成功推荐 reject 失败回调 */ $.ajax({ url:'aaa.txt', dataType:'json', success:(arr)=>{ resolve(arr); }, error:(err)=>{ reject(err); } }) }) p.then(function(){ alert("成功回调") },function(){ alert("失败回调") });好处显现
let p=new Promise(function(resolve,reject){ /* resolve 成功推荐 reject 失败回调 */ $.ajax({ url:'aaa.txt', dataType:'json', success:(arr)=>{ resolve(arr); }, error:(err)=>{ reject(err); } }) }) let p1=new Promise(function(resolve,reject){ /* resolve 成功推荐 reject 失败回调 */ $.ajax({ url:'bbb.txt', dataType:'json', success:(arr)=>{ resolve(arr); }, error:(err)=>{ reject(err); } }) }) Promise.all([ p,p1 ]).then(function(arr){ let [res1,res2]=arr; //arr数组作为结果 console.log(res1) //aaa.txt文件内容 console.log(res2)//bbb.txt文件内容 alert('全部成功了') },function(){ alert('至少一个失败了') })简化操作 封装promise
function createPromise(url){ return new Promise(function(resolve,reject){ $.ajax({ url:url, dataType:'json', success:(arr)=>{ resolve(arr); }, error:(err)=>{ reject(err); } }) } ) } Promise.all([ createPromise('aaa.txt') createPromise('bbb.txt') ]).then(function(arr){ let [res1,res2]=arr; //arr数组作为结果 console.log(res1) //aaa.txt文件内容 console.log(res2)//bbb.txt文件内容 alert('全部成功了') },function(){ alert('至少一个失败了') })更进一步 jquery的封装promise
let p=$.ajax({url:'aaa.txt',dataType:'json'}) 返回的是promise对象 直接 Promise.all([ $.ajax({url:'aaa.txt',dataType:'json'}) $.ajax({url:'bbb.txt',dataType:'json'}) ]).then(function(arr){ let [res1,res2]=arr; //arr数组作为结果 console.log(res1) //aaa.txt文件内容 console.log(res2)//bbb.txt文件内容 alert('全部成功了') },function(){ alert('至少一个失败了') })最简单大致的写法
Promise.all([ajax1,ajax2]).then(success=>{},error=>())封装为一个promise方法 console.log(111); let promise = new Promise((resolve, reject) => { setTimeout(function () { console.log(222); resolve("hello word") },3000) }) promise.then((data)=>{ console.log(333); console.log(data); }).catch(()=>{ console.log(444);//错误进入 }) /* 111 222 333 hello word */Promise.race([]) 优先加载速度快的
-
generator
-
模块化
在一个单独的js文件中export抛出模块
export function show(){ console.log("模块化执行show的方法") } export let show1=()=>{ console.log("模块化执行show1的方法") }import {show,show1} from './js/es6' show(); show1(); //分别执行控制台打印的内容1、export
一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。下面是一个 JS 文件，里面使用export命令输出变量。export写法一般如下：
var firstName = 'name'; var lastName = 'last'; var year = 1996; export { firstName, lastName, year };通常情况下，export输出的变量就是本来的名字，但是可以使用as关键字重命名。例：
function v1() { ... } function v2() { ... } export { v1 as streamV1, v2 as streamV2, v2 as streamLatestVersion };上面代码使用as关键字，重命名了函数v1和v2的对外接口。重命名后，v2可以用不同的名字输出两次。
2、import
使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。例：import { firstName, lastName, year } from './profile.js'; function setName(element) { element.textContent = firstName + ' ' + lastName; }当然，如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名，这也是上文说通常情况下，export输出的变量名不变的原因。例：
import { lastName as surname } from './profile.js';另外，注意import命令具有提升效果，会提升到整个模块的头部，首先执行。
3、export default
从前面的例子可以看出，使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。这就产生一个问题，使用模块者不愿阅读文档，不想知道变量名。此时就要用到export default命令，为模块指定默认输出。person.js文件 export default { firstName:'first', lastName:'last', age: 11 } 此时import导入写成： import person from 'person'; console.log(person.age) //11本质上，export default就是输出一个叫做default的变量或方法，然后系统允许你为它取任意名字。
4、总结拓展
export default 向外暴露的成员，可以使用任意变量名来import
在一个模块中，export default 只允许向外暴露一次。
在一个模块中，可以同时使用export default 和export 向外暴露成员
export可以向外暴露多个成员，同时，如果某些成员，在import导入时不需要，可以在import时不写。
使用export导出的成员，必须严格按照导出时候的名称，来使用{ }按需接收