ES6温习

ES6温习

1、函数中的参数可以赋默认值

　　ES6 中可以为函数设置默认值。有几点需要：

在函数默认声明的形参，在函数里面不可以再用let、const进行重新声明。
参数中形参不能重名
函数每次被调用，函数的默认值都会重新计算。

function hunterTest(x = 1, y = 2) {
	return x+y;
}
// 正常默认值
hunterTest();    // 3
// 传入参数
hunterTest(4, 6);    // 10

// 形式参数不允许重名
function hunterTest(x, x = 1, y = 2) {  // SyntaxError: Duplicate parameter name not allowed in this context
	return x+y;
}

// 函数中不允许使用 let、const 定义和形参同名的变量
function hunterTest(x = 1, y = 2) { SyntaxError: Identifier 'y' has already been declared
    let x = 12; 
    const y = 34;
    return x+y;
}

// 形参 惰性计算
let x = 1;
function hunterTest(z = x + 10) {
    return x+z;
}
hunterTest();    // 12

let x = 5;
hunterTest();    // 20

2、结构赋值

　　函数的参数可以使用对象的解构赋值来对形参赋值

function test({x = 1, y}) {
	console.log(x+" "+y);
}

test({x:4, y:5});        // 4 5

　　形参的类型是一个对象类型，所以当我们调用函数的时候不传入参数，则会报错。

　　因此需要为函数的参数设置默认值。

function hunterTest({x = 1, y}) {
	console.log(x+" "+y);
}
hunterTest();       // TypeError: Cannot read property 'x' of undefined

function hunterTest({x = 1, y} = {}) {
	console.log(x+" "+y);
}
hunterTest();       // 1 undefined

3、作用域

　　形参在被定义默认值之后，参数将会形成独立的作用域。等到初始化结束，这个作用域就会消失。这种语法行为，在不设置参数默认值时，是不会出现的。

x = 123
function hunterTest(x = 1, y) {
	console.log(x+" "+y);
}

hunterTest();     // 1 undefined

4、Rest 参数

　　用（...变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

function test(... args) {
	for (let val of args) {
    console.log(val);
  }
}

test(1,3,5,7,8)
1
3
5
7
8

function test(a, ... args) {
  console.log("First parameter: "+a);
  for (let val of args) {
    console.log(val);
  }
}

test(1,3,5,7,8);
First parameter: 1
3
5
7
8

4、箭头函数

　　使用 "=>" 来定义函数。

var a = (x, y) => {
    return x + y;
}

a(3,5);      // 3 5

　　若箭头函数不需要参数或者需要多个参数，则使用圆括号"()"来代表参数部分。

　　箭头函数的代码块部分只有一句的话，可以不用 "{}" 包裹。不需要 return。

var a = x => x;

a(3);           // 3

　　箭头函数通过 "=>" 后面的 "{}"来分辨代码块的。

　　正常函数 转换成 箭头函数

// 正常函数
function test(a, ... args) {
  console.log(a);
  for (let val of args) {
    console.log(val);
  }
}

// 箭头函数
var test = (a, ...args) => {
    console.log(a);
    for (let val of args) {
      console.log(val);
    }
}

　　箭头函数与正常函数的区别

函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

　　箭头函数没有自己的this，无法实例，因此它不能做为构造函数。

　　他的this指向的是它的上一层对象的this，如果上一层也没有的话就再往上指，直到指向到有自己this的函数为止，并作为自己的this。这样就可以不使用 var that = this 了

箭头函数没有自己的 bind()、call()、 apply()。

　　apply、call、bind 函数也是可以改变 this 的指向的

　　apply :
　　　　fun.apply(thisArg, [argsArray])，apply() 方法调用一个函数, 其具有一个指定的this值，以及作为一个数组（或类似数组的对象）提供的参数

　　 call :

　　　　fun.call(thisArg[, arg1[, arg2[, ...]]]) , apply 和 call 基本类似，他们的区别只是传入的参数不同。call 方法接受的是若干个参数列表。

bind :

　　　　fun.call(thisArg[, arg1[, arg2[, ...]]])() 是创建一个新的函数，我们必须要手动去调用。

var a = {
    name: "QQQ",
    fn: function(a, b) {
        console.log(a+b);
    }
}

// apply
var b = a.fn;
b.apply(a, [5,7])    // 12

// call
b.call(a, 5, 7)        // 12

// bind
b.bind(a,5,7)()       // 12

相关推荐