ES6学习

  1、块级作用域和不再具备变量提升

    //ES5
   console.log(a)//undefined
   var a=1;
   //ES6
   console.log(b)//报错 ReferenceError: b is not defined
   let b=1;

  2、let  和 const的使用

  let:声明变量(一个值会被改变的变量)

  const:声明常量(一个值不会被改变的变量)

当值为基础数据类型时,那么这里的值,就是指值本身。
而当值对应的为引用数据类型时,那么我这里说的值,则表示指向该对象的引用。这里需要注意,正因为该值为一个引用,只需要保证引用不变就可以,我们仍然可以改变该引用所指向的对象。

当我们试图改变const声明的变量时,则会报错。

            const obj={
                a:10,
                b:20
            }
            console.log(obj)//{a: 10, b: 20}
            obj.a=30;
            console.log(obj)//{a: 30, b: 20}
                
            const a=10;
            a=20;  console.log(a)//报错 :Assignment to constant variable.(分配的变量是不变的)                            

  3、箭头函数的使用

  箭头函数可以替换函数表达式,但是不能替换函数声明

ES6
const fn = (a,b) => a + b;

 var fn = function fn(a, b) {   //ES5
    return a + b;
  };

  const fn=(a,b)=>{
           console.log(a)//1
           console.log(b)//2
       }
      fn(1,2)

箭头函数中,没有this。如果你在箭头函数中使用了this,那么该this一定就是外层的this。

箭头函数中无法访问arguments对象

4、解析结构

// 首先有这么一个对象
const props = {
    className: 'tiger-button',
    loading: false,
    clicked: true,
    disabled: 'disabled'
}

当我们想要取得其中的2个值:loading与clicked时:

// es5
var loading = props.loading;
var clicked = props.clicked;

// es6
const { loading, clicked } = props;
console.log(loading) //false
console.log(clicked) //true
// 给一个默认值,当props对象中找不到loading时,loading就等于该默认值 const { loading = false, clicked } = props;

另外,数组也有属于自己的解析结构。

// es6
const arr = [1, 2, 3];
const [a, b, c] = arr;

// es5
var arr = [1, 2, 3];
var a = arr[0];
var b = arr[1];
var c = arr[2];
数组以序列号一一对应,这是一个有序的对应关系。
而对象根据属性名一一对应,这是一个无序的对应关系。
根据这个特性,使用解析结构从对象中获取属性值更加具有可用性。
5、函数默认值

之前我们不能直接为函数指定默认参数,因此很多时候为了保证传入的参数具备一个默认值,我们常常使用如下的方法:

function add(x, y) {
    var x = x || 20;
    var y = y || 30;
    return x + y;
}

console.log(add()); // 50

这种方式并不是没有缺点,比如当我传入一个x值为false,这个时候任然会取到默认值,就不是我们的本意了。

来看看ES6的默认值写法:

function add(x = 20, y = 30) {
    return x + y;
}

console.log(add());

在实际开发中给参数添加适当的默认值,可以让我们对函数的参数类型有一个直观的认知。

const ButtonGroupProps = {
    size: 'normal',
    className: 'xxxx-button-group',
    borderColor: '#333'
}

export default function ButtonGroup(props = ButtonGroupProps) {
    ... ...
}
6、展开运算符
  可以将数组方法或者对象展开
       //数组
            const arr1 = [1, 2, 3,4,5,6];
            const arr2 = [...arr1, 10, 20, 30];
            console.log(arr2)    //(9) [1, 2, 3, 4, 5, 6, 10, 20, 30]
            //对象 
            const obj1 = {
              a: 1,
              b: 2, 
              c: 3
            }            
            const obj2 = {
              ...obj1,
              d: 4,
              e: 5,
              f: 6
            }
            console.log(obj2) //{a: 1, b: 2, c: 3, d: 4, e: 5, f: 6}
参考文章链接:http://www.jianshu.com/p/cfb0893c34f1

 

posted @ 2017-11-09 17:33  伊优  阅读(202)  评论(0编辑  收藏  举报