【ES6】函数

函数默认值问题

在ES6之前，不能直接为函数指定默认值，但是ES6允许为函数的参数设置默认值

之前实现方式

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

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

解析：缺点在于如果给参数y赋值了，但是对应的布尔值是false,则会出现最后一样的输出结果

ES6实现方式

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

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

ps:  参数变量是默认声明的，所以不能用let或者const再次声明，否则会报错；

　　使用参数默认值时，函数不能有同名参数;

　　参数默认值是惰性求值的；

例子

//不能let或者const再次声明参数变量x
function foo(x = 5) {
  let x = 1; // error
  const x = 2; // error
}

//使用参数默认值，参数不能同名
// 不报错
function foo(x, x, y) {
  // ...
}

// 报错
function foo(x, x, y = 1) {
  // ...
}

//参数默认值惰性求值
//参数p的默认值是x+1.每次调用函数foo,都会重新计算x+1,而不是默认p=100
let x = 99;
function foo(p = x + 1) {
  console.log(p);
}

foo() // 100

x = 100;
foo() // 101

与解构赋值默认值结合使用

//只使用解构赋值默认值

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

foo({}) // undefined 5
foo({x: 1}) // 1 5
foo({x: 1, y: 2}) // 1 2
foo() //报错

解构赋值默认值和函数参数默认值结合使用
function foo({x, y = 5} = {}) {
  console.log(x, y);
}

foo() // undefined 5

没有第二个参数时，函数参数的默认值就会生效，然后才是解构赋值的默认值生效，变量想y才会取到默认值5。

例题

// 写法一
function m1({ x = 0, y = 0 } = {}) {
    return [x, y];
}

// 写法二
function m2({ x, y } = { x: 0, y: 0 }) {
    return [x, y];
}

// 函数没有参数的情况
console.log(m1());// [0, 0]
console.log(m2());// [0, 0]
    

// x 和 y 都有值的情况
console.log(m1({ x: 3, y: 8 }));// [3, 8]
console.log(m2({ x: 3, y: 8 }));// [3, 8]
    

// x 有值，y 无值的情况
console.log(m1({ x: 3 }));// [3, 0]
console.log(m2({ x: 3 }));// [3, undefined]
    

// x 和 y 都无值的情况
console.log(m1({})) // [0, 0];
console.log(m2({}));// [undefined, undefined]
    
console.log(m1({ z: 3 }));// [0, 0]
console.log(m2({ z: 3 }));// [undefined, undefined]

解析：相同：都有函数参数默认值

　　　不同：

　　　　写法一 函数参数默认值为空对象 设置了对象解构赋值的默认值

　　　　写法二 函数参数默认值为一个有具体属性的对象 没有设置对象解构赋值默认值

 

箭头函数

 

//无参数的箭头函数
var f = () => 5;

等价于
var f = function () { return 5 };

//一个参数的箭头函数
var f = v => v;

等价于
var f = function(v) {
  return v;
};

//2个参数的箭头函数
var sum = (num1, num2) => num1 + num2;

等价于

var sum = function(num1, num2) {
  return num1 + num2;
};

ps:

//箭头函数代码块语句多于一条，需要使用花括号括起来，并且使用return语句
var sum = (num1, num2) => { return num1 + num2; }

//如果箭头函数直接返回一个对象，必须加上括号，否则会报错
// 报错
let getTempItem = id => { id: id, name: "Temp" };
// 不报错
let getTempItem = id => ({ id: id, name: "Temp" });

箭头函数注意事项

（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

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

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

（4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

箭头函数的this的问题

function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

var id = 21;

foo.call({ id: 42 }); 
//输出结果为42 并非21

函数绑定运算符

它是并排的两个冒号（::），该运算符会自动将左边的对象，作为上下文环境（this对象），绑定到右边的函数上， 

写法：对象::函数

作用：用函数运算符来取代call,apply,bind调用。

 应用：

//普通双冒号运算符应用
foo::bar

等同于

bar.bind(foo)


foo::bar(...arguments)

等同于

bar.apply(foo,arguments)

//双冒号左边为空，右边是一个对象的方法，则是将该方法绑定到该对象上

let log = ::console.log;

// 等同于

let log = console.log.bind(console);

 

相关资料：https://www.cnblogs.com/wangyingblog/p/5583825.html

　　　　   http://www.jb51.net/article/80861.htm

　　　　　http://blog.csdn.net/ganyingxie123456/article/details/70855586

 

搜索

复制