【JS】ES6---基础1

导语：为什么要学ES6

     1.ES5先天不足，例如内置对象不灵活，模块化实现不完善等

     2.为后边的vue及react框架打基础

     3.大部分公司都在用es6面试题

一、ES6介绍

     2015年6月正式发布，javascript下一代语言标准，能够开发复杂大型的程序,成功企业级的语言

二、Let

用于声明变量

1. let 声明的的变量不能重复声明
2. Let 声明的的变量不能变量提升
3. 块状作用域       eg:点击li弹出第n个
4. 使用let声明的变量不属于顶层现象

三、Const

 用于声明常量

1. 声明常量用大写  不是规则，是默契
2. 常量不能修改
3. 块状作用域
4. 使用const声明的常量也不属于顶层对象

四、变量的解构赋值

解构赋值：

• 解构赋值是对赋值运算符的扩展
• 针对数组或者对象进行模式匹配，然后对其中的变量进行赋值
• 代码简洁且易读，语义更加清晰明了，方便了复杂对象中数据字段获取

1.数组的解析结构：

 Var [a,b,c]=[1,2,3];

  Console.log(a,b,c);

可以给变量添加默认值： a=1

2.对象的解构赋值

Let{bar,foo}={bar:”lili”,foo:100};

  Console.log(bar,foo);

完整版本：

      Let {bar:bar,foo:foo}={bar:”lili”,foo:100};

       Console.log(bar,foo);

复杂对象

   Let obj={

      p:[“hello”,{y:”world”}]

   }

   目标获取hello与world

   Let{PI:p}=Math;

   Console.log(p);

3.特殊对象的解构赋值

字符串做数组

    Let[a,b,c]=”var”;

 字符串做对象

    Let{length:len}=”function”;

 Math的应用

Let{PI:p}=Math;

4.实际应用

4.1交换2个变量的值

  Let a=100;

  Let b=200;

  [a,b]=[b,a];

 4.2提取json中的数据

Let jsonDate={

   Id:1,

   Status:”okokok”,

   Data:[1,2,3,4,5]

}

Let {id,status,data}=jsonData;

4.3用于函数参数默认值 

Function fn({id,name=”张三”}){

    Console.log(id,name);

}

Fn({id:4})

 

五、for...of

For(let val of xxx){

      Console.log(val)

   }

1. 用于遍历

• 数组
• 字符串
• 元素列表
• 类数组对象
• es6新增Map set

2.比较

     for of 纯数组与类数组集合均可遍历

     for in 用于数组与对象，获取的是key

     forEach 用于纯数组