函数
- 函数（函数办法更新【默认值、不确定参数、箭头函数】）
Default Parameters —— 如何解决函数参数默认值？
- ES5
- ES6
- 函数参数个数
Rest Parameter —— 怎么解决不确定参数？
- ES5
- ES6
Spread Operator（rest参数的逆运算）
- ES5
- ES6
Arrow Functions(箭头函数)
- 申明
参数状况
- 能够加参数
- 有且只有一个参数的时候，括号能够省略
- 花括号什么状况下能够省略
- this的指向，不是谁调用指向谁，是谁定义指向谁
- ES6-ES10学习幅员
函数办法更新【默认值、不确定参数、箭头函数】
Default Parameters —— 如何解决函数参数默认值？
判断函数有没有默认值不能应用a || b，只能判断其是否等于undefined
ES5
//x是必传值，y和z是不用传值function f (x, y, z) { if ( y === undefined) { y = 7 } if ( z === undefined) { z = 42 } return x + y + z}console.log(f(1)) // 50console.log(f(1, 8)) // 51console.log(f(1, 8, 43)) // 52ES6
函数参数是从左到右解析，如果没有默认值会被解析成undefined
//x是必传值，y和z是不用传值function f (x, y = 7, z = 42) { return x + y + z}console.log(f(1)) // 50console.log(f(1, 8)) // 51console.log(f(1, 8, 43)) // 52如何让y只取默认值
//有默认值的放最初//能够看进去原理和ES5是相似的console.log(f(1, undefined, 43))默认值除了常量，还能够是其余参数的运算表达式
function f (x, y = 7, z = x + y) { return x * 10 + z}console.log(f(1, undefined, 2)) // 12--1 * 10 + 2console.log(f(1)) // 18--1 * 10 + ( 1 + 7 )console.log(f(1, undefined)) // 18--1 * 10 + ( 1 + 7 )函数参数个数
ES5应用arguments示意函数参数的伪数组，arguments.length示意参数的个数
function f (x, y, z) { return arguments.length}console.log(f(1)) // 1console.log(f(1, undefined)) // 2console.log(f(1, undefined, 2)) // 3ES6中不反对arguments
// length是函数没有默认值的参数的个数，并不是执行的时候传入参数的个数function f (x, y = 7, z = x + y) { return f.length}console.log(f(1)) // 1console.log(f(1, undefined)) // 1console.log(f(1, undefined, 2)) // 1Rest Parameter —— 怎么解决不确定参数？
ES5
应用arguments
function sum () { let num = 0 //两种办法进行遍历 // Array.prototype.forEach.call(arguments, function (item) { // num += item * 1 // }) Array.from(arguments).forEach( function (item) { num += item * 1 }) return num}console.log(sum(1, 2, 3)) // 6ES6
应用Rest
- 数组
- 示意所有参数
- 能够拆开示意局部参数
- 残余参数只能应用一次，且放在最初的地位上
function sum (...nums) { // ... —— Rest parameter 所有的参数都在三点前面的nums变量中 let num = 0 // 间接当作数组遍历 nums.forEach( function (item) { num += item * 1 }) return num}console.log(sum(1, 2, 3)) // 6//将第一个参数 × 2 + 残余参数function sum (base, ...nums) { let num = 0 nums.forEach( function (item) { num += item * 1 }) return base * 2 + num}console.log(sum(1, 2, 3)) // 7 —— 1 * 2 + 5Spread Operator（rest参数的逆运算）
Spread Operator和Rest Parameter是形似但相同意义的操作符，简略来说Rest Parameter是把不定参数“收敛”成数组，而Spread Operator是把固定数组“打散”到对应的参数中
有一个数组，要整体当成参数
ES5
//计算三角形周长function sum (x = 1, y = 2, z = 3) { return x + y + z}let data = [4, 5, 6]console.log(sum(data[0], data[1], data[2])) // 15console.log(sum.apply(this, data)) // 15// apply()办法：承受两个参数，一个是在其中运行函数的作用域，另一个是参数数组（能够是Array的实例，也能够是arguments对象），它将作为参数传给Function（data–>arguments）// 定义：办法调用一个具备给定this值的函数，以及作为一个数组（或相似数组对象）提供的参数。// call()办法与apply()办法的区别在于承受参数的形式不同，应用call办法是传递给函数的参数必须一一例举进去console.log(sum.apply(null, [4, 5, 6])) // 15ES6
console.log(sum(...data)) // 15Arrow Functions(箭头函数)
() => {}
申明
右边括号外面是参数，后边括号外面是函数体
// ES5申明函数function hello () {}let hello = function () {}//ES6let hello = () => { console.log('hello world')}hello() //hello world参数状况
能够加参数
let hello = (name) => { console.log('hello world ' + name)}hello('beijing') //hello world beijing有且只有一个参数的时候，括号能够省略
let hello = name => { console.log('hello world ' + name)}hello('beijing') //hello world beijing花括号什么状况下能够省略
- 返回是一个表达式（没有花括号的时候，表达式的值会主动return，有了花括号，必须写return）
let sum = (z, y, z) => x + y + zconsole.log(sum(1, 2, 3)) // 6//return 和花括号都能够省略- 返回是一个对象，要用小括号括住
let sum = (x, y, z) => ({ x: x, y: y, z: z})// 小括号是函数表达式的意思，这个时候的花括号示意对象- 其余状况老老实实写
this的指向，不是谁调用指向谁，是谁定义指向谁
换句简略的话说，箭头函数不扭转this的指向
// ES5let test = { name: 'test', say: function () { console.log(this.name) }}test.say() // test// ES6let test = { name: 'test', say: () => { console.log(this.name) }}test.say() // undefined// 因为箭头函数中对this的解决是定义时，this的指向也就是test外层所指向的window，而window没有name属性，所以是undefined