3、箭头函数和函数默认值

ES6使用‘箭头’ (=>)定义函数
var f = v => v;

1、箭头函数特性

  1)函数体内的this值,绑定的定义时所在的作用域的this

  2)不可以当做构造函数

  3)不可以使用arguments对象,(可以是用...rest代替)

2、语法:()=> {  }

  变形:1)不传参,代码只有返回值

var add = ()=> 2;

console.log(add());

    2)传一个参数

var add = a => a+2;

console.log(add(a));

    3)传多个值

var add = (a,b) => a+b;

console.log(add(1,2));

    4)如果返回是个对象,需要使用()包裹

var add = (a,b) => ({num:a+b});

console.log(add(10,10));

    5)函数体内有逻辑时,必须加大括号,并且手动返回想要返回的值

var add = (a,b) =>{
    if(a<b){
        return a;
    }
};

console.log(add(1,10));

3、特性解析

es5中定义的函数内部的this是调用时确定的哦,而箭头函数里的this是在定义时确定的,绑定的定义时所在的作用域的this

document.onclick= () => {
    setTimeout( () => {
       console.log(this);
    }    
    ,1000)
     console.log(this);
}
//两处打印的都是window

4、函数扩展

  函数的默认值,给形参直接赋值,并且函数体内不能使用let或者const再次声明,会报错

//es5实现的默认值
function
fn(a){ a = a || 10; //此时不保险 console.log(a); } fn(0); //10 fn(''); //10

//ES6里面,并且函数体内不能重复声明形参变量
function fn(a=10){
  console.log(a)
}
fn(0);


  rest参数,rest参数(形式为 ...变量名),用于获取函数的多余参数,直接把实参放在数组中,可以取代arguments,arguments是实参的集合(类数组),而rest是实参的数组

function fn(){
  console.log(arguments);
}
fn(1,2,3,4);

//rest参数
function fn(...arr){
  console.log(arr);//此时arr就是真实的数组
}
fn(1,2,3)

//可以分开
function fn(a,b,...arr){
  console.log(a);
  console.log(b);
  console.log(arr);//此时arr就是真实的数组
}

5、对象扩展

  1)变量名和属性名形同时,可以直接写入变量名

        2)函数可以省略function关键字

  3)Object.assign()

    用于合并对象,将源对象的可枚举的属性复制到目标对象中

var licanv=10;
var obj = {
  //lincanv : lincanv    
  lincanv //属性名和变量名一样的时候,可以这么简写
   } console.log(obj)

 一般用于写功能模块时使用

var util = (function (){
    function add(){};
    function isFunction(){};
    function isArray(){};
    return {
       add,
       isFunction,
       isArray
    }
})();

util.add()

另外对象内定义函数时,可以简写直接写函数

var obj = {
  // fn:function(){}
  function(){}  
}

Object.assign()方法

var o = {a:1}
var o2 = {b:2}
var o3 = {c:3}

//将o2、o3的属性复制到o上,一起都用for  in来操作
//es6使用assign
Object.assign(o,o1,o2);
console.log(o)

Object.assign一般用封装插件

function fn(option){
   let defaults = {
       a:'默认1',
       b:'默认2',
       c:'默认3'
   } 
    Object.assign(defaults,option);
    console.log(defaults);
}

//参数为可选传入
fn({
  a:1,
  b:2,
  c:3
})    
原文地址:https://www.cnblogs.com/gopark/p/11357122.html