es6之函数

最新推荐文章于 2022-12-17 15:43:45 发布

linecloud

最新推荐文章于 2022-12-17 15:43:45 发布

阅读量104

点赞数

1 . ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。如：

function log(x,y=2) {

console.log(x,y)

}

log('hello') // hello 2

log('hello ','world') // hello world

log('hello' ,' ') // hello

function Point (x=1,y=2) {

this.x=x;

this.y=y;

}

const p=new Point()

console.log( p ) // { x:1,y:1 }

2 . 参数默认值可以与解构赋值的默认值，结合起来使用。

function foo ({x,y = 5}) {

console.log( x , y )

}

foo({ }) // unfefined 5

foo( { x:1} ) // 1 5

foo ({x:1 , y: 2}) // 1 2

foo () // Error ' x' of undefined

说明：上面代码只使用了对象的解构赋值默认值，没有使用函数参数的默认值。只有当函数foo的参数是一个对象时，变量x和y才会通过解构赋值生成。如果函数foo调用时没提供参数，变量x和y就不会生成，从而报错。通过提供函数参数的默认值，就可以避免这种情况。

function foo ({ x, y = 5 } = {} ) {

console.log( x, y )

}

foo() // undefined 5

请问下面两种写法有什么差别？

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

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

上面两种写法都对函数的参数设定了默认值，区别是写法一函数参数的默认值是空对象，但是设置了对象解构赋值的默认值；写法二函数参数的默认值是一个有具体属性的对象，但是没有设置对象解构赋值的默认值。

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

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

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

               // x 和 y 都无值的情况
               m1({}) // [0, 0];
               m2({}) // [undefined, undefined]

m1({z: 3}) // [0, 0]
m2({z: 3}) // [undefined, undefined]

3 . 指定了默认值以后，函数的length属性，将返回没有指定默认值的参数个数。也就是说，指定了默认值后，length属性将失真。

(function (a) {}).length // 1
(function (a = 5) {}).length // 0
(function (a, b, c = 5) {}).length // 2

length属性的含义是，该函数预期传入的参数个数。某个参数指定默认值以后，预期传入的参数个数就不包括这个参数了。同理，后文的 rest 参数也不会计入length属性。

(function(...args) {}).length // 0

如果设置了默认值的参数不是尾参数，那么length属性也不再计入后面的参数了。

(function (a = 0, b, c) {}).length // 0
(function (a, b = 1, c) {}).length // 1

4. 作用域

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

var x = 1;
           function f(x, y = x) {
           console.log(y);
           }
           f(2) // 2

上面代码中，参数y的默认值等于变量x。调用函数f时，参数形成一个单独的作用域。在这个作用域里面，默认值变量x指向第一个参数x，而不是全局变量x，所以输出是2。

5.arguments对象不是数组，而是一个类似数组的对象。所以为了使用数组的方法，必须使用Array.prototype.slice.call先将其转为数组。

6. ES6 允许使用“箭头”（=>）定义函数。

var f = v => v;

// 等同于
var f = function (v) {
return v;
};
如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。

var f = () => 5;
// 等同于
var f = function () { return 5 };

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
return num1 + num2;
};
如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。

var sum = (num1, num2) => { return num1 + num2; }
由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。

// 报错
let getTempItem = id => { id: id, name: "Temp" };

// 不报错
let getTempItem = id => ({ id: id, name: "Temp" });
下面是一种特殊情况，虽然可以运行，但会得到错误的结果。

let foo = () => { a: 1 };
foo() // undefined
上面代码中，原始意图是返回一个对象{ a: 1 }，但是由于引擎认为大括号是代码块，所以执行了一行语句a: 1。这时，a可以被解释为语句的标签，因此实际执行的语句是1;，然后函数就结束了，没有返回值。

7. 箭头函数可以与变量解构结合使用。
const full = ({ first, last }) => first + ' ' + last;
   // 等同于
   function full(person) {
   return person.first + ' ' + person.last;
   }
   箭头函数使得表达更加简洁。
   const isEven = n => n % 2 === 0;
   const square = n => n * n;
   上面代码只用了两行，就定义了两个简单的工具函数。如果不用箭头函数，可能就要占用多行，而且还不如现在这样写醒目。

注：箭头函数的一个用处是简化回调函数。
   // 正常函数写法
   [1,2,3].map(function (x) {
   return x * x;
   });

// 箭头函数写法
[1,2,3].map(x => x * x);

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

（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。普通函数的this总是指向使用时的所在的作用域，箭头函数里面根本没有自己的this，而是引用外层的this。

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

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

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

上面四点中，第一点尤其值得注意。this对象的指向是可变的，但是在箭头函数中，它是固定的。