ES6入门基础

一.let & const

1.基本用法

es6新增 let命令，用来申明变量，用法类似于var,但是所声明的变量只在let命令的代码块中有效

for (let i = 0;i < 10; i++) {
    //...
}
console.log(i);
//ReferenceError:i is not defined

上面循环中，i只在for循环中有效

{
    let a = 10;
    var b = 1;
}
a //ReferenceError: a is not defined
b //1

上面代码a只在它所在的代码块中有效

不存在的变量提升

var变量会发生变量提升的现象，即变量可以在声明之前使用，值为undefined。而let必须在变量声明之后使用，否则会报错。

//var的情况
console.log(foo);//输出undefined
var foo = 2;

//let的情况
console.log(bar);//报错ReferenceError
let bar = 2

暂时性死区

只要块级作用域内存在let命令，它所声明的变量就会绑定这个区域，不会受外部影响。

var tmp = 123;
if(true){
    tmp='abc';//ReferenceError
    let tmp;
}

es6明确规定,在let声明之前，该变量都是不可用的，称为暂时性死区。

不允许重复声明变量

let不允许在相同作用域内，重复声明同一个变量。

//报错
function func(){
    let a=10;
    var a=1;
}
//基本用法 报错
function func(){
    let a=10;
    let a=1;
}

2.块级作用域

块级作用域没有块级作用域，会带来很多不合理的场景

• 内层变量可能会覆盖外层变量
• 用来计数的循环变量可能会泄漏成为全局变量

3.const命令

基本用法一旦声明，常量的值就不能被改变，而且声明之后必须立即对其初始化，否则报错。

const foo;
//SyntaxError:Missing initializer in const declaration

es6声明变量的六种方法 let const import class

二.变量的解构赋值

左右两边结构必须一样，右边合法,声明和赋值不能分开

1.数组的解构赋值

let [a,b,c]=[1,2,3];//a=1,b=2,c=3
let [foo,[[bar],baz]]=[1,[[2,3],3]];//foo=1,bar=[2,3],baz=3
let [,,third]=["foo","bar","baz"];//third='baz'
let [x,,y]=[1,2,3]//x=1,y=3
let [head,...tail]=[1,2,3,4]//head=1,tail=[2,3,4]
let [x,y,...z]=['z']//x='z',y=undefined,z=[]

如果解析不成功，变量的只为undefined

let [foo]=[];//foo=undefined
let [bar,foo]=[1];//bar=1,foo=undefined

解构赋值允许指定默认值

let [foo=true]=[];//foo=true
let [x,y='b']=['a'];//x='a',y='b'
let [x,y='b']=['a',undefined]//x='a',y='b'

2.对对象的解构赋值

变量必须与属性同名才能成功赋值

let {bar,foo}={foo:'aaa',bar:'bbb'}//bar='bbb',foo='aaa'
let {baz}={foo:'aaa',bar:'bbb'}//baz=undefined

3.函数的扩展

函数参数的默认值

es6允许为参数设置默认值，直接定义在参数的后面

function log(x,y='world'){
    console.log(x,y);
}
log('hello')//hello world
log('hello','china')//hello china
log('hello','')//hello

函数的length属性:可以返回没有指定默认值的参数个数

(function(a){}).length//1
(function(a=4){}).length//0
(function(a,b,c=5){}).length//2

rest参数(...args)用于获取函数的多余参数，rest参数搭配的变量是一个数组，将变量多余的参数放入数组中，rest参数后不能再有其他参数

function add(...values){
    let sum=0;
    for(var val of values){
        sum+=val;
    }
    return sum;
}
add(2,4,5)//11

扩展符运算：可以将一个数组拆开成若干参数

console.log(...[1,2,3])//1,2,3
console.log(1,...[2,3,4],5)//1,2,3,4,5
[...document.querySelectorAll('div')]//[<div>,<div>,<div>]

箭头函数基本用法

基本用法

允许使用箭头来定义函数，如果只有与一个参数圆括号省略，如果只有一个return,{}可以省略

var f=v=>v;
var f=function(v){
    return v;
}
var f=()=>5
var f=function(){return 5}
var sum=(num1,num2)=>num1+num2
var sum=function(num1,num2){
    return num1+num2
}

箭头函数使用时需要注意的点

• 函数体内的this对象，就是定义时所在的对象，不是使用时所在的对象
• 不可当做构造函数，不可以使用new命令
• 不可以使用arguments对象，可以用rest参数替换
• 不可以使用yield命令，因此箭头函数不能用作generator函数

注意在箭头函数中，this的指向固定的，它的内部没有自己的this，这也就导致了this总是指向上一层的this,如果上一层还是箭头函数，则继续向上指，直到指向到有自己this的函数为止，并作为自己的this

数组的扩展

• map

let arr=[1,3,4]
let result=arr.map(item=>item*2)

let score=[1,2,3,4]
let result=score.map(item=>item>=3?'及格':'不及格')

• reduce

let arr=[1,3,4,5]
let num=arr.reduce((temp,item,index)=>temp+item)

• filter

let arr=[1,3,4,5,6]
let result=arr.filter(item=>{
    if(item%3==0)
        return false
    else return true
})

4.对象的扩展

可以直接以变量形式声明属性或方法

let es5Fun={
    method:function(){}
}
let es6Fun={
    method(){}
}

5.symbol是什么，有什么用

symbol是es6引入的第七种原始数据类型。所有Symbol()生成的值都是独一无二的，可以接受一个字符串作为参数,var s1=Symbol();var s2=Symbol("foo")，可以作为属性名，而且并不是私有属性

let a={}
let name=Symbol()
a[name]='test'

6.promise对象

完成异步请求：多个任务同时进行，代码更复杂

let p=new Promise((res,rej)=>
      $.ajax({
        url:'test',
        dataType:'json',
        success(arr){
            res(arr);
        },
        err(err){
            rej(err)
        }
}))
p.then(res=>{alert(res)},rej=>{alert(rej)})
Promise.all([p1,p2]).then(arr=>{let [res1,res2]=arr},err=>{})

7.async和await在干什么

解决异步问题，async返回的是一个promise对象，await在等待一个async函数完成，因为async函数返回的是一个promise对象，await必须出现在async函数内部，不能单独使用，如果await函数等到了一个promise对象，await会阻塞后面的代码

function sleep(second,param){
    return new Promise((res,rej)=>{
        setTimeout(()=>{
            res(param)
        },second)
    })
}
async function test(){
    let result1=await sleep(2000,'req01')
    let result2=await sleep(1000,'req02'+result1)
    let result3=await sleep(500,'req03'+result2)
    console.log(`${result3} ${result2} ${result1}`)
}
test()

8.proxy

• 什么是proxy是es6中提供的一个构造函数，更像一种拦截器，在访问赋值时会先用到我们定义好的拦截方法
• 什么时候需要Proxy()被代理对象不希望直接被访问，被代理的对象能力不足时找个人帮他，增加新功能
• Proxy的用法proxy的构造函数中接受两个参数 new Proxy(target,hander)其中target参数是指目标对象（被代理的对象）,一个对象，属性一个对象，属性是各种控制和修改target基本方法的行为

const user={name='cz'}
const userProxy=new Proxy(user,{
    get:(obj,prop)=>{
        if(prop==='avatar'){
            if(!obj.prop){
                return 'https://...'
            }
        }
        return obj[prop]
    }
})

9.Generator函数

• 什么是generator()执行到中间可以停，配合yield函数使用
• 作用：可以实现带逻辑的异步

function *show(){
    alert('a')
    yield
    alert('b')
}
let genobj=show()
genobj.next()//a
genobj.next()//b

function *show1(){
    alert('a')
    let aa=yield
    alert(aa)
}
let bi=show()
bi.next()//a
bi.next(12)//a 12

yield既可以传参，也可以返回