前端ES6总结(第一节)

1. ES6简介
ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，于2015.06 发版。主要是为了解决ES5的先天不足，比如JavaScript里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。

2. ES6的变量与常量
在ES6中新增加了两个重要的JavaScript关键字：let(变量)和const(常量)
let 声明的变量只在 let 命令所在的代码块内有效。
const 声明一个只读的常量，一旦声明，常量的值就不能改变(也就是声明时就必须要赋值并且无法改变)。
1） let定义变量的特点

1. let定义的是块级作用域
2. let定义的变量不能重复声明
3. let定义的变量没有声明提升
4. let定义的全局变量不能作为顶层属性来用 即:

let num=20;
 alert(window.num);//num为undefined

let 定义的变量所生成的块级作用域也有作用域链跟函数作用域链一样

2）let与var的区别

var 定义的变量是函数作用域（作用域只跟函数的{}有关系）
let定义的变量是块级作用域（只要是{}就会形成作用域）

3.数组的解构赋值

解构赋值是赋值运算符(=)的扩展，是对数组和对象的模式匹配

1）数组的解构:
解构赋值分为两部分 等式左边叫 结构目标，右边叫 解构源
左边的解构目标可以有初始值，如果右边的结构源的个数少于左边的结构目标的个数就是 不完全结构

let [a,b=5]=[1];
 console.log(a,b) //1 5

2）对象的解构：
对象的解构就是从对象里提取数据

var  data={
            code:"200",
            result:[1,2,3,[4,5]],
            result2:[]
        }
        // var res=data.result;
        var {result,result2}=data;
        console.log(result);

对象的应用场景一： 两个变量交换值

let a=10,b=20;
[a,b]=[b,a];  //=>[a,b]=[20,10]
console.log(a,b);  //a=20,b=10

对象的应用场景二： 当一个函数有多个返回值的时候

{
function fun1(){
    return [1,2]
}
console.log(fun1())// [1,2]
let res=fun1();
let [a,b]=res;
}

4.箭头函数

箭头函数提供了一种更加简洁的函数书写方式。
语法：参数 => 函数体

1）基本用法

var f = v => v;
//等价于
var f = function(a){
 return a;
}
f(1);  //1

箭头函数传参

默认参数

function fun1(a,b=0){
    console.log(a+b)
}
fun1(20)

当参数的个数不确定时

let fun2=(...values)=>{
// ...是扩展运算符   values就代表传进来的实参，是一个数组
let [a,b,c,d]=values;
console.log(a,b,c,d)
}
fun2(1,2,3,4)

当箭头函数只有一个参数 和一个 return语句的时候 就可以把（）和{}都省略掉

{
let fun1=(a)=>{
   a+=3;
    return a;
}
console.log(fun1(3))

箭头函数里没有argument（实参的集合，是一个类数组）对象

let fun2=(a,b)=>{
   console.log(arguments)  //arguments is not defined
}
fun2(10,20)

改变this的指向

1. 保存this

var name1="小红";
     let obj={
         name1:"小明",
         say:function(){
console.log(this)  //this=obj
             var that=this;
             console.log(that);   that=obj;
	}
}
obj.say();

2. bind改变this

var name1="小红";
let obj={
    name1:"小明",
    say:function(){
        setTimeout(function(a){
            console.log(a)     a=10 
     }.bind(this,10),1000)
      //bind里的参数第一个参数为this  第二个参数为改变的this的值
obj.say()

还可以传参数，没有办法传实参的时候，比如说计时器还有事件后的函数 可以用bind传
绑定在事件后面的函数 如果想要传实参 还有一种方法就是把事件写在标签里当作属性用

let fun1=(x)=>{
       alert(x)
}
document.onclick=function(a,b){
   alert(a+b)
}.bind(null,"aaa","bbb")

箭头函数的特点：

function fun1(a,b){
 console.log(arguments) // arguments:[10,20]
}
fun1(10,20)

当一个对象 的key值是正整数 还有length属性的时候 这个对象就是一个类数组对象
key值为下标
类数组转化为数组 ：

Array.from  [...arr]
var obj={
      2:"aa",
      3:"bb",
      length:5
  }        
  var arr1=Array.from(obj);//把类数组转化为数组
  console.log(arr1)   arr1=[undefined,undefined,"aa","bb",undefined];

下一章ES6新增数组与字符串