ES6基本知识

Es6知识点

ES5 变量

var 声明

1.可以重复声明 不报错

var a=12; var a=5; alert(a) //5

2.没有块级作用域（语法块）

{ 变量=123 } for(...){ var a=12 } alert(a) 12

ES6语法 let const 不能重复声明

let 是变量

let a=12; a=5 alert(a) 5

const 常量

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导出的成员，必须严格按照导出时候的名称，来使用{ }按需接收