ES6系列四 函数的扩展

Posted SunShineKG

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES6系列四 函数的扩展相关的知识,希望对你有一定的参考价值。

一丶ES6 允许为函数的参数设置默认值,即直接写在参数定义的后面。

function log(x, y = ‘World‘) {
  console.log(x, y);
}

log(‘Hello‘) // Hello World
log(‘Hello‘, ‘China‘) // Hello China
log(‘Hello‘, ‘‘) // Hello

二丶与解构赋值结合

function fetch(url, { body = ‘‘, method = ‘GET‘, headers = {} }) {
  console.log(method);
}

fetch(‘http://example.com‘, {})
// "GET"

fetch(‘http://example.com‘)
// 报错

三丶作用域

一旦设置了参数的默认值,函数进行声明初始化时,参数会形成一个单独的作用域(context)。等到初始化结束,这个作用域就会消失。这种语法行为,在不设置参数默认值时,是不会出现的。(作用域就在参数的这个小括号里面)

var x = 1;

function f(x, y = x) {
  console.log(y);
}

f(2) // 2



let x = 1;

function f(y = x) {
  let x = 2;
  console.log(y);
}

f() // 1

四丶 rest 参数

function add(...values) {
  let sum = 0;

  for (var val of values) {
    sum += val;
  }

  return sum;
}

add(2, 5, 3) // 10

五丶箭头函数

1.只有一个参数时可以省略小括号,,,函数语句只有一句可以胜率大括号,如

 

var f = v => v;

 

上面的箭头函数等同于:

 

var f = function(v) {
  return v;
};

 

2.使用注意点

 

箭头函数有几个使用注意点。

 

(1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。

 

(2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。

 

(3)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。

 

(4)不可以使用yield命令,因此箭头函数不能用作 Generator 函数。

 

3.this指向区别

箭头函数的this指向定义函数所在的对象;

而普通函数的this指向运行时所在的对象,如

function Timer() {
  this.s1 = 0;
  this.s2 = 0;
  // 箭头函数
  setInterval(() => this.s1++, 1000);
  // 普通函数
  setInterval(function () {
    this.s2++;
  }, 1000);
}

var timer = new Timer();

setTimeout(() => console.log(‘s1: ‘, timer.s1), 3100);
setTimeout(() => console.log(‘s2: ‘, timer.s2), 3100);
// s1: 3
// s2: 0


以上是关于ES6系列四 函数的扩展的主要内容,如果未能解决你的问题,请参考以下文章

ES6 入门系列 - 函数的扩展

ES6 入门系列 - 函数的扩展

ES6新语法之---函数扩展

ES6系列,4.正则的扩展

ES6学习笔记二:各种扩展

ES6 从入门到精通 # 05:函数之扩展运算符箭头函数