es6基础笔记整理

const 不能重复声明 块级作用域 变量指针指向固定的内存不能修改
let 不能重复声明 块级作用域 变量可以修改

箭头函数
1、如果只有一个参数（）可以省略
2、如果只有一个return {} 可以省略
例
let arr = [1,3,4,2,5,23]
ES5:
arr.sort(function(){
return n1-n2;
})
ES6:
arr.sort((n1,n2)=>n1-n2)
函数多余参数的获取
例
function a( a, f,…args){
console.log(a,f,args);
}
a(2,3,1,5,3) //2,3,[1,5,3]
数组的展开
例：
function show(a,b,c){
console.log(a,b,c)
}
show(…[1,3,4])
//1,3,4
======================”
let arr1=[2,4,6]
let arr =[…[1,3,5],…arr1] //[1,3,5,2,4,6]

let [a,b]=arr1; //a=2; b=3
let [c,d,…e] = arr; //c=1; d=3; e=[5,2,4,6]

===========================
函数的默认参数
function a(b,c=3,d=4){
console.log(b,c,d)
}

========================
解构赋值
1. 左右两边结构必须一样
2. 右边必须是一个正常的数组、对象、或其他的
3. 声明和赋值不能分开（必须在一句话里完成）
例
var [a,b,c]= [1,2,4]
var {d,e,f} = {
a:1,
d:3,
e:4,
}
//d=3;e:4;f=undefind

================================
map 映射

[3,2,5].map(val=>val*2) //[6,2,5]

var a = [15,80,23,90].map(item =>item>60?’ok’:’err’ );
//[‘err’,’ok’,’err’,’ok’]

===============================
reduce 多次调用

var arr = [12,69,180,8763]
arr.reduce(function(tem,item,index){
console.log(tem,item,index);
return tem + item;
})
当然，也可以简写
arr.reduce((tem,item,index)=>{
console.log(tem,item,index)
return tem+item;
})
/*
** 上面的数组执行遍历相加
** tem 为每次计算的中间结果（第一个值为数组的第一个值）
** item 数组中的每个值（从第二个开始）
** index 为item对应的下标
** 该数组循环3次
** （1）tem = arr[0]; item = 69; index=1
** (2) tem = 12+69; item =80; index = 2
** (3) tem = 81+180 item= 8763 ; index=3
** 返回结果tem= 261+8763
*/

===========================
求平均数
let res = arr.reduce((tem,item,index)=>{
if(index!=arr.length-1){
//不是最后一次
tem+item
}else{
//最后一次
return (tem+item)/arr.length
}
})

===============================
filetr 过滤

[1,5,8,12,21,6].filter(var=>return val>5)
//[8,12,21.6]

==================================
forEach 遍历

[].forEach((item,index)=>console.log(index,item))

===============================
字符串

新方法 startWith() endWith()
‘abc’.startWith(‘ab’) //true

字符串模板

ES5：
var str = “abc\
def”;

ES6:
var str = sdfsdf
sdfsdfs${a};
//不仅可以换行，还能放入变量 放入变量方式${a}

================================
面向对象
ES5:
function user(name,sex){
this.name = name;
this.sex = sex;
}
user.prototype.showName = function(){
alert(this.name)
}
var q = new user(‘qiphon’,’男’);
q.showName();

继承
function vipUser(name,sex,lev){
user.call(this,name,sex)
this.lev = lev;
}
方法的继承
vipUser.prototype = new user();
vipUser.prototype.showLev = function(){alert(lev)}

var v1 = new vipUser(‘qiphon’,’男’,1)

Es6:

class user {
constructor(name,sex){
this.name= name;
this.sex = sex;
}
showName(){console.log(this.name)}
}

继承的问题
class vipUser extend user{
constructor(name,sex,lev){
super(name,sex);
this.lev = lev;
}
showLev (){
alert(this.lev)
}
}

======================
对象的扩展
var {a:a,b:b,c=20} ={b:2,a:33,c:5}
//a=33; b=2 ; c=5
//对象的扩展是根据 键 确定的 ，可以设定默认值，当键和值同名时可以省略值，直接使用键
则上面的可以写成
var {a,b,c=20} ={b:2,a:33,c:5}

方法简写
json ={
a:12,
show:function(){alert(this.a)}
}
简写
json ={
a:12,
show(){alert(this.a)}
}

========================================
promise 消除异步操作

异步请求：各个操作之间没有关系，可以同时做多个操作
缺点：代码显得更复杂

let p = new Promise((resolve,reject){
//异步代码
$.ajax({
url:”,
dataType:”,
success(arr){resolve(arr)},
error(err){reject(err)}
})
})
p1.then((arr)=>{
alert(‘成功’+arr)
},(err)=>{
alert(‘失败’+arr)
})
当有多个异步请求时
var p2 = 代码同上(没有p1.then的代码)
Promise.all([p1,p2]).then((arr)=>{
//两个都成功时，执行，arr为多个结合的数组
},()=>{
//只要有一个失败结果就在这里
})

两个promise方法可以封装函数减少代码（不再演示）

promise.race //只返回第一个请求回来的结果

Promise.all([$.ajax(),$.ajax,….]).then(result=>{
let [a,b,…c]=result;
},err=>{
//失败
})

==========================
generator 生成器 解决异步操作

1、
function *show(){
alert(a);
yield; //在这里会终止函数执行
alert(b);
}
show()//两个alert都不会执行
show.next()//第一个alert执行
show.next();//第二个alert执行
不能同时执行链各个next()

2、
function *show(){
alert(a)
let a =yield;
alert(a)
}
var bb = show()
bb.next(5) //alert(‘a’)
bb.next(6) //alert(6)

==================================
function *show(a,b){
alert(‘a’)
yield a; //这里的a为第一次return的值
return b;
}
var a = show(5,6)
b=a.next() //alert(‘a’)
{value:5, done: false}
c=a.next()
{value: 6, done: true}

//如果在给a赋值show时未传入参数，两次返回的对象中value的值均为undefined
//如果给a赋值时传参数了，但是在使用next方法时也传参数了，两次的结果中value仍未undefined

==================chrome
function *show(a,b){
console.log(‘a’)
yield a;
return b;
}
var a = show(5,6)
b=a.next() //alert(‘a’)
VM55:2 a
{value: 5, done: false}
b
{value: 5, done: false}
a.next()
{value: 6, done: true}
var b= show()
undefined
b.next(5)
VM55:2 a
{value: undefined, done: false}
b.next(6)
{value: undefined, done: true}
var c = show()
undefined
c.next(5,6)
VM55:2 a
{value: undefined, done: false}
c.next()
{value: undefined, done: true}

======================
异步操作
1、回调
2、promise
3、generator （涉及上下文逻辑）

Es7
数组 includes
[3,7,6].includes(7) //true

对象
keys/values/entries 和 for…..of配合使用
keys 遍历键
values 遍历值
entries 遍历键和值

Math 方法
Math.pow(3,8)
新的写法
3**8

//字符串
padStart/padEnd
补全字符串
‘aa’.padEnd(9,’bbb’); //’aabbbbbbb’

不用再使用generator yield新出的 async await特点：不再依赖外部的runner可以直接使用箭头函数
async function show(){
let a = await .ajax();letb=await.ajax();
}