ECMAScript 6 函数扩展.pdfVIP

ECMAScript 6 函数的扩展 函数参数的默认值 基本⽤法 在ES6之前，不能直接为函数的参数指定默认值，只能采⽤变通的⽅法。 function log(x, y) { y = y || World; console.log(x, y); } log(Hello) // Hello World log(Hello, Chin ) // Hello Chin log(Hello, ) // Hello World 上⾯代码检 函数log的参数y有没有赋值，如果没有，则指定默认值为World。这 种写法的缺点在于，如果参数y赋值了，但是对应的布尔值为f lse，则该赋值不起 作⽤。就像上⾯代码的最后⼀⾏，参数y等于空字符，结果被改为默认值。 为了避免这个问题，通常需要先判断⼀下参数y是否被赋值，如果没有，再等于默认 值。 if (typeof y === undefined) { y = World; } ES6允许为函数的参数设置默认值，即直接写在参数定义的后⾯。 function log(x, y = World) { console.log(x, y); } log(Hello) // Hello World log(Hello, Chin ) // Hello Chin log(Hello, ) // Hello 可以看到，ES6的写法⽐ES5简洁许多，⽽且⾮常⾃然。下⾯是另⼀个例⼦。 function Point(x = 0, y = 0) { this.x = x; this.y = y; } v r p = new Point(); p // { x : 0, y : 0 } 除了简洁，ES6的写法还有两个好处：⾸先，阅读代码的⼈，可以⽴刻意识到哪些参 数是可以省略的，不⽤ 看函数体或⽂档；其次，有利于将来的代码优化，即使未来 的版本在对外接⼜中，彻底拿掉这个参数，也不会导致以前的代码⽆法运⾏。 参数变量是默认声明的，所以不能⽤let或const再次声明。 function foo(x = 5) { let x = 1; // error const x = 2; // error } 上⾯代码中，参数变量x是默认声明的，在函数体中，不能⽤let或const再次声 明，否则会报错。 与解构赋值默认值结合使⽤ 参数默认值可以与解构赋值的默认值，结合起来使⽤。 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() // TypeError: C nnot re d property x of undefined 上⾯代码使⽤了对象的解构赋值默认值，⽽没有使⽤函数参数的默认值。只有当函 数foo的参数是⼀个对象时，变量x和y才会通过解构赋值⽽⽣成。如果函数foo调⽤ 时参数不是对象，变量x和y就不会⽣成，从⽽报错。如果参数对象没有y属性，y的 默认值5才会⽣效。 下⾯是另⼀个对象的解构赋值默认值的例⼦。 function fetch(url, { body = , method = GET , he ders = {} }) console.log(method); } fetch(http://ex , {}) // GET fetch(http://ex ) // 报错 上⾯代码中，如果函数fetch的第⼆个参数是⼀个对象，就可以为它的三个属性设置 默认值。 上⾯的写法不能省略第⼆个参数，如果结合函数参数的默认值，就可以省略第⼆个参 数。这时，就出现了双重默认值。 function fetch(url, { method = GET } = {}) { console.log(method); } fetch(http://ex ) // GET 上⾯代码中，函数fetch没有第⼆个参数时，函数参数的默认值就会⽣效，然后才是 解构赋值的默认值⽣效，变量method才会取到默认值GET。 再请问下⾯两种写法有什么差别？ // 写法⼀ function m1({x = 0, y = 0} = {}) { return [x, y]; } // 写法⼆ function m2({x, y} = { x : 0, y : 0 }) {