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();
    let b = await $.ajax();
}

=====================export 导出的使用===

export var a = 'my name is xiaoming';//导出

import {a} from '../../export/a.js';//导入
console.log(a)

var a='my name is xiaoming',b='my name is xiaohong';
export {a,b}//导出

import {a,b,} from '../../export/a.js';//导入
console.log(a,b)

var a='my name is xiaoming',b='my name is xiaohong';
export {a,b}//导出

import {a,b,} from '../../export/a.js';
console.log(a,b)//导入

//如果不想暴露变量的名称：使用as可以重命名关键字

var a='my name is xiaoming',b='my name is xiaohong';
export {a as x, b as y}

export default 的用法

export 之后加上default意指默认接口的意思，在一个文件里面默认的只能有一个 其区别就是{} 在export中 引入需要用{}来盛放

var a='my name is xiaoming'
export default a;//导出

import a from '../../export/a.js';//导入

//要是多个变量

var a='my name is xiaoming',b='this is a bird';
export default {
                　　a,
                　　b
            　　};
//在需要使用的js中

import anyoneword from '../../export/a.js'
console.log(anyoneword)
//一个对象里面包含a,b两个变量。

export和export default最大的区别就是export不限变量数 可以一直写，而export default 只输出一次 而且 export出的变量想要使用必须使用{}来盛放，而export default 不需要 只要import任意一个名字来接收对象即可。　

export default可以跟在非匿名函数之前，也可以跟在匿名函数之前，同时也可以是一个对象之前。